WordPress divi主题

使用 Divi 的悬停选项创建动画标题

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

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

每周,我们都会为您提供新的免费 Divi 布局包,您可以将其用于您的下一个项目。 对于其中一个布局包,我们还分享了一个用例,可帮助您将您的网站提升到一个新的水平。 本周,作为我们正在进行的 Divi 设计计划的一部分,我们将向您展示如何使用 Divi 的悬停选项和驾驶学校布局包创建动画标题。 这是将副本的不同部分置于聚光灯下并触发动作的好方法。

google广告开户

让我们开始吧!

预览

在我们深入教程之前,让我们快速看一下结果。

动画标题

上传司机学校登陆页面

要创建本教程,我们将使用 Driver School Layout Pack 的登录页面。 因此,继续添加一个新页面,启用 Visual Builder 并从您的预制布局中选择登录页面。

动画标题

创建动画标题 #1

动画标题

更改部分渐变背景

让我们开始构建第一个示例! 我们将这个动画标题添加到我们页面的英雄部分。 但在我们到达那里之前,打开你的英雄部分的设置并更改渐变背景叠加颜色。

  • 颜色1:rgba(0,0,0,0.94)
  • 颜色2:rgba(12,12,12,0.63)

动画标题

删除英雄部分的最后两行

继续删除该部分中的最后两行。

WordPress divi主题

动画标题

更改分隔线对齐

我们保留了仍然存在的行。 我们唯一需要改变的是Divider Module的模块对齐方式。

动画标题

添加新行

立柱结构

在上一行的正下方,继续使用以下列结构添加新行:

动画标题

间距

删除下一行的默认自定义填充。

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

动画标题

将文本模块添加到列

添加内容

我们需要的唯一模块是文本模块。 我们使用两种不同的文本类型:标题和段落链接。 继续添加您选择的副本,并通过在每个句子中间按 shift + enter 确保副本出现在两行中。

动画标题

默认背景颜色

然后,转到背景设置并为文本模块添加默认背景颜色。

fiverr建站WordPress程序员
  • 背景颜色:rgba(255,255,255,0)

动画标题

悬停背景颜色

更改悬停时的背景颜色。

  • 背景颜色:#ffa53b

动画标题

默认文本设置

接下来,更改整体文本设置中的文本方向。

动画标题

独立站选品工具

默认链接文本设置

切换到链接选项卡并对链接副本的外观进行一些更改。

  • 链接字体粗细:超粗体
  • 链接字体样式:斜体、大写、下划线
  • 链接下划线颜色:rgba(255,255,255,0.3)
  • 链接文字大小:0px
  • 链接线高:0em

动画标题

悬停链接设置

接下来在悬停时进行一些更改。

  • 链接文字大小:40px
  • 链接线高:1.8em

动画标题

默认标题文本设置

对标题文本设置也进行一些更改。

高质量外链购买
  • 标题字体粗细:超粗体
  • 标题字体样式:大写
  • 标题文字颜色:#ffffff
  • 标题文字大小:70px(桌面)、40px(平板电脑)、30px(手机)
  • 标题行高度:1.4em

动画标题

悬停标题文本设置

对悬停进行了一些小调整。

  • 标题文本颜色:rgba(255,255,255,0)
  • 标题文字大小:0px

动画标题

默认间距

继续进行间距设置并添加一些自定义填充值。

  • 上边距:40px
  • 底部填充:0px
  • 左填充:20px
  • 右内边距:20px

动画标题

JasperAI 10000字免费额度试用

悬停间距

悬停时自定义填充值略有不同。

  • 上边距:40px
  • 底部填充:40px
  • 左填充:20px
  • 右内边距:20px

动画标题

边界

我们也在使用边框。

  • 边框宽度:10px
  • 边框颜色:#ffa53b

动画标题

过渡

并通过在高级选项卡中更改过渡持续时间来添加快速过渡。

WordPress备份工具updrafplus

动画标题

创建动画标题 #2

动画标题

添加新部分

背景颜色

继续下一个例子! 在英雄部分的正下方添加一个新部分并添加背景颜色。

  • 背景颜色:#efefef

动画标题

间距

然后,转到间距设置并使用不同的边距和填充值。

  • 下边距:100px
  • 右边距:200px(桌面)、100px(平板电脑)、50px(手机)
  • 上边距:54px
  • 底部填充:54px

动画标题

盒子阴影

为了将此部分与布局包相匹配,我们还添加了一个微妙的框阴影。

  • 盒子阴影水平位置:30px
  • 盒子阴影垂直位置:30px
  • 盒子阴影传播强度:-10px
  • 阴影颜色:#ffa53b

动画标题

添加新行

立柱结构

我们添加到本节的行需要以下列结构:

动画标题

添加文本模块

添加内容

再次使用标题和段落链接添加您选择的内容。 我们还使用了一个列表,帮助访问者轻松浏览网站的不同部分。

动画标题

默认链接文本设置

转到链接文本设置并对链接副本的外观进行一些更改。

  • 链接字体样式:下划线
  • 链接文本颜色:#000000
  • 链接文字大小:0px(桌面)、20px(平板电脑)、13px(手机)
  • 链接行高:0px(桌面),1.8em(平板电脑和手机)

动画标题

悬停链接文本设置

对悬停进行一些小调整。

  • 链接文字大小:30px
  • 链接线高度:2.8em

动画标题

默认标题文本设置

您选择的标题也需要修改。

  • 标题 2 字体粗细:超粗体
  • 标题 2 字体样式:大写
  • 标题 2 文字大小:30 像素(台式机和平板电脑)、20 像素(手机)
  • 标题 2 字母间距:1px

动画标题

悬停标题文本设置

更改悬停时的文本大小。

动画标题

默认间距

继续进行间距设置并添加一些自定义边距和填充值。

  • 左边距:0px(台式机、平板电脑和手机)
  • 上边距:40px
  • 左填充:50px

动画标题

悬停间距

更改悬停时的左边距。

动画标题

默认边框

接下来,为文本模块添加左边框。

  • 左边框宽度:5px
  • 左边框颜色:#ffa53b

动画标题

悬停边框

删除悬停时的所有边框宽度。

动画标题

过渡

最后但同样重要的是,通过使用稍长的过渡持续时间来创建平滑过渡。

  • 转换持续时间:500ms

动画标题

预览

现在我们已经完成了所有步骤,让我们来看看最终结果。

动画标题

最后的想法

在这个用例帖子中,我们向您展示了如何仅使用 Divi 的内置选项在悬停时创建动画标题。 这是将副本的特定部分置于聚光灯下并以创造性的方式触发访问者行动的好方法。 如果您有任何疑问,请确保在下面的评论部分发表评论!

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