Divi 插件亮点:Divi 轮播模块

已发表: 2023-01-23

Divi Carousel Module 是 Divi 的第三方模块,可以创建有趣的轮播。 它们非常适合图像、产品、推荐、团队成员等。 该模块包含许多使其脱颖而出的设计元素。 幸运的是,它并不难使用。 在本文中,我们将了解 Divi Carousel Module,了解它的功能,并了解它的易用性,以帮助您确定这是否是满足您需求的正确产品。 Divi Architect Layout Pack 将作为我们教程的背景。

新的 Divi 轮播模块

Divi Carousel Module 向 Divi Builder 添加了一个新模块。 以与任何 Divi 模块相同的方式将模块添加到任何 Divi 布局。

新的 Divi 轮播模块

Divi 旋转木马模块幻灯片

Divi Carousel 模块中的每张幻灯片都将幻灯片显示为添加到主模块中的子模块。 幻灯片可以独立设置样式,也可以使用主模块的样式。 要添加新幻灯片,请单击“添加新项目”。

Divi 旋转木马模块幻灯片

添加任意数量。 您可以在模块设置中为每种设备类型设置轮播在屏幕上显示的数量,因此您添加的数量不会影响设计。 子模块包括所有标准 Divi 设置和一些独特的设置。 这是子模块的独特设置。

主要内容

添加幻灯片时,它会打开以显示设置。 主内容区包括标题、副标题和正文内容。 使用您想要的任何或所有这些内容。 您可以在“设计”选项卡中单独设置这些元素的样式。

Divi 旋转木马模块幻灯片

标题和图片链接

添加 URL 并选择是否在新窗口中打开。 此链接适用于标题和图像,因此即使您只使用这两个元素之一,它仍然有效。

Divi 旋转木马模块幻灯片

按钮设置

这将向幻灯片添加一个按钮。 添加文本、URL,然后选择打开方式。 您可以在“设计”选项卡中设置按钮样式。

Divi 旋转木马模块幻灯片

图像设置

在这里,您可以选择使用图像或图标。 图像是默认设置。 它包括图像选择器、替代文本,以及它是否在灯箱中打开。 图片默认位于标题上方,但您可以根据需要轻松更改。

Divi 旋转木马模块幻灯片

选择使用图标提供了一个图标选择器。 图标替换图像。 它也可以在设计设置中设置样式。

Divi 旋转木马模块幻灯片

这包括您可以选择的两个选项。 您只能选择两个选项之一。 第一个选项是使用社交媒体。 启用它会打开字段以输入四个社交媒体网络的 URL 和您的电子邮件地址。

Carousel Meta:使用社交媒体图标

第二个选项是使用评级。 这将打开一个下拉框,您可以在其中选择从 1 到 5 的评级。 它将评级显示为星号。

Carousel Meta:使用评级

子模块设计设置

子模块的设计设置包括图像样式、图像过滤器以及标题、副标题、内容、按钮、社交媒体和评级的样式。 如果您选择了一个图标来代替图像,您将看到图标设置以更改其颜色、添加一个圆圈、更改其大小以及调整其对齐方式。 在下面的示例中,我通过在图像位置下拉框中选择内部内容将图像移动到幻灯片的中心。

使用图像位置设置的图像样式

主模块设置

主要模块设置包括滑块详细信息以及标准 Divi 设置。 让我们仔细看看滑块的设置。

主模块设置

滑块设置

滑块设置包括宽度控制、在每种设备类型上显示的幻灯片数量、多幻灯片、持续时间、循环、自动播放、箭头和点导航、间距、延迟加载、哈希导航等等。 查看不同设备的项目数量很有趣。 关于数字的一点是,您在这些字段中输入的是它们不必是整数。 如果需要,您可以显示半张幻灯片。 只需输入小数形式的数字并进行试验,直到幻灯片以您想要的方式显示。

滑块设置

这个例子表明我已经添加了一些箭头导航。 我还更改了单个轮播项目在台式机、平板电脑和移动设备上的显示方式。 除了上述之外,我还在模块中添加了一个循环功能。

滑块设置示例

高级滑块设置

高级设置可让您选择滑块效果。 在默认和 Coverflow 之间进行选择。 默认设置正常显示幻灯片,每张卡片都面向用户。

高级滑块设置默认

Coverflow 以 3D 方式显示倾斜的卡片。 选择 Coverflow 会添加旋转(调整每张卡片在 3D 中旋转的量)和阴影(通过阴影增加 3D 效果)。 卡片在轮播中滚动到位时会显示动画。

高级滑块设置 Coverflow 样式

主模块设计设置

主模块的设计设置包括图像叠加、对齐、宽度、边框和框阴影。 它还包括标题文本、副标题文本、正文文本、下一个和上一个按钮、导航颜色、图像的 z-index、每个元素的自定义间距以及标准 Divi 设置的设置。 我已经调整了下面示例中的许多设置。

更新的轮播设计

下一个和上一个箭头包括几个位置选项。 您可以调整图标和背景的颜色,并为上一个和下一个链接独立选择自定义图标。 您还可以调整点导航的颜色。

下一个、上一个按钮和点导航的样式

Divi Carousel Module 有大量的自定义间距选项。 分别为容器和内容的每个元素添加边距和填充。 我在下面的示例中为几个元素添加了填充。

可用的深间距设置

使用 Divi 轮播模块

Divi Carousel Module 非常适合展示很多东西,包括产品、团队成员、自定义博客文章和页面、服务、图像、推荐、投资组合、公司徽标等等。 出版商的网站包含许多可下载的模板,可帮助您入门。 它们以 JSON 文件的形式提供。 将它们上传到您的 Divi 库,并在任何模板、页面或帖子中使用它们。 让我们来看看其中的几个。 我会边走边描述他们的主要设置。

Divi轮播模块内容轮播02_05

内容轮播 02_05 包含大图像并独立设置卡片样式,以创建图像在顶部或底部的交替设计。 它在台式机上一次显示三张幻灯片,在平板电脑上显示 2 张,在手机上显示 1 张。 它每秒自动滑动它们并循环。

使用 Divi 轮播模块

Divi 轮播模块见证轮播 01_07

推荐轮播 01_07 在台式机上显示两张幻灯片,在平板电脑和手机上显示一张幻灯片。 它包括居中箭头和点导航。 幻灯片将图像放在左侧,并在文本后面包含一个渐变。 报价图标是添加到背景的图像。

使用 Divi 轮播模块

Divi轮播模块团队轮播01_05

Team Carousel 01_05 在台式机上显示三张幻灯片,在平板电脑上显示两张,在手机上显示一张。 这些幻灯片具有独特的设计,社交图标位于底部。 主要内容区域的背景在黑色和白色之间交替。 箭头和点是绿色的。 图像使用圆角并包含一个 4px 的边框,使它们成为圆圈。

使用 Divi 轮播模块

Divi轮播模块图片轮播01_02

图像轮播 01_02 在桌面上显示 3.5 个项目并将幻灯片居中以创建在屏幕两侧部分显示图像的设计。 平板电脑显示 3,手机显示 1。它包括箭头导航,幻灯片设置为循环播放,因此用户无需改变方向即可查看所有幻灯片。 圆角使图像具有优雅的设计。

使用 Divi 轮播模块

购买 Divi 轮播模块

Divi Carousel Module 在 Divi Marketplace 有售,售价 29 美元。 它包括无限制使用、30 天退款保证以及一年的支持和更新。

购买 Divi 轮播模块

结束的想法

这就是我们对 Divi Carousel Module 的看法。 该模块有很多功能。 每个元素都可以独立设置样式和调整,为您提供多种设计可能性。 我发现所有设置都很直观,所以在 Divi Builder 中感觉很自在。 如果您对功能丰富的轮播模块感兴趣,Divi Carousel Module 值得一看。

我们希望听到您的意见。 您是否尝试过 Divi 轮播模块? 在评论中让我们知道您的想法。