Divi のマスクと背景パターンのオーバーレイを使用しますか?
最後に 背景マスクと背景パターン機能のバージョン Divi の場合、独自のヒーロー セクションを作成できます。 サイトのWeb. ヒーロー セクションは、 サイトのWeb そしてそれがあなたの最初のことです 訪問者 スクロールする前に確認してください サイトのWeb, なので、目を引くことが重要です！
この記事では、背景画像に適用できる XNUMX つのユニークな背景マスクとパターン オーバーレイを作成して、見事なヒーロー セクションを作成する方法を紹介します。
このチュートリアルでは、各ヒーロー セクションを作成するために必要な重要な手順を説明し、Web サイトに印象的なヒーロー セクションを数分で作成するために必要なツールを提供します。
始めましょう！
概要
本日、この記事で作成する XNUMX つのヒーロー セクションの概要を簡単に説明します。
今すぐDIVIをダウンロードしてください!!!
デザインは繊細でシンプルでありながらインパクトがあります。
Divi Builder で新しいページを作成する
開始するには、次のことを行う必要があります。
WordPress ダッシュボードから、 ページ>新規追加 新しいページを作成します。
わかりやすいタイトルをつけてクリック DiviBuilderを使用する
その後、クリック 構築を開始 (ゼロから構築)
その後、Diviでデザインを開始するための空白のキャンバスが作成されます。
背景画像に適用する背景マスクとパターン オーバーレイの XNUMX つの例
まず、ヒーローセクションを作成しましょう
サンプル デザインはすべて同じセクション、行、列の構造を使用しているので、ここで設定してみましょう。
1. レイアウト構造を作成する
ページに行を追加し、緑色の「+」アイコンをクリックして列構造を表示し、最初の列である全幅列を選択します。
2.セクションの間隔を追加する
行と列を定義したので、セクションにスペースを追加します。
[間隔] タブで、次を更新します。
- デスクトップ: 400 ピクセル (上下)
- タブレット: 200 ピクセル (上下); 25px (左右)
- 電話: 50 ピクセル (上下); 25px (左右)
ヒーロー セクション デザイン #1
最初のヒーロー セクションを設計しましょう。
今すぐDIVIをダウンロードしてください!!!
1. ヘッダー テキストを追加する
灰色の「+」アイコンをクリックして、モジュール ライブラリを表示します。 テキストまでスクロールし、クリックして読み込みます。
タイトル テキストを入力し、タブの下に 見出しテキストで、次の設定を構成します。
- 見出しのフォント: Work Sans
- 文字色：白 #ffffff
- 見出しのテキスト サイズ:
- デスクトップ: 3 em
- タブレット: 2,2 em
- 電話: 1.4em
2.ボタンモジュールを追加
ボタンを追加して、次の設定を構成します。
- タブの下 コンテンツs: 詳しくはこちら
- タブの下 アラインメント、選択: 中央
- 上をクリックします ボタンにカスタム スタイルを使用する 次に構成します。
- ボタンのテキスト サイズ:
- デスクトップ：20px
- タブレット: 16px
- 電話番号：14px
- ボタンのテキストの色: #ffffff
- 背景: #1d1d1d
- ボタンの境界線の幅: 0
- 境界半径: 0
- 文字間隔: 3 ポイント
- ボタンのフォント: Work Sans
- フォント スタイル: TT
- ボタンのテキスト サイズ:
3. 背景画像を追加する
今、私たちの コンテンツ 設定が完了したら、セクションの背景のデザインを開始します。
- 背景トグルに移動し、3 番目のタブの画像タブをクリックしてから、[背景画像の追加] をクリックします。
- これによりメディア ライブラリが表示され、そこで写真を選択したり、新しい写真をアップロードしたりできます。
- 写真を選択したら、右下隅にある [画像をアップロード] ボタンをクリックします。
4. 背景パターンを追加する
背景画像を設定したので、パターンを追加しましょう。
- タブ内 経歴、5番目のタブ、タブに移動します 背景パターンをクリックし、「背景パターンを追加」をクリックします。
- 選択 房状 ドロップダウン メニューから、次の設定を構成します。
- パターンの色 – rgba(255,255,255,0.31)
- パターン変換: なし
- サイズ: 実寸
- パターン繰り返し原点: 上 下
- パターンリピート：リピート
- ブレンドモード：ノーマル
5.背景マスクを追加
背景画像とパターンを設定したので、背景マスクを追加しましょう。
- タブ内 経歴、6番目のタブ、タブに移動します 背景マスクをクリックし、「背景マスクを追加」をクリックします。
- 選択 ビーン ドロップダウン メニューから、次の設定を構成します。
- マスクカラー: rgba(0,0,0,0.36)
- マスクの縦横比: 横長の長方形
- サイズ: いっぱいになるまで伸ばす
そう ！ これで、美しくデザインされたヒーロー セクションが作成されました。
セクションヒーロー #2 デザイン
次に、XNUMX 番目のヒーロー セクションを設計しましょう。
1.背景画像を追加し、ブレンドモードをオーバーレイに設定します
背景画像を選択し、ブレンド モードをオーバーレイに設定し、rgba (10,10,10,0.64) のオーバーレイ カラーを追加します。
2. 背景パターンを追加する
背景画像を設定したので、背景パターンを追加しましょう。
- [背景] タブで、5 番目のタブに移動します。 背景パターンをクリックし、「背景パターンを追加」をクリックします。
- 選択 房状 ドロップダウン メニューから、次の設定を構成します。
- パターンの色 – rgba(255,255,255,0.09)
- パターン変換: なし
- サイズ: カバー
- パターン繰り返し原点: 左上
- パターンリピート：リピート
- ブレンドモード：ノーマル
3.背景マスクを追加
背景画像とパターンを設定したので、背景マスクを追加しましょう。
- タブ内 経歴、6番目のタブ、タブに移動します 背景マスクをクリックし、「背景マスクを追加」をクリックします。
- 選択 キャレット ドロップダウン メニューから、次の設定を構成します。
- マスクカラー: rgba(0,0,0,0.36)
- マスク変換: なし
- アスペクト比: 横長の長方形
- マスク サイズ: ストレッチして塗りつぶす
- マスク ブレンド モード: 通常
セクションヒーロー #3 デザイン
次に、XNUMX 番目のヒーロー セクションを設計しましょう。
1.背景画像を追加し、ブレンドモードをオーバーレイに設定します
背景画像を選択し、ブレンド モードをオーバーレイに設定し、rgba (10,10,10,0.39) のオーバーレイ カラーを追加します。
2. 背景パターンを追加する
背景画像を設定したので、背景パターンを追加しましょう。
- タブ内 経歴、5番目のタブ、タブに移動します 背景パターンをクリックし、「背景パターンを追加」をクリックします。
- 選択 斜めストライプ 2 ドロップダウン メニューから、次の設定を構成します。
- パターンの色 – rgba(0,0,0,0.06)
- パターン変換: なし
- サイズ: 実寸
- パターン繰り返し原点: 左上
- パターンリピート：リピート
- ブレンドモード：ノーマル
3.背景マスクを追加
背景画像とパターンを追加したので、背景マスクを追加しましょう。
- タブ内 経歴、6番目のタブ、タブに移動します 背景マスクをクリックし、「背景マスクを追加」をクリックします。
- 選択 三角形 ドロップダウン メニューから、次の設定を構成します。
- マスクカラー: rgba(10, 10, 10, 0,61)
- マスク変換: なし
- アスペクト比: 横長の長方形
- マスク サイズ: ストレッチして塗りつぶす
- マスク ブレンド モード: 通常
セクションヒーロー #4 デザイン
それでは、ヒーローの XNUMX 番目のセクションを設計しましょう。
1. 背景画像を追加する
背景画像を選択します。
2. 背景パターンを追加する
背景画像を追加したので、背景パターンを追加しましょう。
- タブ内 経歴、5番目のタブ、タブに移動します 背景パターンをクリックし、「背景パターンを追加」をクリックします。
- 選択 スマイルズ ドロップダウン メニューから、次の設定を構成します。
- パターンの色 – rgba(0,0,0,0.2)
- パターン変換: なし
- サイズ: カバー
- 原点を繰り返す: 左上
- パターンリピート：リピート
- パターン ブレンド モード: 通常
3.背景マスクを追加
背景画像とパターンを適用したので、背景マスクを追加しましょう。
- タブ内 経歴、6番目のタブ、タブに移動します 背景マスクをクリックし、「背景マスクを追加」をクリックします。
- 選択 コーナーレイク ドロップダウン メニューから、次の設定を構成します。
- マスクカラー: rgba(10, 10, 10, 0,61)
- マスク変換: 水平
- アスペクト比: 横長の長方形
- サイズ: カバー
- マスク位置: 中央左
- マスク ブレンダー モード: 通常
3.回線パラメータの設定
先に進む前に、このヒーロー セクションには独自の線スタイルがあります。 これを設定しましょう。
- サイズ:
- 幅: 80%
- 最大幅：800px
- 行の配置:
- デスクトップ: デフォルト
- タブレット: 中央
- 電話：センター
- 余白:
- 左: 20vw
セクションヒーロー #5 デザイン
それでは、XNUMX 番目のヒーロー セクションを設計しましょう。
今すぐDIVIをダウンロードしてください!!!
1. 背景画像を追加する
背景画像を選択します。
2.パターンを追加する
背景画像を設定したので、背景パターンを適用しましょう。
- タブ内 経歴、5番目のタブ、タブに移動します 背景パターンをクリックし、「背景パターンを追加」をクリックします。
- 選択 十字架 ドロップダウン メニューから、次の設定を構成します。
- パターンカラー – #ffffff
- パターン変換: なし
- サイズ: カスタムサイズ
- パターン幅: 10px
- パターンの高さ: 10px
- 繰り返し起点: 上 下
- パターンリピート：リピート
- パターン ブレンド モード: 通常
3.背景マスクを追加
背景画像とパターンを適用したので、背景マスクを追加しましょう。
- タブ内 経歴、6番目のタブ、タブに移動します 背景マスクをクリックし、「背景マスクを追加」をクリックします。
- 選択 斜めの丸薬 ドロップダウン メニューから、次の設定を構成します。
- マスクカラー: rgba(10, 10, 10, 0,61)
- マスク変換: 水平
- アスペクト比: 横長の長方形
- サイズ: カバー
- マスク位置: 中央左
- マスク ブレンド モード: 通常
3.回線パラメータの設定
先に進む前に、このヒーロー セクションにも独自の線スタイルがあります。 これを設定しましょう。
- サイズ:
- 幅: 80%
- 最大幅：800px
- 行の配置:
- デスクトップ: デフォルト
- タブレット: 中央
- 電話：センター
- 間隔:
- 余白 (右): 18vw
まとめ
新しいオプションを使用すると、Web サイトのユニークで人目を引くヒーロー セクションを簡単にデザインできます。 背景とパターンのマスク ディビによる。 各機能には、本当にクリエイティブな背景を作成できる多くのオプションがあります。
さらに、背景パターンとマスクを任意の Divi Builder アイテムに追加できます! デザインの選択肢は無限大です。
このテクニックが、将来のプロジェクトに役立つ別の設計スキルを追加することを願っています。
このチュートリアルがあなたの次のDiviプロジェクトに刺激を与えることを願っています。 懸念や提案がある場合は、 コメントセクション それを議論する。
相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合。
また、私たちのガイドを参照することを躊躇しないでください WordPressブログ作成 または Divi：史上最高のWordPressテーマ.
しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.
...
