如何使用 Divi 延迟创建重叠动画

已发表: 2019-04-12

您网站成功的很大一部分取决于您是否能够给访问者留下深刻印象。不仅与您的产品或服务有关，还与您的沟通方式以及您的网站设计得如何。因为让我们面对现实，网站往往是第一印象。与任何其他类型的第一印象类似，您希望它留下良好的回味。

现在，如果您正在寻找一种独特的方式将您的某些内容置于聚光灯下，那么创建微妙的重叠动画可能正是您所需要的。这些微妙的重叠动画有点像您的访客的幻灯片。他们不必滚动或单击任何内容，内容只是以优雅的方式显示。

让我们开始吧！

预览

在我们深入学习教程之前，让我们快速浏览一下不同屏幕尺寸的结果。

桌面

重叠动画

移动的

重叠动画

方法

我们将开始以垂直顺序添加我们需要的所有设计元素，没有重叠
当我们添加所有设计元素时，我们还将添加具有特定动画延迟的自定义动画
这些动画延迟只有在您完成本教程的最后一部分后才有意义，该部分侧重于重叠
本教程的一个重要部分是使用与该部分具有相同背景颜色的形状分隔模块来使行内容延迟“消失”
一旦您了解了使该方法起作用所需的不同步骤，您就可以将此技术应用于您正在处理的任何类型的设计

让我们开始创作吧！

添加新部分

背景颜色

首先创建一个新页面或打开一个现有页面，然后向其中添加一个常规部分。打开部分设置并添加背景。

背景颜色：#f3f3ec

重叠动画

添加第 1 行

列结构

继续使用以下列结构向您的部分添加新行：

重叠动画

浆纱

还没有添加任何模块，打开行设置并允许行占据屏幕的整个宽度。我们这样做的原因是为了摆脱所有默认的像素间距。在接下来的步骤中，我们将使用视口单元添加我们需要的所有空间。

使这一行全宽：是
使用自定义装订线宽度：是
天沟宽度：1

重叠动画

将文本模块添加到列

添加 H2 内容

让我们开始添加模块吧！我们需要的第一个模块是带有一些 H2 内容的文本模块。请记住，此模块将在几秒钟后“消失”，因此您希望使其简短、相关且易于记忆。

重叠动画

H2 文本设置

然后，转到设计选项卡并修改 H2 文本设置。

标题 2 字体：Poppins
标题 2 文本颜色：#333333
标题 2 文字大小：5vw

重叠动画

间距

在间距设置中使用一些左右填充创建您想要的空间。

左填充：15vw
右填充：39vw

重叠动画

将分隔模块添加到列

能见度

进入下一个模块，它是一个分隔模块。我们正在使用此模块使文本模块“消失”。为此，我们需要四样东西；背景颜色（与部分颜色相同，因此您不会注意到它），足够的填充（以确保您可以重叠上一个模块中的所有内容），垂直重叠（覆盖整个模块）区域）和动画延迟（让第一个模块有时间在接管之前发光）。添加分隔线模块后，请确保禁用“显示分隔线”选项。