如何使用 Divi 创建动画边框重叠以突出显示内容

正在寻找一种独特的方式将页面的特定部分置于聚光灯下？ 继续阅读！ 今天，我们将向您展示如何创建动画边框重叠以突出显示页面上的内容。 我们将在 App Developer Layout Pack 的登录页面上创建三个不同的动画边框重叠，但您可以将此技术用于您正在构建的任何类型的网站。 它肯定会帮助您为页面添加额外的维度。 我们希望本教程也能激发您创建自己的替代动画边框重叠。

让我们开始吧！

预览

在我们深入学习本教程之前，让我们快速浏览一下所有三个示例的结果。 您也可以在较小的屏幕尺寸上获得类似的结果。

示例#1

示例#2

示例 #3

订阅我们的 YouTube 频道

使用 App Developer Layout Pack 的登陆页面创建新页面

您需要做的第一件事是使用 App Developer Layout Pack 的登录页面创建一个新页面。

克隆英雄部分

我们的前两个示例是在英雄部分创建的。 如果您想重新创建两个示例，建议您克隆 hero 部分，以便您可以继续复制以重新创建第二个示例。

重新创建示例 #1

向英雄部分添加新行

列结构

让我们开始重新创建第一个示例！ 使用以下列结构在专业部分添加一个新行：

添加文本模块

将内容框留空

将新的文本模块添加到该行并确保将内容框留空。 我们将该模块用于其内置设计选项，而不是显示书面内容。

间距

转到文本模块的间距设置，并通过添加自定义顶部和底部填充为模块提供一个形状。 通过添加一些负上边距，在此模块和之前的模块之间创建重叠。

• 上边距：-480px
• 顶部填充：223px
• 底部填充：223px

边界

然后，转到模块的边框设置并添加您选择的边框。

• 边框宽度：9px
• 边框颜色：#0ae2ff
• 边框样式：开始

盒子阴影

也添加一个框阴影。

• 框阴影模糊强度：1px
• 框阴影传播强度：15px
• 阴影颜色：rgba(10,226,255,0.59)

动画片

并使用动画设置使内容流行。

• 动画风格：翻转
• 动画重复：一次
• 动画方向：右
• 动画持续时间：1500ms
• 动画延迟：1500ms
• 动画强度：500%

重新创建示例 #2

将新行添加到复制英雄部分

进入第二个例子！ 使用以下列结构向重复的英雄部分添加一个新行：

添加文本模块 #1

将内容框留空

我们再次使用空的文本模块。

间距

转到间距设置并使用自定义顶部和底部填充为模块指定一个形状。 通过添加一些负上边距使其与之前的模块重叠。

• 上边距：-480px
• 顶部填充：223px
• 底部填充：223px

边界

继续向文本模块添加边框。

• 边框宽度：9px
• 边框颜色：#0ae2ff
• 边框样式：双

动画片

并使用动画设置来创建滚动效果。

• 动画风格：滚动
• 动画重复：一次
• 动画方向：中心
• 动画持续时间：4500ms
• 动画延迟：1500ms
• 动画强度：100%
• 动画开始不透明度：100%

克隆文本模块

完成第一个文本模块的修改后，继续并克隆它。

更改间距

打开副本的设置并更改间距设置中的上边距值。

• 上边距：-495px

更改边框

还要修改边框颜色。

• 边框颜色：#ededed

更改动画

并修改动画设置以实现您在本文预览中看到的结果。

• 动画重复：循环
• 动画持续时间：5000ms
• 动画延迟：2000ms

重新创建示例 #3

更改第 2 列中图像模块的间距

继续下一个也是最后一个例子！ 导航到页面上的 process 部分，并向包含中间大插图的 Image Module 添加一些顶部填充。

• 上边距：70px（桌面），0px（平板和手机）

为现有文本模块添加背景颜色

继续为第一列和第三列中的每个文本模块添加白色背景色。

• 背景颜色：#ffffff

将文本模块添加到第 1 列

将内容框留空

我们现在可以开始添加第一个动画边框重叠！ 将新的文本模块添加到第一列（请参阅打印屏幕）并确保将内容框留空。

间距

接下来转到文本模块的间距设置，并使用自定义边距和填充值创建形状和重叠。

• 上边距：-230px
• 左边距：80px
• 右边距：100px
• 顶部填充：120px
• 底部填充：120px

边界

接下来添加边框。

• 边框宽度：13px
• 边框颜色：#bcf5f3
• 边框样式：双

动画片

继续添加您选择的动画，以帮助您突出显示您共享的内容。

• 动画风格：折叠
• 动画重复：一次
• 动画方向：右
• 动画强度：100%

Z索引

为了确保边框出现在内容下方，我们将对包含边框设置的文本模块的 Z 索引使用负值。

• Z 指数：-1

克隆文本模块并放置在第 1 列的末尾

完成创建和修改文本模块后，继续并克隆它。 将副本放在第一列的末尾。

更改边框

更改边框颜色。

• 边框颜色：#ffc0ec

更改动画

并添加动画延迟。

• 动画延迟：1000ms

将文本模块添加到第 3 列

将内容框留空

继续将文本模块添加到第三列（参见打印屏幕），并确保将内容框留空。

间距

转到间距设置并使用自定义边距和填充值创建形状和重叠。

• 上边距：-230px
• 左边距：100px
• 右边距：-80px
• 顶部填充：120px
• 底部填充：120px

边界

接下来添加您选择的边框。

• 边框宽度：13px
• 边框颜色：#7479ff
• 边框样式：双

动画片

以及包含比前两个文本模块更高的动画延迟的动画。

• 动画风格：折叠
• 动画重复：一次
• 动画方向：左
• 动画延迟：2000ms
• 动画强度：100%

Z索引

使用负 Z 索引确保模块显示在内容下方。

• Z 指数：-1

克隆文本模块并放置在第 3 列的末尾

完成添加和修改文本模块后，克隆它并将副本放在第三行的末尾。

更改边框

更改副本的边框颜色。

• 边框颜色：#b3d1ff

更改动画

添加一些额外的动画延迟，你就完成了！

• 动画延迟：3000ms

预览

现在我们已经完成了所有步骤，让我们最后看看我们在本教程中重新创建的所有三个示例的结果。

示例#1

示例#2

示例 #3

最后的想法

在这篇文章中，我们向您展示了如何使用动画边框重叠将您的内容置于聚光灯下。 这是一种很好的技巧，可以将注意力吸引到页面的特定部分并以优雅的方式进行。 您可以将此技术用于您正在构建的任何类型的网站。 如果您有任何问题或建议，请务必在下方评论区留言！