Divi 製品ハイライト: DiviCommerce

DiviCommerce は、オンライン ストアを構築するために設計された Divi のサードパーティ製子テーマです。 群衆の中で目立つ WooCommerce ショップを作成するための多くのページと機能が含まれています。 この投稿では、DiviCommerce のページと機能を見て、それがあなたのニーズに合った適切な Divi 子テーマかどうかを判断できるようにします。

DiviCommerceのインストール

DiviCommerce のインストールは直感的であることがわかりました。 他の WordPress テーマと同じようにインストールしますが、Divi をアクティブなテーマとして使用します。 [外観] > [テーマ] > [新しいテーマの追加]を選択します。

[テーマのアップロード]を選択し、 [ファイルの選択]をクリックして、コンピュータ上の DiviCommerce zip ファイルを選択して、 [今すぐインストール]をクリックします。

次に、 「アクティブ化」をクリックします。

最後に、 [DC デモのインポート] > [簡単なデモのインポート]を選択します。

インポートするファイルを選択し、 [デモ コンテンツのインポート]をクリックします。 デフォルト設定を使用することをお勧めします。

デモ コンテンツがインポートされたら、 [デモ コンテンツの削除と関数のインポート]をクリックします。 あなたのサイトは、必要なサイズを示すダミー画像を含むデモのようになります。 コンテンツを追加すると、サイトが使用できるようになります。

ディビコマースページ

DiviCommerce には、複数のタイプのオンライン ショップを作成するために設計された 6 つのホームページを含む 26 ページが付属しています。 また、3 つのショップ ページ、2 つの商品ページ、2 つのチェックアウト ページ、5 つのヘッダー、2 つのフッター、および多くの追加機能も含まれています。 機能には、Ajax 製品フィルター、カート ポップアップ、製品 Ajax 検索、ポップアップ フォーム、および WooCommerce バリエーション スウォッチが含まれます。

レイアウトを見てみましょう。 大きなレイアウトを小さなグループに分割して、ダウンロードした子テーマと製品デモの画像を管理したり表示したりしやすくします。

ディビコマース ホーム ワン

ヒーローセクションには、CTA 付きの全画面画像が表示されます。

この後には新着情報のセクションがあります。 これには、製品カードのホバー効果が含まれます。 2 列のセクションには、ショップにリンクする画像が表示されます。 画像には Ken Burns エフェクトが含まれています。 次に、ホバーエフェクトを備えた別のショップセクションです。 これが製品デモの上部です。

最初のホーム レイアウトの下半分には、別の全画面 CTA、注目の製品、独自の取引カウントダウン、ブログ、画像が表示されます。

ディビコマース ホーム 2

2 番目のホームページには、CTA を含む全画面スライダーが表示されます。

ページの上半分には、ショップ カテゴリへの CTA、片面に 2 つの製品ともう片面に CTA があるユニークなショップ セクション、ショップ セクション、および全幅の電子メール サインアップ フォームが含まれています。 すべての製品カードとボタンにはホバー効果が含まれています。

ホーム 2 の後半には、ショップ セクション、全画面背景画像上のカード内の取引カウントダウン タイマー、ブログ、画像が表示されます。

ディビコマース ホーム スリー

ホーム 3 の上半分には、全幅の CTA、新着商品のショップ セクション、カテゴリ CTA の 2 列に 4 つの画像があるセクション、および幅の広い電子メール フォームが表示されます。

レイアウトの後半には、セクション ショップ セクション、背景画像のあるブログ セクション、および顧客画像のあるセクションが表示されます。

ディビコマース ホーム フォー

4 番目のホームページには、2 つの画像を含むユニークなヒーロー セクションが含まれています。 一方は他方よりも長く、テキストと CTA が両方の画像に重なっています。 カードの下部にタイトルが記載されたカテゴリ画像とショップセクションも含まれています。

レイアウトの後半には、2 つの大きなカテゴリの CTA、ショップ セクション、カウントダウン タイマー付きの取引セクション、および背景画像付きのブログが表示されます。

ディビコマース ホーム ファイブ

5 番目のホームページには、右側に CTA を含む全画面のヒーロー セクションが表示されます。 カテゴリ画像の大きなセクションがあり、5 つの小さな画像と 3 つの大きな画像が含まれています。 3 つのショップ セクションには、新商品、セール品、ベストセラーが表示されます。 このレイアウトには、全幅の電子メール フォームと顧客の画像も含まれています。

ディビコマース ホーム シックス

6 番目のホームページが最もユニークです。 ヒーローセクションにセールカウントダウンタイマーが表示されます。 各ショップ セクションでは、セクションの左側に大きなテキストでタイトルが配置されます。 これに、画像と相互に重なるタイトルとボタンを含む 2 つの画像 CTA が続きます。 別のカテゴリ セクションには、ホバーすると消えるボックスの影のある画像が含まれています。 このレイアウトには、電子メール フォームと顧客画像も含まれています。

ディビコマース ショップ ワン

最初のショップ ページには、ページ タイトルを含む全幅の画像が表示され、その後に並べ替えフィルターとサイドバーが左側にある 4 列の製品が表示されます。 サイドバーには、カテゴリ、サイズ、色のオプションが含まれています。 製品にマウスを置くとボックスの影が表示されます。

ディビコマース ショップ 2

Shop Two には全幅の画像が含まれており、商品が 1 列に配置され、ユーザーがショップ セクションの上にカテゴリ、サイズ、色でフィルターできる興味深い商品フィルターが追加されています。 また、並べ替えフィルターも含まれており、ページの下部にページネーションが追加されます。 ホバーするとフィルターが開きます。

ディビコマース ショップ 3

Shop Three には全幅の画像が含まれていません。 ページの上部にショップのカテゴリを画像とともに配置します。 ショップ セクションには、サイドバー、フィルター、ホバー効果、ページネーションが含まれます。

製品ページ 1

最初の製品ページには、左側に大きな注目の画像が表示され、右側に製品オプションが表示されます。 製品オプションはスクロールしてもそのまま表示されます。 ページ上部のブレッドクラムには、ナビゲーション構造内の顧客の位置が表示されます。

注目の画像の後には、一連のサムネイル画像と別の大きな画像が続きます。 大きな画像が製品オプションの領域に到達すると、オプションがページとともにスクロールします。

次に、説明と配送情報、およびレビューのセクションです。

最後に、顧客が独自のレビューを追加できるセクションがあります。

製品ページ 2

2 番目の製品ページは最初の製品ページのデザインを踏襲していますが、トグルの製品オプション領域に説明と配送情報が追加されています。

ページの下部には、顧客が興味を持つ可能性のある製品のセクションが追加されます。製品カードには、カーソルを置くとボックスの影が追加されます。

カートポップアップ

カート ポップアップは、商品がカートに追加されると表示されます。 これには、クーポン コードを追加するフィールド、類似製品のスライダー、チェックアウト ボタンが含まれています。

カートページ

DiviCommerce には、スタイル付きのカート ページが含まれています。 カート情報にはボックスシャドウが含まれる。 ボタンは子テーマのデザインに合わせて赤色になっています。

チェックアウト ページ 1

チェックアウトページが 2 つあります。 これは最初のチェックアウトページです。 注文と支払い情報がチェックアウト フォームの右側に表示されます。 2 番目のチェックアウト ページでは、この情報がフォームの下に配置され、会社情報がフォームの右側に配置されます。

私たちについて

About Us ページには、目立つ角度からの画像が表示されます。 このページには、全幅の画像、テキスト用のいくつかの領域、およびいくつかの大きな画像も含まれています。

お問い合わせ

「お問い合わせ」ページには、宣伝文句付きの連絡先情報が表示され、お問い合わせフォームが表示され、FAQ の切り替えが行われ、全幅の地図が含まれています。

ディビコマースヘッダー

DiviCommerce には 5 つのヘッダーが含まれています。 これらには、使用、削除、または別のヘッダーと交換できる複数のセクションが含まれています。

ヘッダー 1

最初のヘッダーでは、上部にセール バーが追加され、右側に検索、アカウント ログイン、ポップアップ ショッピング カートへのリンクが含まれています。 左側にロゴとメニューがあります。

ヘッダー 2

ヘッダー 2 は、上部バーに検索ボックスを配置します。 ショッピングカートとメニューが入れ替わります。

ヘッダー 3

3 番目のヘッダーは、中央と下部の新しいバーにメニューを配置し、検索を中央に移動します。

ヘッダー 4

4 番目のヘッダーはロゴとメニューを中央に配置し、左側に検索、右側にカートを配置します。

ヘッダー 5

最後に、5 番目のヘッダーは、上部バーに検索ボックスを配置し、ロゴとメニューを左側に移動し、カートを右側に配置します。

DiviCommerce フッター

DiviCommerce には 2 つのフッターが含まれています。 どちらも e コマースに適しています。

フッター 1

フッター番号 1 には 2 つのセクションが含まれています。 最初のセクションには、テキストとして提供される情報の宣伝文が含まれています。 2 番目のセクションには、ロゴ用の画像モジュール、ソーシャル メディア フォロー モジュール、情報とリンク用の多数のテキスト モジュールが含まれています。

フッター 2

2 番目のフッターは、上部のセクションを電子メール フォームに置き換えます。 2 番目のセクションでは、ソーシャル メディアのフォロー ボタンを独自の列の右側に移動します。

ディビコマースポップアップ

DiviCommerce には、Divi Builder で作成されたポップアップと Popup Maker と呼ばれるプラグインが含まれています。 ポップアップ自体には、一方の側にサインアップ CTA、もう一方の側に画像を含む電子メール フォームが表示されます。 オーバーレイと閉じるボタンが含まれています。

ディビコマース検索

Ajax 検索では、入力するとカテゴリと製品がリストされます。 検索は高速で、結果は開いたままになるため、顧客は結果内の任意のものをクリックできます。

購入場所 DiviCommerce

DiviCommerce は、Divi マーケットプレイスで 25 ドルで購入できます。 これには、1 年間のサポートとアップデート、無制限の Web サイト使用、30 日間の返金保証が含まれます。

DiviCommerce についての終わりの考え

以上が、Divi の DiviCommerce 子テーマの外観です。 この子テーマには、あらゆる種類の WooCommerce ショップを構築するための多くのページとレイアウトが含まれています。 子テーマを備えた 5 つの追加プラグインにより、カート、ポップアップ、フィルターなど、多くの興味深い機能が追加されます。 Ajax 機能は高速です。Ajax 機能は、Web サイトに多くのエレガントで便利なツールを提供し、群衆の中で際立っています。

我々はあなたから聞きたい。 DiviCommerce 子テーマを試してみましたか? コメントでご意見をお聞かせください。