Image Accordion

How to Configure and Style EA Image Accordion

EA Image Accordion lets you highlight your images with amazing hover and click effects with plenty of styling options.

Table of Contents:

  1. How to Activate Image Accordion
  2. How to Configure the Content Settings
    2.1. Image Accordion Settings
  3. How to Style Image Accordion
    3.1. Image Accordion Style
    3.2. Color & Typography
  4. Final Outcome


1. How to Activate Image Accordion

Find the ‘EA Image Accordion’ element from the Search option under the ‘ELEMENTS’ tab.

Simply just Drag & Drop the ‘EA Image Accordion’ into the ‘Drag widget here’ or the ‘+’ section.

Image Accordion 1

After you are done with step 1, this is the basic layout you are going to view.

Image Accordion 2

2. How to Configure Content Settings

Under the ‘Content’ tab, you will find the Image Accordion Settings.

2.1.  Image Accordion Settings

From the ‘Flipbox Settings’ section, you can use the drop-down menu to choose Accordion Type: On Hover or On Click.

You can modify the Accordion Item by changing the Background Image, Title and Content.

Image Accordion 3

After changing all the Accordion Items, this is how your Image Accordion can look like:

Image Accordion 4

Click to See Live Demo

3. How to Style Image Accordion

Switch to the ‘Style’ tab to style all the elements of Image Accordion. You can add Styling to ‘Image Accordion’ and ‘Color & Typography’.

3.1. Image Accordion Style

From this section, you change the Image Height & Background Color. You can also easily add styling to border, overlay, box shadow and many more.

Image Accordion 5

3.2. Color & Typography

You can easily modify your ‘Title’ and ‘Content’ color & typography from this section.  

Image Accordion 6

  1. Final Outcome

By following these mentioned steps and a bit more modifying & styling, you can easily design your Image Accordion as per your preference.

Image Accordion 7

This is how you can easily get started with EA Image Accordion element.