Want to add image accordion to an Elementor page? That’s great as image accordion allows you to display images in a more creative way. Unfortunately, Elementor has no default widget that allows you to add an image accordion element to a page or template. If you really want to add an image accordion, you can install an add-on that comes with an image accordion widget. One of the add-ons you can install is JetTabs.
JetTabs is an Elementor add-on member of the JetPlugins family, a set of Elementor add-ons developed by Crocoblock. JetTabs comes with four widgets: Swicther, Tabs, Image Accordion, and Classic Accordion. You can see the example of the implementation of the Image Accordion widget on the Shared Workspace template kit we created.
How to add image accordion in Elementor with JetTabs
Before getting started, make sure you have installed and activated the JetTabs add-on. You can get this add-on for only $23 per year. Alternatively, you can also get JetTabs with a one-time purchase option via the theme bundle of Jupiter X or Monstroid2.
Once you are ready, create a new page (Pages -> Add New) or a new post (Posts -> Add New) and edit it with Elementor. Of course, you can also edit an existing page or post. On the Elementor editor, drag the Image Accordion widget from the widget panel to the canvas area.
Once the Image Accordion widget is added, go to the left panel to customize it. By default, the accordion consists of three items. To add an image to each item, simply open an item under the Items block and click the image selector. You can also set the title of the item, description as well as button link.
Repeat the steps above on the other items. To add a new item to the accordion, you can simply click the ADD ITEM button.
Open the Settings block under the Content tab to set the orientation (vertical or horizontal), the size of the active item, animation duration, and the easing effect style.
Styling up the accordion
To style up your accordion, you can go to the Style tab on the left panel. There are 7 blocks you can open the style up the accordion. On the first block (Container block) you can set the height of the accordion, background color, border radius, and bock shadow.
On the Item block, you can set the gap between items, background color of the item, border radius of the item, and box shadow of the item.
You can play around with 5 other blocks to make other styling options. Once you are done, click the PUBLISH/UPDATE button to publish/update your page.
