Diviプラグインのハイライト：Divi Next Blurb

Divi Next Blurbは、独自の宣伝文のデザインを作成するためのいくつかの機能を追加するサードパーティの宣伝文モジュールです。 このモジュールは、アイコンと画像を同時に表示し、実質的にすべての要素を個別にカスタマイズでき、ほとんどの要素に多くのホバー効果を追加することもできます。 この記事では、Divi Next Blurbを見て、何ができるかを見ていきます。

ディビネクストブラーブモジュール

Divi Next Blurbをアップロードしてアクティブ化すると、NextBlurbという新しいモジュールがDiviBuilderに追加されます。 何も設定する必要はありません。 すぐに使用できます。

Divi NextBlurbコンテンツタブ

[コンテンツ]タブにはテキストの設定が含まれており、見出し前のテキストを有効にしたり、テキストを入力したり、見出しタグを選択したり、見出し後のテキストを有効にしたりできます。 コンテンツを追加することもできます。

前の見出しは見出しの上にテキストを配置し、後の見出しは見出しの下にテキストを配置します。 それぞれの見出しタグを変更できます。

画像とアイコンを同時にまたは個別に追加します。 標準のDivi宣伝文モジュールはどちらか一方のみを表示します。 Divi Next Blurbは、両方を同時に表示できるようにすることで、多くのデザインの可能性を開きます。

標準のボタンスタイルのボタンを含めます。

また、見出し、説明、画像、アイコン、ボタンの背景色のオプションも多数含まれています。 それらを個別に有効化および調整できます。 それぞれの色またはグラデーションを選択します。

Divi Next BlurbDesignタブ

[デザイン]タブには、画像、アイコン、ホバー効果、タイトルと説明のテキスト、ボタンテキスト、アイコン、ホバー効果の設定が含まれています。 ほとんどの要素には、間隔、境界線、およびボックスシャドウ用の個別のセクションもあります。 宣伝文をデザインするための調整はたくさんあります。

次の宣伝文句画像

画像設定では、画像の配置を選択し、境界線を調整できます。 この例では、画像を左下に配置します。

これは画像を右中央に配置します。 ボーダーを追加して色を変更しました。 ボックスシャドウも追加しました。

この例では、画像を中央下に配置しました。 境界線を外して角を丸めました。 これは別のボックスシャドウを持っています。

アイコンには、配置オプションも含まれています。 サイズ、色、境界線などを調整することもできます。この例では、右下にアイコンを配置しました。

次の宣伝文句アイコン

この例は、左中央にアイコンを示しています。 サイズを大きくし、境界線を追加し、境界線の色を変更しました。

この例は、上部中央にアイコンを示しています。 サイズを小さくし、ボックスシャドウを追加し、角を丸めて円を作成しました。

次の宣伝文句ホバー効果

ホバー効果には、2Dおよび傾斜オプションが含まれます。 2Dオプションは、16のエフェクトから選択できます。

この例は、パルスホバー効果を示しています。

傾斜効果には、グレアオプション、反転オプション、遠近法、速度、開始点と終了点などが含まれます。この例は、グレアが有効になっている標準の傾斜オプションを示しています。 設定はデフォルトのままにしておきます。

この例では、グレアと遠近感がさらに追加されます。 傾きをカスタマイズする方法はたくさんあります。

次の宣伝文

タイトルテキストには、前、見出し、後のテキストの設定があります。 これらには、テキストに期待するすべての設定が含まれています。 この例では、3セットのテキストすべてを調整しました。

説明テキストには、テキスト、リンク、箇条書き、引用符などの調整を含むすべての標準テキスト設定が含まれています。この例では、フォントサイズを大きくし、赤に変更し、シャドウ効果を追加しました。

次の宣伝文句ボタン

標準のボタンテキストとアイコンの調整がすべて含まれています。 フォントサイズを大きくし、色を変更しました。 この例は、ボタンアイコンの設定を示しています。

ボタンホバーには、2D、背景、ストローク、アイコンなど、多くの調整が含まれています。 2D設定には、多くのホバー効果が含まれています。

ボタンホバーには、2D、背景、ストローク、アイコンなど、多くの調整が含まれています。 2D設定には多くのホバー効果があります。 背景効果には、別の一連の効果が含まれます。 これは、ホバーのボタンを示しています。

ストロークは、背景と境界線の調整、およびいくつかのホバー効果を追加します。 この例では、内側に境界線を追加し、色を変更します。

アイコンはまた、ホバー上のアイコンにのみ影響する多くのホバー効果を追加します。

ディビネクスト宣伝文の例1

例として、LeatherCompanyレイアウトの右側にあるSaleテキストをNextBlurbモジュールに置き換えて、いくつかの機能を追加したいと思います。

ワイヤーフレームビューで確認できるように、通常はテキストモジュールとボタンで作成されます。 黒の背景が列に追加されます。

これは、NextBlurbモジュールのみを使用して再作成されたSaleの召喚状です。 この例では、まだ列に黒い背景を使用しています。

ワイヤーフレームビューを見てみましょう。 このモジュールは、専門セクションでうまく機能します。

元のレイアウトの画像やボタンでは得られなかった効果や機能を追加できるようになりました。 たとえば、Grow Rotate2Dホバー効果を追加しました。 その列スペースの黒い背景の上にヘッダーテキストとボタンを配置したので、コンテンツが傾いている間、カードは所定の位置に留まっているように見えます。

これにはチルト効果が含まれています。 ホバー時にカードが背景に表示されるようにグレアを追加しました。

この例では、宣伝文に画像を追加しました。 宣伝文のカードの上に置いておきました。

これには、アニメーションを表示するために、ポップホバー効果を追加しました。 これは、訪問者が宣伝文にカーソルを合わせたときに、訪問者の注意を引くための良い方法です。

これには、グレアを有効にしない傾斜効果が含まれています。 カードは列内で傾斜しますが、カードの境界は認識されないようになります。

列から背景を削除して、モジュールに追加しました。 これにより、テキストの背後に黒い背景が保持されます。 また、画像だけにボックスシャドウを追加しました。 境界線を削除したので、傾斜効果を使用すると境界線が表示されません。

チルト効果でどのように見えるかを次に示します。 それは画像に遠近感を加えるのに素晴らしい仕事をします。 ボックスシャドウの外観が大好きです。

Divi NextBlurbの例2

この例では、スタートアップのホームページレイアウトの宣伝文を次の宣伝文モジュールに置き換えて、デザインをもう少し複雑にします。

現在の設定で宣伝文句を簡単に再現できました。 ここで行ったのは、画像、タイトル、コンテンツを追加することだけです。 次に、いくつかの調整を行います。

画像を左上に移動し、画像と本文の両方にボックスシャドウを追加しました。 境界線の角が丸くなり、本文の上部と下部に5ピクセルのパディングが追加されました。

これについては、アイコンを右中央に配置し、画像の間隔を調整して見出しのテキストに合わせました。 テキストを白にし、本文の背景に元のテキストの色を付けました。 見出しのテキストについては、背景をグラデーションにしました。

結果は次のとおりです。 見出しテキストの上部にパディングを追加し、すべてのテキストを中央に配置し、下部の境界線のあるボタンを追加しました。 中央下に画像を追加し、サイズを大きくしました。 画像の上部には、コンテンツ領域との間にスペースを追加するためのパディングが含まれています。 ボタンには、目立つボックスシャドウがあります。 上部と側面の境界線を非表示にして、下部の境界線のみが表示されるようにしました。 ホバー効果のために、3Dチルトを追加しました。

レイアウト内で次の宣伝文がどのように表示されるかを次に示します。

Divi NextBlurbの価格と購入場所

Divi Next Blurbには、次の3つのライセンスがあります。

• シングルライセンス– $ 25.00
• 無制限ライセンス– $ 49.00
• 生涯ライセンス– $ 99.00

開発者のウェブサイトから購入できます。

終わりの考え

Divi Next Blurbは、Diviにとって興味深いモジュールです。 私はそれが何ができるか、そしてそれを使って何が設計できるかという表面をかじっただけです。 予想以上に多くの設定や調整があります。 ほぼすべての要素には、独自の境界線、間隔、およびボックスシャドウの設定があります。

より標準的な領域に配置できるように見える機能がいくつかあります。 たとえば、見出しタグセレクターは、デザインタブではなくコンテンツタブにあります。 それでも物事がどこにあるのかを理解するのは簡単で、どの設定が何をするのかを理解するのに問題はありませんでした。

私はDiviNextBlurbが大好きです。 標準のDiviモジュールよりもはるかに多くの機能を備えた使いやすいblurbモジュールに興味がある場合は、Divi NextBlurbを一見の価値があります。

我々はあなたから聞きたい。 Divi Next Blurbを試しましたか？ コメントであなたがそれについてどう思うか教えてください。

Leonid Zarubin /shutterstock.comによる注目の画像