How To Use The Image Accordion Widget By Atomic Addons

The Image Accordion widget by Atomic Addons shows a set of image panels side by side. When a visitor points at a panel, or clicks it, the panel widens and its content appears over the image: a sub title, a title, some text and a button. One panel can be open from the start. This guide covers adding the widget, building the panels and setting how they open.

Enable the Image Accordion Widget

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

4. 4

   Turn the Image Accordion widget on.

5. 5

   Click Save Settings.

Add the Image Accordion Widget

Image Accordion works on any page:

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

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

Image Accordion

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

1. 1

   Style: Horizontal (the default) sets the panels side by side. Vertical stacks them. Sliding Box keeps the image and the content apart: the open panel shows its image on one half and the content on the other. Use the device icon to pick a different style per screen size.

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 accordion, in px, em or vh, 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

   Select Event: What opens a panel: Hover (the default) or Click.

5. 5

   Touch Screen Swiping: On touch screens, swiping left or right opens the next or previous panel. Off by default.

6. 6

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

7. 7

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

8. 8

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

9. 9

   Active Item: Opens one panel when the page loads. Off by default. Type its position in Item Number, 1 for the first. With Active Item off, the accordion closes again when the pointer leaves it (or, with Click, when the visitor clicks elsewhere); with it on, the last opened panel stays open.

10. 10

    Active Item Column Expand: How much wider the open panel is than a closed one: 6 times by default, 10 times on phones.

11. 11

    In-active Item Overlay: Darkens the closed panels while one is open, so the open one stands out. Off by default; set the color under Style → Image Accordion.

12. 12

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

13. 13

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

14. 14

    Title, Sub Title, Text and Button Hide on Mobile: Each hides that part on screens narrower than 640px, where panels are small. All are off by default.

Visitors can also move through the panels with the Tab key; a panel opens as it gets focus, and Enter or Space opens it too.

Lightbox

Turn on Show Lightbox in Additional Settings to add a zoom button to each 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.

Style the Image Accordion

Everything below is on the Style tab:

• Image Accordion — the Active Item Overlay Color over the open panel’s image, the In-active Item Overlay Color (with In-active Item Overlay on), the panel background for Sliding Box and the Content Padding. A Divider (color and width) separates the panels; turn on Enable Item Style to replace it with an Item Gap, a border and a radius for each panel.
• Title, Sub Title and Text — colors, typography and spacing.
• Button — the button in Normal and Hover states: colors, background, border, radius, padding and typography.
• Lightbox — the zoom button in Normal and Hover states: color, background, border, radius, padding, margin, shadow and typography.