Create Image Accordion Using ElementsKit

Showcasing multiple images in a compact space on your WordPress website is not rocket science. ElementsKit is a complete addon package for Elementor page builder and comes with the image accordion widget. 

The image accordion widget offers 7 different templates for your business, travel, medical, restaurant, construction, and personal images. You will get a default template also. 

All of these templates are fully responsive and customizable. These will help you to visualize multiple images in a more appealing way.

✨✨ Required Plugins:
👉👉Elementor: Download Elementor
👉👉ElementsKit: Download ElementsKit

Step-by-step Guide to Creating Image Accordion #

Step 1 – Select Image Accordion Widget   #

  • Create a new page or open an existing page with “Edit with Elementor”
  • Click on ElementsKit
  • Select the “Image Accordion” from the widget “Category”
Select Image Accordion Widget  

Step 2 – Insert the Template #

You can see 7 different templates including beauty, travel, Restaurant, Medical, business, and construction along with a default template.

  • Select a template. You can see the preview by clicking on the Live Preview tab. 
  • Insert the selected template into your page
 Image Accordion themes

✅✅Note: You can insert multiple templates on one page following the same procedure.

Step 3 – Customize the Inserted Templates #

There are tons of options to customize the image accordion templates.

  • Insert images, give titles, and include the URL for each image 
  • Add more images or delete them if necessary 
  • Set the “Action” for the image you want to focus on among other images 
  • Can copy the same block 
  • Select whether “Click” or “Hover” for showing the title and button 
  • Enable or disable the button option
  • Orientation can be horizontal (default) or vertical 
How to create image accordion in wordpress
  • Zoom in and zoom out every single image, add a link, and share the images individually 
  • Set block style as linear or circular 
  • Customize color, background, border, padding, margin, size, and typography for the titles, images, and buttons
  • Click on “Publish” after the customization
customize Image Accordion themes

Image Accordion Widget: Advanced Layout Settings  #

You can customize margin, padding, width, z-index, motion effects, transformation, responsiveness, and many more in “Advanced” settings.

In addition, you can add custom CSS for any custom design if you want. 

Advanced Settings of Image Accordion Theme

Hopefully, now you can create a stunning image accordion layout for your WordPress website. if you have any queries, don’t hesitate to share them with us.

What are your feelings
Updated on January 28, 2024