背景画像に適用できる 5 つの背景マスクとパターン オーバーレイ

公開: 2022-08-08

Divi の最新の背景マスクと背景パターン機能のリリースにより、Web サイトにいくつかのユニークなヒーロー セクションを作成できます。 ヒーロー セクションは Web サイトの最初のセクションであり、訪問者が Web サイトをスクロールする前に最初に目にするものであるため、人目を引くことが重要です。 ディビの背景画像、背景マスク、背景パターンのオプションを組み合わせることで、説得力のあるヒーロー セクションを作成し、ウェブサイトの第一印象を良くすることができます。

この投稿では、5 つのユニークな背景マスクとパターン オーバーレイを作成して背景画像に適用し、真に見事なヒーロー セクションを作成する方法を紹介します。 このチュートリアルでは、各ヒーロー セクションを作成するために必要な基本的な手順について説明し、Web サイトの印象的なヒーロー セクションを数分で作成するために必要なツールを提供します。

この例では、オンライン コース レイアウト パックの無料の写真を使用します。 同じ画像を使用するには、この投稿の一番下までスクロールして、フル解像度の画像をダウンロードしてください。

始めましょう！

私たちが創造するもの

今日この投稿で作成する 5 つのヒーロー セクションを簡単に見てみましょう。

デザインは控えめでシンプルですが、インパクトがあります。

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

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

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

無料でダウンロード

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

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

レイアウトのダウンロード方法と使用方法

セクション レイアウトを Divi ライブラリにインポートするには、次の手順を実行します。

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

レイアウトが正常にインポートされると、Divi ライブラリに表示され、Divi Builder で使用できるようになります。

では、チュートリアルに行きましょう！

始めるために必要なもの

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

  1. Divi テーマをインストールして有効にします。
  2. 新しいページを作成して公開し、[Use The Divi Builder] ボタンをクリックして、Visual Builder を使用してフロント エンドのページを編集します。
  3. オプション「Build From Scratch」を選択します。

これで、デザインを開始するための空白のキャンバスができました。

背景画像に適用する 5 つの背景マスクとパターン オーバーレイを作成する方法

まず、ヒーローセクションを作成しましょう

設計例はすべて同じセクション、行、および列構造を使用しているので、ここでそれらを設定しましょう。

1. レイアウト構造を作成する

ページに行を追加し、緑色の「+」アイコンをクリックして列構造を表示し、最初の列である 1 つの全角列を選択します。

2.セクションの間隔を追加する

行と列を設定したので、次はセクションに間隔を追加します。

[間隔] タブで、次を更新します。

  • デスクトップ: 上 400 ピクセル、下 400 ピクセル
  • タブレット: 上部 200 ピクセル、下部 200 ピクセル。 左右25px
  • 電話: 上 50 ピクセル、下 50 ピクセル。 左右25px

ヒーローセクションのデザイン方法 #1

最初のヒーローセクションをデザインしましょう。

1.見出しテキストを追加する

灰色の「+」アイコンをクリックして、モジュール ライブラリを表示します。 テキストまでスクロールし、クリックして読み込みます。

見出しテキストを入力し、[見出しテキスト] タブで次の設定を構成します。

  • フォントファミリー: Work Sans
  • 文字色：白 #ffffff
  • フォントサイズ：
    • デスクトップ: 3rem
    • タブレット：2.2レム
    • 電話: 1.4rem

2.ボタンモジュールを追加

ボタンを追加して、次の設定を構成します。

  • [テキスト] タブで次のように入力します: 詳細
  • [配置] タブで次を選択します: 中央
  • [カスタム スタイルを使用] をクリックして、次のように構成します。
    • ボタンのテキスト サイズ:
      • デスクトップ: 20px
      • タブレット: 16px
      • 電話: 14px
    • ボタンの文字色：白 #ffffff
    • ボタンの背景色: 黒 #1d1d1d
    • ボタンの境界線の幅: 0
    • ボタン境界半径: 0
    • ボタンの文字間隔: 3pt
    • ボタンのフォント: Work Sans
    • ボタンのフォント スタイル: 大文字

3.背景画像を追加する

コンテンツの設定が完了したので、セクションの背景のデザインを開始します。

  1. 背景トグルに移動し、3 番目のタブである画像タブをクリックし、[背景画像の追加] をクリックします。
  2. これによりメディア ライブラリが表示され、そこで写真を選択したり、新しい写真をアップロードしたりできます。
  3. 写真を選択したら、右下の「画像をアップロード」ボタンをクリックします。

4.背景パターンを追加する

背景画像の設定が完了したので、パターンを追加しましょう。

  • [背景] タブ内で、5 番目のタブの [パターン] タブに移動し、[背景パターンの追加] をクリックします。
  • ドロップダウン メニューから [Tufted] を選択し、次の設定を構成します。
    • パターンの色 – rgba(255,255,255,0.31)
    • パターン変換: なし
    • パターンサイズ: 実寸
    • パターン繰り返し原点: 左上
    • パターンリピート：リピート
    • ブレンドモード：ノーマル

5.背景マスクを追加

背景画像とパターンの設定が完了したので、背景マスクを追加しましょう。

  • [背景] タブ内で、6 番目のタブ、[マスク] タブに移動し、[背景マスクを追加] をクリックします。
  • ドロップダウン メニューから [Bean] を選択し、次の設定を構成します。
    • マスクカラー: rgba(0,0,0,0.36)
    • マスク アスペクト比: 横長の長方形
    • マスクのサイズ: いっぱいに伸ばす

出来上がり！ これで、美しくデザインされたヒーロー セクションが完成しました。

ヒーローをデザインする方法セクション #2

では、2 番目のヒーロー セクションを設計しましょう。

1.背景画像を追加し、ブレンドモードをオーバーレイに設定します

背景画像を選択し、ブレンド モードをオーバーレイに設定し、rgba(10,10,10,0.64) のオーバーレイ カラーを追加します。

2.背景パターンを追加する

背景画像の設定が完了したので、背景パターンを追加しましょう。

  • [背景] タブ内で、5 番目のタブの [パターン] タブに移動し、[背景パターンの追加] をクリックします。
  • ドロップダウンから [ Tufted ] を選択し、次の設定を構成します。
    • パターンの色 – rgba(255,255,255,0.09)
    • パターン変換: なし
    • パターンサイズ: カバー
    • パターン繰り返し原点: 左上
    • パターンリピート：リピート
    • ブレンドモード：ノーマル

3.背景マスクを追加

背景画像とパターンの設定が完了したので、背景マスクを追加しましょう。

  • [背景] タブ内で、6 番目のタブ、[マスク] タブに移動し、[背景マスクを追加] をクリックします。
  • ドロップダウン メニューから [キャレット] を選択し、次の設定を構成します。
    • マスクカラー: rgba(0,0,0,0.36)
    • マスク変換: なし
    • マスク アスペクト比: 横長の長方形
    • マスクのサイズ: いっぱいに伸ばす
    • マスク ブレンド モード: 通常

ヒーローをデザインする方法セクション #3

では、3 番目のヒーロー セクションを設計しましょう。

1.背景画像を追加し、ブレンドモードをオーバーレイに設定します

背景画像を選択し、ブレンド モードをオーバーレイに設定し、rgba(10,10,10,0.39) のオーバーレイ カラーを追加します。

2.背景パターンを追加する

背景画像の設定が完了したので、背景パターンを追加しましょう。

  • [背景] タブ内で、5 番目のタブの [パターン] タブに移動し、[背景パターンの追加] をクリックします。
  • ドロップダウンから [ Diagonal Stripes 2 ] を選択し、次の設定を構成します。
    • パターンの色 – rgba(0,0,0,0.06)
    • パターン変換: なし
    • パターンサイズ: 実寸
    • パターン繰り返し原点: 左上
    • パターンリピート：リピート
    • ブレンドモード：ノーマル

3.背景マスクを追加

背景画像とパターンを追加したので、背景マスクを追加しましょう。

  • [背景] タブ内で、6 番目のタブ、[マスク] タブに移動し、[背景マスクを追加] をクリックします。
  • ドロップダウン メニューから [三角形] を選択し、次の設定を構成します。
    • マスクカラー: rgba(10,10,10,0.61)
    • パターン変換: なし
    • マスク アスペクト比: 横長の長方形
    • マスクのサイズ: いっぱいに伸ばす
    • マスク ブレンド モード: 通常

ヒーローをデザインする方法セクション #4

では、4 番目のヒーロー セクションを設計しましょう。

1.背景画像を追加する

背景画像を選択します。

2.背景パターンを追加する

背景画像を追加したので、背景パターンを追加しましょう。

  • [背景] タブ内で、5 番目のタブの [パターン] タブに移動し、[背景パターンの追加] をクリックします。
  • ドロップダウンから [ Smiles ] を選択し、次の設定を構成します。
    • パターンの色 – rgba(0,0,0,0.2)
    • パターン変換: なし
    • パターンサイズ: 表紙
    • パターン繰り返し原点: 左上
    • パターンリピート：リピート
    • ブレンドモード：ノーマル

3.背景マスクを追加

背景画像とパターンを適用したので、背景マスクを追加しましょう。

  • [背景] タブ内で、6 番目のタブ、[マスク] タブに移動し、[背景マスクを追加] をクリックします。
  • ドロップダウン メニューから [ Corner Lake ] を選択し、次の設定を構成します。
    • マスクカラー: rgba(10,10,10,0.61)
    • マスク変換: 水平
    • マスク縦横比: 横長の長方形
    • マスクサイズ: カバー
    • マスク位置: 中央左
    • マスク ブレンド モード: 通常

3.行設定の構成

先に進む前に、このヒーロー セクションには独自の行スタイルがあります。 それを設定しましょう。

  • サイズ:
    • 幅: 80%
    • 最大幅: 800px
  • 行の配置:
    • デスクトップ: デフォルト
    • タブレット: 中央
    • 電話：センター
  • 間隔:
    • 左: 20vw

ヒーローをデザインする方法セクション #5

では、5 番目のヒーロー セクションを設計しましょう。

1.背景画像を追加する

背景画像を選択します。

2.背景パターンを追加する

背景画像の設定が完了したので、背景パターンを適用しましょう。

  • [背景] タブ内で、5 番目のタブの [パターン] タブに移動し、[背景パターンの追加] をクリックします。
  • ドロップダウンからCrossesを選択し、次の設定を構成します。
    • パターンカラー – #ffffff
    • パターン変換: なし
    • パターンサイズ: 注文のサイズ
    • パターン幅: 10px
    • パターンの高さ: 10px
    • パターン繰り返し原点: 左上
    • パターンリピート：リピート
    • ブレンドモード：ノーマル

3.背景マスクを追加

背景画像とパターンを適用したので、背景マスクを追加しましょう。

  • [背景] タブ内で、6 番目のタブ、[マスク] タブに移動し、[背景マスクを追加] をクリックします。
  • ドロップダウン メニューから [対角ピル] を選択し、次の設定を構成します。
    • マスクカラー: rgba(10,10,10,0.61)
    • マスク変換: 水平
    • マスク縦横比: 横長の長方形
    • マスクサイズ: カバー
    • マスク位置: 中央左
    • マスク ブレンド モード: 通常

3.行設定の構成

先に進む前に、このヒーロー セクションには独自の行スタイルがあります。 それを設定しましょう。

  • サイズ:
    • 幅: 80%
    • 最大幅: 800px
  • 行の配置:
    • デスクトップ: デフォルト
    • タブレット: 中央
    • 電話：センター
  • 間隔:
    • 右: 18vw

より多くの背景マスクとパターンのデザインを入手してください!

このようなデザインがもっと必要な場合は、これらの 12 の背景マスクとパターンのデザインを無料でダウンロードできます。

最終的な考え

Divi の新しい背景マスクとパターン オプションを使用すると、Web サイトのユニークで人目を引くヒーロー セクションを簡単にデザインできます。 各機能には、本当にクリエイティブな背景デザインを作成できる多くのオプションがあります。 さらに、背景パターンとマスクを任意の Divi Builder 要素に追加できます! デザインの選択肢は無限大です。