WordPress divi主题

如何使用 Divi 引导人们通过不同的粘性步骤

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

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

当试图说服访问者通过您的网站进行访问时,为他们提供正确的激励措施是关键。 在考虑激励措施时,清晰且不可抗拒的行动号召会立即浮现在脑海中。 但 CTA 通常是获取过程的最后一部分。 您很可能会通过展示公司的价值来建立自己的道路。 做到这一点的最佳方法之一是分享您的方法和独特的价值主张。 如果您正在寻找一种流畅的方式来设计您的方法,那么您会喜欢本教程的。 今天,我们将向您展示如何在人们滚动和阅读时添加不同的粘性步骤。 您还可以免费下载 JSON 文件!

google广告开户

让我们开始吧!

预览

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

桌面

粘性步骤

移动的

粘性步骤

免费下载粘滞步骤布局

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

1. 创建剖面设计

添加常规部分

渐变背景

首先向您正在处理的页面添加一个新部分。 打开该部分的设置并应用渐变背景:

  • 颜色1:#ffffff
  • 颜色 2:#e5e5e5
  • 渐变类型:线性
  • 渐变方向:150度

粘性步骤

背景图片

接下来上传背景图片。 您可以在本文开头的下载文件夹中找到我们在本教程中使用的那个。 您可以免费使用背景图片,没有任何限制。

  • 背景图像大小:适合
  • 背景图片位置:左上角

粘性步骤

WordPress divi主题

间距

通过添加“0px”删除该部分的默认底部填充。

粘性步骤

添加新行

立柱结构

继续使用以下列结构将第一行添加到该部分:

粘性步骤

背景颜色

在不添加模块的情况下,打开行设置并更改背景颜色。

  • 背景颜色:rgba(130,100,239,0.09)

粘性步骤

浆纱

转到行的设计选项卡并相应地修改大小设置:

  • 均衡柱高:是
  • 行对齐:居中

粘性步骤

间距

也应用一些自定义间距值。

  • 最高利润率:5%
  • 顶部填充:0px
  • 底部填充:0px
  • 左填充:5%
  • 右填充:5%

粘性步骤

fiverr建站WordPress程序员

边界

然后,转到边框设置并使用一些圆角。

粘性步骤

溢出

我们也将行溢出更改为可见。 这将确保超出行容器的所有内容都不会被隐藏。

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

粘性步骤

第 1 列设置

间距

然后,打开第 1 列设置并添加一些自定义顶部和底部填充。

独立站选品工具
  • 顶部填充:5%
  • 底部填充:5%

粘性步骤

第 2 列设置

渐变背景

继续,我们将在第 2 列添加渐变背景。

  • 颜色 1:#7b47ff
  • 颜色2:#6929aa
  • 渐变类型:线性
  • 渐变方向:158度

粘性步骤

间距

我们还将为该列添加一些自定义填充。

  • 顶部填充:5%
  • 底部填充:5%
  • 左填充:5%
  • 右填充:5%

粘性步骤

高质量外链购买

边界

以及一些圆角。

粘性步骤

变换比例

我们将通过应用以下变换比例值来增加变换设置中列的大小:

粘性步骤

将文本模块添加到第 1 列

添加H3内容

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

JasperAI 10000字免费额度试用

粘性步骤

H3 文字设置

转到模块的设计选项卡并相应地更改 H3 文本设置:

  • 标题 3 字体:Poppins
  • 标题 3 文字颜色:#6929aa
  • 标题 2 文字大小:35px
  • 标题 3 字母间距:-1px

粘性步骤

将分隔模块添加到第 1 列

能见度

接下来,我们将一个分隔模块添加到第 1 列。确保启用了“显示分隔线”选项。

粘性步骤

WordPress备份工具updrafplus

线

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

粘性步骤

浆纱

也修改大小设置。

  • 分隔线重量:6px
  • 宽度:20%
  • 高度:6px

粘性步骤

边界

通过在边框设置中包含一些圆角来完成模块设置。

粘性步骤

将文本模块添加到第 2 列

添加内容

在第 2 列中,我们唯一需要的模块是带有一些描述内容的文本模块。

粘性步骤

文字设置

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

  • 文字字体:Playfair Display
  • 文字大小:16px
  • 文本行高:2.1em

粘性步骤

间距

通过添加一些自定义填充值来完成模块设置。

  • 顶部填充:5%
  • 底部填充:5%
  • 左填充:5%
  • 右填充:5%

粘性步骤

根据需要多次克隆整行

完成第一行后,您可以根据需要将其克隆多次,具体取决于您想分享多少关于第一步的信息。

粘性步骤

更改所有副本

确保更改重复行中的所有副本。

粘性步骤

2.在部分底部添加阶梯行栏

添加新行

立柱结构

现在我们已经有了所有的解释行,我们可以添加我们的粘性步骤行栏。 使用以下列结构添加新行:

粘性步骤

渐变背景

打开行设置并使用渐变背景。

  • 颜色 1:#ffdf51
  • 颜色 2:#e5ac49
  • 渐变类型:线性
  • 渐变方向:150度

粘性步骤

浆纱

移动到该行的设计选项卡并更改尺寸设置,如下所示:

  • 使用自定义装订线宽度:是
  • 天沟宽度:1
  • 均衡柱高:是
  • 行对齐:居中

粘性步骤

间距

接下来应用一些自定义间距值。

  • 最高利润率:5%
  • 顶部填充:0px
  • 底部填充:0px

粘性步骤

边界

然后,转到边框设置并添加一些圆角。

粘性步骤

盒子阴影

也应用以下框阴影:

  • 盒子阴影模糊强度:50px
  • 阴影颜色:rgba(0,0,0,0.13)

粘性步骤

溢出

然后,导航到高级选项卡并将溢出设置为可见。

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

粘性步骤

第 2 列间距

接下来,打开第 2 列设置并使用一些自定义顶部和底部填充。

  • 顶部填充:1%
  • 底部填充:1%

粘性步骤

第 3 列间距

我们也在为第 3 列添加一些自定义的顶部和底部填充。

  • 顶部填充:2%
  • 底部填充:2%

粘性步骤

将文本模块添加到第 1 列

添加内容

是时候将模块添加到我们的粘性步骤行栏中了。 将文本模块添加到第 1 列并在内容框中提及该步骤。

粘性步骤

渐变背景

接下来,应用渐变背景。

  • 颜色 1:#7b47ff
  • 颜色2:#6929aa
  • 渐变类型:线性
  • 渐变方向:158度

粘性步骤

文字设置

转到模块的设计选项卡并相应地设置文本样式:

  • 文字字体:Poppins
  • 文字字体粗细:粗体
  • 文字颜色:#ffffff
  • 文字大小:27px

粘性步骤

浆纱

也对大小设置进行一些更改。

  • 宽度:60%
  • 模块对齐:中心

粘性步骤

间距

然后,在间距设置中添加一些自定义的顶部和底部填充。

  • 上边距:20px
  • 底部填充:20px

粘性步骤

边界

接下来为边框设置添加一些圆角。

粘性步骤

盒子阴影

我们还使用了一个微妙的盒子阴影。

  • 阴影颜色:rgba(0,0,0,0.3)

粘性步骤

转换翻译

我们将通过使用 Divi 的转换转换设置稍微重新定位模块来完成模块设置。

粘性步骤

将文本模块添加到第 2 列

添加H2含量

在第 2 列中,我们添加了一个文本模块,其中包含一些描述我们所处步骤的 H2 内容。

粘性步骤

H2 文本设置

移动到模块的设计选项卡并设置 H2 文本设置的样式,如下所示:

  • 标题 2 字体:Poppins
  • 标题 2 字体粗细:中等
  • 标题 2 文本对齐:
    • 桌面:左
    • 平板电脑和手机:中心
  • 标题 2 文字颜色:#6d40ed
  • 标题 2 字母间距:-1px

粘性步骤

间距

也添加一些自定义的顶部和底部填充。

  • 顶部填充:5%
  • 底部填充:5%

粘性步骤

将文本模块添加到第 3 列

添加内容

到下一列和最后一列。 添加带有一些描述内容的文本模块。

粘性步骤

文字设置

转到模块的设计选项卡并相应地更改文本设置:

  • 文字字体:Playfair Display
  • 文字字体粗细:粗体
  • 文字颜色:rgba(109,64,237,0.46)
  • 文字大小:20px
  • 文字对齐:
    • 桌面:左
    • 平板电脑和手机:中心

粘性步骤

3. 对 Step Row Bar 应用粘性效果

粘滞行设置

现在我们的粘步排条设计已经完成,是时候让它粘在底部了。 打开行设置,转到高级选项卡并应用以下粘性位置设置:

  • 粘性位置:粘在底部
  • 粘性底部偏移:1px
  • 顶部粘性限制:部分
  • 从周围的粘性元素偏移:是
  • 过渡默认和粘性样式:是

粘性步骤

粘性行过滤器

在默认状态下,我们不希望行栏可见。 然而,一旦它变得粘稠,我们希望它出现。 为此,我们将在过滤器设置中修改不透明度过滤器:

粘性步骤

4. 为后续步骤重用整个部分

根据需要多次克隆部分

现在我们已经创建了专门用于步骤 #1 的第一个部分,我们可以根据我们拥有的步骤数重用整个部分。

粘性步骤

更改重复部分中的所有副本

确保更改重复部分中的所有副本。 就是这样!

粘性步骤

预览

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

桌面

粘性步骤

移动的

粘性步骤

最后的想法

在这篇文章中,我们向您展示了如何通过网站的方法设计获得创意。 更具体地说,我们向您展示了如何使用 Divi 的粘性选项来创建不同的粘性步骤栏,以帮助您的访问者浏览您方法的不同部分。 您还可以免费下载 JSON 文件! 如果您有任何问题或建议,请随时在下面的评论部分发表评论。

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

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