各ページの最初のDiviセクションの下にヘッダーを自動的に配置する方法
公開: 2020-01-08Divi Theme Builderがリリースされて以来、さまざまなニーズに合わせてヘッダーを作成およびカスタマイズする方法に関するチュートリアルを共有してきました。 今日のチュートリアルでは、各ページの最初のDiviセクションの下にカスタムヘッダーを自動的に配置する方法を示して、その旅を続けます。 このアプローチにより、訪問者は最初にページのヒーローセクションを確認してから、メニューとそのすべてのアイテムにアクセスできます。 カスタムヘッダーに使用しているスタイルはBistroLayout Packと一致しており、カスタムページテンプレートを無料でダウンロードすることもできます。
それを手に入れましょう。
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
カスタムヘッダーテンプレートを無料でダウンロード
無料のカスタムヘッダーテンプレートを入手するには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
1. Diviテーマビルダーに移動し、新しいページテンプレートを追加します
Diviテーマビルダーに移動し、新しいテンプレートを追加します
まず、Diviテーマビルダーに移動して、新しいテンプレートを追加します。
オンを使用
この新しいテンプレートをすべてのページで使用してください。
- 使用場所：すべてのページ
2.カスタムヘッダーデザインの構築を開始します
ページテンプレート内にカスタムヘッダーを作成して続行します。
セクション設定
背景色
テンプレートエディタに入ると、セクションが表示されます。 そのセクションを開き、背景色を変更します。
- 背景色：#FFFFFF
間隔
次に、セクションのデフォルトの上部と下部のパディングを削除します。
- トップパディング：0px
- ボトムパディング：0px
国境
上下の境界線も追加します。
- 上下の境界線の幅：1px
- 上と下の境界線の色：＃002d4c
CSS ID
そして、CSSIDを含めます。 チュートリアルの後半では、このCSS IDを使用して、各ページの最初のセクションの下にセクションを配置します。
- CSS ID：カスタムヘッダー
Zインデックス
最後になりましたが、セクションのzインデックスを増やして、すべてのページコンテンツの上に表示されるようにします。
- Zインデックス：99999
新しい行を追加
カラム構造
次の列構造を使用して、セクションに新しい行を追加して続行します。
サイジング
モジュールをまだ追加せずに、行設定を開き、行がセクションの幅全体を占めるようにします。
- カスタムガター幅を使用：はい
- 側溝幅：1
- 幅：100％
- 最大幅：100％
間隔
デフォルトの上下のパディングもすべて削除します。
- トップパディング：0px
- ボトムパディング：0px
主な要素
小さい画面サイズですべての列が隣り合っていることを確認し、列のコンテンツを中央に配置するために、行のメイン要素に2行のCSSコードも追加します。
display: flex; align-items: center;
列1
間隔
列1の設定を開いて続行し、間隔の設定に上部と下部のパディングを追加します。
- トップパディング：20px
- ボトムパディング：20px
国境
列にも右の境界線を追加します。
- 右ボーダー幅：1px
- 右の境界線の色：＃002d4c
列1に画像モジュールを追加
ロゴをアップロード
モジュールの追加を開始する時が来ました！ 1列目には、画像モジュールが必要です。 ロゴをアップロードします。
配置
モジュールの[デザイン]タブに移動し、画像の配置を変更します。
- 画像の配置：中央
サイジング
さまざまな画面サイズでモジュールの幅も変更します。
- 幅：4vw（デスクトップ）、7vw（タブレット）、12vw（電話）
メニューモジュールを列2に追加
メニューを選択
2番目の列に、メニューモジュールが必要です。 お好みのメニューを選択してください。
レイアウト
モジュールの[デザイン]タブに移動し、次のようにレイアウト設定を変更します。
- スタイル：中央揃え
- ドロップダウンメニューの方向：下向き
メニューテキスト
メニューのテキスト設定も変更します。
- メニューフォント：キャビン
- メニューテキストの色：＃77848d
- メニューテキストサイズ：16px（デスクトップ）、15px（タブレット）、14px（電話）
- メニューラインの高さ：1.8em
ドロップダウンテキスト
次に、ドロップダウンテキスト設定でいくつかの色を変更します。
- ドロップダウンメニューの背景色：#ffffff
- ドロップダウンメニューの線の色：＃002d4c
アイコン
アイコン設定でハンバーガーメニューのアイコンの色を変更して、モジュールの設定を完了します。
- ハンバーガーメニューアイコンの色：＃002d4c
ボタンモジュールを列3に追加
コピーを追加
次の最後の列に進みます。 そこで、ボタンモジュールが必要になります。 選択したコピーをいくつか追加します。
配置
モジュールのデザインタブに移動し、ボタンの配置を変更します。
- ボタンの配置：中央
ボタンの設定
ボタン設定でボタンのスタイルを設定して続行します。
- ボタンにカスタムスタイルを使用する：はい
- ボタンのテキストサイズ：13px
- ボタンのテキストの色：＃002d4c
- ボタンの背景色：#ffffff
- ボタンの境界線の幅：2px
- ボタンの境界線の色：#ffffff（デフォルト）、＃d1d1d1（ホバー）
- ボタンの境界線半径：0px
- ボタンの文字間隔：2px
- ボタンフォント：キャビン
- ボタンのフォントの太さ：半太字
- ボタンのフォントスタイル：大文字
間隔
次に、さまざまな画面サイズにカスタムパディングを追加します。
- トップパディング：16px
- ボトムパディング：16px
- 左パディング：24px（デスクトップとタブレット）、13px（電話）
- 右パディング：24px（デスクトップとタブレット）、13px（電話）
ボックスシャドウ
ボックスシャドウを追加して、モジュールの設定を完了します。
- ボックスシャドウの水平位置：0px
- ボックスシャドウの垂直位置：0px
- ボックスシャドウブラー強度：0px
- ボックスシャドウの広がりの強さ：2px（デフォルト）、6px（ホバー）
- 影の色：＃002d4c
- ボックスシャドウの位置：内側のシャドウ
3. JQueryを使用して、各ページの最初のセクションの後にヘッダーを自動的に配置します
列2にコードモジュールを追加する
ここで、各ページの最初のセクションの下にメニューを自動的に配置するには、JQueryコードが少し必要になります。 このコードをカスタムヘッダーに含めるには、コードモジュールを列2に追加します。
JQueryコードを挿入する
以下の印刷画面でわかるように、スクリプトタグの間に次のJQueryコード行をコードモジュールに追加して、効果を適用します。
jQuery（function（$）{
$（ '＃custom-header'）。insertAfter（ '。et_pb_section_0'）;
}）;
4.テーマビルダーの変更を保存して結果を表示する
そして、すべてのテーマビルダーの変更を保存し、ページで結果を表示して、カスタムヘッダーを完成させます。
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
最終的な考え
この投稿では、Diviのテーマビルダーを使用して作成したカスタムヘッダーを、各ページの最初のDiviセクションの後に自動的に配置する方法を示しました。 カスタムヘッダーを作成する必要があるのは1回だけで、JQueryコードを追加すると、カスタムヘッダーが自動的に再配置されます。 これは、メニューの通常のトップページの位置を変更し、ヒーローセクションを最初に輝かせるのに最適な方法です。 テンプレートも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。