全幅ヘッダーモジュールの背景のスタイルを設定する方法

公開: 2022-09-28

Divi の全幅ヘッダーモジュールを使用すると、Web サイトの見事なヒーローセクションをわずか数分で簡単にデザインできます。ヒーローセクションは、訪問者が最初に目にする Web サイトのセクションです。ありがたいことに、Divi Fullwidth Header には、ヘッダーテキスト、サブタイトルテキスト、本文テキスト、2 つの画像、2 つのボタンというコンテンツオプションが満載です。今日、全幅ヘッダーでこれらすべての要素を利用します。

この投稿では、目を引くデザインで全幅ヘッダーの背景をデザインする 3 つの方法を紹介します。始める準備はできましたか？飛び込みましょう！

デザインプレビュー

今日デザインする 3 つの全幅ヘッダーを見てみましょう。

ディビブッシュクラフトコミュニティ

最初のデザインは、Divi の背景画像オプションを使用して、Bushcraft コミュニティのブランドに合ったユニークなテクスチャ背景を作成します。

ミセス・ニコールの2年生

この 2 番目のデザインでは、背景画像と背景のグラデーションを使用して、ニコル先生の 2 年生のクラス用のクリーンでモダン、かつ新鮮なウェルカムヘッダーを作成します。

不動産業者ヘッダー

3 番目のデザインは、背景画像、背景のグラデーション、および背景パターンを使用して、すべてを組み合わせて、不動産業者のホームページ用の洗練されたデザインを作成します。

レイアウトを無料でダウンロード

このチュートリアルのデザインを実際に使用するには、まず下のボタンを使用してダウンロードする必要があります。ダウンロードにアクセスするには、以下のフォームを使用してニュースレターを購読する必要があります。新しいサブスクライバーとして、毎週月曜日にさらに多くの Divi の利点と無料の Divi レイアウトパックを受け取ります! すでにリストに登録されている場合は、下にメールアドレスを入力して [ダウンロード] をクリックしてください。「再購読」したり、余分な電子メールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Divi ニュースレターに参加すると、究極の Divi Landing Page Layout Pack のコピーに加えて、その他のすばらしい無料の Divi リソース、ヒント、およびトリックをメールでお送りします. 従うと、すぐにDiviマスターになります. すでに購読している場合は、下にメールアドレスを入力し、ダウンロードをクリックしてレイアウトパックにアクセスしてください。

購読に成功しました。メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください!

ヘッダーテンプレートを Divi ライブラリにインポートするには、次の手順を実行します。

Divi テーマビルダーに移動します。
ページの右上にある [インポート] ボタンをクリックします。
移植性ポップアップで、インポートタブを選択します
コンピューターからダウンロードファイルを選択します (最初にファイルを解凍し、JSON ファイルを使用してください)。
次に、インポートボタンをクリックします。

完了すると、セクションレイアウトが Divi Builder で使用できるようになります。

チュートリアルに行きましょうか。

始めるために必要なもの

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

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

ページの設定

[Use Divi Builder] ボタンをクリックすると、Divi のドラッグアンドドロップビルダーインターフェイスを使用してページがリロードされます。 3 つのオプションがポップアップ表示され、今日の目的のために「Build From Scratch」を選択して、全幅ヘッダーを作成できる白紙の状態にします。

Divi Bushcraft コミュニティの全幅ヘッダーを設計する方法

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

まず、ページに全角セクションを追加する必要があります。「+」アイコンをクリックしてセクションオプションを表示し、「全幅」をクリックします。これにより、オプションから「全幅ヘッダー」を選択できる全幅モジュールライブラリが読み込まれます。これにより、全幅のヘッダーモジュールがページに読み込まれます。

コンテンツを追加

次に、モジュールのコンテンツを [テキスト] タブに追加します。次の設定を構成します。

ヘッダーテキスト: ディビブッシュクラフトコミュニティ
字幕テキスト: ディビ・ブッシュクラフト
ボタン #1: 今日参加する
ボタン #2: 詳細
本文: At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque Corrupti quos dolores et quas molestias excepturi sint occaecati cupiditation nonprovident.

背景のスタイル

このデザインは、無料の Divi Bushcraft 既製レイアウトパックの背景画像を利用しています。この投稿では、そのレイアウトパックからすべての画像を取得できます。投稿の一番下までスクロールし、クリックして高解像度の画像をダウンロードするだけです。

背景画像を追加

写真を用意したら、背景画像を追加します。

3 番目のアイコン、画像アイコンをクリックします。
「背景画像を追加」をクリックします。これにより、新しい写真をアップロードしたり、メディアライブラリから写真を選択したりできるメディアライブラリが表示されます。
Background Image Blend Mode をOverlayに設定します。
最初のアイコンであるペイントバケツアイコンをクリックし、背景色を rgba(10,10,10,0.3) に設定します。

レイアウトを選択

[デザイン] 設定の下にある [レイアウト] タブで、中央揃えを選択します。「フルスクリーンにする」オプションを「はい」に切り替えます。

スタイルタイトルテキスト

次の設定を構成して、タイトルテキストのスタイルを設定します。

タイトル見出しレベル: H1
タイトルのフォント: Josefin Sans
タイトルのフォントの太さ: 太字
タイトルのフォントスタイル: 大文字
タイトル文字サイズ：7rem

スタイル本文

次の設定を構成して、本文のスタイルを設定します。

本文のフォント: Josefin Sans
本文のテキストサイズ: 20px

スタイル字幕テキスト

次の設定を構成して、字幕テキストのスタイルを設定します。

字幕フォント: Josefin Sans
字幕のフォントの太さ: セミボールド
字幕のフォントスタイル: 大文字
字幕文字間隔: 3px
字幕行の高さ: 5em

スタイルボタン #1

それでは、ボタンのスタイルを設定しましょう! ボタン 1 については、次の設定を構成します。

ボタン 1 にカスタムスタイルを使用する: はい
ボタン 1 のテキストサイズ: 14px
ボタン 1 のテキストの色: #666b4a
ボタン 1 の背景: #ead5a4
ボタン 1 の境界線の幅: 0px
ボタン 1 の境界線の半径: 0px
ボタンの 1 文字の間隔: 3px
ボタン 1 のフォントスタイル: 大文字
ボタン 1 パディング: 上下 15 ピクセル。左右25px。

スタイルボタン #2

ボタン #2 のスタイルを設定するには、次の設定を構成します。

ボタン 1 にカスタムスタイルを使用する: はい
ボタン 1 のテキストサイズ: 14px
ボタン 1 のテキストの色: #ead5a4
ボタン 1 背景: #666b4a
ボタン 1 の境界線の幅: 0px
ボタン 1 の境界線の半径: 0px
ボタンの 1 文字の間隔: 3px
ボタン 1 のフォントスタイル: 大文字
ボタン 1 パディング: 上下 15 ピクセル。左右25px。

そして、ほら！ ディビブッシュクラフトコミュニティ用のオーバーレイ付きのテクスチャ背景画像を含む、美しいスタイルの全幅ヘッダーがあります。

ニコル夫人の全幅ヘッダーのデザイン方法

それでは、ミセスニコルの 2 年生のクラスの全角ヘッダーをデザインしましょう。このヘッダーは、背景画像とグラデーションを使用して、楽しく新鮮なデザインを作成します。始めましょう！