Diviプラグインのハイライト：Diviカルーセルモジュール

DIVIカルーセルモジュールは、DiviおよびExtra用のサードパーティプラグインであり、高度なカルーセルスライダーをDiviBuilderに追加します。 モジュール内のほぼすべてを制御して、DiviまたはExtraWebサイトに必要なほぼすべてのタイプのカルーセルを作成できます。 この記事では、Diviカルーセルモジュールを見て、それが何を実行できるか、そしてそれがどれほど簡単に使用できるかを見ていきます。

Diviカルーセルモジュールのインストールとアクティベーション

通常どおりプラグインをアップロードしてアクティブ化します。 DiviGearと呼ばれる新しいメニュー項目がダッシュボードに追加されます。 このメニューに移動して、ライセンスキーを追加します。

DiviBuilderのDiviカルーセルモジュール

DiviCarouselと呼ばれる新しいモジュールがDiviBuilderに追加されます。

モジュールには、新しいアイテムを追加するための領域が含まれています。 [コンテンツ]タブにはスライダー設定があり、ユーザーが使用しているデバイスに基づいて表示するスライドの数を選択したり、マルチスライドを有効にしたり、遷移期間を設定したりできます。中央のスライド、ループ、自動再生、矢印ナビゲーション、ドットナビゲーションを有効にします。 。 アイテムの間隔を設定し、同じ高さ、および垂直方向の配置を有効にします。 詳細設定では、スライダー効果を選択できます。

[デザイン]タブには、オーバーレイ、画像（幅）、画像の境界線、タイトルと本文のテキスト、色、間隔、境界線の設定が含まれています。 これには、矢印ナビゲーションとドットナビゲーションの両方の色のカスタマイズが含まれます。

[詳細設定]タブには、必要なすべてのCSSフィールドに加えて、可視性と遷移の設定があります。 タイトル、コンテンツ、画像、ボタンのCSSフィールドを追加します。

カルーセルアイテム設定には、3つのタブも含まれています。 これらの設定は、メインモジュールの設定で設定されているものをすべて上書きします。 [コンテンツ]タブには、メインコンテンツ、タイトルと画像のリンク、ボタン設定、画像設定、および背景用の領域があります。

[デザイン]タブには、タイトルテキスト、コンテンツスタイル（本文テキスト）、ボタン、間隔、およびボックスの影の設定が含まれています。 これらは、ほとんどのDiviモジュールに見られる標準の設計設定です。 [詳細設定]タブは、ほとんどのモジュールにある基本設定です。

画像の設定には、画像やアイコンを使用できます。

必要な数のスライドを追加します。 スライドは、表示するように設定した番号に従って並べて表示されます。 これは4つ表示するように設定されています。 もちろん、好きな順序でドラッグアンドドロップできます。

これでは、アイテムの間隔を100に調整しました。私の例で示されている主な違いはテキストです。 1行あたりに表示される単語が少なくなりました。

これは矢印ナビゲーションを使用しています。 スライドの外側に表示するように設定しました。 アイテムの間隔を1に設定しました。背景色を使用すると、よりわかりやすくなります。

これを2つのスライドを表示するように設定しました。 ドットナビゲーションを表示しています。

詳細設定を見てみましょう。 スライダー効果をCoverflowに設定しました。 これにより、回転とシャドウのオプションが開きます。 この機能は、モジュールを標準のスライダーと実際に区別するものを示しています。 これがデフォルト設定です。

ここで、回転を100に設定しました。スライドは、画面から離れる左側に向かってさらに3D傾斜しています。

これは同じ回転ですが、Coverflowシャドウはありません。

Diviカルーセルモジュールの例

カルーセルの私のお気に入りの用途の1つは、クライアントまたは製品のロゴを表示することです。 この例では、App DeveloperLandingページのポートフォリオページにモジュールを追加しました。 3つの会社のロゴを表示し、スクロールをループし、自動再生するように設定したので、訪問者はそれらをナビゲートする必要がありません。

また、作業したプロジェクトを表示することもできます。 これには、訪問者がプロジェクトを見ることができるように、ボタン付きのプロジェクトをいくつか追加しました。 ボタンのテキストの色を白に変更し、ボタンにボックスシャドウを追加しました。 矢印を白にし、背景の不透明度をほぼ透明に設定しました。

ここでは、スライドに背景を追加し、半透明にし、ボックスの影を追加しました。 間隔には、ボタン、画像、コンテンツのパディングが含まれます。 ボタンと画像に間隔を追加しました。

これはオーバーフロースライダー効果を使用します。 これがデフォルト設定です。

これは、スライドを中央に配置するように設定しました。 オーバーフロー設定で使用すると、中央のスライドが中央に配置され、両側のスライドが互いに向き合うように角度が付けられます。 4枚のスライドを表示するように設定されています。

これは3枚のスライドを表示するように設定されています。 Rotateを80に設定しました。

これは6枚のスライドを表示するように設定されています。 回転はデフォルト（50）に設定されています。

これは、センタースライドまたはオーバーフローが有効になっていない6つのスライドを示しています。

これは、センタースライドが有効になっている6を示しています。

この例では、モジュールをフードメニュースライダーとして使用しています。 画像、テキスト、ボタンを追加することで、実際に宣伝文のスライダーを作成します。 画像は100幅に設定されています。 オーバーレイ、各アイテムを購入するためのボタン（ボタンを押すと、アイテムの製品ページに移動します）、およびドットナビゲーションを追加しました。 オーバーレイとオーバーレイアイコン、およびアクティブスライドと非アクティブスライドの両方のドットのスタイルを設定しました。 それはコーヒーのレイアウトに完全に適合します。

これには、矢印ナビゲーションを追加し、ボタンに合わせてスタイルを設定しました。 ホバーに矢印を表示するために持っています。 スライダーの内側または外側に矢印を設定し、色を変更できます。 モジュールの設定でサイズを変更することはできません。

これはCoverflowエフェクトを使用しています。 左のスライドにカーソルを合わせると、オーバーレイと矢印が表示されます。

これについては、スライドの1つだけに背景とボックスシャドウを追加しました。 これは、何が売られているかを示したり、最良の取引を強調したりするために使用できます。

今回はアイコンのみを使用しています。 モジュールを宣伝文モジュールのセットの隣に配置し、6つのソーシャルメディアリンクを設定しました。 それらは宣伝文句に一致するようにスタイリングされています。 アイコンをクリックすると、ソーシャルネットワークが開きます。 毎秒自動的にスライドするように設定しました。

複数のスライドを表示すると、アイコンの一部が切り取られ、スライダーがアニメーション化されるときに見栄えが良くなります。

この例では、単純な価格表スライダーを作成したいと思いました。 ゴルフコースのレイアウトパックから価格を簡略化しました。

ボックスシャドウを追加しました。 最初は、垂直方向の影をスライドの下に配置することができませんでした。 次に、スライドがモジュールのコンテナの側面に接触していることに気付きました。 モジュールのパディングを追加すると、スライドのすべての面にボックスの影を追加できます。

スライドごとにボタン、画像、コンテンツのパディングを個別に調整することもできます。 この例では、左側のスライドのパディングを調整しています。

矢印を追加し、レイアウトの要素に一致するようにスタイルを設定しました。

この例では、画像を追加し、ボックスの影を変更し、ボックスの影が完全に表示されるようにコンテンツのパディングをもう少し追加しました。 また、矢印をスライドの外側に移動しました。

ボタンを追加しました。 色、境界線の半径、テキストサイズなどのボタンのスタイルを調整し、スライドに一致するボックスの影を追加しました。

もちろん、モジュールにはコンテンツ領域が含まれているため、メディアを含む任意のタイプのコンテンツを追加できます。 レイアウトに合った画像を追加しました。 すべてのコンテンツはタイトルの下に配置されます。 この場所の画像は見栄えがします。

ゴルフコースのレイアウト内でモジュールがどのように表示されるかを次に示します。 元のレイアウトには多くの価格設定機能がありました。 Diviカルーセルモジュールを使用すると、すべての価格設定は引き続き適用されますが、スライド内に表示されます。 このレイアウトに属しているようです。

Extraでもうまく機能します。 この例では、サイドバーを表示しないようにページを設定しました。

サイドバーでの外観は次のとおりです（サイドバーのウィジェットは追加していませんが、サイズは同じです）。 ここで、モジュールが応答していることがわかります。

Diviカルーセルモジュールの価格

Diviカルーセルモジュールは、開発者のWebサイトから入手できます。 利用可能な2つのオプションがあります。

• 単一サイト– $ 15
• 無制限のサイト– $ 29

Diviカルーセルモジュールのドキュメントとサポート

ドキュメントは、DiviGearダッシュボードメニューから入手できます。 [ドキュメント]タブを選択します。 これにより、DiviGearYouTubeチャンネルの4分間のビデオウォークスルーへのリンクが提供されます。 チケットサポートはFreshdeskを通じて提供されます。

終わりの考え

Diviカルーセルモジュールは、カルーセルスライダーをDiviBuilderに追加する簡単な方法です。 それは直感的で、実際には私が予想していたよりも多くのカスタマイズがあります。 スライドのクローンを正しく作成できないことが何度かありましたが、それは私の側の問題だった可能性があります。 各スライドに管理ラベルを付けることを忘れないでください。そうしないと、モジュール内のアイテムの名前が表示されるため、スライドを区別するのが難しくなります。

画像、コンテンツ、ボタンが別々になっているのが好きです。 これにより、カード、宣伝文、画像、テキスト、表示アイコン、またはスライダーに表示する必要のあるものを作成できます。 スライダーの上部に画像を追加しても、コンテンツ領域にさらに画像を追加することができます。

Diviカルーセルモジュールは、優れたカルーセルスライダーです。 これは、開発者のWebサイトおよびDiviマーケットプレイスから入手できます。

我々はあなたから聞きたい。 Diviカルーセルモジュールを試しましたか？ 以下のコメントであなたがそれについてどう思うか教えてください。

Anatolir /shutterstock.com経由の注目の画像