全屏滑块可以很好地用作您网站主页的标题。 全屏方面始终将重要内容放在首位。 滑块功能使用户无需向下滚动页面即可查看其他内容（或 CTA）。
使用 Divi 创建全屏滑块非常容易。 关键是给你的滑块一个相对于浏览器高度的高度，然后摆脱对父行或部分的任何额外的填充和宽度限制。 只需几分钟，您就可以创建一个全屏滑块，该滑块在页面加载时展开以填满整个屏幕，并且在所有设备上看起来都很棒。
让我们开始吧。
抢先看
下面是我们将在本教程中构建的设计的快速浏览。
免费下载全屏滑块布局
要掌握本教程中的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者，您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
要将部分布局导入 Divi 库，请导航到 Divi 库。
单击导入按钮。
在可移植性弹出窗口中，选择导入选项卡并从您的计算机中选择下载文件。
然后单击导入按钮。
完成后，部分布局将在 Divi Builder 中可用。
让我们进入教程，好吗？
你需要什么开始
要开始，您需要执行以下操作：
- 如果您还没有，请安装并激活 Divi 主题。
- 在 WordPress 中创建一个新页面，并使用 Divi Builder 在前端（可视化构建器）编辑页面。
- 选择“从头开始构建”选项。
之后，您将有一个空白画布开始在 Divi 中进行设计。
在 Divi 中创建全屏滑块
第 1 部分：设置部分和行
首先，向该部分添加一列行。
部分填充
在添加模块之前，打开部分设置并取出顶部和底部填充，如下所示：
- 内边距：0px 顶部，0px 底部
行设置
接下来，打开该行的设置并更新以下内容：
- 宽度：100%
- 最大宽度：100%
- 内边距：0px 顶部，0px 底部
现在我们的部分和行填充已被删除并且我们的行宽是 100%，我们将添加到行的滑块将能够跨越行/部分的整个宽度和高度而没有任何间隙。
第 2 部分：创建全屏滑块
要创建全屏滑块，请在行中添加一个新的滑块模块。
将图像添加到每张幻灯片
在更新常规幻灯片设置之前，打开第一张默认幻灯片的设置并向幻灯片添加图像和背景图像。 对于此示例，我对幻灯片图像和背景图像使用相同的图像（大约 1920 像素 x 1500 像素）。
然后打开第二张幻灯片的设置并为幻灯片添加不同的图像和背景图像。
更新滑块设置
现在每个单独的幻灯片都有一个独特的图像和背景图像，我们准备更新滑块的设置。
返回滑块设置并在设计选项卡下更新以下内容：
背景叠加
- 使用背景叠加：是
- 背景叠加颜色：rgba(27,18,38,0.74)
图像框阴影
- 图像框阴影：见截图
- 盒子阴影水平位置：-8vw
- 盒子阴影垂直位置：-8vw
- 盒子阴影传播强度：-6.5vw
- 阴影颜色：#cf1259
标题文字
- 标题字体：蒙特塞拉特
- 标题字体粗细：超粗体
- 标题文字大小：5vw（桌面），40px（平板电脑和手机）
主体
- 正文字体粗细：半粗体
- 正文大小：16px
- 车身线高：1.8em
按钮样式
- 为按钮使用自定义样式：是
- 按钮文字大小：16px
- 按钮背景颜色：#cf1259
- 按钮边框宽度：0px
- 按钮边框半径：0px
- 按钮字体粗细：粗体
- 按钮字体样式：TT
- 按钮填充：顶部 15 像素，底部 15 像素，左侧 30 像素，右侧 30 像素
滑块高度和内容宽度
- 内容最大宽度：90%
- 最小高度：100vh
为滑块提供 100vh 的最小高度将确保滑块跨越浏览器窗口的整个高度。 这是制作全屏滑块的关键。 因为行宽是 100%，所以滑块已经跨越了浏览器窗口的整个宽度。
滑块箭头
在 Advanced 选项卡下，通过将以下自定义 CSS 添加到 Slide Arrows CSS 框来更新滑块箭头的大小和位置：
font-size: 8vw !important; margin-top: -4vw;
这将使滑块箭头在大屏幕尺寸上更大，并在移动设备上将它们缩小到更小的尺寸。
很多做跨境电商的朋友往往需要外国人的服务，比如录音、社媒代运营等等。我们整理出来很多低价且高质量的外国人服务商，分享给大家。
fiverr上15美元的海外社媒代运营服务
fiverr上25美元的Twitch设计服务
fiver上10美元的短视频广告投放服务
fiverr上15美元的视频编辑服务
fiverr上20美元的谷歌广告投放服务
fiverr上5美元的谷歌SEO服务
fiverr上10美元的英文文章撰写服务
fiverr上20美元的CMS网站建站服务
fiverr上40美元的手机APP开发服务
fiverr上30美元的linkedin代运营服务
fiverr上10美元的Guest Post做客博文服务
fiverr上15美元的红人营销服务
fiverr上20美元的discord运营服务
fiverr上15美元的社群维护服务
fiverr上10美元的shopify店铺优化服务
第 3 部分：从滑块高度中减去标题高度
如果页面上有标题，则全屏滑块实际上会在浏览器窗口下方延伸一点。 这是因为标题的高度将当前高度为 100vh（视口/浏览器高度的 100%）的滑块向下推。 为了防止滑块被推到浏览器的视口下方，您可以添加一个 CSS calc() 函数来从滑块的高度中减去标题的高度。
您需要知道标题的高度（在桌面和移动设备上）才能正常工作。 如果您使用默认的 Divi 标题，标题的高度将为 80 像素。 所以滑块的高度应该是 100vh – 80px。
要添加自定义高度，请打开滑块的设置并将以下自定义 CSS 添加到滑块的主元素以及每个单独的幻灯片：
min-height: calc(100vh - 80px)!important;
最后结果
这是最终结果。
以下是该设计在平板电脑和手机上的外观。
最后的想法
在 Divi 中创建全屏滑块的关键步骤是设置部分和行以跨越浏览器的整个宽度，然后为滑块提供 100vh 的最小高度。 如果您使用标题，您可以添加一个自定义 CSS 片段，该片段将减去标题的高度，以确保全屏滑块不会超出浏览器的底部。 通过这些关键步骤，您可以使用 Divi Builder 中包含的所有强大设计功能以任何方式进一步自定义滑块（和幻灯片）。
使用它为您的英雄部分创建漂亮而有效的滑块，填充任何设备上的任何屏幕。
我希望你喜欢这个对你的 Divi 网站有用的补充。 我期待在评论中收到您的来信。
干杯!
