Back to Documentation

Tabs Block

Adding tabbed content to your website can maintain clarity and reduce clutter, and enhance user experience.


Tabs are a great feature to use on your website, they offer a streamlined and organized way to present diverse content within a confined space. Tabs essentially function as navigational elements that allow users to switch between different sections of content without needing to navigate away or scroll excessively. By adding content to tabbed sections, websites can maintain clarity and reduce clutter, and enhance user experience.

Tabs are great for content such as product features, articles, services, portfolios, event details, reviews, FAQs, multimedia, team profiles, and resource libraries. They enhance user experience by providing structured access to information, reducing clutter, and maximizing usability within a confined space.

Example:

The tabs block offers 3 main designs, as well as further customization settings to edit the look of the tabs to fit your website and business branding design.

Tab One
Tab Two
Tab Three

Tab Content One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pharetra nibh in varius eleifend. In convallis sem sit amet risus congue bibendum. Donec non laoreet nulla. Duis tincidunt magna non gravida ultrices. Donec tristique commodo mauris in pellentesque. Sed imperdiet consequat arcu nec malesuada.

Tab Content Two

Donec non laoreet nulla. Duis tincidunt magna non gravida ultrices. Donec tristique commodo mauris in pellentesque. Sed imperdiet consequat arcu nec malesuada.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pharetra nibh in varius eleifend. In convallis sem sit amet risus congue bibendum.

Tab Content Three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pharetra nibh in varius eleifend. In convallis sem sit amet risus congue bibendum.

Donec non laoreet nulla. Duis tincidunt magna non gravida ultrices. Donec tristique commodo mauris in pellentesque. Sed imperdiet consequat arcu nec malesuada.

You can also add a side layout for the tabs block:

Tab One
Tab Two

Tab Content One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pharetra nibh in varius eleifend. In convallis sem sit amet risus congue bibendum.

Donec non laoreet nulla. Duis tincidunt magna non gravida ultrices. Donec tristique commodo mauris in pellentesque. Sed imperdiet consequat arcu nec malesuada.

Tab Content Two

Donec tristique commodo mauris in pellentesque. Sed imperdiet consequat arcu nec malesuada.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pharetra nibh in varius eleifend. In convallis sem sit amet risus congue bibendum. Donec non laoreet nulla. Duis tincidunt magna non gravida ultrices.

Adding Tabs to your WordPress website:

Once you’ve installed the Blockons WordPress plugin, you can navigate to the page where you’re wanting to add the Tabs block, and simple click the add block button and search for “tabs”.

Blockons - Add Tabs block to WordPress

You can also add tabs to the page by using the blocks sidebar and either search for “tabs” or scroll down to the Blockons block category to add your tabs.

Editing the Tabs block:

The Blockons Tabs block for WordPress offers a few different layout and design settings for the tabs.

You can select from 3 different tab styles, switch the tabs to be a side layout and also set certain widths and heights for the tabs and content areas.

Blockons - Tabs block settings

Once you’ve selected your tab style and the tab layout you want, there are also further design customization options to make the tabs look exactly as you want them to look.

Blockons - Tabs block design settings

We’ve set the default to how we think that tabs look good, but feel free to edit and of the settings to customize the Tabs block as you want.