如何将 Blurb 图标设计为 Divi 内容的设计重点

使用模糊图标作为设计重点可以为您的页面布局提供您以前可能从未想过的独特设计。 除了定位模糊模块的图标以重叠文本模块之外，您还可以使用文本模块的背景和边框来设置图标的样式。 这创造了一个很好的设计口音，在给你的图标一个完全独特的设计的同时框架内容。

在本教程中，我将向您展示如何将模糊图标​​设置为 Divi 中内容的设计重点。

让我们潜入吧！

抢先看

以下是我们将在本教程中构建的一些设计示例。

下载本教程的示例布局

要了解免费的简介模块口音设计布局，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

从头开始构建设计

首先，创建一个新页面并为您的页面命名。 然后在前端部署Divi builder。 添加具有一列行的常规部分。 在添加第一个模块之前，使用以下内容更新行设置：

使用自定义装订线宽度：是
自定义天沟宽度：1

这将消除模块之间的任何自定义边距。

创建文本模块

接下来在行内添加一个文本模块。

使用以下填充文本更新文本模块：

<h2>Our Services</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. </p>

样式化文本模块

现在更新文本模块设置的其余部分，如下所示：

背景颜色：#ffffff

• 标题 2 字体：Nunito
• 标题 2 字体粗细：粗体
• 标题 2 字体样式：TT
• 标题 2 文本颜色：#f24a5b
• 标题 2 文字大小：42 像素（桌面）、32 像素（平板电脑）、22 像素（手机）
• 标题 2 字母间距 [acing: 16px
• 标题 2 行高：1.3em

• 宽度：500px（桌面），490px（平板）
• 模块对齐：居中
• 自定义填充（桌面）：顶部 40 像素，底部 40 像素，左侧 50 像素，右侧 50 像素
• 自定义填充（电话）：左 20 像素，右 20 像素
• 边框宽度：10px
• 边框颜色：#ffffff

由于我们将文本模块与模糊图标重叠，我们需要确保文本模块以 z 空间顺序位于图标上方。 为此，我们必须首先将以下 CSS 片段添加到 Text 模块的 Main Element CSS 框：

position: relative;

然后将 z-index 值设置为 1。

现在，此文本模块将位于对设计很重要的任何其他重叠模块之上。

创建模糊图标

现在我们准备好创建第一个模糊图标。 为此，我们必须首先添加一个模糊模块并将其拖到文本模块的顶部。 然后删除模拟内容（标题文本和正文文本）并单击以使用图标而不是图像作为简介。

然后更新以下设计设置：

• 图标颜色：#2ea3f2
• 使用图标字体大小：是
• 图标字体大小：100px
• 自定义边距：0px 底部（这会去掉模块之间的默认底部边距；如果您使用的行间距宽度为 1，则不需要）

接下来，由于我们没有在模块中使用任何文本（只有图标），我们可以去掉模糊图标下的默认底部边距。 为此，请将以下自定义 CSS 添加到 Blurb Image CSS 框中：

模糊图像 CSS：

margin-bottom: 0px

复制 Blurb 图标

在我们开始定位简介之前，让我们继续复制简介模块并将副本拖到文本模块下。 您现在应该在文本模块的上方和下方有一个模糊图标。

使用 Transform Translate 定位 Blurb 图标

为了定位模糊图标，我们将使用 Divi 的转换选项，它允许我们将带有图标的模糊模块放置在页面上我们想要的任何位置。

定位模糊图标 #1

要定位顶部简介图标，请打开简介模块设置并更新以下内容：

• Transform Translate X 轴（桌面）：-242px
• 变换 平移 Y 轴（桌面）：50px
• Transform Translate X 轴（手机）：-170px

定位模糊图标 #2

在我们定位这个模糊图标之前，让我们把它放大一点。 为此，打开模糊模块设置并将图标字体大小更改为 150 像素。

然后通过更新以下变换选项来定位模糊图标：

• Transform Translate X 轴（桌面）：242px
• 变换 平移 Y 轴（桌面）：-100px
• Transform Translate X 轴（手机）：190px

创建两列行

要创建下一列，请复制现有行并将该行的列布局更改为两列布局 (1/2 1/2)。

接下来，使用 Divi 的多选功能选择左列中的所有三个模块，然后将它们复制并粘贴到第二列中。

然后，删除第一列中底部的模糊图标。

对齐第 2 列中的模糊图标

对于第 2 列中的 Blurb 图标，我们需要将顶部图标向左移动，将底部图标向右移动。 我们可以简单地通过改变 Transform Translate X 轴值来做到这一点。

打开第 2 列中顶部模糊模块的模糊模块设置并更新以下内容：

• Transform Translate X 轴（桌面）：242px
• Transform Translate X 轴（手机）：170px

基本上，您所做的就是将这些值从负值更改为正值，以沿 x 轴向相反方向移动。

接下来，更新第 2 列中底部模糊模块的变换转换值，如下所示：

• Transform Translate X 轴（桌面）：-242px
• Transform Translate X 轴（手机）：-190px

更新第二行中的文本模块样式

第二行内容作为特色服务的子集。 因此，我们希望标题字体大小与我们的标题不同且更小。 要同时更新两个文本模块，请使用多选来选择两个文本模块。 然后更新以下内容：

将 h2 标题内容更改为“服务”。

• 标题 2 文字大小：28 像素（桌面）、22 像素（平板电脑）、18 像素（手机）

保存设置。

现在打开第 2 列中文本模块的设置模式并更新以下内容：

• 文字方向：右

调整布局的间距

现在两行内容之间的空白（或负）空间可能有点太多。 为了去掉一些空间，我们可以在顶行的底部模糊模块中添加一个负底边距，如下所示：

• 自定义边距：-100px 底部

最后结果

现在让我们来看看最终的结果。

尝试其他图标

要为您的布局尝试不同的图标，您可以使用查找和替换功能。 打开包含您的图标的宣传语之一的宣传语设置。 然后右键单击设置模式中的图标并选择查找和替换。

在“查找和替换”弹出窗口中，更新以下内容：

• 内：本节
• 替换为：[选择新图标]

之后，单击替换按钮。

这将使用新的内容更改您部分中的所有内容。

以下是一些使用不同图标的布局示例。

最后的想法

在您的内容中添加模糊图标作为设计重点是如何组合两个模块以创建完全独特的设计的一个示例。 在这种情况下，文本模块的背景和边框用作周围图标的部分覆盖。 结果是独一无二的，并为探索更多设计变化打开了大门。 随意探索不同的图标和颜色组合，为您自己的需要创造一些东西。

我期待在评论中收到您的来信。

干杯!