How To Create An Image Accordion In WordPress

  • Post category:WordPress
  • Post last modified:August 26, 2024

GinAngieLa.com independently selects and reviews products & services. When you purchase through links on our site, we may earn a commission, at no extra cost to you. Learn more.

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! 

How to create an image accordion in WordPress

To create an image accordion in WordPress, these are the six steps you'll need to follow:

    Add a header to begin generating the table of contents

    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 EA 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.

    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.

    → Elementor Tutorial For Beginners

    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. 

    image accordion elementor
    Drag & drop the Image Accordion on the 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

    how do you put a picture in an accordion?

    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
    Enter the title of your image, and a subtitle if you wish. Otherwise leave the fileds blank.

    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. 

     

    Add images to show on hover by clicking on 'Add Media' 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?

    With background and hover images uploaded, the image accordion does still not display the pictures dynamically.

    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! 

    Once you've deleted the anchor code, images should show dynamically on hover.

    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! 

    give your image accordion in WordPress a personal touch
    You can change the Hover Overlay Color in the Style tab.

    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. 

    There are more configuration options under the Image Accordion Thumbnail Style dropdown.

    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! 

    Color & Typography lets you customize the look of titles and subtitles.

    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

    horizontal WordPress plugin
    Creating a vertical image accordion.
    you've just created an image accordion in WordPress with a horizontal layout
    Set the height of the images in the horizontal accordion.

    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.  

    The Most Popular Elements Library for Elementor.

    Essential Addons for Elementor logo

    The World’s leading WordPress Website Builder.

    elementor icon
    FREQUENTLY ASKED QUESTION

    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:

    1. 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.
    2. 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. 


    Default Accordion in Elementor

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

    Default Toggle in Elementor

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
    Do you like this website? You can have one similar to mine!

    I am building my website on WordPress using the OceanWP theme & Elementor page builder and hosting it on Hostinger!


    Here I show you how to create an artist website with WordPress in 5 easy steps.

    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 ♡

    How To Create An Image Accordion In WordPress
    How To Create An Image Accordion In WordPress
    How To Create An Image Accordion In WordPress
    How To Create An Image Accordion In WordPress
    How To Create An Image Accordion In WordPress
    AngieG. – The Person behind the Pictures
    HI Y'ALL!  
    My name is Angie and I’m a self-taught digital artist. On this blog, I am sharing my knowledge and educational resources to help you build a website for your art. My desire is to show you that you don’t need to be a coder to create a website. All you need is the desire to learn and the get-up-and-go to get started!
    LET'S CONNECT:
    SHARE THIS POST:

    This Post Has 2 Comments

    1. Eggett

      I’m bookmarking this for future reference. Truly a helpful article.

    We ♥ comments and appreciate the time that readers spend to share ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.