fbpx

Need Help?

Here are some good places you cant start.

Join the Community

Whats New?

Get updated about all the good stuff!

Image Accordion

Image Accordion” allows you to layouts your images into and interactive accordion in your Elementor website.You can show different elements on your accordion images. You can also customize its looks by using its customization and styling options.

 

Let’s look at each of the options in the “Content Slider Widget” below.

Install Image Accordion Widget for Elementor #

This widget requires Unlimited Elements PRO version installed and activated on your WordPress website.

  1. Go to Unlimited Elements Widget Library
  2. Search in the search bar for “Image Accordion
  3. Hover over the widget in the search results and click install
  4. Add your “Image Accordion” widget to any Elementor Page

General Settings #

1
Event

Select the option to trigger animation.

  • Hover
  • Click
2
Direction

Select the direction of image accordion.

  • Horizontal
  • Vertical
3
Opened Items on Start

Type the number of items you want to display as opened on start.

4
Opened Items on Start-Mobile

Type the number of items you want to display as opened on start on mobile device.

5
Button Text

Type the text to display as button.

6
Transition

Set the time to transition from one item to another.

7
Gap

Set the gap between two items.

8
Size of Open Items

Set the size of open items.

Layout Settings #

Show or hide elements in content slide

1
Show Icon

Show/Hide icon on image accordion.

2
Show Title

Show/Hide Title of the accordion.

3
Show Subtitle

Show/Hide subtitle on the image accordion.

4
Show Button

Show/Hide the button on image accordion.

5
Change to vertical on (px)

Set the breakpoint to change the accordion layout to vertical.

Items Settings #

Manage the items of image accordion using repeater field.

  • Add new items
  • Duplicate items
  • Delete items
  • Reorder Items
  • Edit Items
1
Image

Choose an image to display.

2
Icon

Choose your icon to display.

3
Title

Type the title of accordion item.

4
Content Type

Choose any of the given content sources

  • Content

         Type any custom content for your accordion.

  • Template

         Choose any of the premade templates to show in your accordion item.

5
Subtitle

Type the subtitle text for accordion item.

6
Link

Add any URL to link the button.

7
Background Position

Select the background position from given options.

  • Left Center
  • Left Top
  • Left Bottom
  • Right Top
  • Right Center
  • Right Bottom
  • Center Top
  • Center Center
  • Center Bottom

Image Accordion Widget Styling #

Every aspect of the widget’s design can be controlled through different styling options. Choose colors that complement the style of your website. You can modify the text, icons, fonts, and layout to make the widget look and work the way you want.

Item Styling #

Set the height, vertical alignment, radius, border and item shadow of accordion items.

Overlay Styling #

Style the color, hover color and padding for overlay.

Icon Styling #

You can set the icon size and color.

Title Styling #

In this section, set the title’s spacing, color and typography.

Subtitle Styling #

Style the subtitle color, typography and subtitle spacing.

Button Styling #

Here, you can style the color, border, radius, spacing, padding etc. of the button.

Usage Examples #

Here are some live use cases for the Image Accordion widget.

Image Accordion widget with vertical layout.

Video Overview #

Download is just a click away

Get instant access to tons of Elementor goodies, completely FREE!

Hurray!

You got FREE access to the worlds leading widgets for Elementor page builder!