如何使用Divi 5构建自定义全屏滑块（免费下载）

Divi 5的最新版本之一介绍了Group Carousel模块，这是为您的WordPress网站创建自定义，引人入胜的滑块和旋转木马的功能。您可以轻松地展示您的投资组合，产品，身临其境的英雄或全屏滑块，并将您网站的设计提升到新的高度。

在这篇文章中，我们将提供一个分步指南，用于使用组旋转木马模块创建全屏滑块。让我们潜入！

了解组旋转木马模块

组旋转木马模块是Divi 5的多功能补充，使您能够创建动态的滑块和旋转木马。

与传统模块不同，它支持各种布局，从简单的图像旋转木马到由循环构建器提供动力的复杂的基于后的滑块。这种灵活性使其非常适合以引人注目的方式展示诸如投资组合，推荐或产品画廊之类的内容。

组旋转木载模块的主要特征

组旋转木制模块具有强大的功能。它支持动态的内容循环，使您可以使用循环构建器将帖子，页面或自定义帖子类型直接纳入滑块。

该模块还允许您使用任何Divi模块使用嵌套的行和模块组来构建美丽，引人入胜的滑块。您可以用箭头和分页点自定义导航，自定义其位置，颜色和其他样式以匹配您的网站。

自动播放选项，可调节速度和暂停悬停功能为您的访问者提供了引人注目的体验，以确保它们在您的网站上的停留时间更长。此外，该模块是完全可自定义的，使您可以创建全屏和全width布局，非常适合您网站上的英雄，服务或功能部分。

如何使用Divi 5的Carousel模块构建全屏滑块

在本教程中，我们将向您展示如何使用组旋转木马模块为即将到来的Divi 5网站构建全屏滑块。最后，您将拥有建立迷人的滑块的技能，以鼓励您的访客采取行动。

步骤1：设置新页面

创建一个新页面，添加标题，然后单击使用Divi Builder开始。

当Visual Builder打开时，请在创建页面选项下从头开始选择构建。

悬停在新页面上的部分中以显示设置图标。单击它以显示该部分的设置。

导航到“设计”选项卡。单击布局下拉菜单。在合理的内容下，选择中心。在对齐项目字段中，选择中心。这将使我们的部分的内容水平和垂直地集中。

接下来，我们将调整本节的间距设置。扩展间距下拉菜单。将边距设置为0px ，顶部和底部。在填充下，将顶部和底部设置为0px 。

在本节的设置到位后，单击“绿色 +图标”以添加新行。

在相等的列下选择单列行。

接下来，将组旋转木载模块添加到行中。

在添加内容之前，我们必须设置具有Flexbox和间距控件的行和轮播模块。

步骤2：配置行设置

创建全屏滑块需要我们将行和组旋转木马模块设置为100％宽度。单击图层图标以轻松调整部分。在使用全宽部分和行时，这是至关重要的，尤其是在将填充和保证金设置为0时。它使您更容易看到页面的布局结构

在“图层”视图中，单击以选择包含组旋转木马模块的单列行。导航到设计设置。在布局下拉菜单中，将水平差距调整为0 。

另外，将对齐项目设置为中心的行。

将大小选项卡中的宽度和最大宽度设置为100％。

在“间距”选项卡中，将顶部和底部边距和填充设置为0px 。

步骤3：配置组旋转木马设置

接下来，我们将配置组旋转木马设置。在“内容”选项卡中展开Carousel设置下拉菜单。您可以在2000毫秒的默认设置下切换自动旋转，选择自动旋转速度，然后在悬停时暂停。

在“元素”选项卡中，禁用show dot导航并启用了show箭头。您也可以为左和右箭头选择一个自定义图标。

单击“设计”选项卡中的“箭头”选项卡。将#FFFFFF分配为箭头颜色，将箭头大小放在默认的48px处，然后将箭头位置设置为内部。

展开背景选项卡，并分配＃000000作为背景颜色。

步骤4：样式第一组

我们可以将内容添加到第一个幻灯片中，并使用该部分，行和组旋转木马设置。单击“组旋转木马”模块中的“内容”选项卡，然后单击组的设置图标。

展开背景下拉菜单，然后选择“梯度”选项卡。

单击第一个梯度滑块以分配新颜色。输入＃EFB648进入颜色字段。

接下来，单击第二梯度滑块，然后将＃F28F52分配为颜色。

在梯度类型字段中，选择圆形。

接下来，导航到“设计”选项卡。扩展间距选项卡，并将5％的填充分配到组的顶部和底部。

步骤5：将内容添加到第一组

现在，我们的组设置已配置，我们可以开始向组添加内容。单击黑色 +图标以添加一个模块。

出现插入模块或行对话框时，单击“新行”选项卡。在“平等列”部分下，选择单列行。

添加标题模块

选择并插入标题模块。

扩展文本下拉菜单，然后输入橙汁作为标题。

导航到“设计”选项卡。扩展标题文本下拉菜单。选择H1作为标题级别，将Bebas Neue用作标题字体，将标题字体样式设置为大写，标题文本对齐中心，标题文本颜色为#ffffff ，将标题文本大小和20EM标题大小。

使用Divi 5的响应性控件将标题文本大小调整为平板电脑上的15EM ，而在移动设备上进行了8EM 。

添加新行

接下来，我们将在包含标题模块的单列行下添加一个新行。单击黑色 +图标以添加新模块。

单击“新行”选项卡。在偏移列下，选择1/4 + 1/2 + 1/4选项。

在“设计”选项卡中，展开“大小”选项卡，然后输入70％的宽度和最大宽度。将对齐设置为中心。

添加标题模块

选择标题模块，然后将其添加到第一列。

给标题标题，然后访问“设计”选项卡。扩展标题文本下拉菜单。选择标题级别的H2 ，将bebas neue作为标题字体，大写为标题字体样式， #ffffff作为标题文本颜色，而6em则为标题文本大小。

使用Divi的响应控件将标题文本大小调整为4em 。

添加文本模块

在第一列中的标题下方添加文本模块。输入一些身体文本，然后切换到“设计”选项卡。选择poppins作为文本字体，将文本颜色设置为#ffffff ，然后将文本大小设置为16px 。

添加一个按钮模块

在第一列中的文本模块下添加一个按钮模块。将文本分配给“内容”选项卡中的按钮，然后将文本交换到“设计”选项卡。扩展按钮下拉菜单，并启用自定义样式进行按钮。然后展开按钮背景菜单。在“背景颜色”选项卡中，将＃528BF2添加为按钮的颜色。

使用Divi 5的悬停控件将＃6A7C9D分配为按钮的悬停颜色。

切换回桌面视图。扩展按钮边框下拉选项卡。在按钮边框半径下添加100px ，然后将按钮边框宽度设置为0px 。

展开按钮文本下拉菜单。将poppins分配为按钮字体， #ffffff作为按钮文本颜色，将16px作为按钮文本大小。

展开按钮图标设置，并禁用显示按钮图标切换。

最后，扩展“间距”下拉菜单。将15px填充在顶部和底部和左侧和右侧35px 。

添加图像模块

将图像模块放在第二列中。当设置出现时，将悬停在图像字段上以揭示设置。单击设置图标以加载媒体库并将图像上传到模块。

接下来，我们将在图像中添加一个交互，以创建鼠标越过效果。导航到高级选项卡。展开交互菜单以揭示其设置。单击+添加交互按钮。

选项出现时选择鼠标输入。

在管理标签字段中输入图像倾斜，选择鼠标输入作为触发事件，镜像鼠标运动作为效果动作，选择图像作为目标模块，倾斜为运动类型，而15表示灵敏度。最后，单击“保存交互”按钮以启用交互。

添加栏计数器模块

单击以在第三列中添加栏计数器模块。在“内容”选项卡中。在“元素”选项卡中，禁用显示百分比。

接下来，扩展“背景”选项卡。添加#ffffff作为背景颜色。

交换到“设计”选项卡并扩展栏下拉菜单。在条背景颜色字段中，将＃528BF2添加为颜色。

扩展标题文本下拉菜单。在标题字体字段中，选择Bebas Neue 。选择#ffffff作为标题文本颜色，将22px作为标题文本大小。

交换回到内容选项卡。这次，单击第一个条形计数器项目的设置图标。

将文本输入标题字段，并将百分比字段设置为75 。

单击以返回到栏计数器模块的主内容选项卡。

现在设置了我们的设计设置，您可以轻松复制第一个栏柜台项目以保留设置。

复制条形计数器项目，然后将标题和百分比更改为您所需的设置。

步骤6：添加动画

为了使小组更加身临其境，我们将添加一些动画效果。首先，我们将为主要标题添加缩放效果。单击以选择该组的主要标题。导航到“设计”选项卡，然后向下滚动以扩展“动画”选项卡。为动画选择缩放。保留所有设置。

接下来，单击以展开第二行（三列行）。单击第一列的设置。

单击“设计”选项卡并向下滚动以显示“动画”选项卡。选择动画样式的幻灯片，并为动画方向提供正当的幻灯片。保留所有其他设置。

单击该行的主要内容选项卡。这次，选择第三列。导航到“设计”选项卡，展开“动画”选项卡，然后选择幻灯片>左侧的动画。将其他设置留在其默认设置中。

步骤7：重叠行

为了在布局中增加一些额外的才能，我们将调整第二行的边距，以创建重叠效果。这将使行向上推动，从而使其可以重叠主要标题，从而产生不错的效果。在布局中选择第二行，然后导航到“设计”选项卡。展开“间距”选项卡以显示设置。在最高边缘，将值设置为-8％。

接下来，我们将应用Z索引值以将第二行放置在第一个上方。导航到高级选项卡，扩展位置设置，然后将999999应用于Z索引字段。

当您预览滑块时，您会发现第二行被推到略微重叠，从而产生了一个不错的重叠效果。

步骤8：测试响应能力

在我们复制第一组之前，要测试布局的响应能力是一个好主意。使用Divi 5的可自定义响应式断点进行任何调整。

在Divi 5中，现在有7个断点，而不是Divi 4的3。您可以使用这些断点来确保在任何屏幕尺寸上的布局看起来都令人难以置信。在我们复制第一组之前，请浏览断点并进行必要的调整。

Divi 5中最好的新功能之一是能够更改移动设备列的顺序。这是使设计在所有屏幕尺寸上保持功能和有效性的好方法。在移动视图中，在我们的布局（3列行）中选择第二行的第二列。

在“内容”选项卡中，展开订单选项卡。从那里，将显示顺序设置为-1 。这将使图像放在顶部，使图像像在台式机和平板电脑的视图上一样覆盖标题。

步骤9：复制组

一旦我们将所有内容都放开，我们就可以轻松复制第一个组并更改背景梯度，文本和图像，而无需重复所有步骤。在主旋转木马组内容选项卡中，单击以复制第一个组。

在复制之前，将管理标签分配给组，以使识别识别更加容易。

从那里，更改标题，交换图像，并将新的背景梯度分配给组。使用＃fc6a3c作为第一个梯度滑块，第二个梯度滑块和＃c52f00 。

您还需要将按钮和吧台计数器颜色更改为悬停的＃3DFCCA和＃C52F00 。

我们还需要调整第二组的动画时机。这样可以确保在滑块前进之前，动画不会为其他幻灯片加载。在主要标题模块中，导航到“设计”选项卡，展开动画菜单，然后将动画延迟设置为2000ms 。

对于3列行做同样的事情。在第一列和第三列中，将动画延迟设置为2000ms 。

更改第三组

对于第三组，将＃71B953和＃617A56用于背景梯度。

对于按钮和条形计数器模块，请使用＃BA54B3和＃654F64进行悬停颜色。

您还需要更改标题模块上的动画延迟，第二行的第一和第三列更改为4000ms 。

更改第四组

对于背景梯度，使用＃AD52B7和＃AD52B7 。

使用＃83B853和＃83B853进行条形计数器和按钮模块。

最后，将动画延迟设置为组的主要标题上的6000ms，以及3列行的第一列和第三列。

步骤10：预览并保存滑块

最后一步是保存布局并预览它，以确保不会错过任何步骤。在视觉构建器中，单击右上角的“保存”按钮。

单击“预览”按钮在新选项卡中打开布局。

完成后，您的滑块应该看起来像这样：

就是这样！ Carousel模块是Divi 5的多功能新成员。它允许您为任何项目创建滑块和轮播，并提供无限制的自定义选项。

下载全屏旋转木马布局

如果您想使用我们在这篇文章中重新创建的布局，则可以通过以下表格访问它。下载并解压缩文件夹后，您将找到一个JSON文件。导航到您的Divi库上传文件，以便您可以访问并将其用于构建的任何页面。

下载文件

免费下载

加入Divi新闻通讯，我们将向您发送终极Divi着陆页布局包的副本，以及大量其他惊人和免费的Divi资源，提示和技巧。跟进，您将立即成为Divi大师。如果您已经订阅，则只需在下面的电子邮件地址中输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。请检查您的电子邮件地址以确认您的订阅并获取免费的每周Divi布局包！

今天在Divi 5中建立您的第一台旋转木马

使用Divi 5的Group Carousel模块创建自定义的全屏滑块，为在您的网站上创造引人入胜的体验开辟了一个世界。遵循本文中的步骤，您已经学习了如何使用模块的功能，从动画，响应式断点和交互式效果等高级自定义选项。组旋转木制模块的灵活性使您可以为您想象的任何东西构建幻灯片，同时在所有屏幕尺寸上保持无缝的专业外观。

下载最新的Divi 5 Public Alpha，对组旋转木马模块进行实验，并让我们知道您在评论或社交媒体渠道上的想法。