Divi で投稿間に固定されたナビゲーション バーを作成したいですか?
スティッキーな投稿ナビゲーション バーは、ユーザー エクスペリエンスを向上させる効果的な方法です。 サイトのWeb ブログの。 サイトのメイン ナビゲーションに加えて、投稿ナビゲーション リンクを使用すると、ユーザーは前の投稿または次の投稿に簡単にジャンプできます。 ブログ。 また、これらの投稿ナビゲーション リンクをスティッキー バーに追加すると、これらのリンクは表示されたままになり、アクセスしやすくなります。
このチュートリアルでは、ポスト スティッキーの間にナビゲーション バーを作成します。 Divi。 これを行うには、Divi の組み込みオプションを使用して行をスティッキー バーに変換します。 次に、記事ナビゲーション モジュールを使用して、「前の記事」と「次の記事」のリンクをデザインします。
さらに、バーの中央に動的コンテンツとして投稿タイトルを追加し、ユーザーが現在表示している投稿を思い出させ、ナビゲーション バーに「過去、現在、未来」の要素を与えます。
始めましょう！
概要
このチュートリアルで作成するデザインを簡単に見てみましょう。
始めるために必要なもの
この粘着性のある投稿ナビゲーション バーは、Divi の任意のブログ投稿レイアウトまたはテンプレートに追加できますが、事前に作成されたブログ投稿テンプレートを使用して、プロセスを高速化し、デザインをすばやく開始します.
「食事キット」ブログ投稿テンプレートを Divi Theme Builder にインポートします
開始するには、 Divi のミール キット レイアウト パックの無料ブログ投稿テンプレート . これを行うには、に移動します ブログ投稿 .
次に、電子メールを入力して zip ファイルをダウンロードします。
その後、ファイルを解凍してインポートできるようにします。
ファイルをテーマ エディターにインポートするには、次の手順に従います。
- Divi>ThemeBuilderに移動します。
- ポータビリティ アイコンをクリックします。
- 移植性ポップアップ ウィンドウで、インポート タブを選択します。
- 以前にダウンロードした解凍済みファイルを選択してインポートします。
- 上をクリックします « Diviテーマビルダーをインポート テンプレート ».
- 編集アイコンをクリックして、インポートしたテンプレートを編集します。
Divi でスティッキー ナビゲーション バーを作成する
パート 1: スティッキー ラインの作成
固定ナビゲーション バーを作成するには、投稿と投稿タイトルの間のナビゲーション リンクの固定コンテナーとして XNUMX 列の行を使用します。
テンプレート レイアウトの XNUMX 番目のセクションで、投稿コンテンツを含む行の下に新しい行を追加します。
ライン設定
回線設定を開きます。
まず、スティッキー状態で他のデザイン オプションを更新できるように、ラインにスティッキー位置を追加する必要があります。
タブの下 高機能、次を更新します。
- 貼り付ける位置: 上下に貼り付ける
- スティッキー リミットの上限: セクション
- ボトム スティッキー リミット: ボディ エリア
モバイルで列が重ならないようにするには、次のカスタム CSS を 主な要素 :
display:flex;
flex-wrap:nowrap;
align-items:center;
タブの下 コンテンツ、スティッキー状態のラインに次のように白い背景色を追加します。
- 背景：なし
- 背景: #ffffff (スティッキー)
設定中 設計、次を更新します。
- カスタムガター幅を使用：はい
- ガター幅: 1
- 幅: 100%
- 最大幅：100％
- パディング: 0px(上下)
タブレットとスマートフォンで中央の列を非表示にする
モバイルで列を非表示にするには、列 2 (中央の列) の設定を開き、表示オプションを次のように更新します。
- 無効にする: 電話、タブレット
パート 2: 記事のナビゲーション リンクを作成する
投稿ナビゲーションのデザインの柔軟性を高めるために、XNUMX つの個別の投稿ナビゲーション モジュールを使用します。 左の列に、前の記事のリンクのみを表示する投稿ナビゲーション モジュールを追加します。 右側の列に、次の投稿リンクのみを表示する投稿ナビゲーション モジュールを追加します。
前の投稿へのリンク
列 1 に、新しい投稿ナビゲーション モジュールを追加します。
モジュール設定を開き、オプションタブを更新します コンテンツ 次のように ：
- 前のリンク (テキスト): 前の投稿
- 前の投稿のリンクを表示: はい
- 次の投稿リンクを表示: いいえ
- 背景: #000000
タブの下 設計、次を更新します。
- リンクのフォント: Kumbh Sans
- リンクのフォントの太さ: 太字
- フォント スタイル: TT
- リンクのテキストの色: #ffffff
- リンクのテキスト サイズ: 26px (デスクトップ)、16px (タブレットとスマートフォン)
- 行の高さ: 1,3 em
- パディング: 0,9em(上)、0,7em(下)、2em(左右)
モバイルでは中央の列を非表示にしているため、ナビゲーション リンクを含む残りの 50 つの列は、タブレットと電話でそれぞれブラウザーの幅の XNUMX% を占めることができます。
ナビゲーション リンクがビューポートの 50% を占めるようにするには、次のカスタム CSS をタブレット表示用の [リンク CSS] ボックスに追加します。
display:block;
width:50vw;
text-align:center;
float:none;
次の投稿リンクの作成
次の投稿へのリンクを作成するには、先ほど設計した投稿ナビゲーション モジュール (前の投稿リンクを含む) をコピーして、列 3 (右の列) に貼り付けます。
次に、右側の列で複製モジュールの投稿ナビゲーション設定を開き、次のコンテンツ タブ オプションを更新します。
- 次のリンク: 次の投稿
- 前の投稿のリンクを表示: いいえ
- 次の投稿リンクを表示: はい
- 背景: #ffb100
タブの下 設計、リンク テキストの色を更新します。
- リンクテキストの色: #000000
パート 3: 動的投稿タイトルの作成
両方のナビゲーション リンクを配置したら、投稿のタイトルを動的コンテンツとして中央の列に追加する準備が整いました。
前のメッセージと次のメッセージにナビゲートする機能を使用して、ユーザーが読んでいるメッセージを思い出させるのが目的です。
中央の列に、新しい Text モジュールを追加します。
タブの下 コンテンツ、アイコンをクリックします 「動的コンテンツを使用する」 ボディエリアで、次に選択します 投稿/アーカイブのタイトル.
動的投稿タイトルが追加されたら、設定を開きます 投稿/アーカイブのタイトル 次の前にコンテンツを更新します。
- 読む前に
次に、変更を保存します。
タブの下 設計、次を更新します。
- テキストのフォント: Kumbh Sans
- テキストのフォントの太さ: 太字
- フォントスタイル：TT
- テキスト テキストの色: 透明 (デスクトップ)、#000000 (スティッキー)
- テキストサイズ: 16px
- 文字間隔: 1px
- 行の高さ: 1,3 em
- テキストの配置: 中央揃え
- 最大幅：96％
- アライメントモジュール：センター
- パディング: 0,5em (上下)
最終結果
今すぐDIVIをダウンロードしてください!!!
まとめ
このチュートリアルでは、Divi でブログ投稿テンプレート用の固定投稿ナビゲーション バーを簡単に作成できることを示しました。
バー/ライン スティッキー機能も、Divi の組み込みオプションを使用して簡単に調整できます。 たとえば、スティッキー状態を特定のセクションに限定したり、ブラウザ ビューポートの上部または下部のみにスティッキーを設定したりできます。
これがあなたの次のブログ サイトに役立つことを願っています。 ご不明な点やご提案がございましたら、 コメントセクション それを議論する。
相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合。
また、私たちのガイドを参照することを躊躇しないでください WordPressブログ作成 または Divi：史上最高のWordPressテーマ.
しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.
...
