グローバル ヘッダーを作成するときは、考慮しなければならないことがたくさんあります。 ヘッダーに入れる要素は、 訪問者 簡単にナビゲートできます。 ユーザーがブラウジングに費やす時間を短縮するために、多くの Web デザイナーは上部ヘッダーを固定することを選択します。 訪問者 他のページや出版物にすぐにアクセスできます。 これは非常に便利ですが、固定ヘッダーを作成する場合、ビューポートの高さのほとんどが 訪問者 ビジーのため、許容できる量が少なくなります コンテンツ 一気に表示します。 この犠牲を払う準備ができていない場合は、その必要はないことを知ってください。 訪問者が上にスクロールするとヘッダー全体が表示され、下にスクロールするとヘッダー全体が非表示になるようにすることで、固定ヘッダーの利点を得ることができます。 今日は、Divi のテーマ ビルダーを使用してグローバル ヘッダーを非表示にしたり表示したりする方法を説明します。

概要

チュートリアルに入る前に、さまざまな画面サイズでの結果を見てみましょう。

1. Divi Theme Builderに移動して、新しいテンプレートを追加します

Divi Theme Builderにアクセスして開始します。

グローバルヘッダーの作成を開始

そこで、「グローバルヘッダーの追加」をクリックし、「グローバルヘッダーの作成」を選択します。

2.グローバルヘッダーの作成を開始します

セクション設定

背景色

テンプレートエディタ内に、セクションがあります。 このセクションを開き、背景色を変更します。

• 背景色：#ffffff

サイズ剤

[デザイン]タブに移動し、次のセクションに100％の幅を割り当てます。

• 幅：100％

スペーシング

また、カスタムの上部と下部のパディングを追加します。

• 上部パディング：2vw
• 下部のパディング：2vw

シャドーボックス

また、セクションに微妙な色合いを適用します。

• ボックスシャドウブラー強度：50ピクセル
• 影の色：rgba（0,0,0,0,08）

CSS ID

このチュートリアルの後半で、スクロール効果を発生させるためのカスタムコードが必要になります。 これに備えるために、CSSIDをセクションに追加します。

• CSS ID：グローバルヘッダーセクション

主な要素

また、セクションのメイン要素にXNUMX行のCSSコードを追加して、セクションを固定ヘッダーにします。

position: fixed;top: 0;

Zインデックス

ここで、セクションがページの上部に表示されることを確認するか、 コンテンツ この投稿では、可視性設定で Z インデックスも増やします。

• Zインデックス：99999

新しい行を追加

カラム構造

すべてのセクションパラメーターを終了したら、次の列構造を使用してセクションに新しい行を追加し続けます。

サイズ剤

モジュールをまだ追加せずに、行の設定を開き、行が画面の幅全体に表示されるようにします。

• カスタムのガター幅を使用：はい
• 側溝幅：1
• 列の高さの均等化：はい
• 幅：100％
• 最大幅：100％

スペーシング

また、デフォルトの上下のパディングをすべて削除します。

• 上部パディング：0px
• 下部のパディング：0px

主な要素

中央に配置 コンテンツ 行のメイン要素に XNUMX 行の CSS コードを追加することで、より小さい画面サイズでも列を並べて維持できるようになります。

display: flex;align-items: center;

ソーシャルメディアトラッキングモジュールを列2に追加します

ソーシャルネットワークを追加する

列1のソーシャルメディア追跡モジュールから始めて、モジュールを追加します。表示するソーシャルネットワークを追加します。

個々のソーシャルメディアスタイルをリセットする

各ソーシャルネットワークのスタイルを個々のレベルにリセットして続行します。

個々のソーシャルネットワークスペースを追加する

また、各ソーシャルネットワークの設定を個別に開き、間隔の設定に下部のパディングを追加する必要があります。

• 下部のパディング：0.5vw

Alignement

各ソーシャルネットワークに下部のパディングを個別に追加したら、modの一般設定に戻ります。 [デザイン]タブに切り替えて、モジュールの配置を変更します。

• モジュールの配置：中央

デフォルトのアイコン設定

また、アイコン設定でアイコンの色を変更します。

• アイコンの色：＃000000

ホバーアイコンの設定

そして、ホバーアイコンの色を変更します。

• アイコンの色：＃c2ab92

ボーダー

境界線パラメーターの下側の境界線を追加して、モジュールパラメーターを完成させます。

• 下罫線の幅：1px
• 下の境界線の色：＃000000

列2にメニューモジュールを追加する

メニューを選択

次のコラムに移りましょう！ メニューモジュールを追加し、お好みのメニューを選択します。

ロゴをダウンロードする

次に、モジュールにロゴをアップロードします。

背景色を削除します

そして、背景色を削除します。

配置

次に、[デザイン]タブに切り替えて、次の設定がレイアウトに適用されることを確認します。

• スタイル：中央揃え
• ドロップダウンメニューの方向：下

デフォルトのメニューテキスト

次のようにメニューテキスト設定を変更して続行します。

• アクティブなリンクの色：＃c2ab92
• メニューフォント：Cor Garamond
• テキストの色：＃000000
• メニューのテキストサイズ：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）

ホバーメニューテキスト

ホバーでメニューテキストを変更します。

• メニューテキストの色：＃c2ab92

ドロップダウンメニュー

次に、ドロップダウンメニューの設定でドロップダウンメニューの線の色を変更します。

• ドロップダウンメニューの行の色：＃000000

アイコン

また、アイコン設定でハンバーガーメニューアイコンの色を変更しています。

• ハンバーガーメニューアイコンの色：＃000000

サイズ剤

サイズ設定でさまざまな画面サイズの最大ロゴ幅を変更して続行します。

• 最大ロゴ幅：5vw（デスク）、10vw（タブレット）、13vw（電話）

CSSリンクメニュー

そして、[詳細設定]タブのモジュールメニューリンクにXNUMX行のCSSコードを追加して、モジュール設定を完了します。

padding-bottom: 1vw;border-bottom: 1px solid #000;

3列にテキストモジュールを追加します

コピーを追加

最後のモジュールに移りましょう！ 必要なモジュールはテキストモジュールだけです。

リンクを追加

このモジュールはCTAとして機能します。 選択したリンクを追加します。

• モジュールリンクURL：＃

デフォルトのテキスト設定

モジュールデザインタブに切り替え、それに応じてテキスト設定を変更します。

• テキストフォント：mor Garamond
• テキストの色：＃000000
• テキストサイズ：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）

ホバーテキスト設定

ホバー時のテキストの色を変更します。

• テキストの色：＃c2ab92

サイズ剤

さまざまな画面サイズでモジュールサイズ設定パラメータを変更して続行します。

• 幅：12vw（デスクトップ）、18vw（タブレット）、22vw（電話）
• モジュールの配置：中央

スペーシング

そして、間隔設定にいくつかの下部パディングを追加します。

• 下部のパディング：0.5vw

ボーダー

下の境界線を追加して、モジュールパラメータを完成させます。

• 下罫線の幅：1px
• 下の境界線の色：＃000000

2列にコードモジュールを追加する

JQueryとCSSコードを挿入する

行内のすべてのmodのスタイルを設定したら、表示/非表示効果を発生させます。 これを行うには、列2に配置するコードモジュールにカスタムコードを追加する必要があります。このコードは、ヘッダーやモジュールの設計方法に関係なく、追加するすべてのセクションで機能します。使用している場合は、CSSIDをセクションに追加したことを確認してください。 以下の印刷画面に示すように、スクリプトタグの間にJQueryコードを配置し、スタイルタグの間にCSSコードを配置します。

jQuery(function($){ var topPosition = $(window).scrollTop(); $(window).scroll(function() {var scrollMovement = $(window).scrollTop();if(scrollMovement > topPosition) {$('#global-header-section').slideUp();} else {$('#global-header-section').slideDown();}topPosition = scrollMovement;}); });

main-content{margin-top: 7vw;}

3.ジェネレーターの変更を保存し、結果を表示します

グローバル ヘッダーの作成が完了したら、すべての変更を保存し、 サイトのWeb!

概要

すべての手順を完了したので、さまざまな画面サイズでどのように表示されるかを最後に見てみましょう。

最終的な考え

この記事では、上にスクロールするとグローバルヘッダーを表示し、下にスクロールすると非表示にする方法を説明しました。 これは、訪問者がウィンドウの高さの一部を占めることなく簡単にナビゲートできるようにするための、人気のある効果的な方法です。 JSONファイルを無料でダウンロードすることもできます！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。