WordPress divi主题

如何在 Divi 中设计具有自定义过渡和动画的英雄部分

by | Apr 30, 2022 | Divi主题使用教程 | 0 comments

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

引人入胜的英雄部分是任何网站最重要的方面之一。 添加平滑的过渡和动画来展示英雄部分的内容是提高英雄部分质量的一种方法。 在 Divi 中,可以使用滑块模块轻松完成基本的英雄部分转换(从一张幻灯片到另一张幻灯片),但动画设计的可能性可能会受到限制。 然而,只要有一点创造性(跳出框框)的想法,你就可以释放 Divi 的力量来设计一个完全自定义的英雄部分,其中包含无数独特的动画或过渡。

google广告开户

在本教程中,我们将向您展示如何构建具有独特过渡和动画的英雄部分,这些部分可以使用 Divi Builder 设置轻松设计和自定义。

让我们开始吧!

抢先看

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

免费下载布局

要掌握本教程中的设计,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

订阅我们的 Youtube 频道

要将部分布局导入 Divi 库,请导航到 Divi 库。

单击导入按钮。

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

WordPress divi主题

然后单击导入按钮。

迪维通知框

完成后,部分布局将在 Divi Builder 中可用。

默认情况下,第二行将具有覆盖第一行的绝对位置,因此第一行将不可见。 要编辑第一行,您首先需要打开第二行的设置并将位置更改回默认值。 完成后,您可以在发布前添加绝对位置。

让我们进入教程,好吗?

你需要什么开始

扩展角落标签

要开始,您需要执行以下操作:

  1. 如果您还没有,请安装并激活 Divi 主题。
  2. 在 WordPress 中创建一个新页面,并使用 Divi Builder 在前端(可视化构建器)编辑页面。
  3. 选择“从头开始构建”选项。

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

首先了解基本思想

在我们开始构建我们的英雄部分之前,了解设计背后的基本思想可能会有所帮助。 基本上,我们要做的是创建一个包含两行的部分。 每一行都将用作英雄部分设计(如幻灯片)。 每行将有一个单独的列,该列被定制为全屏(跨越浏览器窗口的整个宽度和高度)。

fiverr建站WordPress程序员

使用每列中的大量可用空间,我们可以使用 Divi 中的绝对位置精确定位每个模块。 之后,我们可以将动画样式、持续时间和延迟添加到任何这些模块或行中,以实现我们想要的英雄部分过渡和动画。 本教程的目标是向您展示一个基本设计,但正如您可能已经猜到的那样,有很多可能性。

第 1 部分:使用自定义动画元素创建第一个英雄部分设计

在本教程的第一部分中,我们将创建第一个英雄部分设计,它将驻留在该部分的单行和列中。

更新部分填充

在我们做任何其他事情之前,在构建器中打开默认部分的设置并取出默认的顶部和底部填充:

  • 内边距:0px 顶部,0px 底部

独立站选品工具

创建第一行和第一列

让我们首先向该部分添加一列行。 第一行将包含我们最初的英雄部分的设计,然后过渡到我们将在这一行之后构建的第二行/设计。

行设置

打开行设置并添加自定义背景,如下所示:

背景渐变

  • 背景渐变左颜色:#8300e9
  • 背景渐变右颜色:#0c71c3

背景图片

高质量外链购买
  • 上传图片
  • 背景图像混合:相乘

在设计选项卡下,更新大小和填充,如下所示:

  • 天沟宽度:1
  • 宽度:100%
  • 最大宽度:100%
  • 内边距:0px 顶部,0px 底部

装订线宽度 1 将去掉任何可能影响我们模块设计间距的默认边距。 我们希望宽度跨越浏览器的整个宽度,因为这将作为我们全屏英雄部分的主要背景。

列设置

这种设计的真正关键是柱子的定制。 我们希望该列跨越浏览器窗口的整个高度和宽度。 这将为我们提供使用绝对位置在列内添加和定位多个模块的空间。 我们想使用 flex 属性来垂直居中我们将添加的任何模块,而不需要绝对位置。

JasperAI 10000字免费额度试用

打开列设置并将以下自定义 CSS 添加到主元素:

height:100vh;
width: 100% !important;
display:flex;
flex-direction: column;
align-items:center;
justify-content:center;

添加模块

现在我们可以添加我们想要使用的模块来添加初始英雄部分设计的内容。

呼吁采取行动

对于我们的第一个模块,让我们添加一个号召性用语模块,其中将包含我们初始英雄部分设计的标题。

WordPress备份工具updrafplus

由于我们的列自定义 CSS,模块应该在窗口内自动保持垂直居中。

内容设置

然后打开号召性用语设置并更新以下内容:

  • 书名:看世界
  • 按钮: 留着空白
  • 身体: 留着空白
  • 使用背景颜色:否

设计设置
  • 标题字体:Oswald
  • 标题字体粗细:Light
  • 标题字体样式:斜体
  • 标题文字大小:7vw(桌面),40px(手机)
  • 最大宽度:50vw(桌面),70vw(平板电脑和手机)

动画片
  • 动画风格:淡入淡出
  • 动画时长:3000ms

跟踪您的动画时间!

使这个设计工作的关键是协调任何动画持续时间和/或动画延迟值的时间安排,以便下一个英雄部分设计元素在第一个英雄部分设计动画完成之前不会开始。 对于此示例,号召性用语模块的动画持续时间为 3000 毫秒(或 3 秒)。 记住这一点很重要,这样我们才能延迟多长时间的动画过渡(或下一个)设计。 我们将在此之后创建的下一个过渡英雄部分设计包含一个单独的行(带有新的设计元素和动画),位于该行的顶部(如叠加层)。 但是,我们需要延迟整个行/设计的动画,以便第一个英雄部分设计有足够的时间进行动画处理。 所以理论上,我们应该将下一个英雄部分设计的动画延迟大约 3000 毫秒,因为这是我们最初的行动呼吁模块的动画持续时间。

尽管跟踪时间可能很棘手,尤其是在有很多动画元素的情况下,但这种设置为您提供了添加各种动画设计的可能性,因为您可以调整每个动画元素的持续时间和延迟。

分频器

虽然我们可以选择任何模块/内容设计来为我们的初始英雄部分设置动画,但我们将通过添加带有幻灯片动画的分隔模块来保持简单。

继续在 Call to Action 模块下添加一个新的 Divider 模块。

设计设置

在 Divider Settings 中的设计选项卡下,更新以下内容:

  • 线条颜色:#ffffff
  • 分压器重量:1vw
  • 宽度:40vw

利用大众长度单位

在这里使用 vw 长度单位是完美的,因为我们希望分隔线的大小与浏览器宽度一致,以实现流畅的响应式设计。 由于分隔线的父列具有 100% 的宽度和 100vh 的高度,因此 vw 长度单位非常适合这些设计元素。 我们已经将它用于我们的 CTA 标题文本。

转换

要为分隔线设计添加独特的扭曲,请按如下方式更新变换偏斜选项:

  • 变换倾斜 X 轴:45 度

动画片
  • 动画风格:幻灯片
  • 动画时长:2000ms
  • 动画延迟:1000ms

位置

现在用绝对位置定位分隔线,如下所示:

  • 职位:绝对
  • 地点:左下角
  • 垂直偏移:15vh

结果

这是迄今为止的结果。

第 2 部分:使用自定义动画元素创建过渡(第二)英雄部分设计

复制第一行

要快速开始我们的第二个/过渡英雄部分设计,请复制第一行。

现在我们可以根据需要调整重复行元素的内容、设计和动画。

更新行背景

打开新/重复行的行设置并使用新的渐变颜色组合和图像更新背景:

  • 背景渐变左颜色:#8300e9
  • 背景渐变正确颜色:#e02b20
  • 背景图片: [upload new image]
  • 背景图像混合:相乘

更新号召性用语模块

内容

接下来,打开号召性用语模块设置并更新内容如下:

  • 标题:为什么要等待?
  • 按钮:查看优惠
  • 身体:今天买一副你喜欢的眼镜!
  • 按钮链接 URL

按钮设置

在设计选项卡下,更新按钮设置如下:

  • 按钮文字大小:30px(桌面),20px(手机)
  • 按钮背景颜色:#8300e9
  • 按钮边框颜色:#8300e9

更新动画

接下来,更改动画持续时间和延迟:

  • 动画时长:2000ms
  • 动画延迟:4000ms

重复分频器

由于第一个英雄部分设计包括一个滑动到英雄部分左下角的分隔线,我们可以在这个过渡英雄部分设计中添加另一个滑动到右上角的免费分隔线。

为了使这个过程更容易,复制现有的分隔线。

分频器位置

然后打开复制分割器设置,更新位置如下:

  • 位置位置:右上角

更新分隔线动画

  • 动画延迟:3000ms
  • 动画强度:70%

行位置

现在下一个过渡英雄部分设计已经完成,我们现在可以给该行一个绝对位置,以便它将位于初始行/英雄部分设计的顶部。

更新行设置位置如下:

  • 职位:绝对
  • Z指数:10

行动画

为确保第二个过渡英雄部分设计的动画在正确的时间出现,更新动画设置如下:

  • 动画风格:淡入淡出
  • 动画时长:2000ms
  • 动画延迟:3000ms

最后结果

最后的想法

希望本教程中介绍的设计技术将增进您对 Divi 的理解,以便为您的英雄部分创建令人惊叹的动画和过渡。 随意玩转不同的动画(滑动、翻转等),并为其他设计元素添加新模块。 您很有可能还会看到更多这种技术的应用。

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

干杯!

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