Introducing: New Tabs Block

In our latest release, we’re delighted to announce that the Tabs block has now finally been added to our wide selection of Stackable blocks! Make sure you update to v3.10.0.

One of the biggest challenges in web design is managing a wealth of information within the constraints of a screen. This is where Stackable’s Tabs block shine. You can effectively divide content into different tabs to manage your screen space. The Tabs block comes in handy if you don’t want users to scroll through long pages of content!

The Stackable Tabs block is robust and can go beyond the typical looks and usage of tabs. For example, with a little tweaking of the designs, you can leverage the Tabs block to build a pricing table switcher that can let your visitors toggle between “monthly” and “annual” payment plans.

Beyond functionality, tabs can contribute significantly to the aesthetics of a website when blended within your page. Customizable tab designs allow for consistency with the overall look and feel of a site, which is crucial for brand identity. Stackable’s Tabs block includes various design controls and settings to adjust the color, size, typography, and even add icons, ensuring they perfectly match your site’s design theme.

Dive into Stackable’s New Tabs Block

Like some of Stackable’s blocks, the Tabs block is actually comprised of multiple smaller blocks. When you add a Tabs block, the hierarchy looks like this in the List View:

The Tabs block is the main block that contains everything. If you need to change something in the overall appearance of a Tabs block, then make sure this is the block that is selected.

The Tab Labels block will contain your “tab” buttons. Select this if you want to change the appearance of the clickable tab “buttons”.

The Tab Content block is the wrapper around the entire tab content area. Select this if you want to change the appearance of the entire panel that will contain the content of the tabs.

The Inner Column blocks correspond to the tabs inside the main Tabs block. This is what will contain the blocks or content that you want to add to each tab.

Here’s a video to see how each block pertains to different “sections” of Stackable’s Tabs block:

This multi-block approach enables you to have finer control of how each part of the tabs look like.

Within each tab, or Inner Column block, you can populate it with as much content as needed, allowing you to include blocks like Heading, Image, Card, Button, Feature, and so much more, all neatly organized under individual tabs.

All you have to do is select a tab and click the plus (+) button to add a block. You can search for a block in the Search bar, or you can click on the Browse all button to open the Inserter.

The Stackable Tabs Block comes packed with an array of customizing features that bring your content to life. Here are the various settings and design controls we’ve jam packed into the Tabs block:

Tab Orientation

Stackable’s Tabs Block allows you to choose between horizontal and vertical orientations. This gives you the option to have a completely different flow of your webpage. This control can be found in the main Tabs block’s Inspector settings (Layout tab > Layout panel).

Horizontal tabs are the most common and work well for most websites, but vertical tabs can provide a unique visual appeal and are a good fit for certain design concepts.

Tab Panel Offset

The Tab Panel Offset feature enables you to adjust the space between your tab labels and the tab content. By default, this is set to 16px.

Having control over this spacing allows you to somewhat detach the Tab Labels from their contents, to achieve those designs that do not look like your typical tabs.

You will find this setting by selecting the main Tabs block, and navigating to the Layout panel of the Layout tab.

Initial Tab Open

This feature gives you control over the user’s first interaction with your tabbed content. You can specify which tab should be opened first when the page loads, directing your visitors’ attention to the content you deem most important or relevant.

This can be particularly useful for highlighting featured products, special offers, or key information about your services.

Tab Styling

Click on the Tab Labels block, and you’ll see four different preset styles that you can choose from: Default, Classic, Button, and Centered Pills. You can further refine the design to your liking after picking one.

You can change the button and text colors, adjust button padding, and add customizable borders.

Each of these styling options ensures that your tabs are not only functional but also visually appealing. These options help your tabs to stand out, guide your user’s navigation, and maintain a seamless look and feel throughout your website.

Tab Active State Styling

The ‘active state’ is the state of a tab when it is currently selected or being interacted with. With Stackable’s Tabs Block, you can customize the look of this active state, allowing you to provide visual feedback to your users about their current location within your content.

You can opt to change the button and text color, and add customizable borders to the active tab, differentiating it from the other tabs. This helps make navigation more intuitive and less confusing for your website visitors.

Icon Option:

Stackable’s Tabs Block allows you to add icons to your tabs. This feature takes your tab design a step further by incorporating visual cues to guide your user’s interaction.

You can assign different icons for each tab to represent each tab. Just click on the icons on each Tab to open the icon selector.

Icons are particularly helpful when screen real estate is limited, such as on mobile devices, as they convey information efficiently without taking up much space.

Conclusion

Stackable’s new Tabs Block, packed with advanced features and customization options, takes the tabbed interface to the next level. Whether it’s styling the tabs and their active states, adding icons for better visual communication, or adjusting the layout with options for initial tab open, tab orientation, tab panel offset, and tab panel effect – Stackable’s Tabs Block offers you an unprecedented level of control and flexibility.

Update your Stackable to the latest version now and start exploring the potentials of Stackable’s Tabs Block today and redefine your web design experience!