Stop wasting time and money!

Easily create your WordPress website or blog today.

Elementor is the easiest and most importantly, the fastest tool to create any type of WordPress website or blog. No technical knowledge is required and is perfect for beginners or professional users. You can do it yourself so do it!

Would you like to add an accordion of images to a page Elementor ?

This is great because the picture accordion lets you display pictures more creatively. Unfortunately, Elementor does not have a default widget that allows you to add an accordion of pictures element to a page or template.

If you really want to add a picture accordion, you can install an addon or addon that comes with a picture accordion widget. One of the add-ons you can install is JetTabs.

JetTabs is an Elementor add-on family member JetPlugins, a set of Elementor add-ons developed by Crocoblock. JetTabs comes with four widgets: Swicther, Tabs, Image Accordion, and Classic Accordion.

How to add the picture accordion in Elementor with JetTabs

Before you begin, make sure you have installed and activated the JetTabs add-on. You can get this add-on for just $23 per year. Alternatively, you can also get JetTabs with a one-time purchase option through the bundle of Themes of Jupiter X or Monstroid2.

Read also: How to Create a One Page Navigation Menu in Elementor

Once you are ready, create a new page (Pages -> Add New) or a new post (Posts-> Add) and edit it with Elementor. Of course, you can also edit an existing page or post.

In the Elementor editor, drag the Image Accordion widget from the widget panel to the editing area.

add an image accordion to an Elementor page

Once the Image Accordion widget is added, go to the left panel to customize it. By default, the accordion is composed of three elements. To add an image to each element, simply open an element under the Elements block and click on the image picker. You can also set the item's title, description, and button link.

add an image accordion to an Elementor page

Repeat the above steps for the other items. To add a new element to the accordion, just click on the button Add an item.

add an image accordion to an Elementor page

Open the block Settings under the tab Contents to set the orientation (vertical or horizontal), active element size, animation duration, and easing effect style.

Accordion stylization

To style your accordion, you can access the tab Style in the left panel. There are 7 blocks you can open to style the accordion. In the first block (Container block) you can set the accordion height, background color, border radius and drop shadow.

add an image accordion to an Elementor page

In the Item block, you can set the space between items, the item background color, the item border radius, and the item box shadow.

add an image accordion to an Elementor page

You can play with the other 5 blocks to create other styling options. When you are done, click the button publish/update your page.

Here is.

Get Elementor Pro Now!!!


Here ! That's it for this article that shows you how add an image accordion to an Elementor page. If you have any concerns about how to get there let us know within Comments.

However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.

But meanwhile, share this article on your different social networks.


%d bloggers like this page: