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.
