Divi の全幅ヘッダー モジュールを使用してヒーロー セクションを作成する方法
公開: 2022-08-17ヒーロー セクションを作成することは、ページの重要なコンテンツに注目を集める優れた方法です。 これは、ストーリーを伝えたり、作品に関する情報を共有したり、製品やサービスを強調したりするために使用できる非常に大きなコンテンツです。 Divi の全幅ヘッダー モジュールを使用すると、タイトル、サブタイトル、2 つのボタン、本文テキスト、ロゴ画像、ヘッダー画像を追加できます。 もちろん、背景オプションを利用して、画像、グラデーション、色、パターン、およびマスクを追加および結合することもできます. 複数の画像、テキスト、およびボタン モジュールを切り替える代わりに、1 つの全幅ヘッダー モジュールの設定内でこれらの設定をすべて編集できます。
このチュートリアルでは、Divi の全幅ヘッダー モジュールを使用して、魅力的で人目を引くヒーロー セクションを作成する方法を紹介します。
始めましょう！
スニークピーク
これは、私たちがデザインするもののプレビューです。
始めるために必要なもの
始める前に、ウェブサイトに最新バージョンのDiviがあることを確認してください.
これで、開始する準備が整いました。
Divi の全幅ヘッダー モジュールを使用してヒーロー セクションを作成する方法
既製のレイアウトで新しいページを作成する
まず、Divi ライブラリから事前に作成されたレイアウトを使用してみましょう。 このデザインでは、Veterinarian Layout Pack の Veterinarian Landing Page を使用します。
Web サイトに新しいページを追加してタイトルを付け、オプションを選択して Divi Builder を使用します。
この例では、Divi ライブラリから事前に作成されたレイアウトを使用するため、[Browse Layouts] を選択します。
Veterinarian Landing Page レイアウトを検索して選択します。
[このレイアウトを使用] を選択して、レイアウトをページに追加します。
これで、デザインを構築する準備が整いました。
全幅ヘッダー モジュールを追加する
全幅ヘッダー モジュールを使用して、ヒーロー セクションを再作成します。 ページの既存のヘッダーの下に、新しい全角セクションを追加します。
セクションに全角ヘッダー モジュールを追加します。
次に、元のヘッダー セクションを削除します。
全幅ヘッダー モジュールをカスタマイズする
コンテンツを追加
全幅ヘッダー モジュール設定を開き、次のコンテンツをモジュールに追加します。
- 肩書: 獣医
- サブタイトル：DiviVet. 親友への奉仕
- ボタン #1: すべてのサービスを表示
- ボタン #2: 予約する
- 体: Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla quis lorem ut libero malesuada feugiat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta.
次に、獣医師と動物のヘッダー画像を追加します。
グラデーション背景の設定
背景設定に移動します。 元の背景色を削除してから、背景のグラデーションを追加します。
- 0%: rgba(255,170,205,0.48)
- 40%: rgba(110,66,255,0.24)
- 87%: rgba(124,239,255,0.71)
- グラデーションの種類: 楕円形
- グラデーションの位置: 右
次に、[背景マスク] タブを選択し、背景に背景マスクを追加します。
- バックグラウンド マスク: コーナー ブロブ
- マスクカラー：#FFFFFF
- マスク変換: 垂直
テキスト スタイルのカスタマイズ
ヘッダー コンテンツと背景を配置したら、[デザイン] タブに移動して、テキスト スタイルをカスタマイズしましょう。 まず、タイトル設定を開き、次のようにテキストをカスタマイズします。
- タイトルフォント：Nunito
- タイトルのフォントの太さ: Ultra Bold
- タイトルのフォント スタイル: TT (大文字)
タイトル テキストの色、サイズ、間隔を変更します。
- タイトル テキストの色: #a9cb6b
- タイトルの文字サイズ: 14px
- タイトル文字の間隔: 2px
本文セクションに移動し、フォントをカスタマイズします。 Divi のレスポンシブ設定を使用して、モバイル デバイス用に小さいテキスト サイズを追加します。
- 本文の色: #000000
- 本文テキストサイズ-デスクトップ: 18px
- 本文テキストサイズ: モバイル: 14px
- ボディラインの高さ: 1.8em
次に、字幕設定を開き、フォントをカスタマイズします。
- 字幕フォント: Nunito
- 字幕のフォントの太さ: 太字
- 字幕文字色：#000000
最後に、デスクトップとモバイルのテキスト サイズを変更し (ここでもレスポンシブ設定を使用して、モバイルに小さいテキスト サイズを追加します)、行の高さを調整します。
- 字幕テキストのサイズ - デスクトップ: 56px
- 字幕テキストサイズ - モバイル: 32px
- 字幕行の高さ: 1.2em
ボタン 1 のスタイルをカスタマイズする
次に、ボタンのスタイルをカスタマイズします。 まず、ボタン 1 のカスタム スタイルを有効にしてから、テキスト サイズを調整します。
- ボタン 1 にカスタム スタイルを使用する: はい
- ボタン 1 のテキスト サイズ: 14px
ボタンに背景のグラデーションを追加します。 勾配値は次のとおりです。
- 58%: #316EFF
- 100%: #1D2B60
- 勾配の方向: 90deg
次に、ボーダー設定とフォント設定をカスタマイズします。
- ボタン 1 の境界線の幅: 0px
- ボタン 1 の境界線の半径: 80px
- ボタンの 1 文字の間隔: 2px
- Button One フォント: Nunito
- ボタン 1 のフォントの太さ: Ultra Bold
- ボタン 1 のフォント スタイル: TT (大文字)
ボタン 1 アイコンを無効にします。
- ボタン 1 のアイコンを表示: いいえ
次に、デスクトップ デザインのマージンとパディングの設定をカスタマイズし、ボックス シャドウを追加します。
- ボタン 1 マージン - トップ - デスクトップ: 200px
- ボタン 1 の余白-下-デスクトップ: 0px
- ボタン 1 パディング - トップ - デスクトップ: 16px
- Button One Padding-Bottom-Desktop: 16px
- ボタン 1 パディング - 左 - デスクトップ: 2em
- ボタン 1 パディング - 右 - デスクトップ: 50em
- ボタン ボックスの影: 下
レスポンシブ設定を使用して、モバイル デバイスで異なるマージンとパディングの値を設定します。
- ボタン 1 マージン - トップ - モバイル: 25px
- ボタン 1 パディング - 右 - モバイル: 10em
ボタンにはテキストの回り込みの問題がいくつかありますが、後でカスタム CSS を使用して修正します。
ボタン 2 スタイルのカスタマイズ
ボタン 2 の色と間隔は多少異なりますが、ボタン 1 とかなり似ています。 反復的な設計手順を省くために、ボタン 1 モジュールのスタイルをボタン 2 モジュールにコピーして、変更する必要があるものをカスタマイズしましょう。
まず、ボタン 1 セクションを右クリックし、ボタン 1 スタイルをコピーします。
次に、ボタン 2 のセクションを右クリックして、ボタン 1 のスタイルを貼り付けます。
これで、ボタンの 2 つのスタイルをカスタマイズできます。 テキストの色を変更します。
- ボタン 2 のテキストの色: #121F60
ボタン 2 の背景グラデーションをカスタマイズします。
- 30%: rgba(0,229,198,0)
- 100%: #00e5c6
レスポンシブ設定を使用して、モバイル デバイスの背景のグラデーションを調整します。
- 0%: rgba(0,229,198,0)
- 100%: #00e5c6
次に、デスクトップ デザインのマージンとパディングを調整します。
- ボタン 2 マージン - トップ - デスクトップ: 0px
- ボタン 2 マージン - ボトム - デスクトップ: 0px
- ボタン 2 マージン - 左 - デスクトップ: 30%
- ボタン 2 パディング - トップ - デスクトップ: 16px
- ボタン 2 パディング-ボトム-デスクトップ: 16px
- ボタン 2 パディング - 左 - デスクトップ: 48em
- ボタン 2 パディング - 右 - デスクトップ: 2em
レスポンシブ設定を使用して、モバイル デザインに異なるマージンとパディングの値を設定します。
- ボタン 2 マージン - 左 - モバイル: 5%
- ボタン 2 パディング - 左 - モバイル: 35%
- ボタン 2 パディング - 右 - モバイル: 5%
カスタム CSS
最後に、設計作業の大部分が完了します。 次に、カスタム CSS を追加してデザインを完成させる必要があります。 [詳細] タブに移動し、[カスタム CSS] セクションを開きます。
まず、ヘッダー画像 CSS から始めましょう。 この CSS により、ヘッダー画像をボタンの上に表示できます。
z-index: 1; position:relative;
次にタイトルにCSSをカスタムします。 レスポンシブ設定を使用して、デスクトップ ビューとモバイル ビューに異なる値を設定します。
デスクトップの場合:
padding-top:50px; padding-bottom:30px;
モバイルの場合:
padding-top:5px; padding-bottom:10px;
最後に、次の CSS をボタン 1 とボタン 2 に追加します。
white-space: nowrap;
最終結果
全幅ヘッダーのヒーロー セクションの最終的なデザインは次のとおりです。
最終的な考え
全幅ヘッダー モジュールを使用すると、美しいヒーロー セクションを簡単に作成して、サービスを宣伝し、訪問者に Web サイトの内容を伝えることができます。 組み込みの設定により、ヘッダーのあらゆる側面のデザインを簡単にカスタマイズでき、すべてが 1 か所にあるため、ヒーロー セクションを構築するために複数のモジュールを切り替える必要はありません。 よりユニークなヒーロー セクションのデザインについては、このチュートリアルをチェックしてください: ヒーロー セクションに Divi の背景マスクとパターンを使用する方法. 全幅ヘッダー モジュールを使用してヒーロー セクションを作成しますか? コメントをお待ちしております。