全幅ヘッダー モジュールを使用して Hero Divi セクションを作成しますか、それとも自分でデザインしますか?
ウェブサイトのヒーロー セクションを最初から構築するか、Divi Fullwidth Header モジュールを使用することは、どちらもウェブサイトの目を引くデザインを作成する方法です。
この記事では、Fullwidth Header モジュールを使用する場合と、Divi を使用して独自の Hero セクションを作成する場合のメリットとデメリットを比較します。
行こう！
ウェブサイトのヒーローセクションの重要性
ヒーローセクションとは、訪問者がウェブサイトにアクセスした際に最初に目にするセクションです。通常は全幅のバナーで、ヒーローヘッダーと呼ばれることもあります。ウェブサイト上で目立つ位置に配置するのは、第一印象を長く残す力を持つからです。
そのため、読みやすさと魅力を兼ね備え、かつ説得力のあるデザインにすることが重要です。ウェブサイトのヒーローセクションは、潜在顧客の注目を集め、ページの概要を簡潔に説明し、さらなるエンゲージメントや潜在的なリード獲得につながるため、重要です。ヒーローセクションは明確に区別され、H1見出しとCTA（Call to Action）を含める必要があります。
ゼロからヒーロー セクションを作成する
ヒーローセクションを一から設計することで、デザインとコンテンツを完全にコントロールできます。状況やニーズによっては、これはウェブサイトに最適なソリューションとなる可能性があります。
このアプローチの長所と短所を見てみましょう。
このアプローチの利点
まず、Divi を使用して Web サイトのヒーロー セクションを最初から作成する利点を検討してみましょう。
- 完全な設計管理
- 任意のDiviモジュールを使用する
このアプローチの欠点
次に、ヒーロー セクションを最初から作成する場合の欠点を見てみましょう。
- ゼロから構築する必要があります
- 複数のモッドが必要
Divi Fullwidth Header モジュールで Hero セクションを作成する
Divi Fullwidth Header モジュールを使用してヒーロー セクションを作成すると、わずか数分で目を引く、モバイルフレンドリーなレスポンシブ デザインを簡単に作成できます。
このアプローチの長所と短所を見てみましょう。
このアプローチの利点
Divi Fullwidth Header モジュールを使用してヒーロー セクションを構築する利点を見てみましょう。
- すべてのコンテンツが1つのモジュールにまとめられています
- 設計はすでに最適化されています
このアプローチの欠点
ここで、Divi Fullwidth Header モジュールを使用してヒーロー セクションを設計することの欠点を評価しましょう。
- 設計の自由度が低い
Divi Fullwidth Headerモジュールには、定義済みのコンテンツオプションが付属していますが、モジュールにないコンテンツ要素を追加したい場合、これらのオプションは制限される可能性があります。つまり、全体的なデザインの柔軟性が低くなります。
XNUMX つのヒーロー セクションを段階的に構築する
両方のアプローチの長所と短所を理解したので、各ヒーロー セクションを作成して、各アプローチがどのように機能するかを正確に確認できるようにします。
Divi Builder で新しいページを作成する
開始するには、次のことを行う必要があります。
- ディビをインストール WordPress Webサイトで。
- ページを追加し、タイトルを付けます。
- ビジュアル ビルダーを有効にする
ヒーロー セクションを最初から作成する
ページが設定されたので、ヒーロー セクションをゼロから作成してみましょう。
今すぐDIVIをダウンロードしてください!!!
「Divi Builder」を有効化
Divi のドラッグ アンド ドロップ ビルダーを使用するには、ボタンをクリックしてビジュアル ビルダーをアクティブ化する必要があります。 「Divi Builderを使用する」. これにより、Divi Visual Builder を使用してページがリロードされます。
選択: 最初からビルドする
ビジュアルビルダーが有効になってページがリロードされたら、「オプション」をクリックします。ゼロから構築「設計段階で作業するための空白のページを用意するためです。
行を追加して列を構成する
次の列構造を持つ行を作成します。
モッドを追加する
次に、必要なコンテンツ モジュールを追加しましょう。
- 2 つのテキスト モジュール、仕切り、左の列のボタン
- 中央の列に 1 つのイメージ モジュール
- 右側の列に 1 つのイメージ モジュール
スタイルセクション
それでは、セクション設定を構成しましょう。
セクションを追加し、次の設定を構成します。
- 背景: #1d1d25
ヘッダーテキストスタイル
ヘッダーテキストをカスタマイズします。
- 見出し 1:
- フォントの太さ: セミボールド
- 文字色：#ffffff
- テキストサイズ: 90px
- 行の高さ: 1,1 em
分離機
仕切りの設定を構成します。
- 線の色: rgba(255,255,255,0.3)
- ディバイダーの重量: 10px
- 最大幅: 260px
本文
本文のカスタマイズ:
- テキストの色: rgba(255,255,255,0.7)
- テキストサイズ: 13px
- 行の高さ: 1,8 em
ボタン
次に、ボタンをカスタマイズしましょう。
ボタンタブで次の操作を行います。
- ボタンにカスタム スタイルを使用する: はい
- ボタンのテキストサイズ：14px
- 文字色：#ffffff
- ボタンの背景:
- 境界線の幅: 0 ピクセル
- 境界半径: 0 ピクセル
間隔タブで次の操作を行います。
- 上下：40px
- 左右: 20px
画像を追加
画像モジュールに画像を追加します。
回線設定を調整する
インライン パラメータ:
- マージン (左): 15vw
2列目を調整
XNUMX 番目の列で、次の設定を構成します。
カスタムCSS
次のコードをメイン要素のコード セクションに貼り付けます。
argin-right: -15vw!important;
z-index: 100!important;スペーシング
100 ピクセルのトップ パディングを追加します。
それで ！ これで、完全に設計されたカスタム ヒーロー セクションができました。
今すぐDIVIをダウンロードしてください!!!
Divi の全幅ヘッダー モジュールを使用してヒーロー セクションを作成する
ここで、Divi の Fullwidth Header モジュールを使用してこの Hero セクションを再作成する方法を見てみましょう。
今すぐDIVIをダウンロードしてください!!!
ページを追加し、Build From Scratch を選択します
新しいページを追加し、タイトルを付けて、「Divi Builder を使用する」をクリックし、「最初からビルド」を選択します。
全角セクションと全角ヘッダーを挿入する
セクションを挿入 全角、次に選択します 全角ヘッダー モジュールライブラリで。
中身
テキスト タブでモジュールにテキスト コンテンツを追加します。
画像
画像タブに画像を追加します。
背景色を変更する
バックグラウンド タブで、次の設定を構成します。
- 背景: #1D1D25
ヘッダーテキスト
ヘッダーテキスト設定を構成します。
- タイトルのフォントの太さ: 太字
- テキストサイズ: 90px
本文
本文テキストの設定を構成します。
- 本文のテキストの色: rgba(255,255,255,0.55)
字幕テキスト
キャプション テキスト設定を構成します。
- 字幕のフォントの太さ: 太字
- テキストの色: #4C594C
- 文字間隔: 3px
ボタン
次に、XNUMX つのボタンをカスタマイズしましょう。
ボタンXNUMX
[ボタン 1] タブで、次の設定を構成します。
- ボタン XNUMX にカスタム スタイルを使用する: はい
- ボタン XNUMX
- 背景: #4c594c
- 境界線の幅: 0 ピクセル
- 境界半径：0px
- アイコンを表示 : はい
- ホバー時にのみアイコンを表示: いいえ
- パディング: 25 ピクセル (上下)。 25px(左)、50px(右)
ボタン XNUMX
[ボタン 2] タブで、次の設定を構成します。
- ボタン XNUMX にカスタム スタイルを使用する: はい
- ボタン 0 の境界線の幅: XNUMX ピクセル
- 境界半径：0px
- パディング: 25px (上、下、左、右)
- ボタン ボックス シャドウ: 4 番目を選択
- ボックス シャドウの水平位置: 0px
- ボックス シャドウの垂直位置: 2px
- 影の色: #ffffff
それで ！ これで、Divi Fullwidth Header モジュールを使用して、Hero セクションが完全にデザインされました。
今すぐDIVIをダウンロードしてください!!!
結論
Diviでヒーローセクションを作成するのは簡単です。ゼロから作成する場合でも、Fullwidth Headerモジュールを使用する場合でも、どちらでも構いません。どちらのオプションでも、訪問者の注目を集める魅力的なヘッダーデザインを作成できます。
独自のニーズに応じて、ヒーロー セクションのスタイルを設定するときに、どちらのオプションも検討するのに最適です。
両方の長所と短所を読んだ後、ヒーロー セクションをどのように設計しますか?
このチュートリアルがあなたの次のDiviプロジェクトに刺激を与えることを願っています。 懸念や提案がある場合は、 コメントセクション それを議論する。
相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合。
また、私たちのガイドを参照することを躊躇しないでください WordPressブログ作成 または Divi：史上最高のWordPressテーマ.
しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.
...