グローバルヘッダーを作成する必要があります ウェブサイト ディビと？
グローバル ヘッダーは、 サイトのWeb、ページまたは投稿に別のヘッダーを割り当てていない限り。
始めましょう！
概要
これが、設計するグローバルヘッダーのプレビューです。
メインメニューを構成する
WordPressサイトの外観設定でメニューを作成することから始めます。
Diviの下のテーマビルダーオプションにアクセスします
のオプションで Diviテーマで、[テーマ ビルダー] をクリックします。 そこに着くと、 ウェブサイトのテンプレート デフォルト
グローバルヘッダーを追加して作成します
Le ウェブサイトのテンプレート default は、カスタム グローバル ヘッダー、グローバル ボディ、およびグローバル フッターの作成を開始できる場所です。 [Add Global Header] をクリックし、[Build Global Header] をクリックしてプロセスを開始します。
セクション設定
サイズ剤
ページにあるセクション設定を開き、[スタイル]タブで、さまざまな画面サイズのサイズを変更します。
- 最大幅：100％
- 最大幅：1280px（PCおよびタブレットの場合）、100％（モバイルの場合）
スペーシング
上下の内部マージンをすべて削除します
- 内側マージン頂点：0px
- 下部内部マージン：0px
国境
次に、セクションの左下隅と右下隅に境界線の半径を追加します。
- 左下：50px
- 右下：50px
シャドーボックス
微妙なボックスシャドウも追加しましょう。
- ボックスシャドウブラー強度：60px
- 字幕フォントの色：rgba（0,0,0,0.13）
可視
- 水平オーバーフロー：表示
- 垂直オーバーフロー：表示
ヘッダーに新しい行を割り当てます
一般的なセクション設定が完了したので、行の追加を開始できます。 合計でXNUMX行必要になります。 XNUMXつはヘッダー専用で、もうXNUMXつはメニュー項目を表示できるようにします。 次の列構造を使用して新しい行を追加することにより、ヘッダーから始めます。
ライン設定
背景設定
線にモジュールを追加せずに、線の設定を開き、背景色を変更します。
- 背景：＃38383F
サイズ剤
次に、行サイズパラメータを変更します。
- カスタムガター幅を使用：はい
- 列間隔：1
- 最大幅：100％
- 最大幅：100％
鑑賞
次に、このCSSコードの行をメインの行要素に追加して、小さい画面で列が隣り合って表示されるようにします。
01
display: flex;
列1に画像モジュールを追加します
ロゴをダウンロードする
行の設定が完了したら、モジュールの追加を開始します。 列1に画像モジュールを追加し、ロゴをアップロードします。
Alignement
[スタイル]タブに移動し、画像を左揃えにします。
サイズ剤
モジュールの幅も変更します。
スペーシング
また、カスタムマージン値を追加します。
列2にソーシャルメディア追跡モジュールを追加します
ソーシャルネットワークを追加する
XNUMX列目に行きましょう。 そこで、ソーシャルメディア追跡モジュールが必要になります。 選択したソーシャルネットワークを追加します。 ソーシャルメディアはいくつでも追加できます。
ソーシャルネットワークの背景色
次に、各ソーシャルネットワークを個別に開き、背景色を完全に透明な色に変更します。
- 背景色：rgba（0,0,0,0）
Alignement
通常のモジュール設定に戻り、モジュールの完全な配置を変更します。
アイコン
アイコンの設定も変更してください。
- アイコンの色：#FFFFFF
- カスタムアイコンサイズを使用する：はい
- アイコンのフォントサイズ：16px（PCおよびタブレット）、12px（電話）
スペーシング
上マージンを追加します。
3列目にボタンモジュールを追加します
XNUMX番目の列に移動し、選択したテキストを含むButtonモジュールを追加します。
Alignement
[スタイル]タブでボタンの配置を変更します。
ボタンの設定
次のようにボタン設定をカスタマイズします。
- ボタンにカスタムスタイルを使用する：はい
- ボタンのテキストサイズ：12px（デスクトップ）、10px（タブレット）、8px（電話）
- ボタンのテキストの色：#ffffff
- 背景ボタン：＃ffae25
- ボタンの境界線の幅：0ピクセル
- ボーダー半径ボタン：0ピクセル
- ボタンの文字間隔：5ピクセル（デスクトップ）、3ピクセル（タブレットと電話）
- フォントボタン：開くなし
- ソフトライトボタン：太字のテキスト
- コピーボタンスタイル：TT
スペーシング
マージン値をカスタマイズします。
メニューバーに新しい行を割り当てる
グローバルヘッダー専用の行を入力したら、すぐ下に別の行を追加できます。
ライン設定
サイズ剤
モジュールをまだ追加せずに、ライン設定を開き、[スタイル]タブでサイズ設定を変更します。
スペーシング
次に、すべての下部と上部の余白を削除します。
メニューモジュールを列に追加します
メニューを選択
次に、メニューモジュールを列に追加し、このチュートリアルの最初の部分で作成したメニューを選択します。
配置
[スタイル]タブに切り替えて、次のようにレイアウト設定を変更します。
接続
また、[スタイル]タブでアクティブなリンクの色を変更します。
- アクティブなリンクの色：＃ffae25
ドロップダウンメニュー
ドロップダウンメニュー設定のドロップダウンメニューの線の色についても同じようにします。
- ドロップダウン行の色：＃ffae25
アイコン
- ハンバーガーメニューアイコンの色：＃ffae25
メニューテキスト
メニューテキスト設定付き。
- メニューフォント：プラタ
- メニューテキストの色：＃000000
ヘッダーとメニューバーを上に表示します
セクション設定を開く
XNUMX行目を完了したら、セクションがページと投稿の上部に表示されるようにするだけです。 これを行うには、セクション設定を再度開きます。
メイン要素にカスタムCSSを追加する
次に、[詳細設定]タブに移動し、セクションのメイン要素に数行のCSSコードを追加します。
01
position: fixed;02
top: 0;03
left: 0;04
right: 0;
グローバルヘッダーとテーマビルダーのオプションを保存する
グローバルヘッダーデザイン全体が完了したら、テンプレートレイアウトを終了する前に、必ずデザインを保存してください。 テンプレートレイアウトが終了したら、テーマビルダーの変更全体を保存して完了です。
概要
すべての手順を完了したので、最後に結果を見てみましょう。
まとめ
この記事では、Divi の新しいテーマ ビルダーを使用してカスタム グローバル ヘッダーを作成する方法を説明しました。 このチュートリアルでは、美しいヘッダーを作成し、それを全体に適用することがいかに簡単かを示します。 サイトのWeb または特定のカスタム投稿タイプ。
テーマビルダーを使用してWebサイトをカスタマイズするのに役立つことを願っています。
ご質問やご提案がございましたら、にコメントを残してください コメントセクション 以下。
...
