Diviプラグインのハイライト：Divi BodyCommerce

公開: 2019-05-12

Divi BodyCommerceは、Diviのサードパーティプラグインであり、商品ページからチェックアウトページまで、ストアのデザインを制御できます。変換を念頭に置いて設計されており、DiviBuilderを使用してストアのデザインを完全に制御できます。

プラグインがこれと同じ数のモジュールと機能を提供する場合、それらは使用するのに圧倒される傾向があります。ただし、これは問題ではありませんでした。すべてを簡単に追跡でき、私が見たどのプラグインよりもステップバイステップのビデオがたくさんあるからです。この記事では、Divi BodyCommerceを見て、何ができるのか、そしてどれほど使いやすいのかを見ていきます。

DiviBodyCommerceのインストールと設定

通常どおりプラグインをアップロードしてアクティブ化します。ライセンスをアクティブ化するには、ダッシュボードメニューの[ Divi Engine] > [ BodyCommerceLicense ]に移動します。

ダッシュボードメニューのBodyCommerceをクリックすると、設定が開きます。これらは、WooCommerceに期待されるのと同じ種類の設定です。ここで、ページを選択できます。これらのページのレイアウトを作成したら、この設定ページに移動して選択します。ページを全幅に設定し、カテゴリごとに異なる商品テンプレートを選択することもできます。

DiviBodyCommerceモジュール

53の新しいモジュールがDiviBuilderに追加されました。これらは、製品ページ、アカウントページ、アーカイブページ、ショッピングカートなど、WooCommerceストアのあらゆる側面を設計するために必要なすべての要素です。色分けされているため、見逃すことはありません。色は実際にモジュールの目的を示しています。たとえば、赤いモジュールは製品ページ用です。グラデーションを使用して、2種類のページで機能することを示すものもあります。この画像は最初の24個のモジュールを示しています。

これが次の29のモジュールです。モジュールは、アップセル、クロスセル、スライダー、関連製品、カルーセル、ギャラリー、共有、タブ、パンくずリストなどのページ要素を追加します。ループは、ショップページを作成するための製品のリストを作成します。それらには、予想されるコンテンツ、デザイン、および詳細タブとオプションが含まれます。

注–ページが読み込まれない場合は、そのページで機能するように設計されていないモジュールをそのページで使用していないことを確認してください。一部のモジュールはグローバルで任意のページで機能しますが、他のモジュールは特定のタイプのページを対象としています。たとえば、ループページで商品ページモジュールを使用することはできません。

ページの作成と割り当て

ページを作成し、そのカテゴリのデフォルトとして設定する方法を見てみましょう。まず、Diviライブラリでレイアウトを作成します。

次に、ダッシュボードメニューの[ Divi Engine] > [ BodyCommerce ]に移動します。作成するページのタイプのタブを選択してから、そのページのレイアウトを選択します。必要な数のレイアウトを作成して、さまざまなタイプのページや個々のカテゴリに使用できます。

DiviBodyCommerceの例

これが私が作成したいくつかの例です。これは、このプラグインで実行できることのほんの一部です。

ディビボディコマースストアページ

ストアページには、商品ループアーカイブページモジュールを追加しました。

これがデフォルト設定のページです。各要素はDiviBuilderで調整できます。

ここでは、ティーショップのレイアウト内にあります。これは、制限を除いてデフォルト設定です。 6つの商品を表示するように設定しました。

一部の要素をライブで調整できます。

セールバッジとボタンに緑色の背景を追加し、6列を表示するようにレイアウトを設定し、製品にボックスシャドウを追加し、緑色のオーバーレイを追加しました。レイアウトのオプションの数に感銘を受けました。

これはブログスタイルのレイアウトです。あなたがより長い製品説明を持っていればそれは素晴らしく見えるでしょう。

DiviBodyCommerce製品ページ

Divi Libraryで製品ページのレイアウトを作成し、BodyCommerce設定のデフォルトレイアウトとして選択しました。これは、モジュールで何ができるかを理解するための基本的なレイアウトにすぎません。

シンプルですが、始めるのに適した場所です。製品のタイトル、ギャラリー、スライダーが表示されます。

さらにいくつかの製品ページとグローバルモジュールをランダムに投入しました。

BodyCommerceでできることの種類を示し始めています。このページでDiviをやってみましょう。

DiviBuilderを使用した簡単な調整を次に示します。セクションと行に背景を追加し、ボタンと検索フィールドの境界線を調整するだけです。

これでは、関連製品の新しい行を追加し、検索モジュールをその行に移動しました。また、商品のレイアウトを変更し、商品の画像をギャラリーに変更しました。垂直スクロールに設定しました。 WooCommerceデモにこの製品の画像がさらにある場合は、左側の縦の列に表示されます。これは、製品ページで実行できる調整レベルのほんの一部にすぎません。

DiviBodyCommerceショッピングカート

パン屋のレイアウトの連絡先ページを使用して、ショッピングカートページを作成しています。 CartProductsモジュールとCartTotalsモジュールを使用しています。 Visual Builderで表示するとコンテンツは表示されませんが、VisualBuilderでビルドすることはできます。モジュールは、クロスセリングのような他の多くの機能を提供します。

これがデフォルト設定を使用したショッピングカートです。 2つのモジュールが1つの2列レイアウトになっています。

いくつかの変更を加えた後のショッピングカートページは次のとおりです。単一列のレイアウトに変更し、左右に間隔を追加し、レイアウトから背景色を追加し、レイアウトに一致するようにボタンの色とテキストの色を変更し、ボックスの影を追加しました。

DiviBodyCommerceドキュメント

ドキュメントは、開発者のWebサイトで書面で提供され、YouTubeでは一連のビデオとともに提供されます。私はそれが両方を含むのが好きです。リンクは、DiviEngineダッシュボードメニューにあります。開発者のWebサイトにある機能のいずれかをクリックして、ビデオを表示することもできます。これにより、必要なビデオを見つけるための興味深い構造が作成されます。これが私が見たかったビデオを実際に見つけた方法です。

ディビボディコマース価格

BodyCommerceには、次の3つのライセンスから選択できます。

1サイト–£24
5サイト–£50
無制限のサイト–£96

BodyCommerceは、開発者のWebサイトから購入できます。

終わりの考え

Divi BodyCommerceは、WooCommerceの製品とページのデザインを印象的なレベルで制御します。私はそれが何ができるかについてほとんど触れませんでした。ログイン画面、バッジ、アカウントページ、お礼ページ、フォーム、検索ページなどをカスタマイズすることもできます。メールテンプレート、カスタムアイコン、見本、ショッピングカート用のAJAXも含まれています。カテゴリごとに異なるレイアウトを作成できるのが好きです。

モジュールとレイアウトは使いやすかったです。例を作成するために、開発者のページのビデオをフォローしました。ビデオは詳細でわかりやすいものでした。必要なタイプのページを作成するのに問題はありませんでした。

BodyCommerceは、これまでに見たどのWooCommerce / Diviプラグインよりも多くのツールとカスタマイズを提供します。 DiviでWooCommerceを使用していて、WooCommerceページをカスタマイズしたい場合は、BodyCommerceが簡単に選択できます。

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

手紙による注目の画像-Shmetters / shutterstock.com