Divi允许您将滑块放置在全宽部分中，以使滑块跨越浏览器的整个宽度。 Divi滑块（Sliders）支持视差背景以及视频背景！

如何从Divi添加全宽Diapo模块

在向页面添加全角滑块模块之前，您必须先跳转到 Divi Builder。一旦 Divi主题安装在您的网站Web，你会注意到一个按钮 使用Divi Builder创建新页面时，在帖子编辑器上方。单击此按钮以激活Divi Builder，并访问所有Divi Builder模块。然后点击按钮 使用Visual Builder 以可视模式启动发电机。您也可以点击按钮 使用Visual Builder 当您浏览您的网站Web 如果您登录到 WordPress 仪表板，则在前台。

进入Visual Builder后，您可以单击灰色加号按钮将新模块添加到页面。新模块只能添加到行内。如果要开始新页面，请记住先向页面添加一行。

在模块列表中找到全角滑块模块，然后单击将其添加到页面中。模块列表是可搜索的，这意味着您也可以键入单词“ Slide”，然后单击Enter以自动查找并添加全角滑块模块！添加模块后，模块选项列表将为您打招呼。这些选项分为三个主要组： 包装内容 , 概念 et 先进 .

用例示例：在您的主页上添加全角滑块英雄部分

全角滑块是展示超出首页阈值的多个CTA的好方法。图像和内容的结合确实可以使您的板块具有突出的专业感觉。

对于此示例，我将添加一个全角幻灯片作为主页的主要部分。

使用Visual Builder，在网页顶部添加“全角”部分。然后将“全角滑块”模块插入新部分。在全角幻灯片设置的“内容”选项卡上，单击 +添加新项目 创建您的第一张幻灯片。

在第一张幻灯片的幻灯片设置中，更新以下选项：

内容选项

En–头：[输入幻灯片的标题]
按钮文本 ：[输入按钮文字]
包装内容 ：[输入幻灯片的文字内容]
按钮网址 ：[输入“幻灯片”按钮的目标URL）
背景图像 ：[输入将用作幻灯片背景的图像]

德观念选项

使用背景叠加 ：YES
背景叠加颜色 ：rgba（0,0,0,0.2）此叠加层会使背景图像稍微变暗，使文本更易读。

保存幻灯片设置

现在，复制刚创建的幻灯片，并根据需要用新内容更新新幻灯片。对要添加的所有幻灯片重复此操作。

就这样。在此示例中，我仅包含两张幻灯片，但结果是一个有效的全角英雄滑块，其中包含多个号召性用语，可吸引用户单击按钮以获取更多信息。因为这是您的主要行动号召网站Web，我建议使用 Divi Leads 在全角幻灯片上运行拆分测试，看看哪一个转换效果最好。

滑动全部内容选项

在内容选项卡中，您将找到模块的所有内容元素，例如文本，图像和图标。所有控制什么出现在模块中的内容将始终在此标签中找到。

箭头

选择是否要显示左右导航箭头。

控制

选择是否在光标底部显示圆形按钮/滑动指示器。

管理员标签

这将更改构造函数中的模块标签，以便于识别。在Visual Builder中使用WireFrame视图时，这些标签将出现在Divi Builder界面的模块块中。

滑动模块设计选项

在“设计”选项卡中，您将找到所有模块样式选项，例如字体，颜色，大小和间距。这是用于更改模块外观的选项卡。每个Divi模块都有一长串的设计设置，可用于更改任何内容。

去除内部阴影

默认情况下，内部阴影显示在光标中。如果要关闭此阴影，可以使用此设置。

视差效果

启用此选项将在滚动时为背景图像提供固定位置。请记住，启用此设置后，您的图像将根据浏览器的高度缩放图像。

标题字体

您可以通过从下拉菜单中选择所需的字体来更改标题文本的字体。 Divi随附了数十种由Google字体支持的出色字体。默认情况下，Divi对页面上的所有文本使用Open Sans字体。您还可以使用粗体，斜体，大写字母和下划线选项来自定义文本样式。

标题字体大小

您可以在此处调整标题文本的大小。您可以拖动范围滑块以增大或减小文本的大小，或者直接在滑块右侧的输入字段中输入所需的文本大小值。输入字段支持不同的度量单位，这意味着您可以根据尺寸值输入“ px”或“ em”以更改其单位类型。

标题文字颜色

默认情况下，Divi中的所有文本颜色都显示为白色或深灰色。如果要更改标题文本的颜色，请使用此选项从颜色选择器中选择所需的颜色。

标题字母间距

字母间距会影响每个字母之间的间距。如果要增加标题文本中每个字母之间的间隔，请使用范围滑块调整间隔，或在滑块右侧的输入字段中输入所需的间隔大小。输入字段支持不同的度量单位，这意味着您可以根据大小值输入“ px”或“ em”以更改其单位类型。

标题行高度

行高会影响标题文本每一行之间的间距。如果要增加每一行之间的间距，请使用范围滑块调整间距或在光标右侧的输入字段。输入字段支持不同的度量单位，这意味着您可以根据大小值输入“ px”或“ em”以更改其单位类型。

身体警察

您可以通过从下拉菜单中选择所需的字体来更改您的字体。 Divi随附了数十种由Google字体支持的出色字体。默认情况下，Divi对页面上的所有文本使用Open Sans字体。您还可以使用粗体，斜体，大写字母和下划线选项来自定义文本样式。

正文字体大小

在这里您可以调整您的正文文本大小。您可以拖动范围滑块以增大或减小文本的大小，或者直接在滑块右侧的输入字段中输入所需的文本大小值。输入字段支持不同的度量单位，这意味着您可以根据大小值输入“ px”或“ em”以更改其单位类型。

正文文字颜色

默认情况下，Divi中的所有文本颜色都显示为白色或深灰色。如果要更改文本的颜色，请使用此选项从颜色选择器中选择所需的颜色。

正文字母的间距

字母间距会影响每个字母之间的间距。如果要增加文本中每个字母之间的间距，请使用范围滑块调整间距或在滑块右侧的输入字段中输入所需的间距大小。输入字段支持不同的度量单位，这意味着您可以根据大小值输入“ px”或“ em”以更改其单位类型。

身体线的高度

行高会影响正文中每一行之间的间距如果要增加每一行之间的间距，请使用范围滑块调整间距或在输入字段中输入所需的间距大小位于光标右侧。输入字段支持不同的度量单位，这意味着您可以根据尺寸值输入“ px”或“ em”以更改其单位类型。

上部填充

此参数控制模块顶部和模块中文本内容之间的内部空间。如果要增加或减少此空间，请在此处输入所需的值。例如，要减少光标的空间和整体大小，可以输入100px的值。您还可以输入一个百分比值，例如10％，以使高度更加动态。

底部填充

此参数控制模块底部和模块中文本内容之间的内部空间。如果要增加或减少此空间，请在此处输入所需的值。例如，要减少光标的空间和整体大小，可以输入100px的值。您还可以输入一个百分比值，例如10％，以使高度更加动态。

对按钮使用自定义样式

启用此选项会显示各种按钮自定义设置，您可以使用这些设置来更改模块按钮的外观。

按钮文字大小

此设置可用于增加或减小按钮中文本的大小。该按钮会随着文本大小的增加和减少而适应。

按钮文字颜色

默认情况下，按钮采用主题定制器中定义的主题的强调色。此选项使您可以为该模块的按钮分配自定义文本颜色。使用颜色选择器选择自定义颜色以更改按钮颜色。

按钮背景颜色

默认情况下，按钮具有透明的背景色。可以通过从颜色选择器中选择所需的背景颜色来更改此设置。

按钮边框的宽度

默认情况下，所有Divi按钮的边框均为2px。使用此设置可以增加或减少边框。输入0即可删除边框。

按钮边框颜色

默认情况下，按钮边框采用主题自定义程序中定义的主题的强调色。此选项使您可以为该模块的按钮分配自定义边框颜色。使用颜色选择器选择自定义颜色，以更改按钮边框的颜色。

按钮边框半径

边框的半径会影响按钮角的圆度。默认情况下，Divi中的按钮具有较小的边框半径，该边框将角四舍五入3个像素。您可以将该值减小为0以创建一个方形按钮，或者显着增大该值以创建具有圆形边缘的按钮。

按钮的字母间距

字母间距会影响每个字母之间的间距。如果要增加按钮文本中每个字母之间的间隔，请使用范围滑块调整间隔或在滑块右侧的输入字段中输入所需的间隔大小。输入字段支持不同的度量单位，这意味着您可以根据大小值输入“ px”或“ em”以更改其单位类型。

按钮字体

您可以通过从下拉菜单中选择所需的字体来更改按钮文本的字体。 Divi随附了数十种由Google字体支持的出色字体。默认情况下，Divi对页面上的所有文本使用Open Sans字体。您还可以使用粗体，斜体，大写字母和下划线选项来自定义文本样式。

添加按钮图标

禁用后，此设置将从您的按钮中删除图标。默认情况下，所有Divi按钮都将在悬停时显示一个箭头图标。

按钮图示

如果启用了图标，则可以使用此设置选择要在按钮中使用的图标。 Divi有不同的图标可供选择。

颜色图标按钮

调整此设置将更改按钮上显示的图标的颜色。默认情况下，图标颜色与按钮文本颜色相同，但是此设置可让您独立调整颜色。

图标放置按钮

您可以选择在按钮的左侧或右侧显示按钮的图标。

将鼠标悬停在按钮上时仅显示图标

默认情况下，按钮图标仅在悬停时显示。如果您希望图标始终出现，请关闭此设置。

悬停按钮的文本颜色

当访客的鼠标悬停在按钮上时，将使用此颜色。颜色将与之前设置中定义的基础颜色不同。

悬停按钮背景颜色

当访客的鼠标悬停在按钮上时，将使用此颜色。颜色将与之前设置中定义的基础颜色不同。

颜色悬停边框按钮

当访客的鼠标悬停在按钮上时，将使用此颜色。颜色将与之前设置中定义的基础颜色不同。

悬停边框半径按钮

当访问者的鼠标悬停在按钮上时，将使用此值。该值将不同于先前设置中定义的基值。

指向音符间距按钮

当访问者的鼠标悬停在按钮上时，将使用此值。该值将不同于先前设置中定义的基值。

高级选件全宽幻灯片模块

在高级选项卡上，您将找到经验丰富的Web设计人员可能会有用的选项，例如自定义CSS和HTML属性。在这里，您可以将自定义CSS应用于模块的许多元素中的任何一个。您还可以将自定义CSS类和ID应用于模块，该自定义CSS类和ID可用于在子主题的style.css文件中自定义模块。

CSS ID

输入用于此模块的可选CSS ID。 ID可用于创建自定义CSS样式或链接到页面的特定部分。

CSS类

输入用于此模块的可选CSS类。 CSS类可用于创建自定义CSS样式。您可以添加多个类，以空格分隔。这些类可用于Divi子主题或使用Divi主题选项或Divi Builder页面上的设置添加到页面或网站的自定义CSS样式表中。

自定义CSS

自定义CSS也可以应用于模块和任何模块内部。在“自定义CSS”部分中，您将找到一个文本字段，您可以在其中直接将自定义CSS样式表添加到每个元素。这些设置中的CSS条目已经包装在样式标签中。因此，只需输入用分号分隔的CSS规则即可。

自动动画

如果您希望光标自动滑动，而访问者不必单击下一个按钮，请启用此选项，然后根据需要调整下面的旋转速度。

自动动画速度（以毫秒为单位）

如果上面启用了“自动动画”选项，则可以在此处指示光标在每张幻灯片之间的褪色速度。数字越大，每次旋转之间的间隔时间越长。

继续在悬停时自动滑动

启用此选项将允许在鼠标悬停时继续自动滑动。

隐藏手机上的内容

随着移动设备上的屏幕尺寸变小，屏幕空间变得越来越有价值。有时，最好关闭一些不太重要的游标元素，以减小游标的大小并使其更具可读性。启用此设置会在移动设备上隐藏光标文本内容。

在移动设备上隐藏CTA

随着移动设备上的屏幕尺寸变小，屏幕空间变得越来越有价值。有时，最好关闭一些不太重要的游标元素，以减小游标的大小并使其更具可读性。启用此设置将在移动设备上隐藏对操作按钮的光标调用。

在手机上查看图像/视频

随着移动设备上的屏幕尺寸变小，屏幕空间变得越来越有价值。有时，最好关闭一些不太重要的游标元素，以减小游标的大小并使其更具可读性。启用此设置将在移动设备上显示幻灯片图像和视频（默认情况下它们被禁用）。

能见度

此选项使您可以控制模块所在的设备。您可以选择在平板电脑，智能手机或台式机上分别停用模块。如果要在不同的设备上使用不同的模块，或者要通过从页面中删除某些元素来简化移动设计，这将很有用。

全角幻灯片模块元素的内容选项

标题

在此处设置光标标题的文本。

按钮文本

如果要在幻灯片内容下方显示按钮，请在此处输入按钮文本。如果不想显示按钮，请将此字段留空。

包装内容

在此处输入光标的正文内容。请注意，您在此处输入的文字数量将决定幻灯片的高度。

按钮网址

如果显示按钮，请在此字段中插入有效的Web URL以设置目标链接。

拖曳图片

如果添加幻灯片图像，它将显示在幻灯片文本上方幻灯片背景的左侧。如果您未指定幻灯片图像，则您将在左侧看到居中的纯文本幻灯片。由于每张幻灯片的高度由文本确定，因此，如果幻灯片图像足够高，它将降到幻灯片底部下方，从而在底部创建对齐的图像。

请注意，带有幻灯片图像的幻灯片的高度可以由滑块中较高的幻灯片确定。如果要底部对齐图像，请确保幻灯片图像足够大。出于可读性原因，幻灯片图像仅出现在列，列或1列宽度的滑块中。同样，幻灯片图像不会在宽度小于768像素的浏览器上显示。幻灯片图像的宽度定义如下。我们建议您的幻灯片图像至少与宽度相同。

影片幻灯片

如果添加幻灯片视频，它将显示在幻灯片背景上方的幻灯片文本的左侧。如果您未指定幻灯片视频，那么您将在左侧看到居中的纯文本幻灯片。由于每张幻灯片的高度由文本确定，因此，如果幻灯片图像足够高，它将降到幻灯片底部下方，从而在底部创建对齐的图像。

暂停视频

允许其他玩家开始播放时暂停视频

背景图像

如果设置，则此图像将用作此模块的背景。要删除背景图片，只需从设置字段中删除URL。

幻灯片的高度取决于您添加的文本量。如果您有多张幻灯片，则该滑块将占据最高幻灯片的高度。

光标的宽度取决于浏览器的宽度。根据标准屏幕尺寸，我们建议您的图片至少应为1280px x 768px。

背景图片的位置

默认情况下，背景图像显示在幻灯片的中央。您可以使用此设置更改幻灯片顶部，底部，左侧，右侧或四个角中任何一个的位置。

背景图片尺寸

默认情况下，背景图像将按比例放大，以确保它们填满整个幻灯片。但是，您可以使用此选项来更改默认行为。 “覆盖”是默认行为，它将缩放图像以覆盖整个幻灯片区域。 “ Fit”也将强制图像覆盖整个区域，但是，它将强制图像的高度和宽度与光标的高度和宽度匹配。这可能会导致图像失真，但会防止图像被裁剪。 “实际大小”不会缩放图像，而是以其原始大小显示它。

背景颜色

如果您只想为幻灯片使用纯色背景，请使用颜色选择器设置背景色。

MP4背景视频

所有视频都应以.MP4 .WEBM两种格式下载，以确保在所有浏览器中的最大兼容性。在此处下载.MP4版本。 重要说明：视频背景已从移动设备禁用。而是将使用您的bkacground图像。因此，您应该同时设置背景图像和背景视频，以确保获得更好的效果。

WEBM背景视频

所有视频都应以.MP4 .WEBM两种格式下载，以确保在所有浏览器中的最大兼容性。在此处下载.WEBM版本。 重要说明：视频背景已从移动设备禁用。而是将使用您的bkacground图像。因此，您应该同时设置背景图像和背景视频，以确保获得更好的效果。

背景视频宽度

为了正确调整视频大小，您必须在此处输入视频的确切宽度（以像素为单位）。

视频高度背景

为了正确调整视频大小，您必须在此处输入视频的确切高度（以像素为单位）。

幻灯片元素元素设计选项

使用背景叠加

启用后，自定义叠加层颜色将添加到背景图片上方和滑块内容后面。

背景叠加颜色

使用颜色选择器选择背景颜色。

使用文字叠加

启用此选项后，将在光标文本后面添加背景色，以使其在背景图像上更具可读性。

文字叠加颜色

使用颜色选择器选择文本叠加层的颜色。

文字叠加边框半径

边框的半径影响文本覆盖区域的角的圆度。默认情况下，这些角的边缘略为圆角，为3像素。您可以将该值减小为0以创建一个矩形框，或者增大该值以使拐角更加圆滑。

自定义颜色箭头

当您将鼠标悬停在滑块模块上时，将出现箭头，以允许访问者浏览每张幻灯片。默认情况下，这些箭头继承幻灯片主要文本的颜色。但是，您可以使用此设置为这些箭头定义自定义颜色。

点导航自定义颜色

在每个光标中，点导航项出现在光标内容下方。这些元素允许用户浏览光标。您可以使用此设置中的颜色选择器来定义用于这些元素的自定义颜色。

幻灯片图像的垂直对齐

此设置确定幻灯片图像的垂直对齐方式。您的图像可以垂直居中或在幻灯片的底部对齐。

文字颜色

如果幻灯片的背景是深色，则文本颜色应设置为“浅色”。反之亦然，如果幻灯片背景较浅，则文本颜色应设置为“深色”。

标题字体