In this tutorial, I’ll be showing you step-by-step how to create an image accordion in WordPress. We’ll be using the free WordPress accordion plugin by Essential Addons for Elementor, which is both a vertical and horizontal accordion WordPress plugin. I’ll explain exactly what an image accordion is, how to use the accordion in WordPress, and how to put pictures in the accordion!
To create an image accordion in WordPress, these are the six steps you'll need to follow:
What is an image accordion?
An image accordion allows you to display multiple images in an accordion-like style. The Image Accordion Widget by Essential Addons for Elementor, which we’re going to use in this post, contains lots of design options for you to customize it exactly to your liking.
Initially, accordion widgets were designed more like content toggles, with the purpose to display text in a collapsible form. Now, accordions are used for all types of content, including images. There are also new accordion-type widgets, such as the WordPress accordion box or the accordion slider.
So far, there’s no image accordion widget available in Elementor directly, you’ll need to use third-party Elementor plugins. The WordPress accordion plugin by Essential Addons for Elementor is completely free and you can download it from the WPDeveloper’s website.
And btw, the accordion widget that comes with the free version of Essential Addons is both a vertical and horizontal accordion WordPress plugin! Pretty cool.
How do I use the accordion in WordPress?
Using an image accordion in WordPress is a great way for artists to showcase their artworks in an appealing and dynamic way. It’s attention-grabbing and therefore ideal to have it on the front page of your artist website. This will allow you to show visitors a selection of your best artworks the moment they enter your website!
Hovering the mouse over the image accordion, visitors can then zoom in and out dynamically, see the titles of your artworks, and maybe a short description (if you choose to add one), or click a link that leads them to your complete portfolio!
Related: → 3 Easy Ways To Create A Portfolio Gallery In WordPress
How do you put a picture in an accordion?
This is exactly what we’ll be doing in this tutorial! I’ll be showing you how to create an image accordion in WordPress and put both background and foreground images into the accordion.
Below you can have a look at live demo of the dynamic image accordion that we’re going to create in this tutorial. Notice how the artworks show up as a smaller thumbnail along with their titles as you hover the mouse over the different background images.
- Live demo of the image accordion created in Elementor
How To Create An Image Accordion In WordPress
STEP 1: Download and install Essential Addons for Elementor
As I said above, we’ll be using the basic version of Essential Addons for Elementor. It’s free and you can get it here.
In order to be able to use Essential Addons for Elementor, you’ll need to have Elementor installed on your WordPress site. In case you don’t have Elementor yet, you can download the free version here.
STEP 2: Drag & drop the EA Image Accordion onto the canvas
With both Elementor and Essential Addons for Elementor running on our WordPress site, we’re first going to add a new post (or page) and then click on the Edit with Elementor button in the WP editing window.
This will take us to a new editing interface for Elementor, with the Elementor sidebar on the left.
First off, look for the Image Accordion widget in the Essential Addons section of your Elementor sidebar. If you cannot find the widget, you can also type ‘image accordion’ into the top search bar to make it show up.
Next, simply grab the widget with your mouse and drag it over onto your canvas.
STEP 3: Add the background images to your image accordion
Once the widget has been dropped onto your canvas, you’ll see the Image Accordion settings open on the Elementor sidebar.
The first thing we want to do is set the background images for our image accordion. To do so, we start with the Content tab and the Image Accordion Settings dropdown.
As default, the image accordion comes with four image sections, which correspond to the Accordion item title tabs at the bottom of the Image Accordion Settings.
To be able to open and edit one image item, simple click on Accordion item title you want to modify.
With the Accordion item open, click on the default purple EA picture to insert your own image.
You can select images from your Media Library or upload a new image from your computer.
Repeat the process for all the image items in your accordion. To delete an image, simply click on the X at the right side of Accordion item title.
A click on the Duplicate icon left to the X will add more image sections to your accordion.
Don’t forget to hit Update from time to time to save your work!
STEP 4: Configure titles and subtitles of your images
Let’s move on to configuring the titles and subtitles of your images!
Titles and subtitles of your images will display when somebody hovers the mouse over an image.
You can modify title and subtitle by simply typing into the Title and Content fields.
If you don’t want any title or subtitle to show, delete all text and leave the field blank!
For the example, I’m going to enter a title but no subtitle.
STEP 5: Add the foreground images that will show on hover
In this step, we are going to put the pictures in the accordion that will show on hover.
To do so, click on Add Media right under the Content section.
This will bring up the Add Media dialog window where you can either select an image from your Media Library or upload a new one from your computer.
The thumbnail of your selected image will then show in the Content section.
However, when you now hover the mouse over the live preview of the image accordion, nothing is happening! Neither hover image nor title or subtitle are showing. Uh-oh! WTF?
Well, to solve that issue we need to take a quick trip to the source code and make some edits.
To access the source code of the Content section, all you need to do is click on Text at the top of the Content area.
This will show you what your content looks like in HTML code.
You’ll see that the source code starts with an anchor tag <a>, which indicates the upload location of your image.
After that, you’ll find the actual HTML tag of the image, starting with <img>.
At the very end is the closing tag of the anchor </a>.
Now all you need to do is delete the HTML code of the anchor (underlined in the screenshot).
Once you’re done, your source code should look something like below, and the image accordion should behave on hover as desired!
Repeat the above steps for all the pictures in your accordion until everything is the way you want it to be!
And voilà, that was basically it! You’ve just learned how to create an image accordion in WordPress!
Related: → Elementor For Photographers And Artists – QUICK & EASY Page Builder
STEP 6: Customize everything to your liking!
Of course, there are many more customization options you can use.
By going over to the Style tab, you have, for example, the possibility to change the Hover Overlay Color of the background. Increasing the opacity will make the default color appear darker and your hover image pop out more!
Another way to give your image accordion in WordPress a personal touch is by adding a border to the background images.
In the Style tab, under Image Accordion Thumbnail Style, select the Border Type from the dropdown menu. After that, you can set Border Width and Color.
Increasing the Border Radius will give your background images nice rounded edges.
Under Color & Typography, you’ll find a whole range of options to customize the look of titles and subtitles to your personal liking.
Just play around with everything to see what you like best!
Changing the layout of your image accordion
It’s easy to change the layout of your WordPress image accordion – simply at the push of a button!
As I mentioned at the beginning, the Image Accordion Widget by Essential Addons for Elementor is both a vertical and a horizontal WordPress plugin. In the example above, we’ve kept the default layout setting, which is Horizontal.
If you want to create a vertical accordion effect, with the imaginary accordion being stretched and squeezed up and down vertically (which actually results in your background images being aligned horizontally), go to the Content tab, open the Image Accordion Settings, and switch the Direction to Vertical.
In case you find that the background images are not large enough when aligned on top of each other, you can increase their height by going to the Style tab, and upping the Height value under Image Accordion Style.
And that’s it, you’ve just created an image accordion in WordPress with a vertical layout!
You can have a look at the live demo of the vertical image accordion below.
- Live demo of a vertical image accordion
Elementor Page Builder
Elementor is the world’s leading WordPress page builder. Get access to more than 100+ widgets for limitless design possibilities that speed up your workflow!
Essential Addons for Elementor
The most popular elements library every Elementor user needs to have. 85+ widgets for designing anything from stunning portfolio websites to complex eCommerce stores!
Ultimate Addons for Elementor
The complete Elementor toolkit with unique widgets and extensions with 100+ pre-built website templates and 200+ customizable section blocks!
What is accordion in Elementor?
The Accordion in Elementor is totally different from the Image Accordion we’re talking about in this post.
The Elementor Accordion is similar to a Toggle: it displays text in a collapsed form. When visitors come to a page, they’ll just see the title of the items and can then choose to expand an item of interest.
That way, you can save space on your webpage, without overwhelming your visitors with an abundance of text, while still presenting all the content relevant to your topic.
There are two main differences between the Accordion and the Toggle widget:
- When a page is loaded, the first item of the Accordion widget is expanded, while all other items remain collapsed. With the Toggle widget, however, all items are collapsed when a page is first loaded.
- With the Accordion, you can only expand one item at a time. As soon as you expand another item, the previously opened item automatically collapses. With the Toggle widget, however, as many items as desired can be expanded at the same time.
- Check out the live demos of the default Elementor Accordion and Toggle
Default Accordion in Elementor
Default Toggle in Elementor
I hope this tutorial on how to create an image accordion in WordPress was helpful. If you enjoyed, feel free to share this post with other WordPress users. Stay tuned for the next tutorial. Cheers, Angie ♡
The style and design of this website is perfect and the articles are superb. Thank you!
Thank you very much, Amemiya. Glad you like it (:
I’m bookmarking this for future reference. Truly a helpful article.
Most welcome! Thanks for stopping by (-: