The Advanced Image Gallery widget by Atomic Addons shows a set of images as a gallery. Pointing at an image shows an overlay with a zoom link that opens the image in a lightbox, where visitors can page through the whole gallery. You can lay the images out in an even grid, a masonry grid or justified rows, and add captions, a spotlight effect and a 3D tilt. This guide covers adding the widget, picking the images and setting up the layout, lightbox and captions.
Enable the Advanced Image Gallery Widget
Advanced Image Gallery is a Free widget and works with the free Atomic Addons plugin. A few of its settings carry a Pro badge and need Atomic Addons Pro (see Gallery Layout and Additional Settings). Switch the widget on from the plugin dashboard:
- 1
Go to WordPress Dashboard → Atomic Addons.
- 2
Click the Widgets tab.
- 3
Search for Advanced Image Gallery. You can also open the Creative category.
- 4
Turn the Advanced Image Gallery widget on.
- 5
Click Save Settings.
Add the Advanced Image Gallery Widget
- 1
Open the page in Elementor (Edit with Elementor).
- 2
In the widget panel, search for Advanced Image Gallery. The widget sits in the Atomic Addons category.
- 3
Drag it into the page and set it up with the controls below.
- 4
Click Publish (or Update).
Image Gallery
Open the widget and go to Content → Image Gallery:
- 1
Add Images: Click the field to open the Media Library, then select or upload the images and click Insert gallery. Drag them in the Media Library to change their order. The field also accepts gallery dynamic tags.
- 2
Image Resolution: Which image size WordPress serves for the gallery, Large by default. The lightbox always opens the full-size image.
Until you add images, the editor shows a short reminder in place of the gallery; visitors see nothing.
Gallery Layout
Content → Gallery Layout arranges the images and sets the overlay. Settings marked with a Pro badge need Atomic Addons Pro; with the free plugin they stay at their defaults.
- 1
Gallery Mode: Normal (the default) shows the images in an even grid, all at the same height. Masonry keeps each image's own shape and packs the columns without gaps. Justified fits the images into full-width rows of equal height. Pro badge.
- 2
Image Height: With Normal: the height of every image, 265px by default (50 to 500px), per screen size. With Justified: the target height of the rows, 260px by default; the real height varies a little so each row fills the width.
- 3
Columns: With Normal or Masonry: 1 to 6 columns. 4 by default, 3 on tablets and 1 on phones. Pro badge.
- 4
Item Gap: With Justified: the space between images, 16px by default.
- 5
Column Gap / Row Gap: With Normal or Masonry: the space between columns and between rows, 16px each by default.
- 6
Show Lightbox: On by default: pointing at an image shows the overlay with a link that opens the lightbox.
- 7
Link Type: With the lightbox on: Icon (the default) shows an icon button, Text a text button, and Image no button: the whole image opens the lightbox.
- 8
Link Icon: With the Icon link: the icon, a plus by default.
- 9
Link Text: With the Text link: the button's text, “ZOOM” by default.
- 10
Show Caption: Shows each image's caption. Pro badge.
- 11
Caption all Time: With captions on: shows the captions all the time, under the images, instead of only in the overlay on hover.
Captions come from the Caption field of each image in the Media Library. Fill it in before you insert the images, or edit it later in Media → Library.
In the lightbox, visitors move between the images with the arrows, a swipe or the arrow keys, and see the image's caption underneath.
Additional Settings
Content → Additional Settings fine-tunes the overlay, captions and lightbox:
- 1
Overlay Content Alignment: With the lightbox and captions on: left, center (the default) or right alignment of the overlay's link and caption.
- 2
Overlay Content Vertical Position: With the lightbox and captions on: top, middle (the default) or bottom of the image.
- 3
Caption Position: With Caption all Time on: Default places the caption under the image (along the bottom of the image with Justified). The other choices, such as Bottom Left or Top Right, show it as a dark label on the image.
- 4
Spotlite Mode: Dims every other image while a visitor points at one. Pro badge.
- 5
Tilt Effect: Tilts the image in 3D as the pointer moves over it. Hidden while Caption all Time is on. Pro badge.
- 6
Tilt Scale: With the tilt effect: enlarges the image while it tilts, 1 to 2 times.
- 7
Lightbox Animation: With the lightbox on: Slide (the default), Fade or Scale between images. Pro badge.
- 8
Lightbox Autoplay: With the lightbox on: moves to the next image by itself. Pro badge.
- 9
Lightbox Pause on Hover: With autoplay on: pauses while the pointer is over the lightbox.
Style the Advanced Image Gallery
Everything below is on the Style tab. Sections that belong to a feature you turned off are hidden.
- Items — each image's border and radius, and with Spotlite Mode on, the Outer Color that dims the other images. The Overlay tab sets the overlay's Animation on hover (Fade by default), a Glassmorphism blur, its Color and a Gap that insets it from the image's edges.
- Caption — with captions on: color, background, padding, margin, border, radius and typography.
- Link Style — with the lightbox on: the icon or text button's color, background, border, radius, padding and typography in Normal and Hover tabs, with a hover Animation.
Can't find what you need?
Our support team can help with setup questions and anything the docs don't cover yet.