July 26, 2023

Designing Accessible and Responsive Bricks Builder Tabs

Play Video

Learn how to design accessible and responsive Bricks Builder Tabs, ensuring a smooth user experience as they transition into an accordion layout on mobile screens. Follow along with Design with Cracka and discover how it is done.

Understanding Bricks Builder Tabs

Bricks Builder Tabs are like the drawers in a well-organized desk. They allow you to neatly store your content, making it easier for your users to find what they’re looking for. But here’s the thing, we want everyone to be able to open these drawers, right? That’s why we need to make sure our tabs are keyboard accessible.

Setting Up the Bricks Builder Tabs

Setting up the Bricks Builder Tabs is like arranging your desk drawers. Here’s how you do it:

  1. Start by setting up the Bricks Builder Tabs.
  2. Restructure the tabs for optimal performance.
  3. Add sections and content to the tabs.

Making the Bricks Builder Tabs Responsive

In the realm of web design, responsiveness is the key to ensuring a seamless user experience across different devices. With Bricks Builder, making your tabs responsive is as easy as pie. Here’s how you can do it:

  1. Once you’ve set up your Bricks Builder Tabs, navigate to the “Advanced” settings of the tabs. This is where the magic happens.
  2. Look for the CSS Grid properties. These properties allow you to control the layout of your tabs.
  3. To make your tabs responsive, you’ll need to adjust these properties based on the device. For instance, you might want your tabs to display as a grid on desktop devices and as an accordion on mobile devices.
  4. To achieve this, you can use media queries to apply different CSS Grid properties based on the device. For example, you might use grid-template-columns: repeat(4, 1fr) for desktop devices and grid-template-columns: 1fr; for mobile devices in the Grid Template Columns setting.
  5. Set the Grid Item > Grid Column to 1/-1
  6. Set the Grid Auto Flow to ‘dense’.

Make your Bricks Builder Tabs Keyboard Accessible

This is crucial for users who rely on the keyboard to navigate. To do this, you’ll need to change the tags of your tabs to ‘buttons’. This can be done in the “Content > Custom Tag” settings of each tab.

Styling the Bricks Builder Tabs

Styling your tabs is like putting the icing on the cake. It’s what makes your tabs visually appealing and aligns them with your brand’s aesthetic. Here’s how you can style your Bricks Builder Tabs:

  1. Give your tabs a unique shape: With CSS, you can give your tabs any shape you want. For instance, you might want to give your tabs a pill shape for a modern and sleek look. To do this, navigate to the “Style” settings of your tabs and adjust the border-radius property.
  2. Add padding and row gaps: This improves the layout of your tabs, making them look more organized and easier to navigate. You can do this in the “Layout” settings of your tabs. Simply adjust the padding and row-gap properties to your liking.

Making the Bricks Builder Tabs Accessible

Accessibility is all about making your website usable for everyone, including users with disabilities. Here’s how you can make your Bricks Builder Tabs accessible:

  1. Set the visibility of the inner div to hidden when not active and visible when active: This ensures that users can only interact with the active tab, making your tabs easier to navigate. To do this, navigate to the “Advanced” settings of your tabs and adjust the visibility property based on the state of the tab.
  2. Make your tabs keyboard accessible: As mentioned earlier, this is crucial for users who rely on the keyboard to navigate. If you haven’t done so already, make sure to change the tags of your tabs to buttons.


That is how you create accessible and responsive Bricks Builder Tabs. Remember, the key is to make sure your site is accessible to everyone, regardless of how they’re navigating. So go ahead, start creating your tabs, and let’s make the web a more accessible place for everyone.

Required Resources

Bricks Builder Logo
Payment required
Credit to Design with Cracka
Design with Cracka is an engaging YouTube channel offering insightful web design and development tutorials, tips, and tricks. Catering to a range of skill levels, from beginners to advanced developers, Design with Cracka focuses on creating beautiful, functional, and optimized websites using various platforms, including WordPress, Oxygen Builder, and Bricks Builder.
Designing Accessible and Responsive Bricks Builder Tabs
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.