「サービス内容」「料金」「よくある質問」のように、選んだ項目だけを表示できます。
このページでできること
項目を切り替えて内容を見せる
項目を切り替えて内容を見せる
スクリーンショットの赤い番号と、手順の同じ番号を見比べて進めてください。画像に写っていない操作は、手順に記載した画面で行います。
① 「タブ」を追加する
- 編集したいページを「Elementorで編集」で開きます。
- 左上の「＋」（要素を追加）を押し、「タブ」で検索します。
- 該当するウィジェットをページの入れたい場所へドラッグします。配置済みなら、その部品をクリックします。
撮影画面は現在の入れ子式タブです。旧タイプで「コンテンツ」入力欄がある場合は、その欄に本文を入力します。Atomic版のタブとは設定が異なります。
② タブ名と中身を設定する
赤い番号は手順の番号に対応しています。
- 「タブ項目」の「タブ #1」を開き、「タイトル」を「サービス内容」などに書き換えます。
- 同じように2つ目・3つ目の名前を変えます。項目を増やすときは「タブの追加」を押します。
- 右側のページで編集したいタブを選び、その内側へ「テキストエディター」や「画像」などを追加します。
- タブを1つずつ切り替え、それぞれの中身を作ります。左の「タイトル」はタブの名前で、本文の入力欄ではありません。
ここを確認：すべてのタブに正しい本文が入っている。
③ 見た目と表示を確認する
赤い番号は手順の番号に対応しています。
- 「スタイル」の「タブ間の隙間」で、タブ同士の余白を整えます。
- 「コンテンツからの距離」で、タブ名と本文の間を調整します。
- 「普通」「マウスオーバー」「有効」を切り替え、選択中のタブが区別できる色にします。
入力・使い方の例
サービス内容｜料金｜よくある質問 → 押した項目の内容だけが表示されます。
④ スマホで確認して保存する
上部のスマートフォンのアイコンで表示を確認します。「公開」または「更新」で保存し、プレビューや実際のページで動作を確認します。作成途中の場合は下書き保存を使います。
完了チェック
- すべてのタブに正しい本文が入っている。
- スマホでタブ名が切れず、切り替えられる。
うまくいかないとき
タブ名を変えても本文が変わらない
右側で対象のタブを開き、中に置いたテキストや画像を編集します。
画面は撮影時のバージョンです。同じ名前のAtomic版・Pro版・追加プラグインのウィジェットは設定が異なる場合があります。