Diviプラグインのハイライト–Diviブレッドクラムモジュール

公開: 2017-06-26

私がウェブサイトをナビゲートしているとき、私が探しているナビゲーションツールの1つはパンくずリストです。ナビゲーション階層内のどこにいるかを示し、構造内の他の記事を簡単に見つけるのに最適です。ブレッドクラムは、Divi BreadcrumbsModuleと呼ばれるプラグインを使用してDiviに追加できます。

Divi Breadcrumbs Moduleは、ロケーションベースのブレッドクラムを作成するCodeCraterのサードパーティプラグインです。つまり、現在読んでいるページのカテゴリの階層が表示されます。また、階層内の各要素へのリンクも提供されるため、各カテゴリの最新の投稿を簡単に確認できます。ブレッドクラムは高度にカスタマイズ可能です。

ブレッドクラムモジュールを使用すると、DiviBuilderを使用する個々のページや投稿にブレッドクラムを配置できます。また、ExtraおよびDiviBuilderプラグインでも機能します。このプラグインのハイライトでは、DiviとExtraの両方のプラグインを見て、カスタマイズできる方法をいくつか見ていきます。

ブレッドクラムを使用する理由

ブレッドクラムは、カテゴリ階層を示す証跡を残し、ナビゲーションを改善するための優れた方法です。それらは多くのスペースを占有せず、ユーザーがコンテンツをナビゲートするために実行する必要のあるアクションの数を減らして単純化することができます。これは、埋め込まれたカテゴリがたくさんある場合に特に重要です。

Divi Breadcrumbs Moduleは、ウェブサイトに関する階層情報をGoogleに提供することにより、SEOを改善します。つまり、ランク付けするカテゴリのキーワードを選択する必要があります。これにより、設計者は理解しやすいカテゴリ名を使用する必要があります。

ブレッドクラムはUXとUIの両方を改善します。それらはあなたの標準的なメニューナビゲーションの代わりになるべきではありませんが、彼らは興味を構築し、あなたのサイトへの訪問者をより長く保つことができます。

ディビブレッドクラムモジュール

通常どおりプラグインをアップロードしてアクティブ化します。モジュールはHollywoodCeriseと呼ばれる明るい赤で表示されます。多くのブレッドクラムプラグインは、Yoastプラグインからブレッドクラムをプルしているため、Yoastを必要としますが、Divi BreadcrumbsModuleはYoastを必要としません。代わりに、独自のブレッドクラムを作成します。したがって、他のプラグインは必要ありません。

コンテンツ設定には、ホームブレッドクラムの非表示、独自のホームブレッドクラムテキストの追加、セパレータアイコンの選択（12の選択肢から）、現在のページの非表示、背景設定、および管理ラベルが含まれます。デザイン設定には、アイコン、テキスト、リンクのスタイル、および標準の間隔オプションが含まれます。

Diviブレッドクラムモジュールの例

これは、画像付きの投稿タイトルモジュール、ブレッドクラムモジュール、および記事のテキストモジュールを使用した基本的な記事レイアウトです。ブレッドクラムの設定はデフォルトのままにしました。

これは、モジュールがデフォルト設定でどのように見えるかです。ホームとフェンシングのリンクは、クリック可能であることを示すために青色で表示されています。ブレッドクラムは、左側、中央、または右側に配置できます。

この例では、パンくずリストを中央に配置し、グラデーションの背景を追加して、記事のタイトル（14ポイント）とリンク（12ポイント）の両方のフォントサイズを大きくしました。テキストは白です。グラデーションでプリントされているので、同じ色にしました。行区切り文字も変更しました。通常の投稿では、背景がグラデーションのパンくずリストには注意を向けませんが、これはそれを使って何ができるかを示しています。

全幅メニューでのブレッドクラムの追加

ブレッドクラムを追加するのに最適な場所は、ページの上部です。この例では、全幅メニューを使用して投稿を作成し、全幅セクションと標準セクションの両方でパディングとマージンを0に設定しました。階層を表示するためにカテゴリを埋め込みました。

パンくずリストのフォントの色を全幅メニューに合わせて変更しましたが、目立たないように柔らかくしました。セパレータを矢印に変更し、ホームと現在のページをブレッドクラムのナビゲーションから削除しました。

ブレッドクラムは、その上の画像のカテゴリと同じ埋め込み構造に従っていることに注意してください。記事自体にもこれらのカテゴリが含まれていますが、階層構造はありません。同じカテゴリを複数回表示したくない場合は、タイトルから削除できます。

この例では、背景色を行に配置し、全幅にし、メニューに圧倒されないようにフォントの色を変更し、文字間隔に1ピクセルを追加しました。小さな変更で大きな違いが生まれます。

これは、行の代わりにブレッドクラムモジュール内の背景を使用した同じ設定です。幅を狭くするためにパディングを追加しました。私はそれが別々に見えるがその上のメニューに添付されている小さな要素を作成するのが好きです。

セパレーターのスタイリング

セパレータにはスタイリング機能もあります。フォントのスタイル、サイズ、色、間隔、高さを変更します。セパレータオプションとスタイリング機能の間で、Webサイトのブランドに合わせてセパレータを簡単に作成できます。

この例では、紫色のデフォルトフォントと、区切り文字に20のフォントサイズを使用しています。

これは、区切り文字にジョージアフォントを使用した同じ区切り文字です。セパレータのフォントを変更するだけで、新しい外観を得ることができます。

これは、Black OpsOneフォントを使用した同じセパレーターです。それはより大胆で、より際立っています。

これは、4ピクセルの行間隔の20ポイントフォントのDroidSerifです。フォントを濃い赤にしました。

ドットでさえ、フォントの選択によって形が変わります。これは24ポイントのパッションワンです。フォント、色、サイズを試して、ユニークなものを作成することは価値があります。標準のスタイリングコントロールで簡単に行えます。

エクストラでDiviブレッドクラムモジュールを使用する

Divi Breadcrumbs Moduleは、ExtraおよびDiviBuilderプラグインで動作します。右の画像の下にパンくずリストが付いたExtraを見てみましょう。ブレッドクラムが画面上部のタイトルから遠く離れているため、投稿の名前を含めました。バー区切り文字を使用します。

理想的には、パンくずリストはページの上部にあります。私のページレイアウトでは、ブレッドクラムモジュールが上部にあります。画像の下に表示される理由は、Extraが注目の画像を表示できるようにしているためです。

この例では、画像をレイアウト内に配置し、セクションの上部のパディングが0になるように設定しました。現在のポストを削除し、セパレーターを赤にしました。

ライセンス、アップデート、サポート

プラグインはあなたとあなたのクライアントのために無制限のウェブサイトにインストールすることができます。アップデートは一生のものです。 6か月のサポートが含まれます。

購入するには、ここをクリックしてください：Divi Breadcrumbs Module

最終的な考え

ブレッドクラムは、不足しているときに気付く小さなことの1つです。正しく設計されていれば、ユーザーが必要なときにそこにいて、必要がないときは邪魔にならないようにします。 Divi Breadcrumbs Moduleは、それらをDiviページや投稿に追加するための優れた方法であり、サイトのブランドに合わせて簡単にスタイルを設定できます。シンプルで直感的です。

Diviレイアウトにブレッドクラムを追加することに興味がある場合は、Divi BreadcrumbsModuleが必要なプラグインである可能性があります。

ご連絡をお待ちしております！ Divi Breadcrumbs Moduleを試しましたか？ 以下のコメントであなたの経験について教えてください。

Yevgenij_D /shutterstock.com経由の注目の画像