19 个 Divi 电子商务网站示例

Divi 的多功能性使其成为电子商务网站的理想选择。 它与 WooCommerce 和其他电子商务平台很好地集成。 理所当然地，有很多使用 Divi 构建的电子商务网站。 在本文中，我们将查看 20 个使用 Divi 构建的电子商务网站示例，以帮助激发您的想象力。

这些网站具有有趣的布局、商店页面和产品页面。 大多数包括商店和产品页面的有趣样式，有些包括 WooCommerce 附加组件。 我会指出对我来说最突出的地方。 这些网站没有特定的顺序。

1. 非洲东部

East of Africa 有一个鲜明的主页设计，专注于公司。 该页面有几个号召性用语来查看各种产品。 类别页面包括一个带有大徽标的标题和一个随标题滚动的导航菜单。 这些页面包括一个搜索框和建议的类别。 产品页面以两列显示产品。 布局很简单，包括推荐的产品。

见网站

2. 甜蜜的塞西莉丝

Sweet Cecilys 将图像显示为指向类似于杂志的多列布局中的商店类别的链接。 背景显示了公司徽标的一部分。 类别页面包括与主页相同的背景图案，并在四列内显示产品。 类别页面的侧边栏中有 WooCommerce 小部件，其样式与产品相匹配。 产品页面使用侧边栏并添加社交分享按钮和相关产品。 这个网站有一些惊人的产品摄影。

见网站

3.现代粉红纸

Modern Pink Paper 的主页看起来像一家商店，并使用柔和的色彩来吸引目标受众。 它包括不同类别的 CTA。 主要类别页面为每个类别使用相同的图像，但它们在图像上显示标题。 次要类别页面显示带有过滤器的产品。 产品页面有很多颜色和个性化选项。 买家可以选择颜色、添加个性化名称、选择在发货前查看产品以及添加消息和备注。 产品描述使用手风琴作为常见问题解答。

见网站

4. 单叶设计

One Leaf Designs 在全宽滑块中显示产品图像，带有商店 CTA，然后是最畅销的部分。 商店页面在与标题重叠的方框部分显示产品。 产品页面为所有图像显示带有框阴影的产品。 文本的样式与站点相匹配。 它包括访问者可能喜欢的其他产品的链接。

见网站

5. 兄弟篮

Bro Basket 显示带有商店 CTA 的全屏标题。 一个部分使用带有叠加层的图像显示商店类别。 另一部分展示了手工挑选的产品。 类别页面显示了有关公司及其业务的几个部分。 这些部分包括 3D 卡中的服务。 远处的人都模糊了。 产品页面的描述区域包括全角视频或自定义。 它们还包括相关产品。 我喜欢这个网站上的摄影。

见网站

6. 天然护理店

Natural Care Shop 有一个漂亮的商店设计，带有链接到类别的图像。 它使用柔和的色彩来吸引目标受众。 类别页面包括 WooCommerce 侧边栏小部件和页脚中的 CTA。 产品以大图显示。 产品页面在小部件和 CTA 图像中都有样式图标和类似产品。

见网站

7. 澳大利亚蜜蜂

Apis Australia 在标题中包含一个全宽的商店 CTA，以及一个在图像中显示多个产品的类别部分。 店铺页面使用相同的背景显示在店铺模块后面。 另一个商店部分显示相同背景下的互补产品。 产品以方框阴影显示。 产品页面很简单，但包含与网站和相关产品相匹配的文本样式。

见网站

8. 莱莱

Lahlay 展示了一个带有 CTA 的全屏滑块，用于多种产品。 它包括一个隐藏在滚动条上的超级菜单。 主页上的几个部分展示了带有大图像和框阴影的产品。 其他几个部分提供带有图像的产品信息。 类别页面显示了大量风格手风琴的照片和信息，以及风格商店模块。 产品显示在弹出窗口中。 这个网站有我见过的最有趣的类别/产品页面之一。

见网站

9. 莱奥卡

Leoca 显示带有商店 CTA 的全屏标题。 下一部分显示链接到类别的大图像。 它们包括类别标题。 类别页面显示全屏图像以及类别标题。 下一部分展示了一个产品，然后是一个带有大图像和悬停动画的商店模块，用于叠加显示尺寸和心脏以将产品添加到您的愿望清单。 产品页面显示了许多大图像以及选项。

见网站

10. 邋遢绅士

Scruffy Gentleman 在标题下提供了一个产品搜索框，然后是一个全宽的视差背景图像。 特色产品在它上面滚动并与特色产品的下一部分重叠。 另一部分显示了视差中的 CTA，随后是商店中的新商品。 商店页面遵循类似的设计，并添加了 WooCommerce 侧边栏。 产品页面以全角显示并包含大图像。

见网站

11. 维兹

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 的全宽滑块。 主页提供了几篇关于公司的文章和链接、商店部分以及有关产品的大量信息。 类别页面包括一个全屏图像，然后是一个信息部分、全宽的商店部分，然后是一个常见问题解答。 产品页面很简单，但使用了大量的大照片和相关产品。

见网站

17. 无盐精品店

Unsalted Boutique 在菜单、部分、文本块等后面使用柔和的颜色来吸引目标受众。 CTA 显示在滑块内，并使用带有彩色文本框的图像。 整个网站都使用彩色框来标识类别。 主页包括几个这样的商店部分。 类别链接打开产品页面，您可以在其中从下拉框中选择特定产品。 产品页面还显示相关产品。

见网站

18. 花之家

Maison Flowers 在全屏英雄部分显示产品图像作为视差背景。 滚动显示一个样式化的商店模块，在覆盖层中有一个花图标，一个部分包含带有悬停动画的类别图像。 类别页面与主页匹配，但有一个带有样式覆盖的小图像。 产品页面使用相同的标题和一个大的产品标题，它包括一个个人消息框来个性化礼物。 该页面还有一个部分显示运输和购买信息，以及其他两个包含类似产品的部分。

见网站

19. 巴萨米店

Basami Shop 在全屏滑块中显示了商店 CTA。 一部分其他产品和一部分收藏夹包括方框阴影。 类别页面在侧栏中显示类别、类别描述，然后是产品。 产品页面显示产品的大图像、产品图库，然后是描述区域。 该区域的样式与站点相匹配，并包含相关产品。

见网站

结束的想法

这是我们对使用 Divi 构建的 20 个电子商务网站示例的看法，以帮助激发您的想象力。 这些网站是 Divi 可以完成的工作的很好的例子。 许多都有优雅的登陆页面，带有风格的商店模块，专注于产品。 商店页面、类别页面和产品页面有几个很好的例子。 很容易看出产品摄影如何使简单的设计脱颖而出。 这里肯定有一些东西可以帮助您为下一个 Divi 项目设计任何类型的电子商务网站。

我们希望听到您的意见。 您最喜欢哪些 Divi 电子商务网站？ 请在评论中告诉我们您对它们的看法。

精选图片来自 TeraVector/shutterstock.com