Diviプラグインのハイライト：Diviマスク

Divi Maskは、Diviのサードパーティプラグインであり、画像と背景にいくつかの独自のスタイルを備えた新しいモジュールをDiviBuilderに追加します。 画像がマスクの形になるように、画像の上にマスクを配置します。 マスクの外側はすべて、グラデーションや別の背景など、任意の色にすることができます。

カットアウトとして機能する54のプリセットマスクが含まれており、背後の画像が表示されます。 SVGを使用して独自のものを追加することもできます。 見出し、コンテンツ、背景ツールが含まれています。 各要素は調整およびスタイル設定できます。

このプラグインのハイライトでは、Divi Maskを見て、何ができるかを確認し、使いやすさを確認します。 DiviMaskは開発者のWebサイトから購入できます。

ディビマスクモジュール

通常どおりプラグインをアップロードしてアクティブ化します。 設定するものは何もありません。 アクティベートされるとすぐに使用できるようになります。 DiviMaskモジュールがDiviBuilderに追加されました。

[コンテンツ]タブでは、画像、マスク、テキストを追加できます。 その他の調整により、画像の背景色をカスタマイズしたり、画像をミラーリングしたり、画像の不透明度を設定したりできます。 リンクと背景を追加することもできます。 この画像は、マスク設定のマスクタブを示しています。 eSportsレイアウトパックから画像を追加しました。

これは、マスク設定の[マスク]タブです。 ドロップダウンボックスが追加され、54個の組み込みマスクから選択するか、SaveSVGと呼ばれる無料のプラグインを使用して独自のカスタムマスクをアップロードできます。

このタブには、モジュールを埋めるオプション、マスクの3つのバージョンから選択するオプション、必要なサイズに拡大縮小するオプション、回転するオプション、および水平位置と垂直位置を調整するオプションも追加されます。 この例では、それぞれを調整しました。 これは、Splodgeマスクのオプション1です。

これは、充填モジュールが有効になっているオプション1です。 モジュールに割り当てられたスペースを引き伸ばして埋めます。

これは、Splodgeマスクのオプション2です。 それはいくつかの興味深い斑点模様を作成します。

これは、Splodgeマスクのオプション3です。

マスク設定の[テキスト]タブには、見出しとコンテンツの領域が追加され、それぞれに個別にカスタマイズされます。

見出しタグを選択し、背景色、背景幅、水平および垂直位置、回転を調整します。 テキストの調整は、[デザイン]タブで処理されます。

コンテンツ領域には、テキスト、画像、メディアなどを追加できる完全なエディターが追加されます。また、色、幅、水平および垂直位置の背景調整も含まれます。 これには回転は含まれていません。 テキストの調整は[デザイン]タブにあります。

[デザイン]タブには、見出し、本文、サイズ、間隔、境界線、ボックスシャドウ、フィルター、変換、およびアニメーションに必要なすべての設定が含まれています。

[詳細設定]タブには、見出しとテキストのCSS領域が含まれています。

ディビマスクの例

この例では、平行四辺形のマスクセットを使用してモジュールを埋めています。 マスクを拡大縮小し、回転と配置を調整しました。 また、マスク設定の[画像]タブで使用したのとまったく同じ画像の背景とグラデーションを追加しました。 マスクは画像の一部を明らかにし、背景画像が背景に透けて見えるようにします。 後でもっとわかりやすいものを使用します。

今回はサークルマスクを追加しました。 背景が白の画像の上にヘッダーを配置しました。 背景の幅と不透明度を減らし、テキストに影の効果を追加しました。 画像の下にコンテンツを移動し、クリック可能な写真のセットを追加しました。 コンテンツエディタを使用するため、各要素はモジュールのリンクとは別に、異なるURLを持つことができます。 もちろん、必要に応じて画像の上にコンテンツを配置することもできます。 これは興味深いCTAになります。

これは、背景を暗くし、テキストを画像と重なるように移動しました。 ヘッダーとコンテンツテキストのサイズを大きくして、背景を白にしました。 前の例からサムネイル画像を削除して、中央の画像にフォーカスを合わせました。

この例では、旅行代理店のレイアウトパックの中央の画像モジュールを置き換え、Diviマスクモジュールに同じ画像を追加しました。 画像の不透明度を下げ、ヘッダーテキストを追加し、垂直位置を50％に設定し、ヘッダーの背景の色を変更して、不透明度を下げました。 これは、ページ、プロジェクト、投稿へのリンクを作成したり、情報を表示したりする簡単な方法です。

この例では、全幅のセクションを作成しており、セクションの区切りとブレンドするマスクを追加します。 ヘッダーとコンテンツテキストを追加し、色とサイズを変更し、背景を透明にし、画像上の必要な場所に配置しました。

三角形マスクを追加し、オプション2を選択しました。拡大して水平設定を調整しました。 モジュールにグラデーションの背景も追加しました。 この同じグラデーションをミラーリングして次のセクションに追加し、互いにブレンドすることができます。

これはオプション3です。マスクを反対側に反転します。 画像をより多く表示するために水平位置を移動し、マスクと重なるようにヘッダーとテキストの垂直位置を調整しました。 テキストは自動的にオーバーラップします。

これは、オプション1の矢印マスクを示しています。

これは矢印オプション4です。画面に表示されるように、小さい行に配置しました。

これは、背景のグラデーションでデフォルト設定を使用したブートマスクです。

これが素敵なバタフライマスクです。

これがハートマスクです。 ハートのテーマに合わせて背景のグラデーションを変更しました。

ここで、背景と同じ画像を追加し、背景画像の上に表示されるようにグラデーションを設定しました。 これにより、マスクがグラデーションの一部を切り取る効果が得られます。

もちろん、どの画像でも背景として使用できます。 この例では、背景画像を置き換えて、マスクの画像がその上に表示されるようにしました。 また、背景の不透明度を下げて、より多くの部分が透けて見えるようにし、効果をより際立たせています。

これは、マスクを回転させて右に動かしました。 背景のグラデーションの不透明度を調整しました。 まだマスク画像とは異なる背景画像が表示されています。 また、コンテンツテキストを追加し、テキストサイズ、コンテンツの垂直位置と幅を調整しました。 これにより、情報の興味深いCTAまたは宣伝文が作成されます。

これはスピーチマスクを使用しています。 水平位置を調整し、コンテンツを中央に移動しました。

これはボーダーマスクです。 額縁を作成します。 中央に配置し、画像に合わせて拡大縮小し、コンテンツを中央に配置しました。

これについては、スケールをデフォルトに戻し、フィルモジュールを選択しました。 境界線はまだ存在しますが、表示領域の外側にあります。

これは、境界線が表示されるようにスケールを調整しました。

これはひし形のマスクを使用しています。 それは角を曲がった正方形です。 拡大して右に移動しました。 コンテンツを中央に配置し、背景が透けて見えるように十分な透明度のある背景をコンテンツに与えました。 ヘッダーを追加し、横に表示するように配置しました。 また、透明感のある背景を付けました。

ディビマスクの価格とドキュメント

Divi Maskは12ドルで、6か月のサポートとライフタイムアップデートが含まれています。 無制限のウェブサイトで使用できます。 DiviMaskは開発者のWebサイトから購入できます。

開発者のWebサイトには、プラグインの詳細なウォークスルーも含まれています。 これは基本を示しており、SVG機能を使用して独自のカスタムマスクを作成する方法が含まれています。 このサイトには、インストールプロセスを順を追って説明する短いFAQも含まれています。

終わりの考え

DiviMaskは興味深いモジュールだと思いました。 それは非常に直感的です。 説明書を読んだり、ビデオを見たりする必要はありませんでしたが、万が一に備えて利用できるのは素晴らしいことです。 私のお気に入りの使用方法は、宣伝文の代わりに、CTAとして、ページや製品にリンクするため、または単に画像にデザインスタイルを追加するためです。

応答性はありますが、希望どおりに応答しないデザインを作成することは可能です。 これは、私がそれを使って設計しているときに私が心に留めておくべきことです。 もちろん、デザインのタブレットバージョンとモバイルバージョンを作成することもできます。また、DiviBuilderのさまざまなビジュアルモードを使用してデザインをテストすることもできます。

内蔵の54枚のマスクが好きです。 それらはいくつかの興味深いビジュアルを提供し、コントロールはそれをさらに拡張します。 また、SVGを使用して独自に作成できることも気に入っています。 移動可能な背景を持つ個別のヘッダー要素とコンテンツ要素があることも興味深いです。

Divi Maskは、画像やテキストの多くのデザインの可能性を開きます。 Diviで画像にカットアウトを追加することに興味がある場合は、DiviMaskを一見の価値があります。

我々はあなたから聞きたい。 ディビマスクを試しましたか？ 以下のコメントであなたがそれについてどう思うか教えてください。

Oleksandr Korchahin /shutterstock.comによる注目の画像