How To Use The Lightbox Widget By Atomic Addons

The Lightbox widget by Atomic Addons places a poster image, a button or an icon on the page; clicking it opens a full-screen lightbox over the page. The lightbox can show an image, a video file, a YouTube or Vimeo video or a Google Map, with a caption underneath. This guide covers adding the widget, choosing what opens the lightbox and what appears inside it.

Enable the Lightbox Widget

Lightbox is a Free widget and works with the free Atomic Addons plugin. 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 Lightbox. You can also open the Creative category.

4. 4

   Turn the Lightbox widget on.

5. 5

   Click Save Settings.

Add the Lightbox Widget

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Lightbox. The widget sits in the Atomic Addons category.

3. 3

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

4. 4

   Click Publish (or Update).

Toggler

The toggler is what visitors click to open the lightbox. Open the widget and go to Content → Toggler:

1. 1

   Select Lightbox Toggler: Poster (the default) shows a picture, Button a button with text, and Icon a round icon button. The settings below change with your choice.

2. 2

   Poster Image: With Poster: the picture to show, Elementor's placeholder by default. It accepts dynamic tags. Under it, Image Resolution picks the size WordPress serves, Large by default.

3. 3

   Poster Height: With Poster: the poster's height, 400px by default (50 to 1200px). Use the device icon to set it per screen size. The image fills the area and is cropped to fit.

4. 4

   Button Text: With Button: the button's text, “Open Lightbox” by default.

5. 5

   Icon: With Button: an optional icon in the button. With Icon: the icon to show, a play triangle by default.

6. 6

   Icon Position: With Button and an icon picked: Before (the default) or After the text.

7. 7

   Icon Spacing: With Button and an icon picked: the space between the icon and the text.

8. 8

   Icon Text: With Icon: a text link beside the icon, such as “Watch the video”. It opens the same content as the icon. Empty by default.

9. 9

   Alignment: With Button or Icon: left, center, right or justified (full width), per screen size.

The poster shows a round white badge in its middle so visitors can tell it opens something: a play triangle for Video, YouTube and Vimeo content, and an expand symbol for an image or a map. The picture zooms in slightly when a visitor points at it.

Lightbox Content

Content → Lightbox Content sets what opens in the lightbox:

1. 1

   Select Lightbox Content: Image (the default), Video, Youtube, Vimeo or Google Map. A field for the source appears below your choice.

2. 2

   Image Source: With Image: the image to open, from the Media Library. It opens at its full size.

3. 3

   Video Source: With Video: the address of a video file, such as an MP4 in your Media Library. A short sample video is filled in at first.

4. 4

   YouTube Source: With Youtube: the video's address, such as https://www.youtube.com/watch?v=….

5. 5

   Vimeo Source: With Vimeo: the video's address, such as https://vimeo.com/….

6. 6

   Google Map Embed URL: With Google Map (the field is spelled “Goggle Map Embed URL” in the panel): the map's embed address. In Google Maps, click Share → Embed a map, copy the HTML and paste only the address inside src="…", which starts with https://www.google.com/maps/embed?pb=.

7. 7

   Content Caption: Text shown under the content in the lightbox, “This is a image” by default. Clear it to show no caption. For a poster or an icon, screen readers also read it as the toggler's name.

Every source field accepts dynamic tags. Visitors close the lightbox with its close button, the Escape key or a click on the dark backdrop.

Lightbox Settings

Two settings for the lightbox itself are on the Style tab, in the Lightbox section:

1. 1

   Lightbox Animation: How the content appears: Slide (the default), Fade or Scale.

2. 2

   Video Autoplay: Starts a video as soon as the lightbox opens. On by default.

Style the Lightbox

Everything else on the Style tab styles the toggler. Sections that don't apply to your toggler are hidden.

• Toggle Button — with Button or Icon: Glassmorphism with its Blur Level (5px by default) to blur what's behind a see-through button, then the color, background, border, radius, padding, shadow and typography in a Normal tab, and the color, background and border color in a Hover tab with a Hover Animation. The ICON TEXT heading styles the Icon Text link.
• Show Fancy Animation — with Icon, in the Hover tab: a looping effect around the icon that draws the eye. Fancy Animation is Shadow Pulse (the default), Multi Shadow or Line Bounce, colored with Animated Shadow Color or, for Line Bounce, Animated Border Color. While it is on, Hover Animation is hidden.
• Poster — with Poster: the poster's border radius, and the badge's background color, border radius and shadow under Icon.

Visitors who have reduced motion turned on in their system settings don't see the fancy animations.