19 Divi eコマースWebサイトの例

Diviの汎用性により、eコマースWebサイトに最適です。 WooCommerceやその他のeコマースプラットフォームとうまく統合できます。 Diviで構築されたeコマースWebサイトがたくさんあるのは当然のことです。 この記事では、想像力をかき立てるのに役立つDiviで構築されたeコマースWebサイトの20の例を見ていきます。

これらのサイトには、興味深いレイアウト、ショップページ、および製品ページがあります。 ほとんどの場合、ショップや製品ページの興味深いスタイリングが含まれ、一部にはWooCommerceアドオンが含まれています。 私にとって最も際立っているものを指摘します。 ウェブサイトは順不同です。

1.アフリカ東部

East of Africaは、会社に焦点を当てたシャープなホームページデザインを採用しています。 このページには、さまざまな製品を確認するためのアクションの呼び出しがいくつかあります。 カテゴリページには、大きなロゴの付いたヘッダーと、ヘッダーと一緒にスクロールするナビゲーションメニューが含まれています。 ページには、検索ボックスと推奨カテゴリが含まれています。 製品ページには、製品が2列で表示されます。 レイアウトはシンプルで、提案された製品が含まれています。

ウェブサイトを見る

2.甘いセシリー

Sweet Cecilysは、雑誌のように見える複数列のレイアウト内に、店舗カテゴリへのリンクとして画像を表示します。 背景には会社のロゴの一部が表示されています。 カテゴリページには、ホームページと同じ背景パターンが含まれており、4列に製品が表示されます。 カテゴリページのサイドバーには、製品に合わせてスタイル設定されたWooCommerceウィジェットがあります。 製品ページはサイドバーを使用し、ソーシャル共有ボタンと関連製品を追加します。 このサイトには素晴らしい製品写真がいくつかあります。

ウェブサイトを見る

3.モダンピンクペーパー

モダンピンクペーパーのホームページはお店のように見え、柔らかな色を使ってターゲットオーディエンスを引き付けています。 さまざまなカテゴリのCTAが含まれています。 プライマリカテゴリページは、各カテゴリに同じ画像を使用しますが、画像の上にタイトルが表示されます。 セカンダリカテゴリページには、フィルタ付きの製品が表示されます。 製品ページには、多くの色とパーソナライズオプションがあります。 購入者は、色を選択したり、パーソナライズ用の名前を追加したり、出荷前に製品を表示したり、メッセージやメモを追加したりできます。 製品の説明では、FAQにアコーディオンを使用しています。

ウェブサイトを見る

4.ワンリーフデザイン

One Leaf Designsは、ショップCTAの全幅スライダーに製品画像を表示し、その後にベストセラーのセクションを表示します。 ショップページには、ヘッダーと重なるボックスセクションに商品が表示されます。 商品ページには、すべての画像のボックスシャドウ付きの商品が表示されます。 テキストはサイトに一致するようにスタイル設定されています。 訪問者が好むかもしれない他の製品へのリンクが含まれています。

ウェブサイトを見る

5.ブロバスケット

Bro Basketは、ショップCTAを含むフルスクリーンヘッダーを表示します。 セクションには、オーバーレイ付きの画像を使用してショップのカテゴリが表示されます。 別のセクションでは、厳選された製品を示しています。 カテゴリページには、会社とその業務に関するいくつかのセクションが表示されます。 これらのセクションには、3Dカードのサービスが含まれます。 遠くにあるものはぼやけています。 製品ページの説明領域には、全幅のビデオまたはカスタマイズが含まれています。 関連製品も含まれます。 このウェブサイトの写真が大好きです。

ウェブサイトを見る

6.ナチュラルケアショップ

ナチュラルケアショップは、カテゴリーにリンクする画像を備えた素敵な店のデザインを持っています。 柔らかな色使いでターゲットオーディエンスにアピールします。 カテゴリページには、フッターにWooCommerceサイドバーウィジェットとCTAが含まれています。 製品は大きな画像で示されています。 製品ページには、ウィジェットとCTA画像の両方にスタイル付きアイコンと同様の製品があります。

ウェブサイトを見る

7.Apisオーストラリア

Apis Australiaのヘッダーには、画像に複数の商品を表示するカテゴリセクションとともに全幅のショップCTAが含まれています。 ショップページは、同じ背景を使用してショップモジュールの背後に表示します。 別のショップセクションでは、同じ背景で補完的な製品を示しています。 製品はボックスの影で示されています。 製品ページはシンプルですが、サイトや関連製品に合わせたテキストスタイルが含まれています。

ウェブサイトを見る

8.ラーレイ

Lahlayは、いくつかの製品のCTAを備えたフルスクリーンスライダーを示しています。 スクロールで非表示になるメガメニューが含まれています。 ホームページのいくつかのセクションでは、大きな画像とボックスの影が付いた製品を紹介しています。 他のいくつかのセクションでは、製品情報と画像を提供しています。 カテゴリページには、スタイル付きのショップモジュールとともに、スタイル付きのアコーディオンでたくさんの写真と情報が表示されます。 製品はポップアップで表示されます。 このサイトには、私が見た中で最も興味深いカテゴリ/製品ページの1つがあります。

ウェブサイトを見る

9.レオカ

Leocaは、ショップCTAを含むフルスクリーンヘッダーを表示します。 次のセクションでは、カテゴリにリンクする大きな画像を示します。 カテゴリタイトルが含まれます。 カテゴリページには、カテゴリタイトルとともに全画面画像が表示されます。 次のセクションでは、商品を紹介し、続いて大きな画像とホバーアニメーションを備えたショップモジュールを紹介し、オーバーレイのサイズとハートを表示して、商品をウィッシュリストに追加します。 製品ページには、オプションとともに大きな画像がたくさん表示されます。

ウェブサイトを見る

10.だらしない紳士

Scruffy Gentlemanは、ヘッダーの下に製品検索ボックスを表示し、その後に視差のある全幅の背景画像を表示します。 注目の製品はその上をスクロールして、注目の製品の次のセクションと重なります。 別のセクションでは、視差のCTAと、それに続くストア内の新しいアイテムを示しています。 ショップページも同様のデザインで、WooCommerceサイドバーが追加されています。 製品ページは全幅で表示され、大きな画像が含まれています。

ウェブサイトを見る

11. Veez

Veezには、スクロールしても画面に表示されるショップボタンが含まれています。 ホームページには、テキストとボックスが重なっているスタイルのリンクとして、画像付きのカテゴリが表示されます。 カテゴリページには、セクションを紹介する画像とタイトルが表示され、その後にショップモジュールと詳細を表示するボタンが表示されます。 製品ページには興味深いスタイルがたくさんあります。 それらは、複数の列にたくさんの大きな画像で製品を示しています。 別のセクションには、このカテゴリのその他の製品が表示されます。

ウェブサイトを見る

12.ココクシーノ

Coco Cuscinoには、さまざまなカテゴリのショップCTAを備えたフルスクリーンスライダーが含まれています。 スクロールすると、左側にセクションタイトルが付いた最新の製品のスライダーが表示されます。 別のセクションには、さまざまなカテゴリのCTAが含まれています。 カテゴリと製品のページはシンプルで、境界線、ボタン、テキストのスタイル、およびカスタムフッターがあります。 製品ページにはボックスシャドウが含まれています。

ウェブサイトを見る

13.タルテとベリー

Tarte and Berryは、Ken BurnsエフェクトとショップCTAを使用して、製品をフルスクリーンスライダーに表示します。 細いセクションは、アイコンで購入プロセスを示しています。 これに続いて、製品の大規模なリストと紹介文のセクションがあります。 ショップページはこれと同じデザインに従いますが、スライダーはありません。 製品ページはサイトに合わせてスタイルが設定され、カスタムメッセージを追加するためのボックスが含まれています。 説明は成分を示しています。 このページには関連製品も表示されます。

ウェブサイトを見る

14.ニッキヒルアポセカリー

Nikki Hill Apothecaryは、柔らかくエレガントなデザインを使用して製品を展示しています。 ヘッダーには、CTAとそれに続く会社に関する情報が表示されます。 複数列のセクションには、カテゴリへのリンクとして画像が表示されます。 カテゴリページはすっきりしていて、サイトに合わせたスタイルが含まれています。 製品ページには、説明領域のタブを含むカスタムスタイルがあります。 製品の下には、スタイル付きボックス内の推奨製品があります。 このサイトの写真はそれを際立たせています。

ウェブサイトを見る

15.スパイクとスズメ

Spikes and Sparrowは、製品を紹介するための全幅スライダーを示しています。 スライダーは左側にナビゲーションのスタイルを設定しています。 次のセクションでは、スタイル付きテキストオーバーレイを使用した画像を使用して、複数列のレイアウトでカテゴリを示します。 ショップページには、スタイル付きのWooCommerceサイドバーが付いた商品が表示されます。 商品ページはブランドカラーでエレガントに見えます。 多くの情報は表示されませんが、他の色の製品が含まれています。

ウェブサイトを見る

16.キックバイク

Kickbikeは、ショップCTAを備えた全幅スライダーを示しています。 ホームページには、会社、ショップセクション、および製品に関する多くの情報に関するいくつかの記事とリンクがあります。 カテゴリページには、全画面画像、情報セクション、全幅のショップセクション、FAQが含まれます。 商品ページはシンプルですが、大きな写真や関連商品をたくさん使っています。

ウェブサイトを見る

17.無塩ブティック

Unsalted Boutiqueは、メニュー、セクション、テキストのブロックなどの背後にある柔らかい色を使用して、ターゲットオーディエンスを引き付けます。 CTAはスライダー内に表示され、テキストに色付きのボックスが付いた画像を使用します。 カテゴリを識別するために、サイト全体で色付きのボックスが使用されています。 ホームページには、これらのショップセクションのいくつかが含まれています。 カテゴリリンクは、ドロップダウンボックスから特定の製品を選択できる製品ページを開きます。 製品ページには、関連製品も表示されます。

ウェブサイトを見る

18.メゾンフラワー

Maison Flowersは、フルスクリーンのヒーローセクションに視差の背景として商品画像を表示します。 スクロールすると、オーバーレイに花のアイコンが表示されたスタイル付きのショップモジュールと、ホバーアニメーションのあるカテゴリの画像が表示されたセクションが表示されます。 カテゴリページはホームページと一致しますが、スタイルがオーバーレイされた小さな画像があります。 商品ページには同じヘッダーと大きな商品タイトルが使用されており、ギフトをパーソナライズするための個人的なメッセージボックスが含まれています。 このページには、配送と購入の情報を表示するセクションと、同様の製品を含む他の2つのセクションもあります。

ウェブサイトを見る

19.バサミショップ

Basami Shopは、ショップのCTAをフルスクリーンのスライダーで表示します。 他の製品のセクションとお気に入りのセクションには、ボックスシャドウが含まれています。 カテゴリページには、サイドバーにカテゴリ、カテゴリの説明、製品が表示されます。 製品ページには、製品の大きな画像、製品ギャラリー、説明領域が表示されます。 このエリアはサイトに合わせてスタイルが設定されており、関連製品が含まれています。

ウェブサイトを見る

終わりの考え

これは、想像力を刺激するためにDiviで構築されたeコマースWebサイトの20の例を示しています。 これらのサイトは、Diviでできることの素晴らしい例です。 多くは、製品に焦点を当てるためのスタイル付きショップモジュールを備えたエレガントなランディングページを持っています。 ショップページ、カテゴリページ、製品ページの優れた例がいくつかあります。 製品写真がシンプルなデザインを際立たせる方法は簡単にわかります。 次のDiviプロジェクトのためにあらゆる種類のeコマースWebサイトを設計するのに役立つ何かがここにあるはずです。

我々はあなたから聞きたい。 これらのDivieコマースウェブサイトのどれがあなたのお気に入りですか？ コメントでそれらについてどう思うか教えてください。

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