WordPress divi主题

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

by | May 14, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

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

google广告开户

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

Divi 产品轮播模块

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

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

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

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

WordPress divi主题

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

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

Divi 产品轮播模块设置

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

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

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

fiverr建站WordPress程序员

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

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

独立站选品工具

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

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

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

高质量外链购买

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

产品轮播非常适合 Divi 布局。 在此示例中,我已将 Divi 商店模块替换为 Divi 产品轮播模块,并对其进行样式设置以匹配布局。

JasperAI 10000字免费额度试用

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

对于这个,我调整了幻灯片和图像的边框以创建圆角。 我继续把图像做成圆圈。 我还添加了一个盒子阴影。

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

WordPress备份工具updrafplus

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

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

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

在这篇文章中,我设置了评级以匹配布局中的元素。

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

Divi 产品轮播模块演示

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

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

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

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

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

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

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

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

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

Divi Product Carousel Module 有两种购买选择:

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

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

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

结束的想法

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

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

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

我们希望收到你的来信。 您是否尝试过 Divi 产品轮播模块? 在评论中让我们知道您对此的看法。

特色图片 Letters-Shmetters / shutterstock.com

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题