Getwid Blocks: Tabs Gutenberg Block
Table of Contents
Presenting information via tabbed widgets in the Gutenberg WordPress Editor is a breeze with the Tabs block by Getwid. Gutenberg tabs will aid you in creating functional FAQ sections and structuring complex data archives.
Unlike the Toggle and Accordion Getwid blocks, the Tabs block allows you to output horizontal or vertical-oriented tabs.
See also: the Tabs widget for Elementor
The tabs’ look is inherited from your active WordPress theme by default (it’s the Bimba theme in our examples) so it will blend nicely into the page. The tabs are fully responsive, so you can run them on any device.
One of the key benefits of this Tabs Gutenberg block is that you can add any block inside the tab container since it’s a nested block (can host multiple blocks).
Purpose of the Tabs Gutenberg Block
Using this block, you can do the following things:
- Create a structured presentation of news, categories (e.g. genres of literature, music).
- Structure information a way that is more readable and user-friendly to interact with.
Features of the Gutenberg Tabs Block for WordPress
The major settings are almost the same as in the similar Toggle and Accordion blocks (but you can’t have icons for tabs).
Here are the details:
- Add new tabs and edit their content inline (visually) in Gutenberg (basic typography settings are supported).
- Select layout for tabs: horizontal left, horizontal center, horizontal right, vertical left, vertical right.
- Custom heading size.
- Select which particular tab needs to be opened by default when a user lands on the page for the first time.
- Add any type of content into Tabs (videos, images, tables, etc.) using any WordPress block:
- Add custom classes if needed.
Design Tips for the Gutenberg tabs block
- You can transform tabs into toggles or accordion using the “Transform” option in Gutenberg.
Download the Free Official WordPress Gutenberg Theme for Getwid
The easiest and most effective way to start with Getwid Blocks is its starter theme: Getwid Base. It comes bundled with a unified system of colors, typography, iconography, buttons, and, of course, Getwid pre-designed blocks! Here are all the links you might need:
Check out Getwid Demo
Download Getwid Gutenberg Blocks Free
Install Getwid Base Starter Theme for Gutenberg for free
How can I link to a tab? Like http://www.mywebsite.com#tab2?
Hi Mike,
At the moment there is the possibility to get a direct link to the tab. We have added your request to our list of features and notify you if we have any news.
Thanks for this info on getwid tabs. Great stuff!!
However, why are my tabs having a black UL (unordered list) dot in each tab? Your tabs doesn’t have that. Could it be something to do with the MH Magazine theme I’m using? Check your Support email.
Hi Maxi, The bullets are added by your theme even though our plugin tries to remove them. I’ve sent a style to force removing the bullet points.
Oh man ignore me, I’m sorry – it was a setting in my theme causing the tabs to disappear. I’ve fixed it. 🙂 I’m so impressed by your plugin!
Hi Michelle,
Thanks for your comments and for resolving the issue on your own. It would be extremely helpful if you review the Getwid plugin here https://wordpress.org/support/plugin/getwid/reviews/
To be clearer – I’d like the tabs to remain in view after they’re clicked. Right now the page scrolls to the top of the tab-content, hiding the tab controls. Thank you!
Great block, thank you! Is there a way the scroll-to-top functionality can be disabled? I don’t want the page to scroll when someone clicks on a tab. Thanks!
It would be nice to have the tabs be able to have other blocks contained within them.
Hi Jeremy,
Thank you for your comment. We have added your request toour list of features and we will notify you when we have any news. Thanks.
Hi, Jeremy!
I am delighted to let you know, that yesterday, on June 25th, we have released the new Getwid update – v. 1.6.0! The ability to add any content into the Tabs, Accordion and Toggle blocks has been also included 😉 I hope you will enjoy this new feature you have requested.
It would be also appreciated if you leave your positive feedback about Getwid at: https://wordpress.org/support/plugin/getwid/reviews/#new-post.