全幅ヘッダー モジュールを使用して Hero Divi セクションを作成しますか、それとも自分でデザインしますか?
のヒーローセクションを構築する サイトのWeb ゼロから作成するか、Divi Fullwidth Header モジュールを使用して、人目を引くデザインを作成する XNUMX つの方法があります。 ウェブサイト.
この記事では、全幅ヘッダー モジュールを使用することと、Divi で独自のヒーロー セクションを作成することの長所と短所を見ていきます。
行こう！
ウェブサイトのヒーローセクションの重要性
ヒーロー セクションは、あなたの最初のセクションです。 訪問者 いつ到着するか確認してください サイトのWeb。 これは多くの場合全幅バナーであり、ヒーロー ヘッダーと呼ばれることもあります。 永続的な第一印象を残す力があるため、Web サイトの目立つ場所になります。
したがって、キャッチーで説得力がありながら、読みやすいようにデザインすることが重要です。 Web サイトのヒーロー セクションは、潜在的な顧客の注意を引き、ページの概要をすばやく示し、追加のエンゲージメントと潜在的なリードにつながる可能性があるため、重要です。 ヒーロー セクションはブランディングし、H1 タイトルと CTA を含める必要があります。
ゼロからヒーロー セクションを作成する
ヒーロー セクションを最初からデザインすると、デザインとデザインを完全に制御できるようになります。 コンテンツ。 状況とニーズによっては、これは Web サイトにとって優れたソリューションとなる可能性があります。
このアプローチの長所と短所を見てみましょう。
このアプローチの利点
まず、Divi を使用してゼロから Web サイトのヒーロー セクションを構築する利点を見てみましょう。
- 完全な設計管理
- 任意のDiviモジュールを使用
このアプローチの欠点
ここで、ゼロからヒーロー セクションを作成することの欠点を見てみましょう。
- ゼロから構築する必要があります
- 複数のモッドが必要
Divi Fullwidth Header モジュールで Hero セクションを作成する
Divi Fullwidth Header モジュールを使用してヒーロー セクションを作成すると、目を引くモバイル レスポンシブ デザインをわずか数分で簡単に作成できます。
このアプローチの長所と短所を見てみましょう。
このアプローチの利点
Divi Fullwidth Header モジュールを使用して Hero セクションを構築する利点を見てみましょう。
- すべてのあなたの コンテンツ 単一モジュール内にある
- 設計はすでに最適化されています
このアプローチの欠点
それでは、Divi Fullwidth ヘッダー モジュールを使用してヒーロー セクションを設計することの欠点を評価してみましょう。
- 設計の自由度が低い
Divi Fullwidth Header モジュールには、次のオプションが付属しています。 コンテンツ 事前定義されているものもありますが、モジュールで利用できないコンテンツを追加する場合は、多くが制限される可能性があります。 これは、全体的な設計における柔軟性が低下することを意味します。
XNUMX つのヒーロー セクションを段階的に構築する
両方のアプローチの長所と短所を理解したので、各ヒーロー セクションを作成して、各アプローチがどのように機能するかを正確に確認できるようにします。
Divi Builder で新しいページを作成する
開始するには、次のことを行う必要があります。
- ディビをインストール WordPress Webサイトで。
- ページを追加し、タイトルを付けます。
- ビジュアル ビルダーを有効にする
ヒーロー セクションを最初から作成する
ページが設定されたので、ヒーロー セクションをゼロから作成してみましょう。
今すぐDIVIをダウンロードしてください!!!
「ディビビルダー」を発動
Divi のドラッグ アンド ドロップ ビルダーを使用するには、ボタンをクリックしてビジュアル ビルダーを有効にする必要があります。 「DiviBuilderを使う」. これにより、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 の全幅ヘッダー モジュールを使用して、このヒーロー セクションを再作成する方法を見てみましょう。
今すぐDIVIをダウンロードしてください!!!
ページを追加し、Build From Scratch を選択します
新しいページを追加し、タイトルを付けてから、[Use Divi Builder] をクリックしてから、[Build From Scratch] を選択します。
全角セクションと全角ヘッダーを挿入する
セクションを挿入 全角、次に選択します 全角ヘッダー モジュールライブラリで。
中身
[テキスト] タブで、テキスト コンテンツをモジュールに追加します。
画像
画像タブに画像を追加します。
背景色を変更する
バックグラウンド タブで、次の設定を構成します。
- 背景: #1D1D25
ヘッダーテキスト
ヘッダー テキスト設定を構成します。
- タイトルのフォントの太さ: 太字
- テキストサイズ: 90px
本文
本文テキストの設定を構成します。
- 本文のテキストの色: rgba(255,255,255,0.55)
字幕テキスト
キャプション テキスト設定を構成します。
- 字幕のフォントの太さ: 太字
- テキストの色: #4C594C
- 文字間隔: 3px
ボタン
次に、XNUMX つのボタンをカスタマイズしましょう。
ボタンXNUMX
[ボタン XNUMX] タブで、次の設定を構成します。
- ボタン XNUMX にカスタム スタイルを使用する: はい
- ボタン XNUMX
- 背景: #4c594c
- 境界線の幅: 0 ピクセル
- 境界半径：0px
- アイコンを表示 : はい
- ホバー時にのみアイコンを表示: いいえ
- パディング: 25 ピクセル (上下)。 25px(左)、50px(右)
ボタン XNUMX
[ボタン XNUMX] タブで、次の設定を構成します。
- ボタン XNUMX にカスタム スタイルを使用する: はい
- ボタン 0 の境界線の幅: XNUMX ピクセル
- 境界半径：0px
- パディング: 25px (上、下、左、右)
- ボタン ボックス シャドウ: 4 番目を選択
- ボックス シャドウの水平位置: 0px
- ボックス シャドウの垂直位置: 2px
- 影の色: #ffffff
それで ！ これで、Divi Fullwidth ヘッダー モジュールを使用して完全に設計されたヒーロー セクションができました。
今すぐDIVIをダウンロードしてください!!!
まとめ
ゼロから構築する場合でも、全幅ヘッダー モジュールを使用する場合でも、Divi を使用してヒーロー セクションを構築するのは簡単です。 どちらのオプションでも、ユーザーの関心を引く見事なヘッダー デザインを作成できます。 訪問者.
独自のニーズに応じて、どちらのオプションも、ヒーロー セクションをスタイリングする際に考慮すべき優れたオプションです。
両方の長所と短所を読んだ後、ヒーロー セクションをどのように設計しますか?
このチュートリアルがあなたの次のDiviプロジェクトに刺激を与えることを願っています。 懸念や提案がある場合は、 コメントセクション それを議論する。
相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合。
また、私たちのガイドを参照することを躊躇しないでください WordPressブログ作成 または Divi：史上最高のWordPressテーマ.
しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.
...
