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

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

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

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

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

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

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

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

タブウィジェットの場所

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

タブウィジェットを挿入

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

コンテンツタブでの設定

タブウィジェットのコンテンツタブ

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

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

タブの削除などの説明

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

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

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

タブタイトルや本文の編集

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

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

メディアの挿入画面

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

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

タイプの選択

タイプの選択

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

  • 水平
  • 垂直

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

タブのタイプを垂直にする

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

スタイルタブで装飾する

スタイルタブの説明

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

枠線関係と背景色

枠線や枠色、背景色の設定

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

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

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

タブタイトルについて

タイトルの色と有効時の色

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

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

書体を開いた画像

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

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

コンテンツの色を変える

コンテンツの色

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

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

コンテンツの色が変わった画像

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

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


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

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

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Elementorの無料ウェブサイトテンプレート
新規追加されました。

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通