Divi全幅ヘッダーモジュールをフルスクリーンにする方法

全画面ヘッダーは、訪問者の画面サイズに関係なく、画面全体を使用します。 これは、ユーザーの注意を引くのに最適です。 また、行動を促すフレーズに誘導するのにも最適です。 幸いなことに、Divi の全幅ヘッダー モジュールを使用してフルスクリーン ヘッダーを簡単に作成できます。 この投稿では、全幅のヘッダーを作成し、全画面表示にし、スタイルを設定する方法を紹介します。 このアプローチを使用して、ページのフルスクリーン ヒーロー セクションを作成できます。

始めましょう。

フルスクリーン ヘッダーのプレビュー

このチュートリアルで構築するもののプレビューを見てみましょう。

デスクトップ

タブレット

電話

Divi の全幅ヘッダー モジュールで全画面ヘッダーを作成する理由

フルスクリーン ヘッダーの作成方法について説明する前に、Divi ユーザーがヘッダーを必要とする理由について説明しましょう。

フルスクリーン ヘッダーは、含まれるセクションに特定の要素を表示します。 このセクションでは、注意を引き、いくつかのタスクを実行するクリーンなレイアウトでこれらの要素を示します。

まず、これを使用して、訪問者をセールス ファネルに導く行動を促すフレーズを表示できます。 特定の製品やサービスについて言及するのに最適な場所です。

第二に、ユーザーを Web サイトにとどまらせる興味深いデザインを提示できます。 Web サイトは、訪問者の注意を引くのに数秒しかありません。

フルスクリーン ヘッダーを作成する際は、次の点に注意してください。

• 色とフォントについては、一般的なデザイン プラクティスに従います。 読みやすく、ウェブサイトのトピックに合っていることを確認してください。
• シンプルでクリーンなデザインを心がけましょう。 あまりにも多くの画像、リンク、またはボタンを使用しないでください。 いくつかのことに焦点を当てます。 少ないほうがいいですね。
• フルスクリーン ヘッダーがレスポンシブであることを確認します。 フルスクリーン ヘッダーは見栄えがよく、すべての画面サイズで適切に機能する必要があります。

Divi全幅ヘッダーを全画面ヘッダーにする方法

作業中のページに全角セクションを追加することから始めます。 次に、Fullwidth セクションにFullwidth ヘッダー モジュールを追加します。

モジュールの設定が開きます。 [デザイン] タブを選択します。 Make Fullscreenというオプションを有効にします。

これで、フルスクリーン ヘッダーができました。 それはとても簡単です。

フルスクリーン ヘッダーのスクロール ダウン アイコンを有効にする

ユーザーが下にスクロールすることを示すボタンを追加することもできます。 ただし、有効にする必要があります。 このボタンは、フルスクリーン オプションで常に表示されます。 フルスクリーン ヘッダー オプションは、訪問者の画面の高さと常に一致します。

モジュールの設定では、[レイアウト] オプションの下に [スクロール ダウン アイコン] というセクションが表示されます。 ボタンをクリックして、 Show Scroll Down Buttonを有効にします。

Divi 全幅ヘッダー 全画面ヘッダーの例

全幅ヘッダーをフルスクリーンにする理由と、タスクを達成する方法について説明したので、例を見てみましょう。 Divi レイアウトのヒーロー セクションを使用して、全幅のヘッダーを作成します。

この例では、Divi 内で利用できる無料の Photography Studio Layout Pack のホームページのヒーロー セクションを使用しています。 レイアウトのフォントと色を使用してこのヒーロー セクションをカスタマイズし、独自の全幅ヘッダーを作成します。

フルスクリーン ヘッダー モジュールの設定

フルスクリーン ヘッダー モジュールの設定の各セクションの手順は次のとおりです。

文章

まず、全角ヘッダーに表示されるテキストを追加します。 これには、タイトル、サブタイトル、コンテンツ (これには Divi の組み込みダミー テキストを使用します)、およびボタン テキストが含まれます。

• タイトル: ディビ写真スタジオ
• サブタイトル: 写真
• ボタン 1: プロジェクト概要
• ボタン 2: プロジェクト計画
• 本文：内容

画像

次に、画像を追加します。 これは全角ヘッダーの右側に表示され、テキストが左に移動します。

• ヘッダー画像: お好みで

バックグラウンド

背景まで下にスクロールし、色を #f6f5ee に設定します。

• カラー: #f6f5ee

レイアウト

次に、[デザイン] タブに移動します。 フルスクリーンにする を有効にします。

• フルスクリーンにする: はい

スクロールダウン アイコン

次に、スクロール ダウン アイコンを有効にします。 デスクトップとタブレットの場合は色を黒に、電話の場合は白に変更します。 選択した画像では、アイコンが携帯電話の下部の画像に表示され、画像の色で表示されます。 アイコンのサイズをデスクトップの場合は 70px、タブレットの場合は 60px、スマートフォンの場合は 50px に変更します。

• スクロールダウンボタンを表示: はい
• アイコンの色: #000000 デスクトップとタブレット、#ffffff 電話
• サイズ: デスクトップ 70px、タブレット 60px、スマートフォン 50px

タイトルテキスト

次に、 Title Textを調整します。 テキストを H1 に設定し、フォントに Inter を選択します。 Weight を太字に、Alignment を中央に、Color を黒に設定します。

• 見出し: H1
• フォント: インター
• 重量: 太字
• 配置: 中央
• 色: #000000

Font Sizeには 3 つのサイズを使用します。デスクトップ用は 75px、タブレット用は 40ps、スマートフォン用は 24px です。 行の高さを 1.2em に変更します。

• サイズ: デスクトップ 75px、タブレット 40px、スマートフォン 24px
• 行の高さ: 1.2em

本文

次に、 Body Textまで下にスクロールします。 フォントに Open Sans を選択します。 配置を左に、色を黒に設定します。

• フォント: Open Sans
• 配置: 左
• 色: #000000

フォント サイズをデスクトップの場合は 16 ピクセル、タブレットの場合は 15 ピクセル、スマートフォンの場合は 14 ピクセルに設定します。 行の高さを 1.8em に変更します。

• サイズ: 16px デスクトップ、15px タブレット、14px 電話
• 行の高さ: 1.8em

字幕テキスト

次に、 Subtitle Textまで下にスクロールします。 フォントを Inter に変更します。 Weight を太字に、Style を TT に、Alignment を center に、Color を #ff5a17 に設定します。

• フォント: インター
• 重量: 太字
• スタイル: TT
• 配置: 中央
• カラー: #ff5a17

3 つの画面サイズすべてについて、 Sizeを 14px に変更します。 文字間隔を 1px に、行の高さを 1.4em に変更します。

• サイズ: 14px
• 文字間隔 1px
• 行の高さ: 1.8em

ボタン 1

次に、 Button Oneまで下にスクロールし、 Use Custom Styles for Buttonを選択します。 テキストの色を黒に変更します。

• ボタンにカスタム スタイルを使用する: はい
• サイズ: デスクトップ 20px、タブレット 18px、スマートフォン 16px
• 文字色：#000000

背景色を白に変更し、境界線の幅と半径を 0px に設定します。

• 背景色: #ffffff
• ボタン 1 の境界線の幅: 0px
• ボタン 1 の境界線の半径: 0px

Fontを Inter に、Weight を Bold に変更します。

• フォント: インター
• 重量: 太字

次に、好みのアイコンを選択し、色を黒に変更し、左側でボタンの配置を設定し、ボタン 1 のホバー時にアイコンのみを表示を無効にします。

• アイコン：お好みで
• アイコンの色: #000000
• ボタン 1 アイコンの配置: 左
• ボタン 1 のホバー時にのみアイコンを表示: いいえ

最後に、Button One のPaddingオプションまで下にスクロールします。 画面サイズごとに異なるパディングを使用します。 デスクトップの場合、上下に 20px、左右に 40px を使用します。 タブレットの場合、上下のパディングを 16px に変更します。 携帯電話では、上下のパディングを 12px に変更します。 左右のパディングは 3 つすべて同じにしておきます。

• デスクトップ パディング: 上下 20 ピクセル、左右 40 ピクセル
• タブレットのパディング: 上下 16 ピクセル、左右 40 ピクセル
• 電話パディング: 上下 12 ピクセル、左右 40 ピクセル

ボタン 2

最後に、ボタン 2まで下にスクロールします。 [ボタンにカスタム スタイルを使用] を選択します。 フォント サイズをデスクトップの場合は 20px、タブレットの場合は 19ps、スマートフォンの場合は 16px に設定します。 テキストの色を白に変更します。

• ボタンにカスタム スタイルを使用する: はい
• サイズ: デスクトップ 20px、タブレット 18px、スマートフォン 16px
• 文字色：#ffffff

背景色を #ff5a17 に変更します。 境界線の幅と半径を 0px に設定します。

• 背景色: #ff5a17
• ボタン 2 ボーダーの幅: 0px
• ボタン 2 ボーダーの半径: 0px

次に、 Fontを Inter に、Weight を Bold に変更します。

• フォント: インター
• 重量: 太字

お好きなアイコンをお選びください。 [色] を黒に変更し、[ボタンの配置] を左側に設定し、[ボタン 2 のホバー時にアイコンのみを表示] を無効にします。

• アイコン：お好みで
• アイコンの色: #000000
• ボタン 2 アイコンの配置: 左
• ボタン 2 のホバー時にのみアイコンを表示: いいえ

最後に、ボタン 2 のパディングオプションまで下にスクロールします。 デスクトップの場合、上下に 20px、左右に 40px を使用します。 タブレットでは、上下のパディングを 16px に変更します。 電話の場合、上下のパディングを 12px に変更します。 モジュールを閉じて、作業を保存します。

• デスクトップ パディング: 上下 20 ピクセル、左右 40 ピクセル
• タブレットのパディング: 上下 16 ピクセル、左右 40 ピクセル
• 電話パディング: 上下 12 ピクセル、左右 40 ピクセル

フルスクリーン ヘッダーの結果

デスクトップ、タブレット、携帯電話で全幅ヘッダーがどのように見えるかを次に示します。

デスクトップ

タブレット

電話

Diviの全幅ヘッダーモジュールを使用したフルスクリーンヘッダーの作成に関する考えを終わらせる

これが、Divi Fullwidth Header Module を使用してフルスクリーン ヘッダーを作成する方法です。 プロセスは簡単で、どのデバイスでも見栄えがします。 スクロール ダウン ボタンを追加すると、スクロールできることをユーザーに示す優れたビジュアルになります。 フルスクリーン ヘッダーのデザインは、ヒーロー セクションのデザインに似ています。 いくつかの簡単なガイドラインに従うことで、Divi のフルスクリーン ヘッダー モジュールを使用して素晴らしいフルスクリーン ヘッダーを作成できます。

私たちはあなたから聞きたい。 Divi Fullwidth Header をフルスクリーンにしましたか? コメントでお知らせください。