1. Home
  2. Docs
  3. Image Elements
  4. Image Accordion

Image Accordion SA Element

Image Accordion is a brand new way to show off your favorite Images! With this awesome element, you are no longer forced to use the Grid widget to show off your images. Bring the images you want to use and represent it with a brand new and interactive way using the Image Accordion element in Page Builder. Here in this tutorial, you’re going to learn how to use the Image Accordion element into Elementor Page Builder. So let’s get straight into it:

 


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Image Accordion Element

 

 

»Content

 

Image Accordion Settings

⇒Accordion Style: Select the accordion-style either on hover or on click.

Adding the Items:

⇒Background Image: Upload an image here for the accordion background.

⇒Title: Enter the title of the image accordion. Click on Dynamic settings to apply the AnalogWP Classes to the title. (Ex. Add a light background).

⇒Content: Enter a description of the image accordion.

⇒Title Link: If you want to add a link to the accordion title, then enter it here. And then, click the cog to set the link to either open in a new window or to add rel=nofollow to the link.

⇒Add Item: Use the ‘+Add Item’ button to add more accordion items to the list.

 


»Style

 

Image Accordion Style

⇒Height: Set the height of the image accordion. The value is based on pixels.

⇒Background Color: Add a background color in case any accordion-item has no image in it. This color will be applied to the accordion which contains no image.

⇒Padding: Set the padding value for the top, right, bottom and left around the accordions for different dimensions. You can link the values together or customize them individually.

⇒Margin: Set the margin value for the top, right, bottom and left around the accordions for different dimensions. You can link the values together or customize them individually.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the image accordion for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Border Radius: Set the border radius for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

⇒Overlay Color: Set the overlay color to the image accordion.

⇒Hover Overlay Color: Set the hover overlay color to the image accordion.

 

Colors & Typography

⇒Title:

→Color: Add a custom color to the title of the image accordion.

→Typography: Set the typography options for the accordion title.

 

⇒Content:

→Color: Add a custom color to the content of the image accordion.

→Typography: Set the typography options for the accordion content.

 


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of the Image Accordion Element.


Was this article helpful to you? Yes No

How can we help?