Divi でページの下から上まで固定されるナビゲーション バーを作成したいですか?
チュートリアルでは Divi 今日は、Divi で下から上へ固定されたナビゲーション バーを作成する方法を段階的に説明します。
これにより、最初はナビゲーション バーをページの下部にとどめ、スクロールせずに見える位置に独自のレイアウトを作成できます。 次に、ページ フォールドの上のセクションをスクロールすると、ナビゲーション バーはページの上部に残り、ページ全体に表示されます。
このページは画面下部のメニューを「引き継ぐ」ものであり、メイン メニューと サイトのWeb.
始めましょう！
概要
達成しようとしている結果を視覚化するのに役立つように、最終結果を見てみましょう。
今すぐDIVIをダウンロードしてください!!!
Divi Builderで新しいページを作成することから始めましょう
開始するには、次のことを行う必要があります。
WordPress ダッシュボードから、 ページ>新規追加 新しいページを作成します。
わかりやすいタイトルをつけてクリック DiviBuilderを使用する
その後、クリック 構築を開始 (ゼロから構築)
その後、Diviでデザインを開始するための空白のキャンバスが作成されます。
Diviで粘着性のある下から上へのナビゲーションバーを作成する
パート 1: 水線の上にセクションとヘッダーを作成する
このチュートリアルの最初の部分では、ページのメイン ヘッダー セクションとして機能するセクションとヘッダーをフォールドの上に作成します。 セクションはデスクトップ上で全画面表示になり、セクションが表示ウィンドウ全体を占めるようになります。
また読みます： ディビ: Filterable Portfolio モジュールのグリッドと全幅レイアウトのどちらかを選択します
行を追加する
開始するには、デフォルトセクションの列に行を追加します。
セクション設定
モジュールを追加する前に、セクション設定を開き、次のように背景を追加します。
- 背景色: #e9f9ff
- 背景画像: [画像を追加]
タブの下 設計、最小の高さとパディングを更新します。
- 最小高さ: 100vh (デスクトップ)、自動 (タブレットと電話)
- パディング: 20vh (上下)
ヘッダーテキスト
ヘッダー テキストを作成するには、新しい Text モジュールを行に追加します。
次に、更新します コンテンツ 次の H1 ヘッダーを使用します。
<h1>Above the Fold</h1>
テキスト設定
タブの下 設計 Text モジュールの設定で、ヘッダーのフォント スタイルを次のように更新します。
- 見出し：
- フォント: ルビー
- フォントの太さ: セミボールド
- スタイル: TT
- テキストの配置: 中央揃え
- テキストの色: #302ea7
- サイズ: 130px (デスクトップ)、70px (タブレット)、40px (スマートフォン)
- 文字間隔: 2px
- 行の高さ: 1,3 em
パート 2: 水線より下のセクションを作成する
スティッキー ナビゲーションバーの機能を示すために、スクロールするスペースを確保できるように、折りたたみの下にセクションを追加する必要があります。
セクションを作成するには、作成した折り目の上のセクションを複製します。
重複するセクションの背景を更新します。
- 背景色: #f4def1
次に、ページを下にスクロールする余地を確保できるように、セクションの最小高さを大きく設定します。 これは単に、 コンテンツ 本当のXNUMXページ。
- 最小高さ：200vh
次に、更新します コンテンツ 単語を置き換えて Text モジュールの "下" パー "その上".
パート3：スティッキーナビゲーションバーを作成する
下から上にスティッキーナビゲーションバーを作成するための最初のステップは、XNUMX行からXNUMX列の新しいセクションを作成することです。
新しいセクションとラインを追加
まず、スクロールせずに上のセクションのすぐ下に新しい通常のセクションを追加しましょう。
次に、セクションに XNUMX 列の行を追加しましょう。
セクションの背景とパディング
セクション設定を開き、背景色を更新します。
- 背景色: #302ea7
次に、上部と下部のパディングを削除して、ナビゲーション バーの高さを減らします。
- パディング: 0px (上下)
目に見えるオーバーフローを追加
ドロップダウンメニューが引き続き表示されるようにするには、表示オプションを次のように更新します。
- 水平オーバーフロー: 可視
- 垂直オーバーフロー: 可視
セクションにモバイルでの絶対的な位置を与える
モバイル ドロップダウン メニューは、デフォルトでハンバーガー アイコンの下に開きます。 ナビゲーション バーを一番下に置いておくと、ユーザーがドロップダウン メニューをクリックすると、ドロップダウン メニューが非表示になります。
ユーザー エクスペリエンスを向上させるために、タブレットと電話の画面のページの最上部からナビゲーション バーを開始する必要があります。
このために、セクションにタブレットと電話の絶対位置を与えます。
- 位置: 相対 (デスクトップ)、絶対 (タブレットと電話)
デスクトップとモバイルのスティッキー位置を追加
固定位置をナビゲーション バー セクションに追加するには、以下を更新します。
- 固定位置: 上下に固定 (デスクトップ)、上に固定 (タブレットとスマートフォン)
行のパディングを更新する
スティッキー セクションが完成したら、セクション内の行設定を開き、次のようにパディングを更新します。
- パディング: 10px (上下)
ナビゲーションメニューを作成する
セクションとラインを配置したら、ナビゲーション メニューを作成する準備が整いました。
まず、メニュー モジュールを XNUMX 列の行に追加します。
メニューの内容
メニューの内容を次のように更新します。
- ドロップダウン リストからメニューを選択します
- ロゴ画像を追加
- デフォルトの背景色を削除
タブの下 設計で、次のメニュー テキストとアイコン設定を更新します。
- アクティブなリンクの色: #fff
- メニューフォント：ルビー
- メニューのフォント スタイル: TT
- 文字色：#fff
- メニューのテキストサイズ: 16px
- テキストの配置: 右
- ドロップダウン メニューの線の色: #e19dff
- モバイル メニューのテキストの色: #302ea7
- ショッピングカートのアイコンの色: #fff
- 検索アイコンの色: #fff
- ハンバーガー メニュー アイコンの色: #fff
境界線を使用して、モバイルのナビゲーションバーの絶対位置をオフセットする
ナビゲーション バー セクションはモバイルでは絶対的な位置にあるため、バーはページの上部セクションの上に配置されます (切り取られます)。 これを修正するには、ナビゲーション バー/セクションと同じ高さの上部境界線を使用して上部セクションをオフセットする必要があります。
モバイルのナビゲーションバーセクションの高さを検査します
モバイルでナビゲーション バーの高さを決定するには、ページのライブ バージョンを新しいブラウザー ウィンドウで開きます。 次に、ブラウザーの幅を 980px 未満に縮小して、モバイル メニューを表示します。
相談することもできます： Divi: スティッキー ナビゲーション バーの作成方法
メニューを含むセクションを右クリックし、オプションを選択します 要素を検査する ブラウザのコンテキスト メニューでボックスが表示されるはずです ツール セクションの寸法 (高さを含む) を示すセクションの下。
この例では、ナビゲーション バー セクションの高さは 72 ピクセルです。
折り目の上のセクションに上部境界オフセットを追加します
セクションの高さを決定したので、上部セクション（折り目の上）の設定を開きます。
タブの下 設計、タブレットと電話に次の上部境界線を追加します。
- 上枠の幅: 72 ピクセル (タブレットとスマートフォン)
- トップボーダーカラー: #302ea7
境界線は絶対位置のセクションと同じ高さなので、セクションを押し下げてカットされないようにするだけの役割を果たしているため、境界線は見えません。
最終結果
最終結果を発見してください！
今すぐDIVIをダウンロードしてください!!!
まとめ
下から上へのスティッキー ナビゲーション バーの作成は、Divi の組み込みの位置と 付箋オプション.
重要なのは、折り目の上のセクションの高さを 100vh にし、その下にナビゲーション バー セクションを追加して、ブラウザーの下部と上部に固定することです。 これが、よりユニークで魅力的なスクロールせずに見える範囲をあなたのコンテンツに追加するのに役立つことを願っています サイトのWeb.
この粘着性のあるナビゲーション バーは、全体的なテンプレートではなく、XNUMX つのページのデザインに最適です。 とはいえ、これをホームページのデザインとして使用することを簡単に選択し、残りのページにグローバルヘッダーを使用することができます. ディビテーマジェネレーター .
このチュートリアルがあなたの次のDiviプロジェクトに刺激を与えることを願っています。 懸念や提案がある場合は、 コメントセクション それを議論する。
相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合。
また、私たちのガイドを参照することを躊躇しないでください WordPressブログ作成 または Divi：史上最高のWordPressテーマ.
しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.
...