If you have to publish lots of information of various types on blog posts or pages concisely, tabs could be a helpful web element to do this. They allow you to organize content in separate sections so users can selectively explore and find the information they need.
With the Gutenberg block editor, you can easily add tabs to your blog posts. In this article, we’ll show you how to create tabs in WordPress to organize content. Before that, we’ll answer some basic questions.
Tabs serve as a navigational tool, allowing you to display lots of information in various sections. As a result, users don’t have to depend on excessive scrolling to explore vast information on your post or page.
They provide a structured format so users can find the specific information they seek by clicking on them. People normally use the tab element to display their web pages in the hero and header sections.
But today, with the help of certain Gutenberg plugins, you can create tabbed content anywhere on any post or page.
Tabbed content works exceptionally when you have a large amount of information that needs to be displayed in a tabular format. This element is particularly effective in organizing the following information types.
Product Descriptions: You can use this block to cover product specifications, features, and customer reviews in separate tabs.
Service Offerings: If you have multiple service plans or packages, showcasing them in separate sections is better.
Pricing Plans: It is already a common practice to display multiple pricing plans in different tabs on websites.
FAQs: Although most people love to use FAQ and content toggle blocks for the FAQ section, you can also use the tab block to cover this section.
Comparative Information: If there is any information that would be better presented in a side-by-side section, the tab block is useful in this case.
How to Create Tabs in WordPress
The default block library of Gutenberg doesn’t have the tab block. You must use a plugin like アルティメット・ブロック to have it in the block library. The plugin has 25+ additional plugins by which you can take your web design and content marketing to the next level.
ステップ01: Ultimate Blocksプラグインをインストールして有効化する
こちらへ プラグイン > 新規プラグインの追加. Type アルティメット・ブロック in the search bar on the top-right corner. インストール そして アクティブ化 the plugin after it appears below.
Step 02: Insert the Tabbed Content Block
Open a post or page. Find the タブ付きコンテンツ block by pressing プラス（＋）ボタン. Once you find the block, add it to the Gutenberg editor.
Step 03: Add New Tabs and Rename Them
をクリックしてください。 プラス（＋）アイコン, you can add as many tabs as you want to the block.
Take your cursor and click on the tab one by one. You’ll be allowed to rename them. So, rename the tabs based on the content you’ll display.
Step 04: Add Content to the Tabs
Select a tab where you want to add content. Then place the cursor in its editor. You’ll see the プラス（＋）ボタン of the Gutenberg editor appeared. Click and choose the content block you need.
For the tutorial, we have added the text and image blocks to the tab. The same way, you can add other blocks as well to the tab. Do the same in other tabs.
Step 05: Customize the Tabs
Come to the right sidebar while keeping the Tabbed Content block selected. You’ll find various options to configure, like the Tab Types, Tab Anchor, and Responsiveness.
Once you upgrade to the premium version, you’ll be allowed to add icons to the tab titles, secondary texts, and call to action buttons to the tabs.
次に スタイルタブ. You’ll get options to colorize the tabbed content, change the tab layout, and set a new dimension. Hope you can explore and do these yourself.
結論
The Tabbed Content block coming with the Ultimate Blocks plugin is automatically responsive on all devices. As a result, you don’t have to spend much time on making it device responsiveness.
But what you need to do is placing the block on a suitable place that makes your entire post/page perfect. Explore our another post – how to create a call to action button in WordPress.
