如何在 Divi 中使用 Blurb 图标背景获得创意

Blurb 模块是您可以在 Divi 中找到的最通用的一些元素。 在这篇文章中，我们将向您展示如何更进一步并利用模糊图标背景获得创意。 我们将使用简介模块、文本模块和号召性用语模块的组合。 这些独特的设计非常适合服务页面和产品类别页面。 您也可以免费下载 JSON 文件！

让我们开始吧。

预览

在我们深入学习本教程之前，让我们快速浏览一下所有三个示例在不同屏幕尺寸下的结果。

示例#1

桌面

移动的

示例#2

桌面

移动的

示例 #3

桌面

移动的

免费下载 Blurb 图标背景示例

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

下载文件

免费下载

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

下载

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

订阅我们的 YouTube 频道

一般步骤

添加新部分

背景

要重新创建这些创意简介背景设计，请打开一个新页面或向现有页面添加一个新部分。 在添加一行之前，为您的部分添加背景颜色。

• 背景颜色：#f7f7f7

间距

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

• 顶部和底部填充：120px

添加新行

列结构

继续使用以下列结构添加新行：

浆纱

在添加任何模块之前，调整行的大小。

• 宽度：100%
• 最大宽度：100%

间距

然后，在间距设置中调整填充。

• 顶部填充：8vw
• 底部填充：15vw
• 左右填充：12vw

第 1 栏

完成修改行设置后，对第一列进行一些更改。

背景

首先，添加一个白色背景。

• 背景颜色：白色#ffffff

边界

然后，添加一些边框半径。

• 圆角：2vw 所有四个角

盒子阴影

最后，添加一个框阴影。

• Box-Shadow：第一个选项
• 盒影模糊强度：47px

克隆行两次

在我们开始添加模块之前，还有最后一步。 克隆该行两次。

重新创建示例 #1

将 Blurb 模块添加到第 1 列

擦除默认内容

现在我们已经设置了行和列，我们可以开始向第一行的第 1 列添加模块。 首先，添加一个模糊模块并删除所有默认标题和正文文本。

选择图标

然后，选择一个图标而不是图像。

• 图标：链接

背景

为模糊模块添加黑色背景色。

• 背景颜色：黑色#000000

图标设置

然后，更改图标设置。

• 图标颜色：黄色 #edf000
• 图标位置：顶部
• 图标字体大小：
  • 台式机：3vw
  • 平板电脑：11vw
  • 电话：13vw

浆纱

继续调整模块的大小。

• 内容宽度：100%
• 宽度：
  • 台式机：11vw
  • 平板电脑：19vw
  • 电话：22vw

间距

还要添加一些间距值。

• 最高利润率：-5vw
• 底部边距：0vw
• 左边距：-1vw
• 顶部填充和底部填充：4vw

边界

要使图标具有独特的形状，请为除左下角之外的每个角添加一些边框半径。

• 圆角：50vw，左下角为0vw。

盒子阴影

最后，添加一个框阴影。

• Box-Shadow：第一个选项
• 盒影模糊强度：50px

自定义 CSS

默认情况下，该图标附有一些底部边距。 为了摆脱这种情况，我们将向模糊图像自定义 CSS 框添加一行 CSS 代码。

• 模糊图像：边距底部：0px；

margin-bottom: 0px;

将文本模块添加到第 1 列

添加H3内容

在图标下方，添加一个文本模块，其中包含您选择的一些 H3 内容。

背景

转到背景设置并添加渐变背景。

• 背景：渐变
• 颜色一：透明
• 颜色二：黄色#edf000
• 梯度方向：180度
• 开始和结束位置：74%

标题文字

然后，设置 H3 文本的样式。

• 标题文本标题级别：H3
• H3 字体：Josefin Sans
• H3 对齐：居中
• H3 字体颜色：黑色 #oooooo
• H3 文字大小：
  • 台式机：2.4vw
  • 平板电脑：3.4vw
  • 电话：4.8vw
• H3 字母间距：0em

浆纱

在大小设置中，调整平板电脑和手机的宽度。

• 宽度：
  • 平板电脑：50%
  • 电话：60%

间距

继续转到间距设置并调整边距值。

• 左右边距：5vw
• 顶部填充：1vw

转变

最后，使用变换选项旋转模块。

• 变换翻译：
  • x轴：-20vw
  • y轴：13vw
• 变换旋转：第一个选项，280 度

将号召性用语模块添加到第 1 列

删除默认标题内容，添加按钮和文本内容

我们在第 1 列中需要的下一个也是最后一个模块是号召性用语模块。 添加您选择的一些内容并删除标题副本。

添加链接

向按钮添加相关链接。

背景

确保背景没有颜色。

文章主体

然后，转到设计选项卡并更改正文设置。

• 正文字体：深红色文本
• 正文对齐方式：左
• 正文颜色：深灰色 #666666
• 正文大小：
  • 台式机：1.2vw
  • 平板电脑：2.6vw
  • 电话：3.1vw
• 车身线高：1.8em

按钮

也修改按钮样式。

• 按钮文字大小：
  • 台式机：1vw
  • 平板电脑：2vw
  • 电话：3vw
• 按钮文字颜色：深灰色#3f3f3f
• 按钮边框颜色：深灰色 #3f3f3f
• 按钮字体： Josefin Sans
• 按钮边距：3vw
• 按钮顶部和底部填充：1vw
• 按钮左右填充：3vw

间距

通过添加一些左右填充来完成模块的设置。

• 左右填充：7vw

删除第二列并克隆第一列

调整第 2 列中的设置

现在，返回行设置并删除第二列。 紧接着，克隆第一列。 在接下来的步骤中，我们将调整重复列中的一些设置。

模糊模块

首先更改模糊模块的图标颜色。

• 图标颜色：Aqua #00ffd4

文本模块

接下来更改文本模块的渐变背景和副本。

• 背景颜色：Aqua #00ffd4
• 更改内容

重新创建示例 #2

将 Blurb 模块添加到第 1 列

删除默认内容

进入第二个例子！ 向第 1 列添加一个模糊模块并删除所有默认内容。

选择图标

然后，选择一个图标。

背景

现在，添加黄色背景色。

• 背景颜色：黄色#edf000

图标

继续修改设计选项卡中的图标设置。

• 图标颜色：白色#ffffff
• 图标位置：顶部
• 图标字体大小：
  • 台式机：3vw
  • 平板电脑：11vw
  • 电话：12vw

浆纱

设置颜色和背景样式后，调整模块的大小。

• 内容宽度：100%

间距

也修改间距设置。

• 底部边距：0vw
• 左右边距：3vw
• 顶部和底部填充：2vw

边界

接下来为每个角添加一些边框半径。

• 圆角：2vw 所有四个角

盒子阴影

通过添加一个微妙的框阴影来完成模块的设计。

• Box-Shadow：第一个选项

删除第 1 列的框阴影和背景颜色

接下来打开第1列设置，去掉背景色和方框阴影。

自定义 CSS

通过向高级选项卡添加一行 CSS 代码，删除应用于模糊图标的默认底部边距。

• 模糊图像：边距底部：0px；

margin-bottom: 0px;

将号召性用语模块添加到第 1 列

添加标题内容、正文内容和按钮内容

在模糊模块下方，添加一个号召性用语模块并插入您选择的一些内容。

添加链接

添加指向下一步按钮的链接。

背景

继续添加白色背景。

• 背景颜色：白色#ffffff

标题文字

在设计选项卡中，设置 H3 标题文本的样式。

• 标题标题级别：H3
• H3 字体：Josefin Sans
• H3 字体颜色：深灰色 #3f3f3f
• H3尺寸：
  • 台式机：2vw
  • 平板电脑：4vw
  • 电话：6vw
• H3 线高：2.3em

文章主体

然后，设置正文的样式。

• 正文字体：深红色文本
• 正文对齐方式：左
• 正文颜色：深灰色 #666666
• 正文大小：
  • 台式机：1.1vw
  • 平板电脑：2.2vw
  • 电话：3.1vw
• 车身线高：1.8em

按钮

转到按钮设置并按如下方式设置按钮样式：

• 按钮文字大小：
  • 台式机：1vw
  • 平板电脑：2vw
  • 电话：3vw
• 按钮文字颜色：深灰色#3f3f3f
• 按钮字体： Josefin Sans
• 按钮边框宽度：2-x
• 按钮边框颜色：深灰色 #3f3f3f
• 按钮顶部和底部边距：3vw
• 按钮顶部和底部填充：1vw
• 按钮左右填充：3vw

间距

现在，调整间距。

• 底部边距：-1vw
• 顶部填充：6vw
• 左右填充：7vw

边界

然后，将边框设置中的角变圆。

• 圆角：2vw

盒子阴影

最后，添加一个框阴影。

• Box-Shadow：第一个选项
• 盒影模糊强度：50px

删除第二列并克隆第一列

调整第 2 列中的设置

与前面的示例类似，转到行设置并删除第二列。 复制第一列并调整一些设置。

模糊模块

将模糊模块的背景从黄色更改为浅绿色。

• 背景图标颜色：Aqua #00ffd4

号召性用语模块

更改号召性用语模块的内容和链接。

• 更改标题内容
• 更改链接

重新创建示例 #3

将 Blurb 模块添加到第 1 列

删除默认内容

继续下一个也是最后一个例子！ 向第 1 列添加一个模糊模块并擦除默认内容。

选择图标

选择一个图标。

背景

为模块添加亮黄色背景。

• 背景颜色：黄色#f7f426

图标

使图标变黑并调整其位置

• 图标颜色：黑色 #000000
• 图标位置：左
• 图标字体大小：
  • 台式机：3vw
  • 平板+手机：8vw

浆纱

继续修改模块的宽度和高度。

• 内容宽度：100%
• 高度：23vw

间距

此外，调整间距设置。

• 左边距：3vw
• 右边距：25vw
• 顶部填充：2vw
• 左填充：1vw

边界

也添加一些边界半径。

• 圆角：所有角落 2vw

盒子阴影

然后，添加一个框阴影。

• Box-Shadow：第一个选项

转变

最后，使用自定义转换转换值重新定位模块。

• x轴：-6vw
• y 轴：1vw

从第 1 列中删除背景颜色和框阴影

转到第 1 列设置并删除背景颜色和框阴影。

将号召性用语模块添加到第 1 列

添加标题、正文和按钮内容

在模糊模块下方，添加一个号召性用语模块。 添加一些您选择的内容。

添加链接

然后，添加指向按钮的链接。

背景

要为号召性用语模块设置样式，请先添加黑色背景色。

• 背景颜色：黑色#oooooo

标题文字

接下来调整 H3 文本设置。

• 标题标题级别：H3
• H3 字体：Josefin Sans
• H3 字体颜色：亮黄色#f7f426
• H3 字体大小：
  • 台式机：2vw
  • 平板电脑：4vw
  • 电话：6vw
• H3 线高：2.3em

文章主体

也更改正文设置。

• 正文字体：深红色文本
• 正文对齐方式：左
• 正文颜色：白色 #000000
• 正文大小：
  • 台式机：1.2vw
  • 平板电脑：2.2vw
  • 电话：3.1vw
• 车身线高：1.8em

按钮

然后，按如下方式设置按钮样式。

• 按钮文字大小：
  • 台式机：1vw
  • 平板电脑：2vw
  • 电话：3vw
• 按钮文字颜色：Aqua #00ffd4
• 按钮边框颜色：Aqua #00ffd4
• 按钮字体： Josefin Sans
• 按钮上下边距：3vw
• 按钮顶部和底部填充：1vw
• 按钮左右填充：3vw

浆纱

继续调整大小设置并进行一些更改。

• 宽度：90%
• 模块对齐：居中

间距

也修改间距设置。

• 最高边距：-9vw
• 顶部填充：5vw
• 左右填充：7vw

边界

接下来打开边框设置并为每个角添加一些边框半径。

• 圆角：2vw

盒子阴影

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

• 框阴影：第一个选项

转换 翻译

最后，通过修改转换转换设置来重新定位号召性用语模块。

• y 轴：-18vw

删除第二列并克隆第一列

调整第 2 列中的设置

现在第一列已准备就绪，我们将删除第二列并复制第一列。 之后，我们将调整一些内容和颜色细节。

模糊模块

在模糊模块设置中，将背景从黄色更改为浅绿色。

• 背景图标颜色：Aqua #00ffd4

号召性用语模块

在号召性用语模块设置中，更改标题内容、标题颜色和按钮颜色。 不要忘记更改按钮链接，您就完成了！

• 标题文字颜色：Aqua #00ffd4
• 内容
• 按钮颜色：#00ffd4

预览

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

示例#1

桌面

移动的

示例#2

桌面

移动的

示例 #3

桌面

移动的

结论

正如您在这篇文章中看到的，宣传语图标背景可以使您的宣传语设计更加有趣。 通过使用与号召性用语和文本模块配对的简介模块，有许多创造性的可能性。 这些设计风格非常适合服务展示或产品部分。 你怎么认为？ 在评论中告诉我们。