WordPress divi主题

如何使用 Divi 为您的全局标题设置动画

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

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

您的标题是您网站中最重要的部分之一。 它连接您的页面、帖子和号召性用语。 这也是您的访问者自动寻找的东西之一,因此他们不会浪费任何时间来寻找他们正在寻找的东西。 如果您正在寻找一种强调标题的方法,您会喜欢这篇文章。 我们将向您展示如何使用 Divi 的 Theme Builder 为您定制的全局标题设置动画。 可能性是无穷无尽的,但我们将向您展示两个您可以立即开始使用的动画示例。 您还可以免费下载 JSON 文件!

google广告开户

让我们开始吧。

预览

在深入学习本教程之前,让我们快速浏览一下不同屏幕尺寸的两个示例。

示例 #1

桌面

动画全局标题

移动的

动画全局标题

示例 #2

桌面

动画全局标题

移动的

动画全局标题

免费下载动画全局标题

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

订阅我们的 Youtube 频道

WordPress divi主题

1. 转到 Divi Theme Builder 并开始构建全局标题

转到 Divi 主题生成器

首先转到 WordPress 后端中的 Divi Theme Builder。

动画全局标题

从头开始构建全局标题

单击“添加全局标题”并继续选择“构建全局标题”。

动画全局标题

2.构建全局头块设计

部分设置

间距

进入模板编辑器后,您可以开始构建全局标头。 我们正在确保进行“块”设计,以便以后可以将动画添加到两个不同的容器中; 列+模块。 打开您可以在模板编辑器中注意到的部分,并删除所有默认的顶部和底部填充。

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

动画全局标题

盒子阴影

接下来添加一个盒子阴影。

  • 盒子阴影模糊强度:80px
  • 阴影颜色:rgba(13,60,216,0.24)

动画全局标题

Z 指数

并确保在高级选项卡中也增加了该部分的 z 索引。 这将确保全局标题内容将出现在所有页面/帖子内容的顶部。

动画全局标题

fiverr建站WordPress程序员

添加新行

立柱结构

继续使用以下列结构向该部分添加新行:

动画全局标题

浆纱

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

  • 使用自定义装订线宽度:是
  • 天沟宽度:1
  • 均衡柱高:是
  • 宽度:100%
  • 最大宽度:100%

动画全局标题

间距

接下来删除所有默认的顶部和底部填充。

独立站选品工具
  • 顶部填充:0px
  • 底部填充:0px

动画全局标题

能见度

确保也将行的溢出设置为“可见”。

  • 水平溢出:可见
  • 垂直溢出:可见

动画全局标题

列设置(全部三个)

背景颜色

完成行设置后,您还需要设置列的样式。 打开每一列并相应地更改它们的背景颜色:

  • 第 1 列背景颜色:#efefef
  • 第 2 列背景颜色:#ffcb0f
  • 第 3 列背景颜色:#2848ff

动画全局标题

高质量外链购买

间距

还为每列添加一些自定义顶部和底部填充。

  • 顶部填充:0.5vw(桌面)、1vw(平板电脑和手机)
  • 底部填充:0.5vw(桌面)、1vw(平板电脑和手机)

动画全局标题

主要元素

为了确保所有列内容垂直居中,我们将在每列的主要元素中添加三行 CSS 代码。

display: flex;
flex-direction: column;
justify-content: center;

动画全局标题

第 1 列 Z 索引

最后但同样重要的是,打开第 1 列设置并增加可见性设置中的 z 索引。

JasperAI 10000字免费额度试用

动画全局标题

将菜单模块添加到第 1 列

选择菜单

是时候添加模块了,从第 1 列中的菜单模块开始。选择您选择的菜单。

动画全局标题

上传徽标

接下来上传您的徽标。

动画全局标题

WordPress备份工具updrafplus

移除背景

继续删除模块的背景颜色。

动画全局标题

布局

转到设计选项卡并确保以下设置适用于布局:

  • 样式:左对齐
  • 下拉菜单方向:向下

动画全局标题

菜单文字设置

接下来为文本设置设置样式:

  • 菜单字体:蒙特塞拉特
  • 菜单文字颜色:#000000
  • 菜单文字大小:0.7vw(桌面)、2vw(平板电脑)、3vw(手机)

动画全局标题

下拉菜单设置

连同下拉菜单设置。

  • 下拉菜单行颜色:#ffffff

动画全局标题

图标设置

并更改汉堡菜单图标颜色。

  • 汉堡菜单图标颜色:#2848ff

动画全局标题

浆纱

继续更改不同屏幕尺寸的徽标最大宽度。

  • 徽标最大宽度:6vw(桌面)、9vw(平板电脑)、13vw(手机)

动画全局标题

间距

并通过添加一些左右边距来完成模块的设置。

  • 左边距:2vw
  • 右边距:2vw

动画全局标题

将代码模块添加到第 1 列

为大众响应性插入 CSS 代码

现在,在菜单模块中,我们为文本大小和间距值使用了视口宽度单位。 我们这样做是为了确保您可以在不同的桌面屏幕尺寸上放置多达 8 个菜单项,而不会分成两行。 我们需要确保菜单项之间的空间也是用 vw 单位创建的。 为此,我们将在第 1 列添加一个代码模块并插入以下 CSS 代码行:

<style>
.et-menu>li {
padding-left: 1vw !important;
padding-right: 1vw !important;
}
</style>

动画全局标题

将社交媒体关注模块添加到第 2 列

添加社交网络

在下一列中,我们需要一个社交媒体关注模块。 添加您选择的社交网络。

动画全局标题

单独重置社交网络样式

继续重置每个网络的设置。

动画全局标题

结盟

通过更改模块对齐来完成模块的设置。

动画全局标题

将按钮模块添加到第 3 列

添加副本

到下一列和最后一列。 在那里,我们只需要一个按钮模块。 添加一些您选择的副本。

动画全局标题

结盟

转到设计选项卡并更改按钮对齐方式。

动画全局标题

按钮设置

通过设置按钮的样式来完成模块的设置。

  • 为按钮使用自定义样式:是
  • 按钮文字大小:1vw(桌面)、1.2vw(平板电脑)、2vw(手机)
  • 按钮文字颜色:#ffffff
  • 按钮边框宽度:0px

动画全局标题

  • 按钮边框半径:0px
  • 按钮字体:蒙特塞拉特
  • 按钮字体粗细:超粗体
  • 按钮字体样式:大写

动画全局标题

3. 为元素添加匹配动画

全局标题动画组合 #1

动画全局标题

第一栏动画

现在我们已经构建了全局标题,是时候添加动画了! 要重新创建第一个动画,请打开第 1 列设置并添加以下动画:

  • 动画风格:缩放
  • 动画方向:向上
  • 动画开始不透明度:100%

动画全局标题

第 2 列动画

接下来将以下动画设置添加到第 2 列:

  • 动画风格:缩放
  • 动画方向:向下
  • 动画延迟:500ms
  • 动画开始不透明度:100%

动画全局标题

第 3 列动画

通过将以下动画分配给第 3 列来完成列设置:

  • 动画风格:缩放
  • 动画方向:向上
  • 动画延迟:1000ms
  • 动画开始不透明度:100%

动画全局标题

模块动画(所有三个模块)

完成列设置后,分别打开每个模块并为它们使用以下动画:

  • 动画风格:淡入淡出
  • 动画延迟:1500ms

动画全局标题

全局标题动画组合 #2

动画全局标题

第一栏动画

想要重新创建第二个动画集吗? 打开第 1 列设置并添加以下动画:

  • 动画风格:幻灯片
  • 动画方向:向上
  • 动画开始不透明度:100%

动画全局标题

第 2 列动画

接下来对第 2 列使用以下动画设置:

  • 动画风格:幻灯片
  • 动画方向:向上
  • 动画延迟:500ms
  • 动画开始不透明度:100%

动画全局标题

第 3 列动画

并通过将以下动画设置应用于第 3 列来完成列设置:

  • 动画风格:幻灯片
  • 动画方向:向上
  • 动画延迟:1000ms
  • 动画开始不透明度:100%

动画全局标题

模块动画(所有三个模块)

然后,分别打开每个模块并添加以下动画:

  • 动画风格:幻灯片
  • 动画方向:向下
  • 动画延迟:1500ms

动画全局标题

4. 保存生成器更改并查看结果

完成动画设置后,您可以保存全局标题,退出主题生成器并在您的网站上查看结果!

动画全局标题

动画全局标题

预览

现在我们已经完成了所有步骤,让我们最后看一下不同屏幕尺寸的示例。

示例 #1

桌面

动画全局标题

移动的

动画全局标题

示例 #2

桌面

动画全局标题

移动的

动画全局标题

最后的想法

在本教程中,我们向您展示了如何使用 Divi 的内置选项和 Theme Builder 为全局标题设置动画。 这是吸引人们注意您网站标题的好方法。 使用 Divi 的内置动画选项,可能性无穷无尽。 为了帮助您入门,我们向您展示了两个不同的示例。 您还可以免费下载 JSON 文件!

如果您渴望了解有关 Divi 的更多信息并获得更多 Divi 免费赠品,请务必订阅我们的电子邮件通讯和 YouTube 频道,这样您将永远是第一批了解并从这些免费内容中受益的人之一。

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