How To Use The Image Expand Widget By Atomic Addons

The Image Expand widget by Atomic Addons shows a row of image panels side by side. When a visitor clicks a panel, it grows to fill most of the row and its content fades in over a dark overlay: a sub title, a title, some text and a button. Clicking it again, or anywhere outside the widget, closes it. This guide covers adding the widget, building the panels and setting up the layout, the text animation and the lightbox.

Enable the Image Expand Widget

Image Expand 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 Image Expand. You can also open the Creative category.

4. 4

   Turn the Image Expand widget on.

5. 5

   Click Save Settings.

Add the Image Expand Widget

Image Expand works on any page:

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Image Expand. 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).

It starts with four panels. The row is 400px tall on phones, 480px on tablets and 560px on desktops until you set your own Height.

Image Expand

Content → Image Expand picks the layout and holds the panels:

1. 1

   Style: Horizontal (the default) sets the panels side by side. Vertical stacks them, and the open one grows downwards. Sliding Box keeps the image and the content apart: when a panel opens, its image shrinks to half the panel and the content appears in the other half on a light background. Use the device icon to pick a different style per screen size, for example Vertical on phones.

2. 2

   Items: The panels. Click one to open it.

Each panel has a Content tab:

1. 1

   Title: The panel’s heading.

2. 2

   Sub Title: A small line above the title.

3. 3

   Button Text: The button label, “Read More” by default. Clear it to hide the button.

4. 4

   Button Link: Where the button goes, # by default.

5. 5

   Background Image: The panel’s picture.

and an Optional tab with a Title Link and the panel’s text in a rich text editor. Every field accepts dynamic tags.

Additional Settings

Content → Additional Settings:

1. 1

   Height: The height of the row, 100 to 1200px, per screen size.

2. 2

   Content Width: The width of the content inside an open panel.

3. 3

   Image Size: Which image size WordPress serves, Full by default.

4. 4

   Content Position: Sliding Box only: whether the content opens on the Right of the image (the default) or the Left.

5. 5

   Text Alignment: Left, center, right or justified alignment of the content.

6. 6

   Vertical Alignment: Top, center or bottom placement of the content in the panel.

7. 7

   Show Title, Show Sub Title, Show Button and Show Text: Each shows that part of every panel. All are on by default.

8. 8

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

Animation

Under the Animation heading you choose how the content enters once a panel has opened:

1. 1

   Basic Animation: The entrance of each part of the content: Fade (the default), Scale Up, Scale Down, a Slide from the top, bottom, left or right (each also in Small and Medium distances) or None.

2. 2

   Advanced Animation: Off by default. Turn it on to replace the basic animation with a text animation that builds the copy piece by piece. A separate Animation section opens below.

3. 3

   Animation Of: With Advanced Animation: which parts get the text animation: Sub Title, Title and Text, all three by default. The button slides up after the text has finished.

In Content → Animation, Animation On splits the text into Words (the default), Chars or Lines, which appear one after another. Animation Options fine-tunes how each piece comes in: Scale (the size it starts from), rotationX (how far it flips in, 180 degrees by default) and Transform Origin (the point it turns around, 0% 50% -50 by default).

Lightbox

Turn on Show Lightbox at the end of Additional Settings to add a zoom button to each open panel. It opens the panel’s image at full size in a lightbox, where visitors can step through all the panels’ images. Content → Lightbox sets it up:

1. 1

   Link Type: Icon (the default) or Text.

2. 2

   Icon: With Icon: a magnifier, a plus in a circle, a plus (the default), a link, a play sign in a circle or a play arrow.

3. 3

   Link Text: With Text: the button label, “ZOOM” by default.

4. 4

   Lightbox Animation: How the lightbox moves between images: Slide (the default), Fade or Scale.

5. 5

   Lightbox Autoplay: Moves through the images by itself. Lightbox Pause on Hover stops it while the pointer is over the image.

6. 6

   Position: Horizontal and Vertical styles: the corner the zoom button sits in, Top Right by default. In Sliding Box it sits in the middle of the image.

Style the Image Expand

The Style tab has a section for each part: Image Expand Item (the overlay color, the content background and padding, the panels’ radius and the gap between them), Title, Sub Title, Text, Button (Normal and Hover states) and Lightbox (the zoom button). Each sets colors, typography, spacing and, where it applies, background, border and radius.