4 Ways To Create an Elementor Image Accordion with Premium Addons

In this tutorial, I’ll show you 4 creative ways to create and use an Elementor Image Accordion by the Premium Addons. Image accordions give you the ability to add styled-up Elementor image sections in both horizontal and vertical orientations. The image accordion can have a title, description, links, color styles and a lot of other effects. 

We will create a horizontal image accordion with images color change on hover, a horizontal image accordion with skewed images and link text on hover, and a vertical image accordion with text and content on hover. 

Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.

Video: Elementor Image Accordion Tutorial

What You’ll Need to Create Image Accordions in Elementor

For this tutorial you’ll need the Premium version of the Premium Addons for Elementor; the Image Accordion comes with the premium version so you need to install and then activate it in order to access this widget. To activate the Image Accordion widget:

In your dashboard go to Plugins and find Premium Addons for Elementor, click on Widgets and Addons (01:13)

In the Widgets and Addons area find the Image Accordion Widget and activate it (by making sure it’s green) (01:19).

Elementor Image Accordion with Premium Addons

Now you’ll be able to access this widget in your widget area on your Elementor dashboard.

1. Horizontal Image Accordion with Image Overlay Color

In your Elementor dashboard, add a new section with 1 column (00:46). In the Edit Section area on the left, under Layout, set Height to Min Height and give it (the minimum height) a value of 60VH.

qrze6YNcxJljqXe7UfL4ziaduFv9erXTPTPVstoHB42InvlnxiFkOcCztJuUnBDlNt76 50EcH0Y3 vtfsgEUm3i4LP8R1VTuopVLZwrSWZpQUgRwA69wXPBBq874wQo oa5 BG

Now go to the Widgets icon and search for the Premium Image Accordion then drag it to your section (00:56).

J19tTlC9xRU7o7HCO2RHt9 Ou4zyiTdwJXanCPT1mQ6xkzDTHJSseepWsfqocPBZf0uEHqzznj33YOYH0iWBRTCqBkfh8bZmoSYtnoDzCxy

Now that you have your Image Accordion widget ready, the next step is adding images to it. Select the accordion; in the Edit Premium Image Accordion area, under content click on Images, the Upload image option takes you to the Media Library where you can find the image you want to show, insert it in the accordion.

On the Image #2 option insert your second image then use the Add Item option to insert the other 2 images to show. 

For your images to be visible, click on each of them and under Size, instead of Auto set it to Cover. (02:23)

To Read: Reversed Elementor Horizontal Tabs with Gradient on Hover + a Tiny CSS

AEe 37BupCA29vJiEqDP2ozmwLDBPoll4MkKUwN42ZxI PS abhoDbn kjy03qOFMKdFDOF06dIKtd2fCJ0MSqchGG9xwu ZZgpYv HtLHB6Haob jxoLQgnB5k7i UdnEaO8oRR

With that done, go to Style and under Overlay Color use a transparent black, on Overlay Hover Color set a lighter (more transparent) black.

Still under Style, click on the Container option and set 40 pixels for Border Radius; this will give your image accordion rounded borders.

2. Horizontal Image Accordion with Images Color Change on Hover

Duplicate the first accordion widget (select it, right-click and choose duplicate).

On your duplicate section right-click on the icon in the corner and choose to add new column (03:29). In this new column add your content (text). You can reposition your content column to be on the left side of the images.

AJHI4shAT7yyVs 1SLZUEPGxlL y5VWnsXQxu2jTZ9VIGAC4vetVa9WuXXqrXzJ7PDHEqCQyeFk6ycrBZZbeajubD06pOh11SCHNLeK3KLdcUvAZ u26p

Then select the images accordion and on the Edit area on the left, under content click on Image #1, Image #2, and Item #3 to add the images you want to show here.

When you’re done adding images go to Style, go to the Container option and remove the Border Radius by setting it to zero (0).

Back up to the Images option, under Normal click on CSS Filters and set Saturation to zero (0). Go to the Hover and under CSS Filters set Saturation to 100, this will make images black and white, but they’ll turn to color on hover (04:29)

Add a new one-column section in the Widgets area, drag and drop the Premium image Accordion widget to your section. In the Edit area on the left, under content choose each image item and upload the image you want to show.

After adding your images, go to Display Options turn on the Skewed Images option (04:59).

Also Read: How to Make Glassmorphism Forms in Elementor [PRO]

MOi0zEgoxsuq d B638vZG01YDbnYiuJclGBHrk7DakfP5vYirak8SD6K5oY8G1P3fzb UrQIFhQZGCUzwfvWTDjjVbwpobf ll0rVqrGplC0Ywgcw4mcaaOYZYCz54eeY3bWql

Then go to Style, go to spacing and set it to 20 pixels and the Spacer Color should be white (05:14). This is to show a spacing/division between the images.

WYoYeyBSPwgFYF2EWQpS3tCBQc20PQhSzF

The next step is to work on the positioning of the images. In the Content, select the second image and set Position to the top left. Select the third image and position it to the center-left. You can position your images any way you want them.

You can also add hyperlinks to your images so that when someone clicks on the image, they can click on the text and it takes them to a specific page. 

To do this:

Select the first image and first enable the Content option, go to the Link option and enable it too, under Link Type choose URL then on Link you can paste a URL of your choice where you want your visitors to be redirected. 

Give the link a title; this is the text they’ll click on. If you enable the Wrap Image Link option, your whole image will be turned into a link. Select the other images and with the same process add links to them (07:01).

qyGYAIrfVBgbFTj1fR7 h0zSvuJ5TVCU6HO2yfc4AdWCPJXRY1RGPHcaVBo2AtOuyejeU79Y8P

To style these links up:

Select the image accordion and go to Style, under the Link option change Color to the one you prefer, and set Hover Color to white. Under Typography set the font to Poppins, then Size to 60 pixels.

Back to Content choose image #1; go to Custom Position and enable it, set horizontal offset to 200 pixels.

Then select image #4; enable custom positioning and set the horizontal offset to 103 pixels. (08:22)

Select the section and go to Layout, set Height to Min Height, and add a Minimum Height of 60VH.

To Read: Create an Elementor vCard with Download Link and Contact Modal Popup

5r9iAWI9H384fPPaMjMr 6I XYxDM0cFUsdBMRDrojSKopKFoq s LtNf6ll7c zdQeJoitkV peuC304QnvJ4yFO sqEkoeVvzqpsrmodUq4ZVvN JApAmc0GZrvpyFsKVCwXA

4. Vertical Image Accordion with Content

For this, create a new section.

Go to the widgets area and drag the Premium Image Accordion into your section

In the Edit area under Display Options set Direction to vertical (09:07) 

cs349Vvb6W8fGtD WePuNIwMv0D5DcWTs7KEnAkDUmuljMZAaqhj AaSyfiuNlhxKOZuhqYAfwkP75b qX4m90lu2IdBFiGoS 6pLnUcY5NkSQPL z94q0TNldgdaIPi3W2PcPii

Choose the Accordion option and add the images you want to display in this section.

Select image #1: Set its Size to Cover instead of Auto. Turn on the Content option then add a title to it under Title and a description under Description.

Select image #2: Change its Size to cover. Turn on Content, add a Title for it and a Description of your choice

Select the last 2 images and do the same; change the size to cover, enable content and give a title and description to each.

After adding your content you now need to style it up:

Select the image accordion, go to Style, and select Content, under Title change the color to white. Under Typography set Family to Poppins and Size 40 pixels.

Under Description change Color to white and on the Typography option change Family to Poppins.

(10:26)

Vertical Elementor Image Accordion

Elementor Image Accordion Responsive Settings

To make sure your image accordion is responsive on all devices, select the Responsive Mode icon and the Bottom (10:41)

Also Read: Create an Elementor Custom Mouse Cursor using Text, Icons, Images or Lottie Animation

m7gAY1My74I4OV1diyanwWClhNIUZWXcmJnpEOym9dfwNl3tVPP3mkIw1l4EYZ1EgJCz oIe lbBx 7hQ9Bgehs m54Ho33B5J4dL 45Ex3QDynDyAO

First, select the Tablet device to see its responsiveness:

On the tablet, the first image accordion looks great.

For the second one, select the column, and under Layout set the column width to 60%

Select the third column and go to Style>Link>Typography; change the Size to 35 pixels. Select the first image and under Custom Position set the horizontal offset to 120 pixels.

D6bysomo1AbUSVJRMMZUfb dnnvzmh797dXyuk07xB3O48yMDdw 0PBWlnMZym1U mZ8bsgH7pABr9O29GRKlj0i

The image accordion is all set on the Tablet device. You can also go ahead do the same on your mobile device.

In Closing

Now you know how to create image accordions and use them on your website with the Premium Addons for Elementor.

For any comments or questions use the comments section below. Don’t forget to subscribe to my newsletter and Youtube channel for more tips and tutorials.

Also Read. . .

Snapchat Device Ban: The Why And The How

Snapchat is one of the quickest and easiest social media platforms used to communicate through photos and videos. Because of its emphasis on security and safety, Snapchat may ban a user’s account due to violations,

Read More »
Newsletter Subscription (EF)
Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *

Search

Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users