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.

Powered by BetterDocs