WordPress divi主题

如何使用 Divi 的动画设置使您的标题流行起来

| 5月 13, 2022 | Divi主题使用教程 | 0 条评论

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

您的标题通常是人们在访问您的网站时首先阅读的内容。 除了有一个非常好的标题之外,让人们注意到并实际阅读您向他们展示的任何内容也很重要。 标题通常不会因为它们的大小和在英雄部分的中心位置而被忽视,但如果你想更进一步并真正让标题流行,本教程适合你。

google广告开户

我们将结合 Divi 的动画设置来创建一个引人注目的标题并吸引您的访问者的注意力。 我们将标题分成 5 部分,并创建一个闪光效果,让您的访问者想要跟随运动并阅读正在共享的内容。

让我们开始吧!

预览

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

桌面

标题流行

移动的

标题流行

让我们开始重建吧!

添加新部分

背景颜色

让我们开始创作吧! 创建一个新页面并向其中添加一个常规部分。 打开部分设置并更改背景颜色。

  • 背景颜色:#ededed

标题流行

间距

然后,转到该部分的间距设置并添加一些自定义底部填充。

标题流行

WordPress divi主题

添加第 1 行

立柱结构

继续使用以下列结构添加新行:

标题流行

背景颜色

尚未添加任何模块,打开行设置并更改行背景颜色。

  • 背景颜色:#c9c9c9

标题流行

浆纱

接下来进入尺寸设置,让行占据屏幕的整个宽度。

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

标题流行

间距

也删除该行的默认顶部和底部填充。

  • 顶部填充:0px
  • 底部填充:0px

标题流行

添加文本模块 #1

添加内容

是时候开始添加模块了! 我们需要的第一个模块是文本模块。 使用段落文本样式将标题的第一部分输入到内容框中。

标题流行

fiverr建站WordPress程序员

背景颜色

然后,转到模块的背景设置并添加背景颜色。

  • 背景颜色:#c9c9c9

标题流行

文字设置

更改设计选项卡中的文本设置。

  • 文字字体:Didact Gothic
  • 文字字体粗细:粗体
  • 文字颜色:#000000
  • 文字大小:10vw
  • 文本行高:0.9em
  • 文本方向:中心

标题流行

间距

并使用自定义顶部和底部填充创建您想要的形状。

独立站选品工具
  • 顶部填充:10vw
  • 底部填充:3vw

标题流行

动画片

最后但同样重要的是,我们将添加一个动画。 确保动画持续时间和开始不透明度为零很重要。 这将允许文本模块以闪光效果显示。

  • 动画风格:淡入淡出
  • 动画重复:一次
  • 动画时长:0ms
  • 动画延迟:1000ms

标题流行

克隆文本模块 x4

完成第一个文本模块的修改后,您可以根据标题的长度继续复制该模块任意多次。 对于要以 Flash 效果显示的标题的每个部分,您都需要一个单独的文本模块。 对于这个例子,我们需要 4 个额外的模块。

标题流行

高质量外链购买

更改重复 #1

内容

更改第一个副本的副本。

标题流行

背景颜色

连同背景颜色。

  • 背景颜色:#5900ff

标题流行

文字颜色

将文本颜色更改为白色。

JasperAI 10000字免费额度试用

标题流行

动画片

并在动画设置中增加动画延迟。 这将使您的访问者有足够的时间在此文本模块出现之前阅读上一个文本模块。

标题流行

更改重复 #2

内容

接下来更改第二个副本的内容。

标题流行

WordPress备份工具updrafplus

背景颜色

连同背景颜色。

  • 背景颜色:#ffb200

标题流行

文字颜色

还有文字颜色。

标题流行

动画片

同样,我们将确保动画延迟高于用于前两个模块的动画延迟。 我们在每篇文章之间留出 500 毫秒,以便让人们有足够的时间阅读。

标题流行

更改重复 #3

内容

继续更改第三个副本的内容。

标题流行

动画片

随着动画延迟。

标题流行

更改重复 #4

内容

到下一个和最后一个副本。 改变内容。

标题流行

背景颜色

连同背景颜色。

  • 背景颜色:#000000

标题流行

文字颜色

也修改文本颜色。

标题流行

动画片

并在动画设置中增加动画延迟。

标题流行

为除第一个之外的每个文本模块添加负边距

完成自定义所有文本模块后,您可以继续创建重叠。 为了创建这种重叠,我们将为每个重复的文本模块添加一些负上边距。 换句话说,我们确保第一个模块之后的所有模块都出现在第一个文本模块的顶部。

标题流行

变换行

转换翻译

继续转换整行,从转换转换设置开始。

标题流行

变换旋转

也修改变换旋转值。

标题流行

添加第 2 行

立柱结构

上第二排! 现在我们已经有了标题效果,我们可以开始添加剩余的模块。 使用以下列结构添加新行:

标题流行

浆纱

在不添加任何模块的情况下,打开行设置并在尺寸设置中允许行占据屏幕的整个宽度:

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

标题流行

间距

删除下一行的默认顶部填充。

标题流行

将标题文本模块添加到第 2 列

添加H1内容

是时候开始添加模块了! 我们需要的第一个模块是标题文本模块。 添加一些您选择的H1内容。

标题流行

H1 文字设置

然后,转到设计选项卡并更改 H1 文本设置。

  • 标题字体:Didact Gothic
  • 标题字体粗细:粗体
  • 标题文字大小:1.8vw(桌面)、3.8vw(平板电脑)、4vw(手机)

标题流行

间距

在间距设置中添加一些自定义边距值。

  • 最高边距:-4vw
  • 底边距:2vw
  • 左边距:30vw
  • 右边距:30vw(桌面),15vw(平板电脑和手机)

标题流行

将分隔模块添加到第 2 列

能见度

我们需要的下一个模块是一个分频器模块。 确保启用了“显示分隔线”选项。

标题流行

颜色

然后,转到设计选项卡并更改分隔线颜色。

标题流行

浆纱

也修改大小设置。

  • 分隔线重量:8px
  • 宽度:7%

标题流行

间距

连同间距设置。

  • 底边距:1vw
  • 左边距:30vw

标题流行

将描述文本模块添加到第 2 列

添加内容

我们需要的下一个模块是另一个文本模块。 输入您选择的一些内容。

标题流行

文字设置

然后,修改设计选项卡中的文本设置。

  • 文字大小:0.8vw(桌面)、1.3vw(平板电脑)、1.6vw(手机)
  • 文字行高:2.2em

标题流行

间距

在间距设置中添加一些自定义边距值。

  • 底边距:3vw
  • 左边距:30vw
  • 右边距:30vw(桌面),15vw(平板电脑和手机)

标题流行

将按钮模块添加到第 2 列

按钮设置

进入下一个也是最后一个模块,这是一个按钮模块。 添加您选择的一些副本并相应地更改按钮设置:

  • 为按钮使用自定义样式:是
  • 按钮文字大小:1vw(桌面)、1.5vw(平板电脑)、2vw(手机)
  • 按钮边框宽度:0px
  • 按钮字体:Poppins
  • 字体粗细:粗体
  • 字体样式:大写

标题流行 标题流行

间距

转到间距设置并添加一些自定义边距和填充值,您就完成了!

  • 左边距:30vw
  • 顶部填充:1vw
  • 底部填充:1vw
  • 左填充:3vw
  • 右填充:3vw

标题流行

预览

现在我们已经完成了所有步骤,让我们最终看看不同屏幕尺寸的结果。

桌面

标题流行

移动的

标题流行

最后的想法

在这篇文章中,我们向您展示了如何仅使用 Divi 的内置选项使您的标题流行起来。 这是一种很好的技术,可以吸引访问者的注意力并以原始方式传达您的信息。 如果您有任何问题或建议,请务必在下面的评论部分发表评论!

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