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 add-on Elementor Member of the family 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 Jupiter X or Monstroid2 theme bundle.
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.
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.
Repeat the above steps for the other items. To add a new element to the accordion, just click on the button Add an item.
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.
In the Item block, you can set the space between items, the item background color, the item border radius, and the item box shadow.
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!!!
Conclusion
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.
...
