Diviで下から上にスティッキーナビゲーションバーを作成する方法

今日のDiviチュートリアルでは、Diviでスティッキーナビゲーションバーを下から上に作成する方法を段階的に説明します。 これにより、ナビゲーションバーが最初はページの下部に固定され、独自の折り畳み上レイアウトが実現します。 次に、ページの折り畳み上のセクションを超えてスクロールすると、ナビゲーションバーがページの上部に固定され、ページの残りの部分全体に表示されたままになります。 このページは画面の下部にあるメニューを「ピックアップ」し、メインメニューとWebサイトに優れた相互作用効果をもたらすと言えます。

始めましょう！

スニークピーク

私たちが達成しようとしている結果を視覚化するのに役立つように、最終結果を見てみましょう。

レイアウトを無料でダウンロード

このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

セクションレイアウトをDiviライブラリにインポートするには、Diviライブラリに移動します。

[インポート]ボタンをクリックします。

移植性ポップアップで、[インポート]タブを選択し、コンピューターからダウンロードファイルを選択します。

次に、インポートボタンをクリックします。

完了すると、セクションレイアウトがDiviBuilderで使用できるようになります。

チュートリアルに取り掛かりましょう。

始めるために必要なもの

開始するには、次のことを行う必要があります。

1. まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
2. WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
3. 「最初から構築」オプションを選択します。

その後、Diviでデザインを開始するための空白のキャンバスが作成されます。

Diviで下から上にスティッキーナビゲーションバーを作成する

パート1：折り畳み上のセクションと見出しの作成

このチュートリアルの最初の部分では、ページのメインヘッダーセクションとして機能する、折り畳み上のセクションと見出しを作成します。 セクションがビューポート全体を占めるようにするために、セクションはデスクトップ上でフルスクリーンになります。

行を追加する

まず、デフォルトのセクションに1列の行を追加します。

セクション設定

モジュールを追加する前に、セクションの設定を開き、次のように背景を追加します。

• 背景色：＃e9f9ff
• 背景画像：[画像を追加]

[デザイン]タブで、最小の高さとパディングを更新します。

• 最小の高さ：100vh（デスクトップ）、自動（タブレットと電話）
• パディング：上20vh、下20vh

見出しテキスト

見出しテキストを作成するには、行に新しいテキストモジュールを追加します。

次に、次のH1見出しでコンテンツを更新します。

<h1>Above the Fold</h1>

テキスト設定

テキスト設定の[デザイン]タブで、見出しのフォントスタイルを次のように更新します。

• 見出しフォント：ルービック
• 見出しフォントの太さ：半太字
• 見出しフォントスタイルTT
• 見出しテキストの配置：中央
• 見出しのテキストの色：＃302ea7
• 見出しのテキストサイズ：130px（デスクトップ）、70px（タブレット）、40px（電話）
• 見出し文字の間隔：2px
• 見出し線の高さ：1.3em

パート2：折り畳み下のセクションの作成

スティッキーナビゲーションバーの機能を示すために、スクロールする余地があるように、折り畳み下のセクションを追加する必要があります。

セクションを作成するには、作成した折り畳み上のセクションを複製します。

重複するセクションの背景を更新します。

• 背景色：＃f4def1

次に、ページを下にスクロールする余地があるように、セクションに大きな最小の高さを指定します。 これは、ページの実際のコンテンツの代わりの単なる入力セクションです。

• 最小高さ：200vh

次に、「Below」という単語を「Above」に置き換えて、テキストモジュールのコンテンツを更新します。

パート3：スティッキーナビゲーションバーの作成

スティッキーナビゲーションバーを下から上に作成するための最初のステップは、1列の行を持つ新しいセクションを作成することです。

新しいセクションと行を追加する

折り畳み上のセクションのすぐ下に新しい通常のセクションを追加します。

次に、セクションに1列の行を追加します。

セクションの背景とパディング

セクション設定を開き、背景色を更新します。

• 背景色：＃302ea7

次に、ナビゲーションバーの高さが低くなるように、上部と下部のパディングを取り外します。

• パディング：0px上、0px下

目に見えるオーバーフローを追加する

ドロップダウンメニューが引き続き表示されるようにするには、表示オプションを次のように更新します。

• 水平方向のオーバーフロー：目に見える
• 垂直オーバーフロー：目に見える

セクションにモバイルで絶対的な位置を与える

デフォルトでは、モバイルドロップダウンメニューがハンバーガーアイコンの下に開きます。 ナビゲーションバーを下部に置いたままにすると、ユーザーが下部の位置でクリックすると、ドロップダウンメニューが非表示になります。 ユーザーエクスペリエンスを向上させるために、タブレットと電話のディスプレイのページの最上部からナビゲーションバーを開始する必要があります。

これを行うには、タブレットと電話でセクションに絶対位置を指定します。

• 位置：相対（デスクトップ）、絶対（タブレットと電話）

デスクトップとモバイルのスティッキーポジションを追加

スティッキー位置をナビゲーションバーセクションに追加するには、以下を更新します。

• スティッキーポジション：上下に固定（デスクトップ）、上部に固定（タブレットと電話）

行のパディングを更新する

スティッキーセクションが完成したら、セクション内の行の設定を開き、次のようにパディングを更新します。

• パディング：上10px、下10px

ナビゲーションメニューの作成

セクションと行が配置されたら、ナビゲーションメニューを作成する準備が整いました。

メニューモジュールを1列の行に追加することから始めます。

メニューの内容

メニューの内容を次のように更新します。

• ドロップダウンからメニューを選択します
• ロゴ画像を追加します（122px x 52pxの画像を使用しています）
• デフォルトの背景色を取り出します

[デザイン]タブで、次のメニューテキストとアイコン設定を更新します。

• アクティブリンクの色：#fff
• メニューフォント：ルービック
• メニューフォントスタイル：TT
• メニューテキストの色：#fff
• メニューテキストサイズ：16px
• テキストの配置：右
• ドロップダウンメニューの線の色：＃e19dff
• モバイルメニューのテキストの色：＃302ea7
• ショッピングカートのアイコンの色：#fff
• 検索アイコンの色：#fff
• ハンバーガーメニューアイコンの色：#fff

境界線を使用してモバイルのナビゲーションバーの絶対位置をオフセットする

ナビゲーションバーセクションはモバイルでは絶対的な位置にあるため、バーはページの上部セクションの上に配置されます（そして切り取られます）。 これを修正するには、ナビゲーションバー/セクションと同じ高さの上部境界線を使用して上部セクションをオフセットする必要があります。

モバイルのナビゲーションバーセクションの高さを調べる

モバイルでナビゲーションバーの高さを確認するには、新しいブラウザウィンドウでページのライブバージョンを開きます。 次に、ブラウザの幅を980px未満に縮小して、モバイルメニューを表示できます。 メニューを含むセクションを右クリックし、ブラウザの右クリックメニューから[要素の検査]オプションを選択します。 セクションの下に、セクションの寸法（高さを含む）を示すツールボックスが表示されます。 この例では、ナビゲーションバーセクションの高さは72pxです。

折り畳み上セクションに上部境界オフセットを追加

セクションの高さを決定したので、上部（折り畳み上）セクションの設定を開きます。

[デザイン]タブで、タブレットと携帯電話に次の上部の境界線を追加します。

• 上部の境界線の幅：72px（タブレットと電話）
• トップボーダーカラー：＃302ea7

境界線は絶対位置のセクションと同じ高さであるため、セクションが途切れないように押し下げるだけなので、境界線は表示されません。

最終結果

最終結果をチェックしてください！

最終的な考え

スティッキーナビゲーションバーを下から上に作成するには、Diviの組み込みの位置とスティッキーオプションを使用することで簡単に実行できます。 重要なのは、折り畳み上のセクションの高さを100vhにしてから、ブラウザの下部と上部に固定されるナビゲーションバーセクションを下に追加することです。 うまくいけば、これはあなたのウェブサイトにもっとユニークで魅力的な折り畳みを追加するのに役立つでしょう。

このスティッキーナビゲーションバーは、グローバルテンプレートではなく、単一ページのデザインに最適です。 とはいえ、これをホームページデザインとして使用し、Diviテーマビルダーを使用して残りのページにグローバルヘッダーを使用することを簡単に選択できます。

コメントでお返事をお待ちしております。

乾杯！