Diviプラグインのハイライト：Diviリボンモジュール

Diviリボンモジュールは、モジュールのコンテンツにスタイル設定可能なリボンを追加するDiviのサードパーティプラグインです。 画像、ボタン、タイトル、コンテンツを追加し、各要素を必要に応じて詳細にスタイル設定します。 これを使用して、製品の販売を強調したり、行動を促すフレーズを作成したり、要素に注意を向けたりします。 このDiviプラグインのハイライトでは、Diviリボンモジュールを見て、何ができるかを確認します。

Diviリボンモジュールのインストール

1. プラグインに移動してダウンロードします
2. WordPressダッシュボードで、[プラグイン] > [新規追加]に移動します
3. プラグインのアップロードをクリックします
4. コンピューターからzipファイルを選択します
5. [今すぐインストール]をクリックします
6. 「プラグインが正常にインストールされました」と表示されたら、[プラグインのアクティブ化]をクリックします
7. [ツール] > [ Diviリボンプラグインライセンス]に移動し、ライセンスキーを入力します

ディビリボンモジュール

Diviリボンと呼ばれる新しいモジュールがDiviBuilderに追加されます。 モジュールは宣伝文（タイトル、コンテンツ、アイコン、画像、ボタンを完備）を作成し、その宣伝文にリボンを配置します。 リボンの配置とスタイル、およびモジュール内の他の要素を制御できます。 宣伝文には、デフォルトでボックスシャドウが含まれています。

Diviリボンコンテンツタブ

[コンテンツ]タブには、メイン設定、宣伝文の回転、画像とアイコン、リンク、背景、および管理ラベルが含まれています。 主な設定では、リボンの種類、場所、テキスト、タイトル、およびコンテンツを選択できます。

主な設定

7種類のリボンからお選びいただけます。 それらは同じように機能し、同じコンテンツを含みますが、異なる形状を表示します。 形状には、分岐した端のあるリボン、宣伝文句にまたがるリボン、側面または上部のリボンが含まれ、フォークや円などのさまざまなタイプの端があります。 これにより、多くの表示の選択肢が得られます。

リボンの種類ごとに、表示機能に応じて異なる場所のオプションがあります。 この例は、コーナーリボンを示しています。 左上または右上、または左下または右下に配置できます。

フォークは左上または右上に表示できます。

全幅を上または下に表示できます。

一部のリボンタイプには、選択すると開く他のオプションがあります。 この例は、全幅のリボンを示しています。 あなたはその場所と高さを調整することができます。

サイドリボンには、位置、幅、高さの調整が含まれています。 すべてのコントロールは標準のDiviスライダーであるため、使いやすいです。

タイトルと内容はカード自体に追加されます。 コンテンツ領域には、ビジュアルとテキストのタブがあり、メディア、リンク、コード、およびショートコードを含めることができます。

宣伝文句の回転

宣伝文句は、カードが横向きになった後にコンテンツを表示する3D反転オプションと、フォントに表示する画像とアイコンを追加します。

メディアライブラリから画像を追加し、リストからアイコンを追加します。 画像/アイコンが最初に表示され、次にカードが反転してコンテンツがホバーされて表示されます。 背景として画像を追加することもできます。

ボタン

ボタンには、テキスト、リンク、ウィンドウオプション、パディング、およびマージンが含まれます。 リボンの下からボタンを外すために、左マージンを追加しました。

ディビリボンデザインタブ

[Diviリボンデザイン]タブには、画像とアイコン、回転、テキスト、サイズ、リボン、タイトルテキスト、本文テキスト、ボタン、間隔、境界線、フィルター、変換、およびアニメーションの設定が含まれています。

画像とアイコン

画像とアイコンの設定により、画像の幅、境界線、ボックスの影、色、ブレンドモードなどを調整できます。

回転

回転設定により、顔の色を調整できます。 これが画像の背景です。 元のカードの境界線を無効にして、独自の境界線を作成できるようにします。 回転アイコンを調整します。 アイコンにはたくさんのオプションがあります。 アイコンの色、背景、境界線を追加し、回転前のフォントサイズを使用します。

最初は、画像とアイコンの設定ではなくアイコンの調整がここにあるのは少し混乱しましたが、このセクションにいるのは理にかなっています。 ここにも画像設定を配置するのは理にかなっていますが、非常に多く、別のタブが必要です。

テキストの間隔

テキストの間隔は、タイトルと本文のテキストの余白とパディングの設定を提供します。 通常、リボンはコンテンツの上に表示されます。 これにより、リボンを表示したい場合は、リボンの位置に基づいてテキストの位置を調整できます。 この例では、タイトルと本文の両方にパディングを追加しました。

リボン設定

リボン設定では、色の変更、リボンを埋める画像の追加、リボンの端のオフ（スタイリングがカードと重ならないようにするため）、フォントの調整、テキストシャドウの追加、リボンの角と境界線の調整を行うことができます。 この例では、リボンの色を変更しました。

画像がリボンいっぱいになります。 JPGしか機能させることができませんでしたが、うまく機能します。 表示方法を制御できるように、すでに必要なサイズの画像を選択することをお勧めします。

この例のリボンの左側にあるように、リボンの端をオフにすると、カードの後ろに折り返される部分が削除されます。

文章

タイトルと本文には、予想されるすべてのオプションが含まれています。 この例では、両方のサイズを大きくし、タイトルテキストの色を変更して、両方を中央に配置しました。

ボタン

ボタンのスタイルには、予想されるすべてのオプションが含まれ、背景画像の上にグラデーションを表示する機能が追加されています。 この例では、フォントのサイズを大きくし、フォントと境界線の色を変更し、境界線を丸め、背景にグラデーションを付け、影を追加しました。

ディビリボンの例

これは、Diviレイアウト内でDiviリボンがどのように見えるかの例です。

リボン発売中

最初の例では、右側のCTAを置き換えます。

画像、テキスト、ボタンの3つのモジュールで作成されました。 同じ背景、テキスト、ボタンを使用して、単一のDiviリボンモジュールで再作成します。

これがDiviリボンを使用した結果です。 元の画像と一致するように、画像、タイトルテキスト、本文を追加しました。 また、リボンを隅に追加し、ボタンを中央に移動して、リボンの背景の境界線の色を使用しました。 オリジナルはコラムの画像を使用していました。 それを削除して画像をモジュールに追加しましたが、どちらの方法でも機能します。

波状の画像（三角波）は含めませんでしたが、コンテンツエリアに簡単に追加できました。 グラフィックをタイトルの上に表示するには、タイトルもコンテンツ領域に移動する必要があります。 セール中のリボンはそれをもう少し目立たせます。

最新プロジェクトリボン

今回は、画像をDiviリボンモジュールに置き換え、CTAとして全幅リボンを追加して最新のプロジェクトを確認しました。 リボンには、レイアウトの背景画像とフォントがあります。 ボックスシャドウがデフォルト設定です。 テキストを中央に配置しました。

製品CTAリボン

この例では、LeatherCompanyレイアウトのショップページのヒーローセクションにDiviリボンモジュールを追加しました。 レイアウトの画像を使用して、標準の販売CTAを置き換えました。 リボンとボタンはレイアウトの色を使用しています。 リボンを右下隅に移動し、リボンの端を取り外しました。

これは専門セクションです。 スペシャリティセクションでうまく機能するのを見てうれしいです。 多くのサードパーティモジュールは、このタイプのセクションと常に互換性があるとは限りません。

テストと購入

Diviリボンモジュールは、開発者のWebサイトから1つのWebサイトで個人用または商用目的で11ドルで購入できます。

購入する前にプラグインをテストして、ニーズに合っているかどうかを確認することもできます。 プラグインをテストするためのリンクは、開発者の販売ページにあります。 Divi Builderとプラグインへのフルアクセスを提供するので、心ゆくまでスタイルを設定できます。 試してみることをお勧めします。

終わりの考え

Diviリボンモジュールは、DiviBuilderにとって興味深いモジュールです。 画像を追加する場所がいくつかあり、タイトル、コンテンツ、アイコン、ボタンを含めることができます。 これらすべての機能を備えているため、宣伝文句、召喚状、製品リンク、ブログリンクなどとして最適に機能します。それに加えて、販売やその他のCTAに注意を喚起するためのスタイリング可能なリボンを追加すると、このプラグインは難しいスタイリングオプションを提供します。単一のモジュールで取得します。

Diviリボンモジュールは、ビジュアルビルダーおよびテーマビルダーとうまく連携します。 これは、お勧めしやすい優れたプラグインです。

我々はあなたから聞きたい。 Diviリボンモジュールを試しましたか？ コメントであなたの経験について教えてください。

Foxys Graphic /shutterstock.comによる注目の画像