如何在 Divi 中创建斜线文本滚动效果

创建斜线文字效果是一种有趣的方式，可以为您的内容带来生机。 这个想法是给人一种错觉，当用户向下滚动页面时，文本被切成两半并分开。 在本教程中，我们将向您展示在 Divi 中构建此设计是多么容易！

让我们开始吧。

抢先看

这是我们将在本教程中构建的设计的快速浏览。

免费下载布局

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

下载文件

免费下载

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

下载

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

要将部分布局导入您的 Divi 库，请导航到 Divi 库。

单击导入按钮。

在可移植性弹出窗口中，选择导入选项卡并从您的计算机中选择下载文件。

然后点击导入按钮。

完成后，分区布局将在 Divi Builder 中可用。

让我们进入教程，好吗？

你需要什么开始

首先，您需要执行以下操作：

1. 如果您还没有安装并激活 Divi 主题。
2. 在WordPress中新建一个页面，在前端使用Divi Builder编辑页面（visual builder）。
3. 选择“从头开始构建”选项。

之后，您将有一个空白画布开始在 Divi 中进行设计。

第 1 部分：设计截面

在第一部分中，我们将为我们的部分布局设计部分背景。

背景颜色

首先，将背景颜色添加到默认部分，如下所示：

• 渐变背景左颜色：#29c4a9
• 渐变背景右颜色：#2b87da

分隔线

在设计选项卡下，添加一个顶部分隔线，如下所示：

• 顶部分隔线样式：见截图
• 分隔线颜色：白色
• 分隔线翻转：垂直

间距

为了帮助测试设计的滚动效果，让我们在该部分的顶部和底部添加一些临时边距。 我们可以在将该部分添加到另一个页面时将其取出。 我们还需要在顶部和底部添加等量的填充。

• 边距：80vh 顶部，80vh 底部
• 填充：顶部 200 像素，底部 200 像素

额外底部空间的框阴影

为了在部分底部获得一些额外的设计颜色/空间而不影响部分的实际空间，我们可以添加一个框阴影，如下所示：

• 盒子阴影：见截图
• 框阴影水平位置：0px
• 框阴影垂直位置：100px
• 阴影颜色：#2b87da

可见性隐藏

然后将溢出设置为隐藏，以便我们的滚动效果在移出该部分时不会变得可见。

• 水平溢出：隐藏
• 垂直溢出：隐藏

第 2 部分：创建斜线文字效果

在下一部分中，我们将创建斜线文字效果。 我们将两行堆叠在一起，每行都有一个文本模块，其中包含相同的文本内容。 然后使用负边距我们将顶部文本向下推，隐藏文本的下半部分。 然后我们将使用负边距将底部文本向上推，隐藏文本的上半部分。 完成后，我们可以使用滚动效果移动顶行/列来创建文本被斜线的错觉。

为文本的上半部分添加行

首先，让我们添加一个单列行。

然后按如下方式更新行设置：

• 天沟宽度：1
• 填充：0px 顶部，0px 底部

列可见性隐藏

接下来，打开列设置并将溢出更新为隐藏：

• 水平溢出：隐藏
• 垂直溢出：隐藏

添加文本模块

在列中添加一个新的文本模块。

文字内容

在内容正文区域中，添加“Slash”一词。

文字设计

跳转到设计选项卡并按如下方式更新文本样式：

• 文字字体：B612 Mono
• 文字字体粗细：粗体
• 文字字体样式：TT
• 文字文字颜色：#ffffff
• 文字 文字大小：150 像素（桌面）、100 像素（平板电脑）、60 像素（手机）
• 文字字母间距：0.1em
• 文本对齐：居中

文字边距

在这里，我们需要确保并添加一个正好为文本大小一半的底部边距。

• 边距：-75px 底部（桌面），-50px（平板电脑），-30px（手机）

为文本的下半部分添加行

重复行

带有文本的第一行就位，复制整行以创建底行。

更新文本模块边距

然后使用负上边距而不是下边距更新重复行中的文本模块边距以隐藏文本的上半部分。

• 边距：-75px 顶部（桌面），-50px 顶部（平板电脑），-30px 顶部（手机）

将滚动效果添加到顶行列

接下来，我们准备为顶行的列添加滚动效果。 我们无法向文本模块添加滚动效果，因为由于列的溢出隐藏值隐藏了文本的底部，文本将被隐藏。

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

在垂直运动选项卡下...

• 启用垂直运动：是
• 起始偏移量：0（在 0% 处）
• 中间偏移：0（50%）
• 结束偏移：-.02（75%）

在水平运动选项卡下...

• 启用水平运动：是
• 起始偏移量：0（在 0% 处）
• 中间偏移：0（50%）
• 结束偏移：0.2（75%）

在旋转选项卡下...

• 启用旋转：是
• 起始旋转：0（在 0% 时）
• 中间旋转：0（在 50% 时）
• 结束旋转：1度（75%）

现在我们的斜线文字效果就完成了！

第 3 部分：创建移动分隔线

随着我们的斜线文字效果完成，我们可以添加一个额外的有趣元素 - 一个可以斜线穿过文字的小型飞行分隔线！ 为了创建这个，我们将使用一个分隔模块，该模块在文本模块分隔的确切位置移动到该部分的页面中心。

这是如何做到的。

添加行

在第二行下添加一列行。

添加分频器模块

在列中，添加一个新的分隔器模块。

分隔线背景

然后选择不显示分隔线。 相反，给分隔线一个背景颜色如下：

• 背景渐变左颜色：透明
• 背景渐变右颜色：#29c4a9

变换比例

然后使用变换平移选项更新高度并将其向左移动。

• 高度：4px
• 变换平移 X 轴：-100%

滚动效果

现在添加滚动效果以将分隔线向右移动。

在水平运动选项卡下...

• 启用水平运动：是
• 起始偏移：-18（25%）
• 中间偏移：0（50%）
• 结束偏移：13（75%）

行设置

为了确保分隔符“斜线”穿过文本的中心，我们需要按如下方式更新行设置：

• 宽度：100%
• 最大宽度：100%
• 填充：0px 顶部，0px 底部
• 位置：绝对
• 位置：左中
• Z指数：9

现在分隔线将从左到右穿过文本中间。

第 4 部分：添加正文

对于最后一部分，我们将添加一个文本块来完成布局。

添加行

在带有分隔线的行下添加一个新的单列行。

添加文本模块

然后向该行添加一个新的文本模块。

文字内容

然后将以下 HTML 粘贴到正文区域：

<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>
<a href=""> | Learn More ></a>

文字设计

在设计选项卡下，更新以下内容：

• 文字文字颜色：#ffffff
• 链接文字颜色：#121212
• 链接文字大小：20px

行设置

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

• 天沟宽度：1
• 最大宽度：400px
• 位置：绝对
• 位置：底部中心
• 垂直偏移：20px（桌面和平板电脑），-25px（手机）

最后结果

这是最终结果。

最后的想法

对于此设计，重要的是将所有设备上的文本保持在一行上，这样您就可以限制将被斜线的文本数量。 但是，这种斜线滚动效果技术不仅可以应用于文本。 您也可以轻松地削减图像！

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

干杯!