Diviが長いWebページを介して訪問者をガイドするのにどのように役立つか

優れた長い形式のコンテンツを作成することが、検索エンジンのランキングの向上に貢献することは周知の事実です。 ただし、この戦略は、素材の消費やナビゲートが難しい場合に簡単に裏目に出る可能性があるため、ユーザーエクスペリエンスが低下します。 そこで、ページはめ込みナビゲーションが登場します。ありがたいことに、Diviには、そのようなコンテンツを通じて読者をガイドするのに役立つ一連のネイティブ機能とモジュールが付属しています。

この記事では、最初にページはめ込みナビゲーションの使用を検討する必要がある理由を説明し、次にDiviを使用してそれを実装する3つの方法を示します。 始めましょう！

ページ内ナビゲーションの使用を検討する理由

上部のタブは、ページはめ込みナビゲーションの例です。 各タブは、ページの特定のセクションへのリンクを表します。

ページはめ込みナビゲーションは、2つの主要なシナリオで不可欠です。一般に長い形式のコンテンツと、特に1ページのWebサイトです。 過去数年間で風景が長い形式のコンテンツに移行するにつれて、そのコンテンツの適切な構造化と編成がこれまで以上に重要になっています。 注意のスパンは減少しており、人々が探しているものにたどり着くためにあまりにも多くの情報を調べなければならない場合、あなたはそれらを失う可能性があります。

ページはめ込みナビゲーションを使用すると、コンテンツをよりわかりやすく表示できるため、訪問者がコンテンツをさらに探索するために立ち往生する可能性が高くなります。 これにより、全体的なユーザーエクスペリエンスが向上し、バウンス率が低下し、コンバージョン数が増えることが期待されます。

Diviを使用してページ内ナビゲーションを提供する3つの方法

一般的なページ内ナビゲーション方法の1つ（以前の投稿で詳しく説明しました）は、同じページの内部要素にリンクするアンカーテキストハイパーリンクを使用することです。 ただし、Diviは、長い形式のコンテンツを通じてユーザーをガイドするのに役立つ他のいくつかの優れた方法を提供します。 これらのオプションのうち3つを紹介し、それらを実装する方法を示します。

1.ドットナビゲーションを有効にする

上の画像の例からわかるように、有効にすると、ドットナビゲーション機能がページの横にドットメニューの形で表示されます。 各ドットはその特定のページのセクションを表します。つまり、訪問者は自分がどのポイントにいるかを常に認識しています。 また、対応するドットをクリックして任意のセクションに簡単にジャンプできるため、コンテンツのヒープをスクロールする必要がありません。

投稿やページ内でドットナビゲーションを簡単に有効にできます。 まず、Divi Builderを使用していることを確認し、使用していない場合は、紫色の[DiviBuilderを使用]ボタンをクリックして有効にします。

右上隅の[Divi投稿設定]（またはページを表示している場合は[Diviページ設定] ）で、[ドットナビゲーション]ドロップダウンメニューを開き、[オン]を選択します。

これで準備は完了です。 プレビューすると、ドットナビゲーションが投稿に表示されます。 セクションを追加すると、対応するドットがメニューに自動的に追加されます。

ドットナビゲーションを有効にしたら、メニューのスタイルを設定するためのヒントが記載されたこのビデオを確認することをお勧めします。

2.タブモジュールを使用してコンテンツを分離する

タブを利用することは、コンテンツのチャンクを分離するための優れた方法であり、DiviTabsモジュールを使用してそれらを作成できます。 アクティブなタブ（クリックしたばかりのタブ）の下にあるコンテンツのみが訪問者に表示されます。 これにより、訪問者が資料の量に圧倒される可能性を最小限に抑え、各タブをクリックしてそのコンテンツを個別に消費することで、訪問者が自分のペースで資料を探索できるようになります。

タブの良い使用法の1つの例は、同じページに異なるサービスを表示する場合です。 たとえば、Webデザイン、デジタルマーケティング、ブランディングサービスを提供するデジタル代理店の場合は、それぞれにタブを作成できます。 これにより、ユーザーが関連するサービスまでスクロールダウンする必要がなくなり、全体的なエクスペリエンスが向上します。

タブモジュールを挿入するには、Divi Builderで、[列の挿入]を選択し、追加する列の数を選択します。 （サイドバイサイドタブのセットを作成するために必要なタブモジュールは1つだけであることに注意してください。）

次に、[モジュールの挿入]をクリックし、[タブ]を選択します。

モジュールの設定画面が表示され、[新しいタブの追加]をクリックできます。

これにより、個々のタブ設定画面が表示されます。 ここにタイトルとコンテンツを入力し、[保存]をクリックする必要があります。

これで、最初のタブの作成が完了しました。 必要なすべてのタブとそのコンテンツを追加するまで、このプロセスを繰り返すことができます。

3.アコーディオンまたはトグルを挿入します

アコーディオンはタブと非常に似ていますが、主な違いはコンテンツが垂直リストに表示されることです。 アコーディオン要素をクリックするたびに、他の展開された要素が折りたたまれ、クリックされた要素のコンテンツが表示されます。

トグルも性質が似ていますが、トグル要素をクリックしても他の要素が折りたたまれない点が異なります。 代わりに、選択したすべてのトグルの内容が同時に表示されます。

これらの要素を使用する人気のある場所は、FAQページです。 すべての質問を一度に表示でき、関連する回答のみを展開できるので便利です。 アコーディオンとトグルの両方は、それぞれアコーディオンモジュールとトグルモジュールを使用してDiviに簡単に追加できます。

各モジュールに複数のアイテムを追加できるため、Diviにアコーディオンを挿入することはタブを追加することに似ています。 上記のモジュールを挿入するための手順に従います。ただし、今回は、タブの代わりにアコーディオンを選択します。

表示される設定画面で、[新しいアイテムの追加]をクリックします。

次の画面で、タイトルとコンテンツを入力し、[保存]をクリックします。 その後、アコーディオンのアイテムごとにこれを繰り返すことができます。

Diviでトグルのセットを作成することもタブを追加することに似ていますが、ここでの主な違いは、コンテンツの各行に対して新しいトグルモジュールを作成することです。 最初のトグルを挿入するには、[モジュールの挿入]をクリックした後、[トグル]を選択します。

これで、タイトルを追加し、デフォルトの状態（訪問者が最初にページにアクセスしたときにトグルを開くか閉じるか）を選択し、コンテンツを挿入できるモジュール設定画面が表示されます。 完了したら、[保存して終了]をクリックします。

次のモジュールを追加するには、最初のモジュールの下にある[モジュールの挿入]をクリックし、もう一度[切り替え]を選択して、適切な詳細を入力します。 トグルのセットが完了するまで、モジュールの追加を続けます。

結論

読者に価値を提供する長い形式のコンテンツを調査して作成することは、多くの場合、リソースを大量に消費する作業です。 その結果、構造と使いやすさが不十分なために、コンテンツを途中で放棄するためだけにすべての努力を払うことは非常に苛立たしいことです。

この記事では、コンテンツのページはめ込みナビゲーションを検討する理由を説明し、Diviを使用してそれにアプローチする3つの異なる方法を提供しました。 これらのメソッドを簡単に要約してみましょう。

1. 投稿とページでドットナビゲーションを有効にします。
2. タブモジュールを使用してコンテンツを分離します。
3. アコーディオンモジュールまたはトグルモジュールを使用して、アコーディオンまたはトグルを挿入します。

長いウェブページを訪問者に案内するためのヒントはありますか？ 以下のコメントセクションでそれらを私たちと共有してください！

グラフィックファーム/shutterstock.comによる記事のサムネイル画像