如何使用 Divi 将水平分隔线变成垂直分隔线

每周，我们都会为您提供新的免费 Divi 布局包，您可以将其用于下一个项目。 对于其中一个布局包，我们还分享了一个用例，可帮助您将网站提升到一个新的水平。

本周，作为我们正在进行的 Divi 设计计划的一部分，我们将向您展示如何使用 Divi 的移动公司布局包作为示例将我们都知道的标准水平分隔器模块转换为垂直分隔器模块。 如果您尝试在页面上创建时间线，这种方法将特别方便。 用于“如何工作”部分也很棒，还有更多。 设置垂直分隔线后，我们将在其顶部添加 Blurb Modules 以创建时间线效果。 本教程不需要任何 CSS 代码，仅基于 Divi 的内置选项。

让我们开始吧！

预览

在我们深入学习本教程之前，让我们先看看不同屏幕尺寸下的结果。

让我们开始创建：添加新页面并上传搬家公司布局包的登陆页面

添加新页面并切换到 Visual Builder

让我们从添加一个新页面、添加标题并切换到 Visual Builder 开始。

选择预制布局

完成此操作后，您将能够从头开始构建、选择预制布局或克隆现有页面。 我们将使用移动公司布局包的登录页面来创建最终结果，因此请继续浏览预制布局。

选择搬家公司布局包的登陆页面

向下滚动预制布局，直到您遇到移动公司布局包并将登录页面上传到您的页面。

开始创建垂直分隔线时间轴

查找时间线部分

我们现在准备开始将水平分隔线转换为垂直分隔线并使用该分隔线创建时间线。 继续并在您的着陆页上找到以下部分：

在下方添加新的标准部分

在此部分的正下方，添加一个标准部分。

将“工作原理”行放在新部分

继续将上一部分的“工作原理”行拖到新部分。

添加新行

列结构

在您刚刚放置在您的部分中的行的正下方，添加另一个具有以下列结构的行：

间距

在添加任何模块之前，打开您的行设置并将“60px”添加到顶部边距。

将分频器模块添加到第 1 列

隐藏分隔线

我们现在可以开始添加模块了！ 我们将从第一列开始，完成后，我们将继续进行第二列。 在第一列中我们需要的第一件事是分频器模块。 如前所述，我们将把它变成一个垂直的。 实现我们想要的结果的第一步是禁用 Show Divider 选项。

渐变背景

我们将使用 Divider 模块的背景创建一个分隔线，而不是使用实际的分隔线。 我们使用以下渐变背景：

• 颜色 1：#e0aa25
• 颜色 2：#c11000

浆纱

现在，我们已经确保分隔线不可见。 创建垂直分隔线的下一个关键步骤是大幅减少分隔线的宽度。 我们使用的是“2%”，但你可以让它看起来像你想要的那样厚。 我们还启用了中心模块对齐。

间距

要垂直拉伸分隔线模块，我们将在分隔线模块的顶部和底部自定义填充中添加“480px”。 瞧，我们有我们的垂直分隔线！

将上一节的 Blurb 模块添加到第 1 列

我们接下来要做的是使用这个垂直分隔线创建一个时间线。 在上一节中，您将找到三个 Blurb 模块。 继续将它们中的每一个放在您正在处理的行的第一列中，就在分隔模块的正下方。

修改模糊模块 #1

添加背景颜色

我们将使用 Divi 的其中一项效率功能来加快编辑 Blurb 模块的过程。 我们会将所有更改应用到第一个 Blurb 模块，然后，我们只需复制模块样式，然后单击一下即可将它们添加到其他 Blurb 模块中。 打开您的第一个 Blurb 模块并添加 'rgba(255,255,255,0.73)' 作为背景颜色。

更改图标字体大小

您需要做的下一件事是将图标字体大小更改为“65px”。

删除间距

我们还将删除间距设置中的所有边距。 稍后，我们将单独为每个 Blurb 模块添加边距，因为值不同。

复制 Blurb 模块样式并将其添加到剩余的 Blurb 模块

复制模糊模块样式

我们完成了第一个 Blurb 模块的修改。 右键单击它并选择“复制模块样式”。 这将复制我们刚刚所做的所有修改。

在剩余的模糊模块上粘贴模块样式

并将模块样式粘贴到剩余的两个 Blurb 模块上。 您会注意到它不会更改内容，它只会更改设计设置，从而为您节省大量时间。

间距模糊模块

模糊模块 #1

如前所述，Blurb 模块的间距不同。 第二个没有，但第一个使用“-900px”作为上边距。 添加此负边距后，您会注意到 Blurb 模块成为时间线的一部分。 在 Visual Builder 中，似乎分隔模块位于 Blurb 模块之上。 但是一旦您退出 Visual Builder，您就会看到一切都井井有条，所以不用担心。

模糊模块 #3

接下来打开最后一个 Blurb 模块并将“150px”添加到底部边距。

在第 2 列中放置图像模块

定位图像

我们现在可以转到第 2 列！ 我们需要的唯一模块是图像模块。 我们正在重用我们页面上已经存在的一个，所以继续并找到它：

在第 2 列中放置图像

将其拖放到下一个第二列。

更改间距

要使其垂直居中，我们将为其添加一些边距：

• 上边距：300 像素（桌面）、30 像素（平板电脑和手机）
• 下边距：50px（平板电脑和手机）

删除上一节和下一节

我们已经完成了我们的部分的创建！ 剩下要做的最后一件事是删除多余的部分。

预览

现在我们已经完成了所有步骤，让我们最后看看在不同屏幕尺寸上的结果。

最后的想法

在此用例博客文章中，我们向您展示了如何使用 Divi 的移动公司布局包将垂直分隔线转换为垂直分隔线。 如果您想在页面上创建时间线而无需使用任何其他代码，则此方法非常理想。 它完全基于 Divi 的内置选项。 如果您有任何问题或建议，请务必在下方评论区留言！