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

公開: 2019-02-24

Divi Product Carousel Moduleは、カルーセルスライダー内にWooCommerce製品を表示するDiviのサードパーティプラグインです。製品カルーセルを作成し、Diviレイアウト内に配置します。それらのスタイルを設定し、複数のレイアウトと表示オプションを選択できます。この記事では、Divi製品カルーセルモジュールを見て、その機能を確認し、使いやすさを確認します。

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

Divi製品カルーセルモジュール

プラグインをアップロードしてアクティブ化したら、ダッシュボードメニューのDiviGearに移動し、ライセンスをアクティブ化します。この開発者からのプラグインが複数ある場合は、プラグインのタブを選択する必要があります。

製品カルーセルと呼ばれる新しいモジュールがDiviBuilderに追加されます。紫色のアイコンが含まれているので、群衆から目立ちます。

設定には、[コンテンツ]、[デザイン]、および[詳細]タブが含まれます。 [コンテンツ]タブには、WooCommerceコンテンツの設定があります。ドロップダウンボックスから、最近、注目、セール、ベストセラー、トップレート、または製品カテゴリから製品タイプを選択します。表示する製品数の数値を入力します。人気、評価、日付、または価格から並べ替え順序を選択します。 [カートに追加]ボタンと説明を有効にすることもできます。完全な説明または抜粋を表示します。

カルーセル設定では、使用するデバイスに基づいて列の数を選択できます。また、マルチスライド（画面上のスライドの数だけスライドできるようにするか、一度に1つのスライドをスライドできるようにしない）、アイテムの間隔、遷移時間、中央、ループ、自動再生、点と矢印のナビゲーション、配置、およびスライド効果。その他の設定には、リンクと背景が含まれます。ドットと矢印を一緒に使用できるのは興味深いことです。スライドの下部の右、中央、または左にドットを配置できます。

[デザイン]タブには、オーバーレイ、タイトル、価格、説明、セールバッジ、カートに追加ボタン、レビュー、矢印、ドット、画像、ホバー、間隔、境界線、ボックスシャドウの設定が含まれています。選択した選択に基づいて、他の設定が追加されます。これらの各設定は広範囲にわたっています。

[詳細設定]タブには、予想されるCSS、可視性、および遷移機能が含まれています。カスタムCSSには、製品、画像、タイトル、価格、セールバッジの前の矢印、次の矢印、およびドットのフィールドが含まれています。これにより、CSSで多くの制御が可能になります。

Divi製品カルーセルモジュール設定

タイトルと価格を上または下に移動できます。この例では、両方を上に移動して、サイズと色を変更しました。背景色とフォントサイズを変更して、セールバッジのスタイルを設定しました。また、非アクティブドットとアクティブドットのスタイルも設定しました。

フロントエンドでの外観は次のとおりです。オーバーレイも追加しました。ホバーに[カートに追加]ボタンが表示されます。このボタンは、オーバーレイホバーとボタンホバーの両方でスタイルを設定できます。

これでは、6つの列を選択し、すべてのテキストを一番下に戻し、テキストの色を調整し、[カートに追加]ボタンに不透明度を追加しました。デフォルトではホバーの不透明度を残したので、ボタン自体にカーソルを合わせるとボタンは点灯します。

これでは、レイアウトを4列に設定しました。矢印を追加し、矢印とドットの色を変更しました。また、タイトル、価格、説明に背景を追加し、すべてのテキストを白に変更しました。ボックス内でテキストを適切に配置するために、コンテンツのパディングを追加しました。また、上部のコンテンツのパディングも含まれます（画像の上にタイトルまたは価格を配置した場合）。

フロントエンドでの外観は次のとおりです。右側の矢印は、表示できる製品の最後にあることを示すために明るくなっています。ループするように設定すると、通常の色になります。

オーバーフローを選択した場合の外観は次のとおりです。それは素晴らしい3Dカード効果を提供します。回転量を調整して、スライドシャドウを有効にすることができます。

この例では、カードにボックスシャドウを付け、ぼかしを調整しました。また、矢印を円に変更し、色を調整しました。

センタースライドを有効にした場合のフロントエンドの外観は次のとおりです。これは4列のレイアウトです。センタースライドを選択すると、表示が異なります。

これは、上記の例と同じ設定を使用した5列のレイアウトです。

製品のカルーセルは、Diviのレイアウトにうまく適合します。この例では、DiviショップモジュールをDivi製品カルーセルモジュールに置き換え、レイアウトに一致するようにスタイルを設定しました。

これでは、タイトルを上に移動し、上下にパディングを追加して、タイトルを半太字にしました。また、レイアウトに合わせて[カートに追加]ボタンの色を変更しました。

これについては、スライドと画像の境界線を調整して、丸みを帯びた角を作成しました。私は先に進んで、画像を円形にしました。ボックスシャドウも追加しました。

レイアウト内で見栄えがします。ただし、セールバッジのほとんどは非表示になります。おそらくCSSでそれを回避する方法があります。

これは、3列のレイアウトでオーバーフローを使用します。

これについては、画像の境界線を削除しましたが、スライドの境界線は残しました。ボックスシャドウを追加し、その強度と位置を調整しました。

また、ホバーのレビューからの星の評価も表示されます。 [カートに追加]ボタンの横に評価を配置します。それはクールなアニメーションでそれらをまとめます。これがデフォルト設定です。背景や星の色をスタイリングできます。

これでは、レイアウトの要素に一致するように評価のスタイルを設定しました。

これは、価格を上に、タイトルを下に移動しました。説明とオーバーレイを追加しました。ドットナビゲーションを右に移動しました。ボックスの影を側面に表示するために、いくつかのパディングを追加する必要がありました。パディングなしで、モジュールのスペースの端に製品を配置します。

Divi製品カルーセルモジュールのデモ

現在、開発者のWebサイトには13のダウンロード可能なデモがあります。これらは、Diviライブラリにアップロードして、任意のDiviレイアウトで使用できるレイアウトです。すべてにDiviProduct Carouselモジュールのスタイリングが含まれ、一部には他のスタイルのモジュールと背景が含まれています。これらは、製品のカルーセルデザインの開始点を取得し、モジュールで実行できるいくつかのことを示すのに適しています。それらのいくつかを見てみましょう。

これは、タイトルを上部に配置し、スタイルを上下に一致させ、画像の外側に丸で囲んだ矢印を追加し、ドットを含めます。スライドを目立たせるための下部ボーダーもあります。大胆な色が好きです。上部と下部は少し透明なので、背景のパターンが透けて見えます。このレイアウトには、タイトルのスタイル付きテキストモジュールが含まれています。

レイアウトのいくつかには、スタイリングを備えた他のモジュールが含まれています。これは、2列のレイアウトを使用して、テキストモジュールとボタンモジュールを使用して行動を促すフレーズを追加します。

フロントエンドからの外観は次のとおりです。境界線、上部のタイトル、および[カートに追加]ボタンの2色が含まれています。矢印はモジュールの画像内に表示されます。

これには、緑色の背景とそれに合わせたスタイルのスライドが含まれています。 [カートに追加]ボタンは、商品にカーソルを合わせると薄緑色になり、ボタンにカーソルを合わせると濃い緑色になります。タイトル用のスタイル付きテキストモジュールが含まれています。

これには、セールバッジの青いスタイル、画像の外側の丸い矢印、[カートに追加]ボタンが含まれます。スライドに小さな境界線を追加します。オーバーフロー効果のあるスライドが表示されます。

こちらもオーバーフロー効果のある商品を表示しています。また、矢印と[カートに追加]ボタンに青を使用しています。タイトルが一番上に移動します。オーバーレイは白で不透明度が高く、セールバッジは赤です。

これには、スタイル付きの背景が含まれ、境界線、スタイル付きの[カートに追加]ボタン、セールバッジ、および丸で囲んだ矢印が追加されます。オーバーレイは白です。価格が一番上に配置され、他のすべてのデータが一番下に配置されます。

Divi製品カルーセルモジュールの価格とドキュメント

Divi製品カルーセルモジュールには2つの購入オプションがあります。

単一サイト– $ 19
無制限のサイト– $ 39

開発者のWebサイトおよびマーケットプレイスから入手できます。

ドキュメントは、機能を紹介するYouTubeビデオによって提供されます。ダッシュボードのDiviGearメニューにリンクがあります。複数のDiviGear製品がある場合は、製品のタブを選択してから、[ドキュメント]を選択します。

終わりの考え

Divi Product Carouselは使いやすく、製品を目立たせるのに最適です。それらをスライダーとして表示したくない場合でも、検討する価値のあるスタイリングと製品プレゼンテーションのオプションがたくさんあります。 Extraではうまくいきませんでした。 Extraはすでに多くのWooCommerce機能を備えており、WooCommerceストアを構築するための優れたプラットフォームであるため、Extraがサポートされることを望んでいます。

ダウンロード可能なデモがあるのが好きです。モジュールの背景とスタイルが含まれています。これらは、Diviレイアウト内でWooCommerce製品を提示するための出発点を提供したり、想像力を刺激したりするのに最適です。

WooCommerce製品をカルーセルで表示することに興味がある場合、またはさらにいくつかのデザインオプションがある場合は、Divi製品カルーセルモジュールを一見の価値があります。これは、開発者のWebサイトおよびDiviマーケットプレイスから入手できます。

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

注目の画像レター-Shmetters / shutterstock.com