Divi 插件亮点：Divi 产品轮播模块

Divi 产品轮播模块是 Divi 的第三方插件，可在轮播滑块中显示 WooCommerce 产品。 构建产品轮播并将其放置在任何 Divi 布局中。 您可以为它们设置样式并选择多个布局和显示选项。 在本文中，我们将了解 Divi Product Carousel Module，了解其功能，并了解它的易用性。

Divi 产品轮播模块可从开发人员的网站和 Divi 市场获得。

Divi 产品轮播模块

上传并激活插件后，转到仪表板菜单中的 DiviGear 并激活您的许可证。 如果您有来自该开发人员的多个插件，则需要选择该插件的选项卡。

Divi Builder 中添加了一个名为 Product Carousel 的新模块。 它包括一个紫色图标，因此它从人群中脱颖而出。

设置包括内容、设计和高级选项卡。 内容选项卡具有 WooCommerce 内容的设置。 从下拉框中选择最近、特色、销售、畅销、评分最高或产品类别的产品类型。 输入要显示的产品数量的数字。 从受欢迎程度、评级、日期或价格中选择排序顺序。 您还可以启用添加到购物车按钮和说明。 显示完整的描述或摘录。

轮播设置让您可以根据所使用的设备选择列数。 它还包括多幻灯片（允许它按照屏幕上的幻灯片数量滑动或禁用它一次滑动一张幻灯片）、项目间距、过渡持续时间、中心、循环、自动播放、点和箭头导航、对齐和幻灯片效果。 其他设置包括链接和背景。 有趣的是，您可以同时使用点和箭头。 您可以将点放在幻灯片底部的右侧、中间或左侧。

设计选项卡包括叠加、标题、价格、描述、销售徽章、添加到购物车按钮、评论、箭头、点、图像、悬停、间距、边框和框阴影的设置。 根据您选择的选项添加其他设置。 这些设置中的每一个都是广泛的。

高级选项卡包括预期的 CSS、可见性和过渡功能。 自定义 CSS 包括产品、图像、标题、价格、上一个销售徽章箭头、下一个箭头和点的字段。 这使您可以对 CSS 进行大量控制。

Divi 产品轮播模块设置

您可以将标题和价格移至顶部或底部。 在本例中，我将两者都移到了顶部并更改了它们的大小和颜色。 我通过更改背景颜色和字体大小来设计销售徽章的样式。 我还设计了非活动和活动点的样式。

这是它在前端的外观。 我还添加了一个叠加层，悬停时会出现“添加到购物车”按钮。 您可以为叠加悬停和按钮悬停设置此按钮的样式。

在这一列中，我选择了 6 列，将所有文本移回底部，调整文本颜色，并为添加到购物车按钮添加了一些不透明度。 我默认保留悬停不透明度，因此如果您将鼠标悬停在按钮本身上，则该按钮是实心的。

对于这个，我将布局设置为 4 列。 我添加了箭头并更改了箭头和圆点的颜色。 我还为标题、价格和描述添加了背景，并将所有文本更改为白色。 为了使文本在框中对齐，我添加了一些内容填充。 它还包括顶部的内容填充（如果您将标题或价格放在图像上方）。

这是它在前端的外观。 右侧的箭头较亮，表示它位于它可以显示的产品的末尾。 如果我将它设置为循环，它将是正常颜色。

这是选择溢出时的外观。 它提供了不错的 3D 卡片效果。 您可以调整旋转量并启用幻灯片阴影。

在这个例子中，我给卡片一个框阴影并调整了模糊。 我还将箭头更改为圆形并调整了颜色。

这是启用了中心幻灯片的前端的外观。 这是 4 列布局。 当您选择中心幻灯片时，它的显示方式会有所不同。

这是使用与上述示例相同的设置的 5 列布局。

产品轮播非常适合 Divi 布局。 在这个例子中，我用 Divi Product Carousel Module 替换了 Divi shop 模块，并将它的样式设置为与布局相匹配。

在这个中，我将标题移到顶部，在顶部和底部添加了一些填充，并将标题设为半粗体。 我还更改了添加到购物车按钮的颜色以匹配布局。

对于这个，我调整了幻灯片和图像的边框以创建圆角。 我继续将图像制作成圆圈。 我还添加了一个框阴影。

它在布局中看起来很棒。 不过，它确实隐藏了大部分销售徽章。 CSS 可能有办法解决这个问题。

这个使用 3 列布局的溢出。

对于这个，我删除了图像边框，但保留了幻灯片的边框。 我添加了一个盒子阴影并调整了它的强度和位置。

它还显示悬停时评论的星级。 它将评级放在“添加到购物车”按钮旁边。 它通过一个很酷的动画将它们结合在一起。 这是默认设置。 您可以设置背景和星星的颜色。

在这一篇中，我设计了评级的样式以匹配布局中的元素。

对于这个，我将价格移到顶部，将标题移到底部。 我添加了描述和覆盖。 我将点导航移到右侧。 我不得不为盒子阴影添加一些填充以显示在侧面。 在没有填充的情况下，它将产品放置在模块空间的边缘。

Divi 产品轮播模块演示

目前在开发者的网站上有 13 个可下载的演示。 这些是您可以上传到 Divi 库并与任何 Divi 布局一起使用的布局。 所有这些都包括 Divi Product Carousel 模块的样式，有些还包括其他样式的模块和背景。 这些有助于从您的产品轮播设计开始，并展示可以使用该模块完成的一些事情。 让我们来看看其中的几个。

这个将标题放在顶部，样式到顶部和底部以匹配，在图像外添加带圆圈的箭头并包括点。 它还有一个底部边框，使幻灯片脱颖而出。 我喜欢大胆的颜色。 顶部和底部有一点透明度，所以背景图案可以透出来。 此布局包括标题的样式文本模块。

一些布局包括具有样式的其他模块。 这个使用两列布局来添加使用文本和按钮模块的号召性用语。

这是它从前端的外观。 它包括一个边框、顶部的标题和添加到购物车按钮的两种颜色。 箭头显示在模块的图像中。

这个包括绿色背景和样式幻灯片以匹配。 当您将鼠标悬停在产品上时，添加到购物车按钮为浅绿色，当您将鼠标悬停在按钮上时，该按钮为深绿色。 它包括标题的样式文本模块。

这包括销售徽章的蓝色样式、图像外的圆形箭头和添加到购物车按钮。 它为幻灯片添加了一个小边框。 它显示具有溢出效果的幻灯片。

这一个还展示了具有溢出效果的产品。 它还使用蓝色作为箭头和添加到购物车按钮。 标题移到顶部。 覆盖层为白色，不透明度高，销售徽章为红色。

这包括一个风格化的背景，并添加了一个边框、风格化的添加到购物车按钮、销售徽章和带圆圈的箭头。 覆盖层是白色的。 它将价格放在顶部，将所有其他数据放在底部。

Divi 产品轮播模块价格和文档

Divi 产品轮播模块有两种购买选项：

• 单个站点 – 19 美元
• 无限站点 – 39 美元

它可以从开发人员的网站和市场上获得。

文档由 YouTube 视频提供，可引导您了解这些功能。 您可以在仪表板的 DiviGear 菜单中找到它的链接。 如果您有多个 DiviGear 产品，请选择该产品的选项卡，然后选择文档。

结束的想法

Divi Product Carousel 易于使用，非常适合让您的产品脱颖而出。 即使您不想将它们显示为滑块，它也有很多样式和产品展示选项值得考虑。 我在 Extra 上工作得不是很好。 我很想看到 Extra 支持，因为它已经有很多 WooCommerce 功能，并且是构建 WooCommerce 商店的绝佳平台。

我喜欢它有可下载的演示。 它们包括模块的背景和样式。 这些非常适合为您提供一个起点或激发您的想象力，以在您的 Divi 布局中展示您的 WooCommerce 产品。

如果您有兴趣在轮播中展示您的 WooCommerce 产品，或者只是有更多的设计选项，Divi 产品轮播模块值得一看。 它可以从开发者的网站和 Divi 市场获得。

我们希望听到您的意见。 您是否尝试过 Divi 产品轮播模块？ 请在评论中告诉我们您对此的看法。

特色图片字母-Shmetters / shutterstock.com