背景マスクをDiviのセクションディバイダーと組み合わせる方法
公開: 2022-08-15背景マスクをDiviのセクション区切りと組み合わせることで、すでに強力な背景デザインオプションの武器庫に創造性の別のレイヤーが追加されます. Divi のバックグラウンド オプションをあまり使用したことがない場合は、間違いなく見逃しています。 便利でありながら強力な 1 つのオプションを使用すると、数回クリックするだけで、背景のグラデーション (または画像) に背景マスクを追加できます。 背景のオプションに加えて、セクションの仕切りにより、ユーザーは背景のデザインを強化することもできます。
このチュートリアルでは、Divi で背景マスクとセクション ディバイダーを組み合わせる方法を紹介します。 この手法を使用して、Divi セクションの背景デザインを完成させる方法について、順を追って説明します。 さらに、いくつかの簡単な調整だけで代替デザインを作成する方法についても説明します.
楽しみ！
スニークピーク
このチュートリアルのデザインを簡単に見てみましょう。
コンセプト
このチュートリアルの基本概念は、背景マスクとセクション ディバイダーを組み合わせて、さらにユニークなマスク形状を作成することです。
まず、背景マスクを追加します。
次に、セクションの仕切りを追加して、マスクの形状を創造的な方法で補完します。
レイアウトを無料でダウンロード
このチュートリアルのデザインを実際に使用するには、まず下のボタンを使用してダウンロードする必要があります。 得るために
ダウンロードにアクセスするには、以下のフォームを使用して Divi Daily メーリング リストに登録する必要があります。 新しいものとして
サブスクライバーは、さらに多くの Divi の利点と無料の Divi レイアウト パックを毎週月曜日に受け取ります! すでに
下にメールアドレスを入力し、ダウンロードをクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Divi ニュースレターに参加すると、究極の Divi Landing Page Layout Pack のコピーに加えて、その他のすばらしい無料の Divi リソース、ヒント、およびトリックをメールでお送りします. 従うと、すぐにDiviマスターになります. すでに購読している場合は、下にメールアドレスを入力し、ダウンロードをクリックしてレイアウトパックにアクセスしてください。
購読に成功しました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください!
セクション レイアウトを Divi ライブラリにインポートするには、次の手順を実行します。
- ディビ ライブラリに移動します。
- ページの上部にある [インポート] ボタンをクリックします。
- 移植性ポップアップで、インポートタブを選択します
- コンピューターからダウンロード ファイルを選択します (最初にファイルを解凍し、JSON ファイルを使用してください)。
- 次に、インポートボタンをクリックします。
完了すると、セクション レイアウトが Divi Builder で使用できるようになります。
チュートリアルに行きましょうか。
始めるために必要なもの
開始するには、次のことを行う必要があります。
- まだインストールしていない場合は、Divi テーマをインストールして有効にします。
- WordPress で新しいページを作成し、Divi Builder を使用してフロント エンド (ビジュアル ビルダー) でページを編集します。
- オプション「Build From Scratch」を選択します。
- 空白のキャンバスを用意して、Divi でデザインを開始しましょう!
Diviで背景マスクと仕切りを組み合わせる方法
1.セクションのサイズと間隔を追加する
まず、ビルダーの既存のセクションにサイズと間隔を追加します。 セクションの背景デザインに専念できるように、行またはコンテンツの追加を保留します。
セクションの設定を開きます。 [デザイン] タブで、サイズと間隔を次のように更新します。
- 最小高さ: 50vw
- パディング: 上 0px、下 0px
高さに VW の長さの単位を使用するのは奇妙に思えるかもしれません。 ただし、VW の長さの単位を使用して背景要素のサイズを調整するため、これにより、さまざまなブラウザーの幅でデザインが滑らかにスケーリングされるようになります。
2. 背景のグラデーションを作成する
セクションにある程度の高さがあると、背景のグラデーションをセクションに追加する準備が整います。 これにより、バックグラウンド マスクとディバイダの組み合わせを後で紹介できるように、バックグラウンド カラーが得られます。
[コンテンツ] タブで、背景オプションの下にある [背景のグラデーション] タブをクリックします。 次に、次のようにグラデーションを追加します。
- カラーストップ 1: #1a2a6c (20%)
- カラーストップ 2: #b21f1f (60%)
- カラーストップ 2: #fdbb2d (100%)
3.背景マスクを作成する
色のグラデーションができたので、背景マスクを作成する準備が整いました。
[背景マスク] タブで、次を更新します。
- マスク: シェブロン
- マスクカラー：#000
- マスク変換: 反転
- マスク アスペクト比: スクリーンショットを参照
4. セクション背景の仕切りを追加する
マスクを配置したら、セクション ディバイダを使用してマスキングの形状をさらに変更できます。 この例では、上部と下部に半円のセクション ディバイダーを追加します。 これにより、背景マスクが絞られて、派手な矢印のデザインのようになります。
これを行うには、[デザイン] タブをクリックし、次の仕切りを追加します。
まず、[上] タブの下に上仕切りを追加します。
- 仕切りのスタイル: スクリーンショットを参照
- ディバイダーカラー：#000
- 仕切りの高さ: 10vw
次に、[下] タブの下に下仕切りを追加します。
- 仕切りのスタイル: スクリーンショットを参照
- ディバイダーカラー：#000
- 仕切りの高さ: 10vw
- Divider Flip: バーティカルフリップ
結果
ここまでの結果です。
より多くのデザインのための背景オプションと仕切りの微調整
基本的なアイデアが整ったので、背景オプションセクションの仕切りを簡単にいじって、より多くのデザインを作成できます.
代替デザイン #1
最初の代替デザインでは、既存の背景マスクを回転させ、半円セクションの仕切りを三角形に置き換えます。
これを行うには、既存のセクション設定を開き、背景の [マスク] タブをクリックして、次を更新します。
- マスク変換: 上下反転、回転
- マスク アスペクト比: スクリーンショットを参照
次に、セクション区切りを次のように更新します。
トップディバイダー
- 仕切りのスタイル: スクリーンショットを参照
- 仕切りの高さ: 13vw
ボトムディバイダー
- 仕切りのスタイル: スクリーンショットを参照
- 仕切りの高さ: 13vw
- Divider Flip:無効
結果
これが結果です。
別のデザイン #2
2 番目と最後の代替デザインでは、シェブロン マスクを斜めバー 2 マスクに置き換え、新しいトップ セクション ディバイダーを追加して、デザインに微妙なシューッという効果を追加します。
これを行うには、既存のセクション設定を開き、背景の [マスク] タブをクリックして、次を更新します。
- マスク: 斜線 2
- マスク変換: 水平反転
- マスク アスペクト比: スクリーンショットを参照
次に、セクション区切りを次のように更新します。
トップディバイダー
- 仕切りのスタイル: スクリーンショットを参照
- Divider Flip: 水平フリップ
ボトムディバイダー
- 仕切り様式: どれも
結果
これが結果です。
最終結果
一部のコンテンツでこれらの背景がどのように見えるかをよりよく理解できるようにするために、セクションの中央に配置された大きな見出しを持つ 1 列の行を追加しました。 また、それぞれにブレンド モードの画像を含むデザインを追加しました。
それらをチェックしてください！
コンテンツと画像に使用される設定を調べるには、各デザインを含むこのチュートリアル (上記参照) の無料レイアウトを自由にダウンロードしてください。
最終的な考え
背景デザインのマスクとセクション区切りを組み合わせることで、これらの組み込みマスクに独自の形状を作成する可能性が広がります。 ご自身でいろいろな組み合わせをお試しください。 うまくいけば、これはあなた自身のウェブサイトや次のプロジェクトに役立つでしょう.
コメントであなたからのご連絡をお待ちしております。
乾杯！