WordPress divi主题

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

by | May 13, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

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

google广告开户

让我们开始吧!

预览

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

示例 #1

动画边框

示例 #2

动画边框

示例#3

动画边框

订阅我们的 Youtube 频道

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

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

动画边框

WordPress divi主题

克隆英雄部分

我们的前两个示例是在 hero 部分中创建的。 如果您想重新创建这两个示例,建议您克隆 hero 部分,以便您可以移动到副本以重新创建第二个示例。

动画边框

重新创建示例 #1

动画边框

向英雄部分添加新行

立柱结构

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

动画边框

添加文本模块

将内容框留空

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

动画边框

间距

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

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

动画边框

边界

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

fiverr建站WordPress程序员
  • 边框宽度:9px
  • 边框颜色:#0ae2ff
  • 边框样式:一开始

动画边框

盒子阴影

也添加一个盒子阴影。

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

动画边框

动画片

并玩弄动画设置以使内容弹出。

  • 动画风格:翻转
  • 动画重复:一次
  • 动画方向:右
  • 动画时长:1500ms
  • 动画延迟:1500ms
  • 动画强度:500%

动画边框

独立站选品工具

重新创建示例 #2

动画边框

将新行添加到重复的英雄部分

继续第二个例子! 使用以下列结构将新行添加到重复的英雄部分:

动画边框

添加文本模块 #1

将内容框留空

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

动画边框

高质量外链购买

间距

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

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

动画边框

边界

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

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

动画边框

动画片

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

JasperAI 10000字免费额度试用
  • 动画风格:滚动
  • 动画重复:一次
  • 动画方向:中心
  • 动画时长:4500ms
  • 动画延迟:1500ms
  • 动画强度:100%
  • 动画开始不透明度:100%

动画边框

克隆文本模块

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

动画边框

更改间距

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

WordPress备份工具updrafplus

动画边框

更改边框

修改边框颜色。

动画边框

更改动画

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

  • 动画重复:循环
  • 动画时长:5000ms
  • 动画延迟:2000ms

动画边框

重新创建示例 #3

动画边框

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

继续下一个也是最后一个示例! 导航到页面上的处理部分,并将一些顶部填充添加到包含中间大图的图像模块。

  • 上边距:70px(台式机),0px(平板电脑和手机)

动画边框

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

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

  • 背景颜色:#ffffff

动画边框

将文本模块添加到第 1 列

将内容框留空

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

动画边框

间距

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

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

动画边框

边界

接下来添加边框。

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

动画边框

动画片

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

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

动画边框

Z 指数

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

动画边框

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

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

动画边框

更改边框

更改边框颜色。

动画边框

更改动画

并添加动画延迟。

动画边框

将文本模块添加到第 3 列

将内容框留空

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

动画边框

间距

继续进行间距设置并使用自定义边距和填充值创建形状和重叠。

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

动画边框

边界

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

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

动画边框

动画片

以及一个动画,其中包含的动画延迟高于前两个文本模块的延迟。

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

动画边框

Z 指数

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

动画边框

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

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

动画边框

更改边框

更改副本的边框颜色。

动画边框

更改动画

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

动画边框

预览

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

示例 #1

动画边框

示例 #2

动画边框

示例#3

动画边框

最后的想法

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

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题