如何将垂直滑块元素添加到 Divi 的滑块模块以实现独特的标题设计

Divi 的滑块模块包含多种设计选项，可以轻松跳出框框思考并创建令人惊叹的滑块设计。 所以今天，我们要扭转一些事情（字面意思）。 在接下来的帖子中，我们将向 Divi 的滑块模块添加垂直滑块元素。 具有垂直元素（如标题文本和幻灯片控件）的滑块允许访问者在较窄的列中看到更多的幻灯片内容和背景图像（尤其是在移动设备上）。 垂直元素为整体设计增添了清新感。

为此，我们将使用 Divi 的变换旋转选项来旋转整个滑块，然后根据需要反向旋转每张幻灯片中的其他元素，以创建现代垂直滑块设计。 我们将从回顾基本技术开始。 然后我们将使用这个垂直滑块创建一个完全独特的标题设计。

让我们潜入吧！

抢先看

免费下载 Divi 垂直滑块元素布局

要亲身体验本教程中的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

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

要将布局导入您的页面，只需提取 zip 文件并将 json 文件拖到 Divi Builder 中。

让我们进入教程好吗？

https://youtu.be/Nmuy9VAYo4M

订阅我们的 YouTube 频道

你需要什么开始

首先，您需要具备以下条件：

1. 已安装并激活 Divi 主题
2. 在前端从头开始构建的新页面（可视化构建器）
3. 逆时针旋转 90 度的两个图像。 这可以使用操作系统的内置选项或通过任何简单的照片编辑应用程序轻松完成。 您还可以通过编辑媒体元素直接在 WordPress 中旋转图像。
   

之后，您就可以在 Divi 中创建您的杰作了。

基本理念

添加垂直滑块元素背后的基本思想是使用 Divi 的变换选项将滑块模块旋转 90 度（顺时针或逆时针），使其垂直显示在页面上。 对于滑块（或幻灯片）背景图像，您需要事先旋转图像（或使用 WordPress 图像编辑器），以便在您旋转滑块时图像会直立显示。 这将按照您的预期垂直显示滑块控件、箭头和文本。 棘手的部分是自定义滑块的高度和宽度，因为事情确实发生了逆转。 此滑块设计在具有两列或更多列的布局中效果最佳。

这是如何执行此操作的快速示例。

在具有两列行的常规部分中，将滑块模块添加到左列。

然后添加几张幻灯片，每张幻灯片都带有标题、一段正文内容和一张先前逆时针旋转 90 度的背景图像。

然后使用 Divi 的变换选项将滑块模块沿 z 轴旋转 90 度。

然后向滑块添加间距（底部填充）以创建额外的宽度并将文本与每张幻灯片的右侧对齐。

这是结果。

正如您所看到的，这个概念很简单，但这些垂直滑块元素对于创建独特的设计确实可以派上用场。

下面，我们将一起尝试创建这些独特的滑块设计之一。

将垂直滑块元素添加到 Divi 的滑块模块以实现独特的标题设计

创建部分和行

部分背景

首先创建一个具有两列行的常规部分。

在向行添加模块之前，首先使用以下背景颜色更新该部分：

背景颜色：#24272a

行设置

然后我们需要给我们的行一个自定义的间距宽度为 1，然后使用 vw 长度单位设置宽度。 使用 vw 长度单位对于稍后使我们的垂直滑块响应很重要。

打开行设置并更新以下内容：

天沟宽度：1
宽度：80vw（桌面和平板电脑），95vw（手机）
最大宽度：80vw（桌面和平板电脑），95vw（手机）

然后我们将添加一个框阴影用于设计目的。

盒子阴影：见截图
框阴影水平位置：-10px
框阴影垂直位置：0px
阴影颜色：rgba(255,255,255,0.03)

使用文本模块添加标题内容

我们最终将在第 2 列中添加滑块，但现在让我们在第 1 列中添加带有一些附加文本的标题标题。为此，我们将在第 1 列中添加两个文本模块。

为标题添加文本模块

要添加我们的标题标题，请在第 1 列中添加一个文本模块。

使用以下 h2 标题更新正文内容：

<h2>My Work</h2>

然后更新以下内容：

标题 2 字体：Karla
标题 2 文本颜色：#ffffff
标题 2 文字大小：5vw（桌面）、60px（平板电脑）、50px（手机）
填充：顶部 15%，底部 20%，左侧 5%，右侧 5%

盒子阴影：见截图
框阴影水平位置：60px
框阴影垂直位置：0px
阴影颜色：#9a2508

为正文内容添加文本模块

接下来，在第 1 列的第一个文本模块下添加一个新的文本模块。我们现在可以保留默认内容。

然后更新以下内容：

文字文字颜色：#cccccc
宽度：70%
模块对齐：右
保证金：-5% 顶部
填充：底部 5%，左侧 10%，右侧 5%

盒子阴影：见截图
框阴影水平位置：0px
框阴影垂直位置：10px
阴影颜色：rgba(255,255,255,0.03)

创建垂直滑块

现在我们准备使用垂直滑块元素创建滑块。

为此，请在第 2 列中添加一个滑块模块。

打开两个默认幻灯片中第一个的幻灯片设置。

减少默认正文文本以包含单行文本。 然后添加之前逆时针旋转 90 度的背景图像。

然后对第二张默认幻灯片执行相同的操作，为其提供不同的背景图像。

旋转滑块

接下来，使用变换旋转选项旋转滑块：

变换 旋转 z 轴：90 度

滑块高度

我们不需要担心滑块宽度，因为它会自动跨越 100% 的列。 该列是 80vw（行宽）的 50%，所以基本上默认情况下宽度将为 40vw。 现在我们需要在桌面上为滑块提供 40vw 的匹配高度，然后将高度调整为平板电脑上的 80vw 和手机上的 95vw。

更新以下内容：

高度：40vw（桌面）、80vw（平板）、95vw（手机）

然后调整内边距以将文本与垂直滑块的右侧对齐。

填充（桌面）：顶部 0px，底部 21vw，左侧 0px，右侧 0px
填充物（平板电脑）：42vw 底部
填充（电话）：50vw底部

更新文本设置

调整标题和正文如下：

文本对齐：左
标题字体：Karla
标题文字大小：32px
标题行高度：1.3em
正文字母间距：3px
车身线高：1.8em

按钮样式

要设置按钮的样式和位置，请更新以下内容：

按钮文字大小：16px
按钮背景颜色：#9a2508
按钮边框宽度：0px
按钮字母间距：2px
按钮字体粗细：半粗体
按钮图标：加号（见截图）
按钮对齐：右
按钮边距：顶部 10%，底部 10%

背景渐变

要为我们的垂直滑块标题文本创建背景，我们可以为滑块添加背景渐变，如下所示：

背景渐变左颜色：#9a2508
背景渐变右颜色：rgba(0,0,0,0)
起始位置：12%
结束位置：0%
将渐变放在背景图像上方：是

注意：如果需要，您可以调整背景渐变正确颜色的不透明度，为幻灯片图像创建叠加层。

使用自定义 CSS 旋转按钮和滑块箭头

由于我们的按钮仍然是垂直的，我们需要用一段 CSS 将它旋转回原来的位置。 将以下 CSS 添加到滑动按钮：

transform: rotate(-90deg);

对于滑块箭头，您可以添加相同的 css 片段，使它们指向左右而不是上下。 当我们在那里时，我们也可以增加箭头的大小。 将以下 CSS 添加到

transform: rotate(-90deg);
font-size: 80px;

就是这样！

让我们看看最终的结果。

最后结果

这是在平板电脑和手机上。

通过调整垂直元素，随意探索新设计。 这是相同设计的示例，其中按钮位于左侧且文本覆盖。

最后的想法

旋转 Divi 的滑块模块是一种向滑块添加垂直设计元素的快速有效的方法。 确实，唯一具有挑战性的部分是使大小和间距变得美观且响应迅速。 但值得庆幸的是，Divi 有足够的内置选项，可以轻松调整设计以在所有设备上看起来都很棒。

除了标题之外，这种垂直滑块设计也适用于您网站的其他区域。 我可以看到这被用于在更窄的列布局中展示特色产品或推荐。

希望这会给你的下一个项目一些灵感。

我期待在评论中收到您的来信。

干杯!