September 11, 2023

Create an Elementor Vertical Accordion without any Extra Code or Plugins

Play Video

If you’ve been pondering how to craft an Elementor vertical accordion without diving deep into codes or adding extra plugins, you’re in luck. Follow along with the tutorial and create your own!

1. Setting Up the Containers

Before we get into the nitty-gritty, let’s set up our workspace.

  1. Add a container where you want to place your accordion.
  2. In our example, we’ll set its height at 500 pixels (400px + 100px). Adjust this height based on your accordion’s size.

2. Introducing the Elementor Vertical Accordion

Now, let’s get our accordion in place.

  1. Drag and drop the accordion into your workspace.
  2. Adjust its dimensions to fit your design. For this setup, we’re aiming for a height and width of 400 pixels.
  3. Inside this accordion, add another container. This will be the space for our content. Make it a square of 400×400 pixels.
  4. To add some flair, insert a background image into this container.

3. Rotating the Accordion

This step is where we give our vertical accordion its unique twist.

  1. Select the accordion and head over to "Transform" > "Rotate" in the Advanced Settings
  2. As you start the rotation, you’ll notice the text inside behaves differently. To correct this, we’ll adjust the rotation of the content inside.
  3. For our setup, the accordion rotates by -90 degrees, and the content inside counter-rotates by 90 degrees.

4. Populating the Vertical Accordion Elementor Style

Time to fill our accordion with content.

  1. Add headers, text, and any other elements you want inside the accordion.
  2. For each element you add, ensure its rotation is set back to zero.
  3. To streamline the process, set up one item in the accordion, then copy and paste it to the others.

5. Mobile Adjustments

Ensuring our accordion looks great on mobile is essential.

  1. Adjust the width of the accordion to fit mobile screens. It’ll adapt smoothly, ensuring a seamless user experience.


Occasionally, our accordion might have minor quirks, like shrinking or moving slightly. While these aren’t major issues, it’s good to be aware and make adjustments as needed.

Conclusion of our Elementor Vertical Accordion tutorial

Crafting a vertical accordion with Elementor doesn’t have to be a daunting task. With the right steps and a bit of patience, you can achieve a sleek and functional design. Give it a shot!

Required Resources

Elementor Logo
Free Options
Credit to Web Squadron
Web Squadron is a popular YouTube channel dedicated to providing informative tutorials, tips, and insights on web development and design. With a strong focus on WordPress and website builders like Bricks Builder, the channel aims to help users of all skill levels, from beginners to advanced developers, create and optimize their websites. By offering easy-to-understand, step-by-step guidance, Web Squadron provides practical and valuable content.
Create an Elementor Vertical Accordion without any Extra Code or Plugins
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.