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:
- How to Activate Image Accordion
- How to Configure the Content Settings
2.1. Image Accordion Settings
- How to Style Image Accordion
3.1. Image Accordion Style
3.2. Color & Typography
- 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.
After you are done with step 1, this is the basic layout you are going to view.

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.
After changing all the Accordion Items, this is how your Image Accordion can look like:
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.
3.2. Color & Typography
You can easily modify your ‘Title’ and ‘Content’ color & typography from this section.
-
Final Outcome
By following these mentioned steps and a bit more modifying & styling, you can easily design your Image Accordion as per your preference.
This is how you can easily get started with EA Image Accordion element.