Elementorのタブウィジェットの使い方

今回はElementorの一般タブウィジェットの使い方を解説していきます。

タブって色んな場面で使えて便利な機能ですよね。
例えばGoogle検索で調べものをしているとき、表示したページの他に違うページを表示することはありませんか？

何度も同じページを開き直す手間が省けるので、タブを使いこなすと時短にもなり作業効率も上がるものです。

そんな便利なタブ機能もErementorならノーコードで設置できます。
この記事で使い方を覚えてぜひ実装してみてください。

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

一般にあるタブウィジェットを挿入

タブウィジェットは要素の基本とプロ版の下にある『一般』の項目内にあります。
画像のように下にスクロールすると出てきますので探してみてください。

タブウィジェットが出てきたら、ドラック＆ドロップでタブウィジェットを挿入します。

コンテンツタブでの設定

タブウィジェットを挿入すると、コンテンツタブが開きます。

何もしないデフォルト状態では、2つのタブが設定されています。
『タブ＃1、＃2』が、右側のセッションに反映されていますね。

『タブ項目』の丸で囲んだボタンで該当のタブを削除でき、『+項目を追加』で新しいタブを増やせます。

四角で囲んだ『タブ＃1』をクリックするとテキストエディタが開きタブ内の編集画面が開きますので、詳しく見ていきます。

テキストエディタでタブを編集する

テキストエディタで、タイトルやテキストを編集します。
タイトル欄には該当タブのタイトルを入力しましょう。
今回はプロフィールと入力しました。該当タブのタイトルも変わっていますね。

またテキスト本文を下の四角の中で打ち込めば、右側のテキスト欄にも同じように表示されます。
見出しを入れたり、文字を装飾したり自分の好きな編集をしてくださいね。

『メディアを追加』で画像の挿入もできます。
大きさや配置などを考えバランスよく、挿入してみましょう。

詳しい説明は『Elementor – コンテンツタブとスタイルタブ – テキストエディター編【初心者】』でも説明していますので、参考にしてください。

タイプの選択

画像の▼をクリックすると、タブのタイプが選べます。

• 水平
• 垂直

と選べますので、一旦垂直に変えてみました。

するとセッション内のタブが上下に並びます。
こちらも好みで変えてみてください。

スタイルタブで装飾する

タブウィジェットのスタイルはこのようになっています。
枠線やタブタイトルの色など設定できますので、設定していきましょう。

枠線関係と背景色

一番上の項目のボタンを右にスライドさせると、枠線の幅が変わります。
わかりやすくするため、太めに設定してみました。
みなさんはやりすぎに注意してくださいね。

枠線の色や背景色も丸で囲んだところをクリックして変えられます。

地球のマークはglobalカラーになります。
globalカラーについて詳しく知りたい方は『ElementorのGlobal ColorsとGlobal Fontsの使い方』の記事をご覧ください。

タブタイトルについて

タブタイトルの色と有効時の色を変えていきましょう。
有効時はタブが選択されている状態のことです。

『色』の項目のカラーを選択すると、選択されていないタブタイトルの色が変わります。
『有効時の色』では選択されているタブタイトルの色を変更可能。
画像で言うと2番ですね。

『有効時の色』の下にある書体の項目は、鉛筆マークをクリックすると開きます。

書体では画像のような編集をすることが可能。
好きなフォントや大きさ、文字の太さなど設定してみてください。

コンテンツの色を変える

コンテンツの色を設定してみましょう。
コンテンツはテキストエディタで編集した、タブ内のタイトル以外の部分です。

色の下にある書体はタブタイトルのものと重複するので割愛します。

色を白にしてみました。
タブの本文テキストの色がかわっていますね。

今回は見やすさを重視したら少しおかしな見た目になってしまいましたが、みなさんもぜひタブウィジェット使ってみてください。

---

今回紹介をしt『タブ』ウィジェットに他にElementorには『アコーディオン』ウィジェット、『切り替え』ウィジェットというタブウィジェットと似たような性質を持つウィジェットもあります。

• 【Elementorの切り替えウィジェットの使い方】
• 【Elementorのアコーディオンウィジェットの使い方】

よろしければこちらもチェックしてみてください！