WordPress divi主题

如何使用 Divi 将悬停动画角按钮箭头添加到您的设计中

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

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

您在设计的页面中展示 CTA 的方式会对访问者采取行动的方式产生重大影响。 您可以使用最常用的方式,使用中间有副本的按钮格式,但您也可以使用它来获得创意。 在今天的教程中,我们将向您展示一种在 Divi 设计中包含号召性用语的创造性方法。 准确地说,我们将包括悬停动画角按钮箭头。 一旦箭头悬停,箭头方向将随着样式而改变。 您也可以免费下载此设计的 JSON 文件!

google广告开户

让我们开始吧。

预览

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

桌面

角按钮箭头

移动的

角按钮箭头

免费下载布局

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

让我们开始重建吧!

添加新的专业部分

向您正在处理的页面添加一个新的专业部分。 为其选择以下列结构:

角按钮箭头

渐变背景

打开部分设置并应用以下渐变背景:

  • 颜色 1:#fff8f5
  • 颜色 2:#f9f3ef
  • 渐变类型:径向
  • 径向:左下
  • 起始位置:40%
  • 结束位置:40%

角按钮箭头

WordPress divi主题

浆纱

转到该部分的设计选项卡并更改尺寸设置,如下所示:

  • 均衡柱高:是
  • 使用自定义装订线宽度:是
  • 天沟宽度:1
  • 内宽:90%
  • 内部最大宽度:1580px

角按钮箭头

间距

然后,转到间距设置并在第 1 列添加一些右填充。

  • 第 1 列右填充:6%

角按钮箭头

将文本模块 #1 添加到第 1 列

添加H2含量

是时候添加模块了,从第 1 列中的文本模块开始。添加一些您选择的 H2 内容。

角按钮箭头

H2 文本设置

样式模块的 H2 文本设置如下:

  • 标题 2 字体:Kumbh Sans
  • 标题 2 字体粗细:粗体
  • 标题 2 文字颜色:#08665c
  • 标题 2 文字大小:
    • 桌面:75px
    • 平板电脑:60px
    • 电话:45像素

角按钮箭头

间距

接下来添加一些顶部和底部边距。

  • 上边距:50px
  • 下边距:50px

角按钮箭头

fiverr建站WordPress程序员

将文本模块 #2 添加到第 1 列

添加描述内容

在前一个文本模块下方添加另一个文本模块,其中包含您选择的一些描述内容。

角按钮箭头

文字设置

更改模块的文本设置如下:

  • 文字字体:Kumbh Sans
  • 文字颜色:#08665c
  • 文字大小:16px
  • 文字行高:1.8em

角按钮箭头

间距

在较小的屏幕尺寸上添加一些底部边距。

独立站选品工具
  • 底边距:
    • 桌面: /
    • 平板电脑和手机:50px

角按钮箭头

将第 1 行添加到第 2 列

立柱结构

到该部分的第二列。 在那里,使用以下列结构添加第一行

角按钮箭头

浆纱

在不添加模块的情况下,打开行设置并更改大小设置,如下所示:

  • 使用自定义装订线宽度:是
  • 天沟宽度:2

角按钮箭头

高质量外链购买

间距

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

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

角按钮箭头

第 1 列设置

背景颜色

然后,打开第 1 列设置并应用您选择的背景颜色。

  • 背景颜色:#cccccc

角按钮箭头

角按钮箭头

JasperAI 10000字免费额度试用

间距

转到列的间距设置并使用以下响应值:

  • 顶部填充:
    • 桌面:100px
    • 平板电脑和手机:70px
  • 左填充:
    • 台式机和平板电脑:8%
    • 电话:10%
  • 右填充:
    • 台式机和平板电脑:8%
    • 电话:10%

角按钮箭头

边界

也为边框设置添加一些圆角。

角按钮箭头

能见度

通过将溢出设置为在高级选项卡中可见来完成列设置。

WordPress备份工具updrafplus
  • 水平溢出:可见
  • 垂直溢出:可见

角按钮箭头

将文本模块 #1 添加到第 1 列

添加内容

是时候添加模块了,从第 1 列中的第一个文本模块开始。添加一些您选择的内容。

角按钮箭头

文字设置

更改模块的文本设置:

  • 文字字体:Kumbh Sans
  • 文字字体粗细:轻
  • 文字颜色:#08665c
  • 文字大小:30px
  • 文本行高:1em

角按钮箭头

间距

也应用一些底部边距。

角按钮箭头

将分隔模块添加到第 1 列

能见度

然后,添加一个分频器模块。 确保启用了“显示分隔线”选项。

角按钮箭头

线

转到模块的设计选项卡并更改线条颜色。

角按钮箭头

浆纱

同时修改大小设置。

  • 分隔线重量:2px
  • 高度:2px

角按钮箭头

间距

也添加一些底部边距。

角按钮箭头

将文本模块 #2 添加到第 1 列

添加H3内容

将另一个文本模块添加到第 1 列。使用您选择的一些 H3 内容。

角按钮箭头

H3 文字设置

转到模块的设计选项卡并更改 H3 文本设置,如下所示:

  • 标题 3 字体:Kumbh Sans
  • 标题 3 字体粗细:粗体
  • 标题 3 文字颜色:#08665c
  • 标题 3 文字大小:
    • 桌面:48px
    • 平板电脑:38px
    • 电话:32px

角按钮箭头

间距

也使用一些底部边距。

角按钮箭头

将文本模块 #3 添加到第 1 列

添加内容

将最后一个文本模块添加到第 1 列,其中包含您选择的一些描述内容。

角按钮箭头

文字设置

相应地更改文本设置:

  • 文字字体:Kumbh Sans
  • 文字颜色:#08665c
  • 文字大小:16px
  • 文字行高:1.8em

角按钮箭头

间距

包括一些底部边距。

  • 底边距:
    • 桌面:200px
    • 平板电脑和手机:150px

角按钮箭头

将 Blurb 模块添加到第 1 列

将内容框留空

在本专栏中我们需要的最后一个模块是 Blurb 模块。 将内容框留空。

角按钮箭头

默认图标

接下来选择箭头图标。

角按钮箭头

悬停图标

更改悬停时的图标。

角按钮箭头

添加链接

也使用此模块的链接。

角按钮箭头

悬停背景颜色

然后,添加悬停背景颜色。

  • 悬停背景颜色:#08665c

角按钮箭头

默认图标设置

导航到设计选项卡并更改图标设置,如下所示:

  • 图标颜色:#ffffff
  • 图像/图标位置:顶部
  • 图像/图标对齐:右
  • 使用图标字体大小:是
  • 图标字体大小:80px

角按钮箭头

悬停图标设置

修改悬停时的图标字体大小。

  • 悬停图标字体大小:40px

角按钮箭头

浆纱

然后,在尺寸设置中添加一些宽度。

角按钮箭头

悬停间距

修改悬停时的顶部和右侧填充。

  • 悬停顶部填充:25px
  • 悬停右填充:10px

角按钮箭头

边界

在边框设置中也包括一些圆角。

角按钮箭头

悬停比例

然后,在悬停时使用变换比例选项。

角按钮箭头

主要元素和模糊图像 CSS

接下来,导航到高级选项卡,并为主要元素使用以下 CSS 代码行:

cursor: pointer;

将此行用于 Blurb Image css 框:

margin-bottom: 0px;

角按钮箭头

位置

通过在位置设置中重新定位来完成模块设置:

  • 职位:绝对
  • 位置:右下角

角按钮箭头

重用第 1 列

删除第 2 列

完成第一列后,您可以将其重复用于第二列。 为此,请先删除第二列。

角按钮箭头

克隆列 1

然后,克隆第一个。

角按钮箭头

更改第 2 列背景颜色

当然,您需要对重复的列进行一些更改,从背景颜色开始。

  • 第 2 列背景颜色:#f0c7b1

角按钮箭头

将转换转换添加到第 2 列

我们也在较小的屏幕尺寸上添加了转换转换值。

  • 对:
    • 桌面: /
    • 平板电脑和手机:50px

角按钮箭头

更改重复内容

确保更改所有重复的内容。

角按钮箭头

更改 Blurb 模块链接

通过更改 Blurb 模块内的链接来完成重复的列。

角按钮箭头

重用行

完成第一行及其列后,您可以克隆整行。

角按钮箭头

删除第 2 列

删除行设置内的第二列。

角按钮箭头

更改列背景颜色

然后,更改剩余列的背景颜色。

  • 列背景颜色:#dfe7f2

角按钮箭头

将顶部边距添加到行

返回到常规行设置并添加一些响应式上边距。

  • 最高边距:
    • 桌面:50px
    • 平板电脑和手机:100px

角按钮箭头

更改重复内容

然后,更改列中的所有重复内容。

角按钮箭头

更改 Blurb 模块链接

通过更改 Blurb 模块中的链接来完成教程。 就是这样!

角按钮箭头

预览

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

桌面

角按钮箭头

移动的

角按钮箭头

最后的想法

在这篇文章中,我们向您展示了如何利用 CTA 发挥创意。 更具体地说,我们向您展示了如何添加悬停动画角按钮箭头。 这种方法可以帮助您在设计具有多个 CTA 的部分时保持简洁的外观和感觉。 它也增加了额外的交互水平。 您可以免费下载 JSON 文件。 如果您有任何问题或建议,请随时在下面的评论部分发表评论!

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

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