WordPress divi主题

使用 Divi 的行对齐和动画设置创建滑入式 CTA

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

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

每周,我们都会为您提供新的免费 Divi 布局包,您可以将其用于您的下一个项目。 对于其中一个布局包,我们还分享了一个用例,可帮助您将您的网站提升到一个新的水平。 本周,作为我们正在进行的 Divi 设计计划的一部分,我们将向您展示如何使用 Clean Company Layout Pack 使用 Divi 的行对齐和动画设置创建滑入式 CTA。

google广告开户

为了帮助实现这一点,我们将从删除所有已经存在的动画开始。 这样,我们可以突出显示滑入的号召性用语。

让我们开始吧!

预览

让我们看一下我们将在这篇文章中处理的三个不同示例:

滑入式 cta

上传清洁公司登陆页面

添加新页面并切换到 Visual Builder

如前所述,我们将使用清洁公司布局包来创建本教程,但您可以随意将这种方法用于您正在构建的任何网站。 添加一个新页面,输入您的页面标题并立即切换到 Visual Builder。

滑入式 cta

上传清洁公司登陆页面

完成后,您会在屏幕上看到三个选项。 您可以从头开始构建、选择预制布局或克隆现有页面。 选择第二个选项。

滑入式 cta

搜索清洁公司布局包,选择登录页面布局并将其上传到您的页面。

WordPress divi主题

滑入式 cta

删除页面上的所有动画设置

在页面上定位部分

将布局上传到您的页面后,继续并找到以下部分。

滑入式 cta

删除动画

打开其设置并删除已经存在的动画。

滑入式 cta

将样式扩展到所有部分

为了节省时间,我们将把这种动画风格扩展到页面上的所有设计元素。 我们将从页面上的部分开始,右键单击,选择“扩展动画样式”。 使其适用于整个页面的所有部分,然后单击“扩展”。

滑入式 cta

滑入式 cta

将样式扩展到所有行

重复相同的步骤,但改为将其应用于整个页面的所有行。

滑入式 cta

fiverr建站WordPress程序员

滑入式 cta

将样式扩展到所有模块

最后,使其也适用于页面上的所有模块。

滑入式 cta

滑入式 cta

创建 CTA #1

滑入式 cta

独立站选品工具

添加新行

地点

让我们开始创建第一个滑入式 CTA! 在以下部分的底部添加一个新行:

滑入式 cta

立柱结构

为您刚刚添加的行选择以下列结构:

滑入式 cta

行对齐

我们要将行向左推以帮助创建滑入效果。

高质量外链购买

滑入式 cta

浆纱

我们还将减小行的宽度。

  • 使用自定义宽度:是
  • 自定义宽度:500px

滑入式 cta

间距

并摆脱不必要的空白,删除行的顶部和底部填充。

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

滑入式 cta

JasperAI 10000字免费额度试用

添加号召性用语模块

添加副本

我们现在可以添加我们的号召性用语模块! 添加一些选择的内容。

滑入式 cta

添加链接

接下来添加指向您的 CTA 模块的链接。 如果您还没有重定向到的链接,您只需输入“#”即可。 如果不向此框中添加任何内容,您将无法看到该按钮,因此请确保不要将其留空。

滑入式 cta

删除背景颜色

CTA 模块默认具有背景颜色。 继续并在后台设置中将其删除。

WordPress备份工具updrafplus

滑入式 cta

复制截面渐变

打开包含蓝色渐变背景的部分。 在不更改任何内容的情况下,右键单击并复制设置。

滑入式 cta

在 CTA 模块中粘贴渐变

将此渐变背景粘贴到 CTA 模块上。

滑入式 cta

标题文本设置

再次打开 CTA 模块设置,转到标题文本设置并进行一些更改以匹配布局包:

  • 标题字体:Ubuntu
  • 标题字体粗细:粗体
  • 标题文字大小:24px(台式机和平板电脑),16px(手机)
  • 标题行高度:1.2em

滑入式 cta

正文文本设置

更改正文的正文字体粗细。

  • 正文字体粗细:半粗体

滑入式 cta

按钮设置

接下来更改按钮设置。

  • 为按钮使用自定义样式:是
  • 按钮文字大小:18px
  • 按钮文字颜色:#557df3
  • 按钮背景颜色:#FFFFFF
  • 按钮边框宽度:10px
  • 按钮边框颜色:#FFFFFF
  • 按钮边框半径:0px
  • 按钮字体:Ubuntu
  • 字体粗细:粗体

滑入式 cta

滑入式 cta

间距

同时增加模块的填充。

  • 上边距:80px
  • 底部填充:80px
  • 左填充:50px
  • 右内边距:50px

滑入式 cta

边界

然后,在边框设置中添加一些右上角和右下角的边框半径。

  • 右上角:100px
  • 右下角:100px

滑入式 cta

盒子阴影

为了创造更多深度,我们将添加一个微妙的盒子阴影。

  • 盒子阴影模糊强度:71px
  • 盒子阴影传播强度:-5px

滑入式 cta

动画片

最后但并非最不重要的一点是,为您的 CTA 模块添加动画效果。

  • 动画方向:右
  • 动画强度:100%
  • 动画开始不透明度:100%
  • 动画速度曲线:线性

滑入式 cta

创建 CTA #2

滑入式 cta

克隆 CTA #1 行并进行更改

克隆行

要创建第二个示例,请继续克隆第一行。

滑入式 cta

拖动到部分

向下滚动页面并将副本放在这里:

滑入式 cta

删除部分顶部填充

打开您已将行放入的部分的设置并删除顶部填充。

滑入式 cta

删除部分左上边框半径

接下来转到边框设置并删除左上角的边框半径。

滑入式 cta

删除 CTA 右上角边框半径

然后,打开 CTA 模块并移除右上角的边框半径以允许部分和模块混合。

滑入式 cta

更改动画

对于这个滑入式 CTA,我们将使用不同的动画。 也可以随意使用其他动画选项。

  • 动画方向:中心
  • 动画开始不透明度:100%
  • 动画速度曲线:线性

滑入式 cta

创建 CTA #3

滑入式 cta

克隆 CTA #1 行并进行更改

克隆行

为了创建最后一个示例,我们将再次克隆该行。

滑入式 cta

拖动到部分

将副本放在以下部分:

滑入式 cta

更改行对齐

打开模块的行设置并将对齐方式更改为右。

滑入式 cta

删除 CTA 渐变背景

移除模块的渐变背景。

滑入式 cta

改用背景颜色

请改用背景颜色。

  • 背景颜色:#f2835a

滑入式 cta

更改按钮文本颜色

要匹配背景颜色,请同时更改按钮文本颜色。

  • 按钮文本颜色:#f2835a

滑入式 cta

删除 CTA 边界半径

我们通过移除所有给定的边界半径,将 CTA 模块变成一个正方形。

滑入式 cta

更改动画

接下来更改动画设置。

  • 动画方向:下
  • 动画强度:100%
  • 动画开始不透明度:100%
  • 动画速度曲线:线性

滑入式 cta

删除部分底部填充

最后但并非最不重要的一点是,我们将通过删除它所在部分的底部填充将模块推到该部分的底部,我们就完成了!

滑入式 cta

预览

让我们最后看一下我们创建的滑入式 CTA 的三个示例。

滑入式 cta

最后的想法

在这篇文章中,我们向您展示了如何使用 Divi 的清洁公司布局包创建滑入式 CTA。 我们从删除页面上已经存在的动画开始。 之后,我们创建了三个滑入式 CTA 来吸引注意力。 这篇博文是我们 Divi 设计计划的一部分,我们每周都会尝试在您的设计工具箱中添加一些东西。 如果您有任何问题或建议,请务必在下面的评论部分发表评论!

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