Diviの背景マスクとパターン変換設定の使用方法

背景パターンは、Webサイトに視覚的なセンスを与え、群衆から目立たせるための優れた方法です。 Diviの新しい背景マスクとパターン変換設定をさまざまな方法で組み合わせて、これらの背景パターンを作成できます。 この投稿では、Diviの背景マスクとパターン変換設定を使用して、Diviレイアウトの興味深い背景を作成する方法を説明します。

始めましょう。

プレビュー

まず、デスクトップ、電話、およびそれぞれの代替オプションを使用した各例を見てみましょう。

例1の結果

通常版デスクトップ

通常版の電話

代替バージョンのデスクトップ

代替バージョンの電話

例2の結果

通常版デスクトップ

通常版の電話

代替バージョンのデスクトップ

代替バージョンの電話

例3の結果

通常版デスクトップ

通常版の電話

代替バージョンのデスクトップ

代替バージョンの電話

Divi背景マスクとパターン変換オプション

Diviの新しい背景マスクとパターン機能には、それらを調整するためのいくつかのオプションが含まれています。 調整には、水平および垂直の反転、回転、および反転が含まれます。 オプションを表示するには、セクションまたは行の背景設定に移動し、[背景パターン]タブまたは[背景マスク]タブを選択します。

パターンまたはマスクを追加すると、変換設定が表示されます。 使用するオプションをクリックするだけです。 それらを一緒に、または任意の組み合わせで使用できます。

Diviのマスクとパターン変換の設定のしくみ

以下のパターンは、デフォルト設定のジグザグです。

下の画像にレイヤーブログマスクを追加しました。 これらを使用して、背景マスクとパターン変換の設定がどのように機能するかを示しましょう。

水平フリッピング

これは水平フリッピングです。 パターンとマスクの両方に変換設定を適用しました。

垂直フリッピング

これは、パターンとマスクの垂直反転です。

回転

これは、パターンとマスクの回転を示しています。

反転

この例は、パターンとマスクの反転を示しています。

背景マスクとパターン変換の組み合わせ

もちろん、変換設定をさまざまな組み合わせで使用することもできます。 ここにいくつかの例があります。

これはパターンを回転させ、マスクを反転させます。

この例では、背景パターンに垂直反転、回転、および反転を使用しています。 背景マスクは、水平反転、垂直反転、および回転を使用します。

この例では、背景パターンに水平方向の反転と回転を使用し、背景マスクに垂直方向の反転と回転を使用しました。

背景マスクとパターン変換の設定例

次に、これらの設定をDiviレイアウトでどのように使用できるかを見てみましょう。 出発点としてセクションを使用し、3つの例を作成します。 スタイルを設定してから、変換設定を使用して例ごとに変更します。

私の例では、Divi内で利用可能なEstatePlanningランディングページのヒーローセクションの修正バージョンを使用しています。 これが私のセクションです。 変更により、私たちのニーズに合わせてヒーローセクションが簡素化されます。 背景色の背景を使用します：＃92a5ab。

• 背景：＃92a5ab

背景マスクとパターン変換の設定例1

最初の例では、画面の中央に垂直に配置されたアーチを示しています。 画面の片側には房状のパターンがあります。 次に、アーチを反対方向に向けた代替バージョンを作成します。

背景パターン

セクション設定を開き、[背景]まで下にスクロールして、[背景パターン]タブを選択します。 背景パターンにはタフテッドを選択し、パターン変換には反転を選択します。

• 背景パターン：房状
• パターン変換：反転

背景マスク

[背景マスク]タブを選択し、[背景マスク]に[アーチ]を選択します。 Mask Colorを＃616d72に変更し、MaskTransformをInvertingに設定します。 これで、最初のバージョンのアーチが房で完成します。

• 背景マスク：アーチ
• 色：＃616d72
• マスク変換：反転

例1のバリエーション

次に、デザインのバリエーションを作成しましょう。 背景パターンのマスク変換を水平フリッピングと垂直フリッピングに変更するだけです。 これにより、アーチが反対方向を向くように変更され、パターンがシフトされるため、鏡像のように見えるだけではありません。

• マスク変換：水平フリッピング、垂直フリッピング

背景マスクとパターン変換の設定例2

2番目の例では、画面の中央に楕円形を作成し、楕円形の内側にパターンを作成します。 次に、パターンの配置を変更します。 また、さまざまな画面サイズに合わせてこれを変更します。

背景パターン

[背景設定]で、[背景パターン]タブを選択し、パターンとして[Shippo]を選択します。 パターン変換を反転に設定します。

• 背景パターン：Shippo
• パターン変換：反転

背景マスク

次に、[背景マスク]タブを選択します。 背景マスクとしてEclipseを選択し、背景オプションにカーソルを合わせます。 表示されるタブレットアイコンを選択します。 これにより、デバイス設定が開きます。 デスクトップ設定では、色を＃758489に設定します。 [マスク変換]で、[水平方向の反転と回転]を選択します。 これでデスクトップ版は終了です。 モバイル版に変更してみましょう。

• 背景マスク：Eclipse
• 色：＃758489
• マスク変換：水平反転、回転

タブレットと電話

タブレットと電話はどちらも同じ設定を使用するため、タブレットの設定を変更するだけで済みます。 [タブレット]タブを選択し、[マスク変換]を[水平反転]に変更します。

• マスク変換：水平反転、反転

例2のバリエーション

次に、2番目の例のバリエーションを作成します。 まず、[背景パターン]タブを選択し、[パターンの色]をrgba（0,0,0,0.06）に設定します。

• パターンカラー：rgba（0,0,0,0.06）

次に、[背景マスク]タブを選択し、[マスク変換]で[水平方向の反転、回転、および反転]を選択します。

• マスク変換：水平反転、回転、反転

タブレットと電話

タブレットと電話のオプションについては、タブレットアイコンを選択します。 MaskTransformをHorizo ​​ntalFlipingandInvertingに変更します。 これで、例2の代替バージョンが完成しました。

• マスク変換：水平反転、反転

背景マスクとパターン変換の設定例3

3番目のマスクとパターン変換の設定例では、ペイントマスク付きのハニカムパターンを使用します。 このバージョンのモバイルバージョンも作成します。

背景パターン

まず、[デバイス設定]タブを選択し、デスクトップアイコンを選択します。 [背景パターン]タブを選択し、[背景パターン]に[ハニカム]を選択します。 色をrgba（0,0,0,0.42）に変更します。 これについては、パターン変換オプションを無効のままにします。 代替バージョン用に追加します。

• 背景パターン：ハニカム
• パターンカラー：rgba（0,0,0,0.42）
• パターン変換：なし

背景マスク

次に、[背景マスク]タブを選択します。 背景マスクにペイントを選択します。 色を＃697b82に変更します。 マスク変換に垂直反転を選択します。

• 背景マスク：ペイント
• 色：＃697b82
• マスク変換：垂直反転

次に、[サイズ]で[カバー]を選択します。 これにより、さらにいくつかのオプションが開きます。 位置として右下を選択します。 デスクトップ版は以上です。 次に、モバイル版を作成します。

• サイズ：カバー
• 位置：右下

タブレットと電話

次に、タブレットタブを選択し、[背景マスクの変換]を[垂直方向の反転と回転]に変更します。 これで、3番目の例のスタイリングは完了です。 次に、代替バージョンを作成します。

• 背景マスク変換：垂直反転、回転

例3のバリエーション

この例の代替バージョンでは、背景パターンと背景マスクの両方を調整します。

背景パターン

背景パターンの場合は、パターンの色をrgba（0,0,0,0.11）に変更します。 パターン変換を水平フリッピング、垂直フリッピング、および回転に変更します。

• パターンカラー：rgba（0,0,0,0.11）
• パターン変換：水平フリッピング、垂直フリッピング、回転

背景マスク

次に、[背景マスク]タブを選択します。 色を白に変更し、マスク変換を水平反転、垂直反転、および反転に変更します。

• 色：#ffffff
• マスク変換：水平フリッピング、垂直フリッピング、反転

次に、マスクサイズをカバーに変更し、マスク位置の中心を選択します。

• マスクサイズ：カバー
• マスクの位置：中央

タブレットと電話

最後に、タブレットタブを選択してモバイルバージョンを作成します。 [背景マスク]タブを選択し、マスク変換の4つのオプションすべてを選択します。 これで、3番目の例の代替バージョンが完成しました。

• 背景マスク変換：水平フリッピング、垂直フリッピング、回転、反転

結果

これは、デスクトップ、電話、およびそれぞれの代替オプションを使用した各例を示しています。

例1の結果

通常版デスクトップ

通常版の電話

代替バージョンのデスクトップ

代替バージョンの電話

例2の結果

通常版デスクトップ

通常版の電話

代替バージョンのデスクトップ

代替バージョンの電話

例3の結果

通常版デスクトップ

通常版の電話

代替バージョンのデスクトップ

代替バージョンの電話

終わりの考え

これが、Diviの背景マスクとパターン変換設定を使用して多くの興味深い背景デザインを作成する方法を示しています。 パターンとマスクを併用できるため、変換設定も併用できます。 これにより、多くのデザインオプションが開き、Diviの背景に優雅さを加えるためのさらに多くのツールが提供されます。 それらの使い方を学ぶ最良の方法は、調整をいじって、何を作成できるかを確認することです。

私たちはあなたから聞きたい。 DiviレイアウトでDiviの背景マスクとパターン変換設定を試しましたか？ コメントで教えてください。