全幅ヘッダー モジュールの使用と、Divi を使用した独自のヒーロー セクションの構築

公開: 2022-08-29

ウェブサイトのヒーロー セクションをゼロから構築するか、Divi 全幅ヘッダー モジュールを使用することで、サイトの目を引くデザインを構築できます。 この投稿では、Divi で独自のヒーロー セクションを作成する場合と比較して、全幅ヘッダー モジュールを使用する場合の長所と短所を見ていきます。

始めましょう！

ウェブサイトのヒーローセクションの重要性

ヒーロー セクションは、訪問者が Web サイトにアクセスしたときに最初に目にするセクションです。 多くの場合、全幅のバナーであり、ヒーロー ヘッダーとも呼ばれます。 第一印象を長続きさせる力があるため、ウェブサイトの目立つ場所であるため、読みやすく、人目を引く説得力のある方法で設計することが重要です. Web サイトのヒーロー セクションは、潜在的な顧客の目を引き、ページをすばやく説明し、さらなるエンゲージメントと潜在的なリードにつながるため、重要です。 ヒーロー セクションはブランディングし、h1 タイトルと行動を促すフレーズを含める必要があります。

ゼロからヒーロー セクションを作成する

ゼロからヒーロー セクションを作成すると、デザインとコンテンツを完全に制御できます。 状況とニーズに応じて、これは Web サイトにとって優れたソリューションとなる可能性があります。 このアプローチの長所と短所を見てみましょう。

このアプローチの長所

まず、Divi を使用してゼロからウェブサイトのヒーロー セクションを構築する利点を見てみましょう。

1. 設計の完全なコントロール

ゼロからヒーロー セクションを作成すると、デザインの外観を完全に制御できます。 あらかじめ設定されたデザイン スタイルはなく、Divi を使用して心ゆくまでカスタマイズできます。 思い通りの外観にすることができます。

2.任意のDiviモジュールを使用する

セクションを最初から作成しているため、Divi モジュールをヘッダーに追加できます。 つまり、メール オプション、連絡フォーム、ボタン、テキスト モジュール、ギャラリーなどを追加できます。カスタマイズ オプションは無限です。

このアプローチの短所

では、ゼロからヒーロー セクションを作成することの短所を見てみましょう。

1.ゼロから構築する必要がある

ヒーロー セクションを数分で作成したい場合は、ゼロからヒーロー セクションを設計するには、もう少し調整が必要になる場合があります。 事前に設定されたデザインがないため、完全に制御できますが、物事を正しくするためにいじくり回すのにより多くの時間を費やす可能性があります.

2.複数のモジュールが必要

ゼロからヒーロー セクションを構築するということは、一度に複数のモジュールを使用することになります。 これにより優れたカスタマイズ オプションが可能になりますが、コンテンツが 1 つにまとめられるのではなく、複数のモジュールに分散されることも意味します。

Divi 全幅ヘッダー モジュールを使用してヒーロー セクションを構築する

Divi Fullwidth Header モジュールを使用してヒーロー セクションを作成すると、人目を引くモバイル対応のデザインをわずか数分で簡単に作成できます。 このアプローチの長所と短所を見てみましょう。

このアプローチの長所

Divi Fullwidth Header モジュールを使用してヒーロー セクションを構築する利点を見てみましょう。

1. すべてのコンテンツが 1 つのモジュールに

Divi 全幅ヘッダー モジュールには、画像、アイコン、ヘッダー テキスト、サブタイトル テキスト、本文テキスト、および 2 つのボタンがすべてモジュール内に含まれています。 つまり、作業を完了するために複数のモジュールは必要なく、すべてのコンテンツが 1 つのモジュール内にあるため、ヒーロー セクションのあらゆる側面を 1 か所で簡単にカスタマイズできます。

2. すでに最適化された設計

全幅ヘッダー モジュールは、すでにモバイル向けに最適化されているように設計されています。 つまり、訪問者がモバイルでウェブサイトを閲覧しているときに、モジュール内の要素が自動的に積み重ねられて目を引くようになります。

このアプローチの短所

それでは、Divi Fullwidth Header モジュールを使用してヒーロー セクションを構築することの短所を評価しましょう。

1. 設計の自由度が低い

Divi 全幅ヘッダー モジュールには事前定義されたコンテンツ オプションが付属していますが、モジュール内で利用できないコンテンツを追加しようとしている場合、多くのオプションが制限される可能性があります。 これは、全体的なデザインの柔軟性が低下することを意味します。

両方のヒーロー セクションを段階的に構築する

両方のアプローチの長所と短所を理解したので、各ヒーロー セクションを作成して、各アプローチがどのように機能するかを正確に確認できるようにします。

始めるために必要なもの

開始するには、次のことを行う必要があります。

  1. WordPress ウェブサイトに Divi をインストールします。
  2. ページを追加して、タイトルを付けます。
  3. ビジュアル ビルダーを有効にする

ゼロからヒーロー セクションを作成する

ページの設定が完了したので、最初からヒーロー セクションを作成することから始めましょう。

ビジュアル ビルダーを有効にする

Divi のドラッグ アンド ドロップ ビルダーを使用するには、[Use Divi Builder] ボタンをクリックして Visual Builder を有効にする必要があります。 これにより、Divi Visual Builder を使用してページがリロードされます。

選択: ゼロからビルド

ビジュアル ビルダーを有効にしてページがリロードされたので、[最初から作成] オプションをクリックして、デザインを再作成するときに使用する空白のページを用意します。

行を追加して列を設定する

行を追加し、3 つの列を選択します。

モジュールを追加する

次に、必要なコンテンツ モジュールを追加しましょう。

  • 左の列: 2 つのテキスト モジュール、仕切り、1 つのボタン
  • 中段：画像
  • 右列: 画像

スタイルセクション

それでは、セクションの設定を行いましょう。

セクションを追加し、次の設定を構成します。

  1. 背景色: #1d1d25

スタイル ヘッダー テキスト

ヘッダー テキストのスタイルを設定します。

  1. 見出しのフォントの太さ: 半太字
  2. 見出しのテキストの色: #ffffff
  3. 見出しのテキスト サイズ: 90px
  4. 見出し行の高さ: 1.1em

スタイルディバイダー

仕切りの設定を構成します。

  1. 色: rgba(255,255,255,0.3)
  2. ディバイダーの重量: 10px
  3. 最大幅: 260px

スタイル本文

本文のスタイルを設定します。

  1. 本文のテキストの色: rgba(255,255,255,0.7)
  2. テキストサイズ: 13px
  3. テキスト行の高さ: 1.8em

スタイルボタン

次に、ボタンのスタイルを設定しましょう。

[ボタン] タブで:

  1. ボタンにカスタム スタイルを使用する: はい
  2. ボタンのテキストサイズ: 14px
  3. ボタンのテキストの色: #ffffff
  4. ボタンの背景:
  5. ボタンの境界線の幅: 0px
  6. ボタンの境界線の半径: 0px

[間隔] タブで:

  • 上下：40px
  • 左右: 20px

画像を追加

イメージ モジュールにイメージを追加します。

行設定の調整

行の設定:

  • 左余白に 15vw を追加します。

2列目を調整

2 番目の列で、次の設定を構成します。

カスタム CSS

次のコードを Main Element コード セクションに貼り付けます。 

margin-right: -15vw!important;
z-index: 100!important;

間隔

上部パディングを 100px 追加します。

出来上がり！ これで、完全に設計されたカスタム ヒーロー セクションが完成しました。

Divi の全幅ヘッダー モジュールを使用してヒーロー セクションを作成する

それでは、Divi の全幅ヘッダー モジュールを使用して、このヒーロー セクションを再作成する方法を見ていきましょう。

ページを追加し、Build From Scratch を選択します

新しいページを追加し、タイトルを付けてから、[Use Divi Builder] をクリックし、[Build From Scratch] を選択します。

全角セクションと全角ヘッダーを追加する

全角セクションを追加し、モジュール ライブラリから全角ヘッダーを選択します。

コンテンツを追加

[テキスト] タブで、テキスト コンテンツをモジュールに追加します。

画像を追加

画像タブに画像を追加します。

背景色の変更

バックグラウンド タブで、次の設定を構成します。

  1. 背景色: #1D1D25

スタイル ヘッダー テキスト

ヘッダー テキスト設定を構成します。

  1. タイトルのフォントの太さ: 太字
  2. タイトルの文字サイズ: 90px

スタイル本文

本文テキスト設定を構成します。

  1. 本文のテキストの色: rgba(255,255,255,0.55)

スタイル字幕テキスト

字幕テキスト設定を構成します。

  1. 字幕のフォントの太さ: 太字
  2. 字幕テキストの色: #4C594C
  3. 字幕文字間隔: 3px

スタイルボタン

次に、2 つのボタンのスタイルを設定しましょう。

ボタン 1

ボタン 1 タブで、次の設定を構成します。

  1. ボタン 1 にカスタム スタイルを使用する: はい
  2. ボタン 1 背景: #4c594c
  3. ボタン 1 の境界線の幅: 0px
  4. ボタン 1 の境界線の半径: 0px
  5. ボタン アイコン 1 を表示: はい
  6. ボタン 1 のホバー時にのみアイコンを表示: いいえ
  7. ボタン 1 パディング: 上下 25 ピクセル。 左25px、右50px。

ボタン 2

[ボタン 2] タブで、次の設定を構成します。

  1. ボタン 2 にカスタム スタイルを使用する: はい
  2. ボタン 2 ボーダーの幅: 0px
  3. ボタン 2 ボーダーの半径: 0px
  4. ボタン 2 パディング: 上下 25 ピクセル。 左右25px。
  5. ボタン ボックスの影: 4 番目のものを選択します。
  6. ボックス シャドウの水平位置: 0px
  7. ボックス シャドウの垂直位置: 2px
  8. 影の色: #ffffff

出来上がり！ これで、Divi Fullwidth ヘッダー モジュールを使用して完全に設計されたヒーロー セクションが完成しました。

最終的な考え

ゼロから構築する場合でも、全幅ヘッダー モジュールを使用する場合でも、Divi を使用してヒーロー セクションを構築するのは簡単です。 どちらのオプションでも、訪問者の興味を引く見事なヘッダー デザインを作成できます。 独自のニーズに応じて、どちらのオプションも、ヒーロー セクションをスタイリングする際に考慮すべき優れたオプションです。 両方の長所と短所を読んだ後、ヒーロー セクションをどのように設計しますか?