Diviのフルスクリーンメニューモジュールを使用してグローバルヘッダーを作成しますか？
ヘッダーは、最も重要な要素の XNUMX つです。 サイトのWeb の中心にあり、 ユーザーエクスペリエンス. ナビゲーション メニューにより、ユーザーは、 サイトのWeb 必要な情報を見つけるのに役立ちます。
さらに、セカンダリ メニュー バーは、行動喚起や プロモート 提案。 ヘッダーがあなたのファイルの最も重要な部分の XNUMX つであることは言うまでもありません。 サイトのWeb、通常はすべてのページに表示されるためです。 これは、ブランディングを紹介し、Web サイトの他の部分のデザインと一貫性のあるヘッダーを作成する絶好の機会です。
Diviのテーマビルダーオプションを使用すると、カスタムグローバルヘッダーを作成し、Webサイト全体でヘッダーおよびメニューモジュールの外観をカスタマイズできます。
このチュートリアルでは、Diviのフルスクリーンメニューモジュールを使用してグローバルヘッダーを作成する方法を紹介します。
のは、始めましょう！
概要
これが、設計するグローバルヘッダーのプレビューです。
テーマビルダーを開く
この例ではグローバルヘッダーを作成しているので、WordPressDiviメニューにある「ThemeBuilder」に移動しましょう。 [グローバルヘッダーの追加]を選択してから、[グローバルヘッダーの作成]を選択します。
セカンダリメニューバーを作成します
グローバルヘッダーレイアウトを最初に開くと、通常のセクションがプリロードされています。 これをセカンダリメニューバーに変更します。このメニューバーは、全幅メニューの上にあり、召喚状のテキストとボタンが含まれています。
まず、セクション設定を開き、背景色を追加します。
- 背景：＃92A8A1
次に、セクションマージン。
- 内側マージン頂点：0px
- 下部内部マージン：0px
次に、行を挿入します。 この例では、以下に示すレイアウトを使用します。
行設定の[スタイル]タブの[サイズ設定]で、列の高さを調整します。
- カラムの高さを調和させる：はい
次に、上マージンと下マージンを次のように設定します。
- トップインナーマージン：5px
- 下部内側マージン：5px
セカンダリヘッダー要素を垂直方向に配置する必要があるため、メイン行要素にカスタムCSSを追加します。
1.
align-items:center;
これでラインが構成されたので、次はモジュールを挿入できます。 コンテンツ。 まず左側にテキストモジュールを挿入します。
を変更します コンテンツ テキストの。 ここは行動喚起や次のメッセージを含めるのに最適な場所です。 プロモート 提案。
- テキスト：「私たちのメーリングリストに参加して、ご注文の10％オフを受け取りましょう！」 »»
テキストモジュールの[スタイル]タブにアクセスし、次のようにパラメータを変更します。
- フォント「テキスト」：ポピン
- 「テキスト」薄暗いライト：中
- 「テキスト」のテキストの色：#FFFFFF
次に、右側にボタンモジュールを追加します。
ボタンのテキストを追加します。
- テキスト：「無料見積もりを取得」
[スタイル]タブで、ボタンを中央に揃えます。
- ボタンの配置：中央
次に、ボタンの外観をカスタマイズしましょう。
- 「ボタン」にカスタムスタイルを使用する：はい
- ボタンのテキストサイズ：14px
- ボタンのテキストの色：#FFFFFF
- 背景ボタン：＃2F5349
- ボタンの境界線の幅：0px
- ボーダー半径ボタン：50px
- ボタンの文字間隔：1px
- ボタンフォント：ポピン
フルスクリーンメニューモジュールを追加する
セカンダリメニューが設計されたので、メインメニューに移動できます。 フルスクリーンメニューモジュールを使用してメニューを作成します。 グローバルヘッダーに新しいフルスクリーンセクションを追加します。
フルスクリーンメニューモジュールを選択して挿入します
次に、フルスクリーンメニューの設定をカスタマイズします。
- アクティブリンクの色：＃2F5349
- フォントメニュー：ポピン
- 薄暗いライトメニュー：セミボールド
- コピースタイルメニュー：TT
- メニューテキストの色：＃000000
- ホバーメニューのテキストの色：＃2F5349
- メニューテキストサイズ：15px
- メニューの文字間隔：2px
ハンバーガーメニューのアイコンの色を黒に変更します。
- ハンバーガーメニューアイコンの色：＃000000
メニューにロゴを追加する前に、サイズ設定オプションを変更しましょう。 Diviの組み込みのレスポンシブオプションを使用して、PCとモバイルで異なる最大高さを設定します。
- PCの最大ロゴ高さ：3vw
- モバイルでの最大ロゴの高さ：6vw
次に、フルスクリーンメニューにロゴを追加します。
最後に、ユーザーがWebサイトをスクロールしたときにメインメニューを画面の上部に残したいので、これにはDiviの組み込みのスティッキースティッキー設定を使用します。
- スティッキーポジション：上にスティック
これで、グローバルヘッダーの設計が完了しました。
事前定義されたレイアウトで新しいページを作成します
全幅のヘッダーとメニューの動作を確認するために、Diviライブラリから事前定義されたレイアウトで新しいページを作成しましょう。 この例では、パッケージのフローリングホームページを使用します フロアレイアウト.
Webサイトに新しいページを追加してタイトルを付け、[DiviBuilderを使用する]オプションを選択します。
この例では、Diviライブラリから作成済みのレイアウトを使用しているため、[レイアウトの選択]を選択します。
「フローリングホームページ」レイアウトを見つけて選択します。
「レイアウトの選択」を選択して、ページにレイアウトを追加します。
これでデザインが完成しました！
最終結果
まとめ
上で述べたように、ヘッダーとナビゲーションメニューは、Webサイトのユーザーエクスペリエンスの中心です。 これで、Diviの「フルスクリーンメニュー」モジュールを使用して、見事な全体的なヘッダーを設計することがいかに簡単であるかがわかりました。
幸い、Diviのテーマビルダーを使用すると、Webサイトのメニューとヘッダーのあらゆる側面を制御でき、数回クリックするだけで完全にカスタムでユニークなデザインを作成できます。
Diviのグローバルヘッダーオプションを使用して、ヘッダーとナビゲーションメニューをカスタマイズしましたか？ コメントであなたの考えを教えてください！
