WordPress divi主题

使用 Divi 的新列结构创建“我们的流程”部分

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

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

不可否认,Divi 的新柱结构为 Divi 增加了大量的内置设计可能性。 为了向您展示使用 Divi 的多功能柱结构可以获得多么独特,我们将向您展示如何仅使用 Divi 的内置选项创建一个独特的“我们的流程”部分。 最重要的是,我们还将添加一个微妙的悬停效果,该效果会在悬停过程中的某个步骤时出现。 这些部分非常适合解释您如何对待您的客户或潜在客户。

google广告开户

让我们开始吧!

预览

在深入学习本教程之前,让我们看一下您可以从本教程中获得的结果。

工艺部分

添加新部分

背景颜色

将标准部分添加到新页面或现有页面并为其使用以下背景颜色:

  • 背景颜色:#3a1dad

工艺部分

间距

接下来转到间距设置并添加一些自定义顶部和底部填充。

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

工艺部分

能见度

我们正在较小的屏幕尺寸上创建替代方案,但我们将开始创建桌面版本。 这就是为什么在可见性设置中禁用手机和平板电脑上的此部分。

WordPress divi主题

工艺部分

添加第 1 行

立柱结构

修改完部分设置后,继续使用以下列结构添加新行:

工艺部分

将渐变背景添加到第 1、3 和 5 列

为了创建一个漂亮的悬停效果,我们将在第 1、3 和 5 列中添加渐变背景。这些列将分别包含一个流程步骤。 我们将使用剩下的两列将这些步骤相互连接起来。 我们提到的三列中的每一列都需要相同的渐变背景:

  • 颜色一:#580cf2
  • 颜色 2:rgba(41,196,169,0)
  • 第 1 列渐变类型:径向
  • 第 1 列起始位置:38%
  • 第 1 列结束位置:38%

工艺部分

浆纱

完成添加渐变背景后,转到大小设置并启用全宽选项。

  • 使这一行全宽:是

工艺部分

间距

我们还需要为整个行和列专门用于保存流程步骤的一些自定义填充值。

  • 顶部填充:0px
  • 底部填充:0px
  • 第 1 列顶部填充:20px
  • 第 1 列底部填充:20px
  • 第 3 列顶部填充:20px
  • 第 3 列底部填充:20 像素
  • 第 5 列顶部填充:20px
  • 第 5 列底部填充:20px

工艺部分

克隆第 1 行两次

在添加任何模块之前,我们将克隆该行两次。 这将帮助我们在接下来的步骤中节省时间。

fiverr建站WordPress程序员

工艺部分

修改第一个副本

删除列渐变背景

打开您部分中的第二行(第一个副本)并删除已应用到它的所有列渐变背景。 我们不需要这些,因为第二行不会包含任何流程步骤,只有标题和连接这些步骤的垂直分隔线。

工艺部分

删除列间距

同样,删除已应用于第 1、3 和 5 列的所有列自定义填充。

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

工艺部分

独立站选品工具

将 Blurb 模块添加到第 1 行的第一列

添加内容

是时候开始添加模块了! 我们将从第一行第 1 列中的 Blurb 模块开始。 此 Blurb 模块将包含我们第一步的内容,因此请继续添加您选择的一些文本。

工艺部分

选择图标

我们还使用以下图标来​​指示下一步的查找位置:

工艺部分

默认背景颜色

然后,将默认背景颜色添加到 Blurb 模块。 此背景颜色与我们用于该部分的背景颜色相同。 它隐藏了我们在本教程上一部分中添加的列渐变背景。

高质量外链购买
  • 背景颜色:#3a1dad

工艺部分

悬停背景颜色

但是,我们希望在悬停时显示列渐变背景。 这就是我们将悬停时的背景颜色更改为完全透明的原因。

  • 背景颜色:rgba(255,255,255,0)

工艺部分

默认图标设置

继续转到图标设置并进行一些更改。

  • 图标颜色:#9d8ad8
  • 图标位置:顶部
  • 使用图标字体大小:是
  • 图标字体大小:80px

工艺部分

JasperAI 10000字免费额度试用

悬停图标设置

在悬停时应用不同的图标颜色和字体大小。

  • 图标颜色:#ffffff
  • 图标字体大小:120px

工艺部分

文字设置

接下来,转到文本设置并进行一些更改。

  • 文本方向:中心
  • 文字颜色:浅色

工艺部分

标题文本设置

标题文本设置也需要修改。

WordPress备份工具updrafplus
  • 标题字体粗细:超粗体
  • 标题字体样式:大写

工艺部分

过渡

为了创建平滑的过渡,我们将增加过渡持续时间。

  • 转换持续时间:500ms

工艺部分

克隆 Blurb 模块并放置在不均匀的列中(第 1 行和第 3 行)

现在我们已经创建了第一个 Blurb Module 步骤,我们可以克隆它 5 次,并将重复的内容放在下面打印屏幕中标记的列中。

工艺部分

更改每个重复项的内容和图标

当然,您必须更改每个副本的内容以及图标,以确保该过程有意义。

工艺部分

将水平分隔线添加到第 1 行的第二列

能见度

我们需要添加的第二个模块是 Divider Module。 我们正在使用此模块将所有 Blurb 模块步骤相互连接。 继续在第一行的第二列添加一个。

工艺部分

分隔线颜色

接下来更改分隔线颜色。

工艺部分

间距

为了垂直对齐分隔模块,我们将使用一些上边距。 我们还将通过使用一些负的左右边距来增加模块的宽度。

  • 上边距:150px
  • 左边距:-60px
  • 右:-60px

工艺部分

克隆水平分隔线并放置在偶数列中(第 1 行和第 3 行)

克隆分频器模块并将其放置在下面打印屏幕中标记的列中:

工艺部分

将垂直分隔线添加到第 2 行的第一列

能见度

我们还需要一个垂直分隔线。 要创建一个,我们将在第二行的第 1 列添加一个新的分频器模块,但我们将确保禁用“显示分频器”选项。

工艺部分

背景颜色

接下来为模块添加背景颜色。

  • 背景颜色:#dddddd

工艺部分

浆纱

然后更改尺寸设置。 一旦你这样做了,你会注意到一个垂直分隔线就位。

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

工艺部分

间距

为了增加垂直分隔线的高度,我们将使用一些自定义间距值。

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

工艺部分

克隆垂直分隔线并将重复项放在第 2 行的第 5 列

克隆您创建的垂直分隔线并将其放在第二行的最后一列。

工艺部分

将标题文本模块添加到第 2 行的第 3 列

添加内容

我们需要的最后一个模块是标题文本模块。 将此模块添加到第二行的第三列,并提供一些选择的内容。

工艺部分

标题文字设置

转到标题文本设置并对标题的外观进行一些更改。

  • 标题 2 字体粗细:超粗体
  • 标题 2 文本对齐:居中
  • 标题 2 文本颜色:rgba(255,255,255,0.09)
  • 标题 2 文本大小:220 像素(桌面)、150 像素(平板电脑)、100 像素(手机)
  • 标题 2 字母间距:-50 像素(桌面)、-30 像素(平板电脑)、-25 像素(手机)

工艺部分

间距

最后,添加一些自定义间距值以允许标题文本模块到位。

  • 上边距:30px
  • 左边距:-800px
  • 右边距:-800px

工艺部分

为平板电脑和手机创建替代品

添加新部分

背景颜色

如本文开头所述,我们将为较小的屏幕尺寸创建替代方案。 继续并使用与前一个相同的背景颜色添加一个新的常规部分。

  • 背景颜色:#3a1dad

工艺部分

间距

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

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

工艺部分

能见度

并在可见性设置中隐藏桌面上的部分。

工艺部分

添加第 1 行

立柱结构

我们没有像在桌面部分那样使用 6 列的行,而是只使用一列。

工艺部分

克隆上一节的标题文本模块并放在第 1 行

克隆桌面部分的标题文本模块并将副本放在新行中。

工艺部分

删除间距

继续删除此模块的间距设置。

工艺部分

添加第 2 行

立柱结构

然后,添加另一行和一列。

工艺部分

克隆上一节的 Blurb 模块并放置在第 2 行中

克隆桌面部分中的 Blurb 模块步骤之一,并将副本放在新行中。

工艺部分

更改图标

将图标更改为指向下方的图标。

工艺部分

更改尺寸

接下来更改大小设置。

  • 宽度:39%(平板电脑)、59%(手机)
  • 模块对齐:中心

工艺部分

克隆上一节的垂直分隔线并放置在第 2 行

我们在这里也使用了上一节的垂直分隔线。 继续克隆它并将副本放在 Blurb 模块的正下方。

工艺部分

更改间距

更改此模块的间距设置以降低其高度。

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

工艺部分

根据需要多次克隆两个模块

您可以根据需要多次克隆这两个模块,以在较小的屏幕尺寸上展示所有流程步骤。

工艺部分

预览

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

工艺部分

最后的想法

在这篇文章中,我们向您展示了如何创造性地使用 Divi 的列结构来创建令人惊叹且独特的流程部分。 最重要的是,我们还为悬停元素后出现的每个流程步骤添加了微妙的悬停效果。 随意使用此设计来创建您自己独特的替代方案。 如果您有任何问题或建议,请务必在下面的评论部分发表评论!

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