August 2, 2023

How to Create a Vertical Bricks Builder Accordion

Play Video

A Vertical Bricks Builder Accordion is a neat way to organize your content, making it interactive and engaging for your website visitors. What’s even better is that there’s a free template available at Fancy Bricks, which you can use as a starting point. Let’s go through the process together with Web Squadron and you will have your vertical accordion built in no time.

Getting Started with Bricks Builder Accordion

To get started with the Bricks Builder Accordion, follow these steps:

  1. Head over to and register.
  2. Download the vertical accordion template.
  3. Import this template into your WordPress site using Bricks Builder (Bricks > Templates > Import template).

Implementing the Bricks Builder Accordion Template

Once you’ve got the template in your Bricks Builder, it’s time to put it to work. Here’s how:

  1. Create a new page in Bricks Builder.
  2. On your new page, look for the ‘Templates’ option and click on it.
  3. You’ll see your imported template there. Click on ‘Insert Template’.
  4. The template is now part of your page!

Customizing the Bricks Builder Accordion

Now comes the fun part – customization! Here’s how you can add content to your template:

  1. Go to the block within the column and add a background image.
  2. Go to the content block, which contains the text and the button, and give it a background color.
  3. Once you’re happy with how one column looks, you can duplicate it to create multiple accordion slides.

Advanced Customization of the Bricks Builder Accordion

Sometimes, when you duplicate columns, you might notice gaps between them. But don’t worry, there’s a way to fix this:

  1. Go to the parent container and click on the ‘Style’ tab.
  2. Scroll down to ‘CSS’.
  3. You’ll see a value that says ‘120 pixel’. Change this to ‘200’, and the gaps will disappear!


And that’s it! You’ve just learned how to create a vertical accordion using Bricks Builder. Remember, the key to mastering Bricks Builder is to experiment and play around with it. So go ahead, start building, and let your creativity flow!

Required Resources

Fancy Bricks Logo
Free Options
Bricks Builder Logo
Payment required
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.
How to Create a Vertical Bricks Builder Accordion
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.