How To Use The Creative Gallery Widget By Atomic Addons

The Creative Gallery widget by Atomic Addons builds a free-form gallery. Each item is an image or a video poster with a meta line and a title under it, and each one decides how many columns and rows of a 12-column grid it covers, so you can mix large and small tiles. You can switch to a masonry layout instead, link the items to a custom address or open them in a lightbox, where videos play. This guide covers adding the widget, building the items and setting up the layout and links.

Enable the Creative Gallery Widget

Creative Gallery is a Pro widget and needs Atomic Addons Pro. Switch it on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Creative Gallery. You can also open the Creative category.

4. 4

   Turn the Creative Gallery widget on.

5. 5

   Click Save Settings.

Add the Creative Gallery Widget

Creative Gallery works on any page:

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Creative Gallery. The widget sits in the Atomic Addons Pro category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

It starts with six placeholder items, each four columns wide, so you see three per row.

Gallery Items

Content → Gallery Items holds the list of items. Click an item to open it. Its settings are split over two tabs, Content and Grid. On the Content tab:

1. 1

   Media Type: Image (the default) or Video.

2. 2

   Image: Image items: the picture. It accepts dynamic tags.

3. 3

   Poster: Video items: the picture shown in the grid, with a round play button over it.

4. 4

   Source: Video items: YouTube (the default), Vimeo, Dailymotion or Self Hosted. For the first three, paste the video’s address in Source Link. For Self Hosted, pick a file from the Media Library with Choose File, or turn on External URL and paste the address of a video file stored elsewhere.

5. 5

   Aspect Ratio: Video items: the shape of the player in the lightbox: 16:9 (the default), 21:9, 4:3, 3:2, 1:1 or 9:16.

6. 6

   Autoplay, Loop, Player Controls and Mute: Video items: how the video plays once it opens. Autoplay, Player Controls and Mute are on by default. Loop is not offered for Dailymotion, and Player Controls not for Vimeo.

7. 7

   Title: The item’s title, shown under the image. Each item has a default such as “Creative Title One”.

8. 8

   Meta: A short line above the title, such as a category or a date. “Meta content” by default.

9. 9

   Read More Text: The label of the small button in the corner of the image, “Read More” by default. It appears only when Link Target is set to Only Button (see below).

10. 10

    Custom URL: Where this item goes when Link is set to Custom URL.

11. 11

    Item Hidden: Turns the item into an empty tile: it keeps its place and size in the grid but shows nothing. Use it to leave a gap in a layout. Empty tiles are always removed on phones; Blank Space Hide on Tablet, on by default, removes them on tablets as well.

The Grid tab sizes the item. Use the device icon to set different values for tablets and phones:

1. 1

   Column Span: How many of the grid’s columns the item covers, 1 to 12: 4 by default, 6 on tablets and 12 (the full width) on phones.

2. 2

   Row Span: How many rows it covers, 1 by default. Give an item a Row Span of 2 to make a tall tile beside two short ones.

3. 3

   Height: A fixed height for this item only, 200 to 800px.

Additional Settings

Content → Additional Settings sets up the layout and what each item shows:

1. 1

   Grid Template Columns: How many columns the grid has, 12 by default. If you change it, adjust each item’s Column Span and Row Span to match.

2. 2

   Row Gap and Column Gap: The space between rows and between columns, 20px each by default.

3. 3

   Item Height: One height for every item, 200 to 800px. Without it, an item is as tall as its image.

4. 4

   Item Alignment: How items line up inside their grid row when they are shorter than it: start, center or end.

5. 5

   Masonry: Off by default. Turn it on to drop the grid and flow the items into equal columns, each as tall as its image, like a Pinterest board. Column Span, Row Span, Grid Template Columns, Item Height and Item Alignment no longer apply; a Columns setting appears instead: 3 by default, 2 on tablets and 1 on phones.

6. 6

   Show Title: Shows the titles. On by default.

7. 7

   Title HTML Tag: The titles’ markup: H1 to H6, div, span or p. H3 by default.

8. 8

   Show Meta: Shows the meta lines. On by default.

9. 9

   Alignment: Left, center, right or justified alignment of the meta line and title, per screen size.

10. 10

    Image Size: Which image size WordPress serves, Large by default. Choose Custom to type a width and height.

11. 11

    Link: What happens when a visitor clicks an item. None (the default) makes nothing clickable. Media File opens the image, or plays the video, in a lightbox. Custom URL sends each item to the address in its own Custom URL field.

12. 12

    Lightbox: With Media File: Default follows Elementor’s site-wide lightbox setting (Site Settings → Lightbox), Yes always opens the lightbox and No opens the image file itself, or the video’s player page, in the same tab.

13. 13

    Link Target: With Media File or Custom URL: Whole Item (the default) makes the entire tile clickable. Only Button adds a small Read More button in the corner of the image and makes only that clickable.

The lightbox groups the gallery’s images, so visitors can step from one to the next with the arrows. Video items always play from their play button, which appears only when Link is Media File; with None or Custom URL a video item shows just its poster.

Style the Creative Gallery

Everything below is on the Style tab:

• Items — the tile’s background, border, border radius, a separate Image Border Radius, padding, margin and shadow. The Hover tab has a border color, a shadow and Title Style Color, the color of the line that draws itself under the title on hover.
• Content — the area under the image that holds the meta line and title: background, border, radius, padding, margin and shadow.
• Play Icon — with Link set to Media File: the play button’s color, background, radius, shadow, margin and size.
• Title and Meta — colors, spacing and typography, with text shadow and text stroke for the title.
• Read More — with Link Target set to Only Button: the button in Normal and Hover states.
• Mask — shapes the images. Clip Path Mask takes a CSS clip-path value for the normal and hover states, plus a CSS transition, so a shape can change on hover. Svg Mask takes an SVG file as the shape, with its position, size and repeat.