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.
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.
TコンテンツUltimate Blocksの'ブロックを使えば、タブに任意のコンテンツを追加できる。その方法を見てみましょう。
ステップ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.
ビデオ・チュートリアル
WordPressでテーブルにタブを作成する
タブはテキストや画像のためだけのものではありません-それはまた、あなたのウェブサイト上で複数のテーブルを並べて整理するための優れた方法です。ユーザーが 月額および年間価格, 製品の特徴を比較するまたは複数の言語でデータを提示する、 テーブルバーグ を使えば、タブの切り替えが簡単にできる。
Tablebergの"Tableberg用トグル"ブロックならできる：
-
複数のテーブルを別々のタブに追加する
-
料金プラン、機能、データセットをワンクリックで比較できます。
-
テーブルを整理し、清潔に保ち、ナビゲートしやすくする。
ここでは、Tablebergを使ってテーブルにタブを作成する方法を説明します：
ステップ1：「Tableberg用トグル」ブロックの挿入
- WordPressのエディタで投稿またはページを開きます。
- (+)アイコンをクリックし Tableberg用トグルそしてブロックを追加する。
ステップ2：タブの設定とカスタマイズ
- デフォルトでは、"タブ1"、"タブ2"、"タブ3 "というラベルのタブが表示されます。
- または-アイコンをクリックして、必要に応じてタブを追加または削除します。
- 各タブの名前を変更する（例："Monthly"、"Yearly"、"Standard"、"Premium"）。
- 右側の設定パネルを使用して、タイトル、配置、色、ボーダーをお好みのスタイルに調整します。
ステップ3：各タブにテーブルを追加する
- タブを選択し、そのタブの内側をクリックしてTablebergテーブルを追加する。
- ゼロから新しいテーブルを作成することも、Tablebergであらかじめデザインされたテーブルパターンを挿入することもできます。
- 各タブにはユニークな表を表示することができ、比較やオプションの紹介に最適です。
ステップ4：プレビューと公開
- プレビューを使用して、タブ付きテーブルの外観と機能が正しいことを確認してください。
- 満足したら、投稿／ページを公開または更新する。
以下は、Tablebergを使ったタブ付き価格表の例です：
結論
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.
