关于Divi 5的组旋转木马模块,您需要了解的一切
已发表: 2025-08-19Divi 5的最新模块之一是Carousel,它在这里可以轻松为Divi网站创建视觉令人惊叹的轮播和动画。这种功能强大的补充使网页设计师可以在不需要第三方插件或自定义CSS的情况下创建引人入胜的网站旋转木马。无论您是建立光滑的投资组合,电子商务商店还是博客,Carousel模块都可以解锁新的创造力水平。
在这篇文章中,我们将介绍您需要了解的有关组旋转木马模块的所有信息,并提供有关如何使用它的示例和逐步指南。让我们潜入!
- 1组旋转木马模块是什么?
- 1.1关键功能
- 2如何使用组旋转木马模块
- 2.1将样式分配给第一组
- 2.2将内容添加到第一组
- 2.3添加其他组
- 2.4自定义组和活跃组
- 2.5自定义响应式布局
- 3与Divi 5的Loop Builder集成
- 4个真实世界的示例旋转木马模块
- 4.1自定义全宽 /全屏滑块
- 4.2团队成员展示
- 4.3类别展示
- 4.4推荐
- 5免费下载
- 6您已成功订阅。请检查您的电子邮件地址以确认您的订阅并获取免费的每周Divi布局包!
- 7通过Divi 5的旋转木载模块解锁创意可能性
什么是旋转木马模块?
Divi 5中的组旋转木载模块使您可以创建动态的,引人注目的轮播和滑块,从而为您的网站增加一些移动和交互性。无论您是展示投资组合零件,团队成员还是产品,此多功能模块都可以使您几乎构建任何类型的旋转木马,包括基于邮政的旋转木马,这些旋转木马会动态吸引内容。
每张幻灯片都是空白的画布,使您可以添加任何Divi模块,使其成为创造性和功能设计的绝佳工具。
关键功能
组旋转木制模块建在Divi 5的优化基础上,确保快速加载时间和平稳的过渡。 Divi 5的拖放界面可让您轻松地向滑块添加模块,并具有响应控件,可在台式机,平板电脑和移动设备上进行微调布局,同时保持快速的性能。
可自定义的幻灯片
组旋转木马模块可以完全控制滑块,其内容和动画设置的数量。您可以调整幻灯片过渡,定时和导航选项,以创建与您的视野相匹配的无缝用户体验。
循环构建器的动态内容
该模块与Divi 5的循环构建器集成,根据帖子,术语或用户数据支持动态旋转木马。例如,您可以使用自定义帖子类型和高级自定义字段(ACF)创建一个证明旋转木马,自动进行客户评论或案例研究而无需手动更新。
设计灵活性
您可以利用Divi 5的设计设置来构建独特的旋转木马样式。将变换,过滤器,盒子阴影或悬停效果应用于幻灯片,并自定义组中的单个模块,以创建视觉吸引人的幻灯片,以使访问者保持参与度。
如何使用组旋转木载模块
在Divi 5中设置组旋转木马是直观且灵活的。首先在页面上添加单列行。接下来,在Visual Builder中选择组旋转木模块,然后将其添加到您的页面中。
在“内容”选项卡中,单击以展开Carousel设置下拉菜单。
启用自动旋转,中心模式,并将幻灯片设置为3 。
在“元素”下拉菜单中启用show dot导航。您可以将Show Arrows启用或禁用。
将样式分配给第一组
旋转木马设置到位,我们可以添加第一组。单击“组设置”图标以启动设置。
在“内容”选项卡中,展开背景下拉菜单。单击“背景图像”选项卡,然后单击+添加背景图像以将图像添加到组中。
接下来,导航到“设计”选项卡。展开布局下拉菜单,并将其设置为合理的内容以结束。
接下来,扩展“间距”下拉菜单,并在我们组的左侧和右侧增加5%的边距。这将增加旋转木马组之间的呼吸空间。
将顶部填充设置为100%。向左右涂上25px填充。
将内容添加到第一组
我们可以将注意力转向为小组添加内容。单击“黑色 +图标” ,然后添加一个分隔器模块。
导航到“设计”选项卡。将线路下拉菜单展开,然后将颜色更改为#FFFFFF 。
接下来,扩展“大小”选项卡。将分隔的重量设置为4px ,宽度为15% 。
接下来,向组添加标题模块。给标题标题。
切换到“设计”选项卡。在标题文本下,将标题级别设置为H2(或您想要的任何其他标题) ,选择inter in inter for标题字体,为字体重量选择灯, #ffffff的标题文本颜色和2em的标题文本大小。
在复制我们的小组之前,让我们返回“设计”选项卡,然后将垂直差距调整为10px。这将消除模块之间的任何不必要的垂直空间。
添加其他组
现在,我们的第一组已经设计了,我们可以复制样式的组,然后简单地将我们的内容(背景图像和标题)换成旋转木马。复制该组八次,我们总共有9张幻灯片。
复制小组后,您的小组旋转木马应该看起来像这样。
当我们在这里时,最好给每个小组一个唯一的名称,以便易于识别。单击第一组的设置图标,然后向下滚动以进行管理标签。命名希腊团体。
单击旋转木马中的第二组。展开背景选项卡,然后用新图像替换图像。

在“内容”选项卡中,不要忘记在管理标签字段中添加名称。接下来,将标题模块的标题更改为缅因州。
重复所有其他组的步骤。完成后,您的旋转木马应该看起来像这样。在视觉构建器中,您可以使用导航点滚动旋转旋转木马,以确保您没有错过任何步骤。
如您所见,我们一些幻灯片上的文字很难阅读。我们可以在Carousel级别的“设计”选项卡中纠正此问题,而无需单独编辑每个组项目。
定制组和活跃组
在组旋转木马模块中,您可以风格为主动和不活跃的组样式。关键是组旋转木制模块本身用作空白画布,并且您将样式应用于其中的模块组。这样可以进行高水平的自定义,从而使您创建独特的布局和效果。
现在,我们已经创建了一个组旋转木马,请前往主旋转木马设置中的“设计”选项卡。
扩展组下拉菜单。此选项卡控制组旋转木马中包含的模块组的设计设置。您在此处应用的任何设置都将应用于非活动组模块。
展开背景选项卡。我们将在非活动选项卡上应用轻梯度,以确保文本清晰可见。将第一个梯度停止设置为#000000 ,并具有0%的不透明度。稍微向右调整滑块。启用背景图像切换上方的位置梯度。
将第二个梯度停止设置为#000000 ,不透明度为40% 。
启用背景图像切换上方的位置梯度。
接下来,找到“过滤器”选项卡。我们将减少非活动组的饱和度,以使背景图像具有黑色和白色效果。找到饱和滑块并将其设置为0 。
接下来,扩展“活动组”下拉菜单,然后单击“背景”选项卡。应用与上述相同的梯度设置。
确保在背景图像切换上方启用位置梯度。
将过滤器下拉菜单在活动组下扩展,并将饱和滑块调整为75% 。这将仅使活动的旋转木马项目着色,从而允许用户识别旋转木马中的活动幻灯片。
自定义响应式布局
现在,我们的组旋转木马已经准备好台式机,我们将使用Divi 5的可自定义响应式断点来设计旋转木马的移动版本。默认情况下,Divi 5启用三个断点。如果您想对各种设备尺寸进行更多控制,则可以使用所有七个可用断点。单击视觉构建器顶部栏中中间的省略号菜单。
启用您想要的断点,然后单击保存以继续。
单击平板电脑断点以查看平板电脑设备上的布局外观。向下滚动到旋转木马设置,然后调整幻灯片以显示为1 。这也将适用于任何较小的断点,例如在电话和手机上。
最后,单击屏幕左上方的“预览”按钮,以在新标签中查看您的组旋转媒体。
完成后,您的组旋转木马应该看起来与下面的视频相似。
就是这样!在Divi 5中建立一个旋转木马是简单的,可提供令人难以置信的结果。
与Divi 5的循环构建器集成
Divi 5的循环构建器是一个强大的功能,可以将组模块变成动态内容显示。此功能使设计人员可以创建动态的自动旋转木制,这些旋转木马直接从WordPress中拉出内容,将静态内容转换为产品显示,类别档案或团队成员旋转木马,并单击几下。
通过将Loop Builder与组旋转木马集成在一起,Divi 5使用户能够用最少的手动工作来制作复杂的内容驱动的旋转木马,从而成为动态网络设计的出色功能。
循环构建器使组旋转木马能够通过帖子,术语或用户数据动态循环,从而创建自动反映您网站最新内容的轮播。由于循环构建器直接从WordPress数据库中删除数据,因此您可以轻松地展示博客文章,产品类别或用户配置文件。
例如,您可以使用WooCommerce术语使用帖子类型或产品类别滑块创建博客帖子旋转木马,从而使模块具有令人难以置信的多功能性,以满足动态内容的需求。
团体旋转木马模块的现实世界例子
组旋转木制模块的柔韧性使其适用于各种用例。以下是一些现实世界中的示例,可以显示可能的可能性。
自定义全宽度 /全屏滑块
在此示例中,我们创建了一个全宽/全屏幕滑块,为冰淇淋店摇晃。我们将旋转木马设置为一次显示一个幻灯片,每个幻灯片都包含一个背景图像,两个标题和一个呼叫行动按钮。我们还将动画设置为三秒钟的延迟后,将动画推向下一个幻灯片。您可以通过将组旋转木制和部分设置为100VH来实现此外观。
团队成员展示
当您想在网站上展示团队成员时,使用组旋转木马模块是一个很好的方法。在此示例中,我们已将3列布局配置为旋转木马。每个幻灯片都使用Divi的社交关注模块,包括爆头,名称,角色和社交媒体链接。将旋转木马一次滚动一次滚动滚动,以使其具有干净,专业的外观。
类别展示
Divi 5的组旋转木载模块与Loop Builder完美无瑕。这使您可以创建具有网站产品类别的引人入胜的滑块。每个幻灯片都动态地吸引了类别名称和特色图像,这是展示您的产品的好方法。在此示例中,我们使用过滤效果
推荐
组旋转木马模块也非常适合创建推荐滑块。您可以轻松地展示最佳的客户评论,客户推荐等。多亏了Group Carousel模块,您不再仅限于静态列或外部插件。

免费下载
加入Divi新闻通讯,我们将向您发送终极Divi着陆页布局包的副本,以及大量其他惊人和免费的Divi资源,提示和技巧。跟进,您将立即成为Divi大师。如果您已经订阅,则只需在下面的电子邮件地址中输入您的电子邮件地址,然后单击下载即可访问布局包。
您已成功订阅。请检查您的电子邮件地址以确认您的订阅并获取免费的每周Divi布局包!
使用Divi 5的旋转木载模块解锁创意可能性
Divi 5的Group Carousel模块是一个有力的补充,可以解锁创建动态Divi网站的新可能性。从创建引人入胜的产品滑块到证明,该模块使您的Divi网站添加交互式内容更加容易。
现在,Divi 5的改进基金会为更多功能铺平了道路,这是潜水的最佳时机!您是否尝试过小组旋转木马模块?在下面的评论中让我们知道。