使用 Divi 创建平面网页设计的 6 种 Divi 技术

扁平化网页设计因其核心价值而广受欢迎。 它关注可用性并优先考虑用户体验。 结合光滑和现代的设计，构成了一个很好的平面网站。 平面网站上的每个设计元素在添加到页面之前都应该经过深思熟虑。 它还应该专注于既简单又美观，同时又引人入胜。 不要忘记，它应该吸引访问者的注意力，并让他们对了解贵公司的全部内容感到好奇。

在这篇文章中，我们将分享一些使用 Divi 创建平面网页设计的技巧。 这是帖子系列中的第三篇文章，我们处理 4 种不同的网站样式以及如何使用 Divi 实现它们：

1. 干净抽象
2. 最小
3. 平坦的
4. 大胆多彩

让我们开始吧！

1. 保持英雄部分干净易懂

正如这篇文章的介绍中提到的，可用性是扁平化网页设计风格的一个非常重要的方面。 它使您能够切入正题并与访问者共享相关信息，而不会使他们负担过重。 同时，您可以使用与您公司的品牌相匹配的华丽布局。

有很多方法可以创建平面网页设计，但我注意到几乎无处不在的是英雄部分的简单性。 简单的设计绝对不意味着无聊。 这意味着你不需要绕过灌木丛。 您可以切入正题，而不必夸大您正在创建的设计以试图给访问者留下深刻印象。

2. 强调盒子结构

扁平化网页设计风格的另一个典型特征是盒结构的使用。 如果您了解 Divi，您就会知道基本上可以在构建器中的任何地方找到盒子结构。 它们为您的网站提供了一定的结构，并允许您提前构建一个框架。

在平面设计中，通常强调盒子结构。 这使人们可以轻松导航并在短时间内找到他们正在寻找的内容。

3. 选择 3 种明亮的颜色

到目前为止，我们已经提到使用盒子结构和一个简单的英雄部分。 从理论上讲，这听起来很无聊，对吧？ 为了平衡您网站上的可用性因素，您可以使用明亮的调色板使其栩栩如生。 您可以使用两种或三种鲜艳的颜色来个性化您的网站并使其符合您公司的价值观。

4. 使用非常微妙的渐变颜色组合

可以帮助您打破循环的另一件事是使用非常微妙的渐变颜色组合。 对两种渐变颜色使用相同的颜色但使用不同的阴影。 其中一个需要更亮，而另一个需要更深的感觉。 它们不会立即成为人们的渐变，但它将有助于为您的网站提供更多的深度和细节。

5. 一种标准与一种优雅的字体家族相结合

通常，许多网站的标题使用更优雅的字体系列，正文使用标准的字体系列。 为什么不换东西？ 这肯定会有所改变。 另外，人们往往倾向于跳过描述而只阅读标题。 如果是这样，您希望您的标题尽可能易于阅读，对吗？ 字体系列的一个很好的组合是使用 Arial 作为标题，使用 Georgia 作为正文。 Georgia 的可读性仍然很高，只是有点花哨，它与您的网站形成了所需的对比。

6. 玩高地

最后一个技巧是调整页面上设计元素的高度。 您会惊讶于它对您网站的整体外观和感觉的贡献有多大。 您仍然保持推荐用于平面设计的盒子结构，但同时，您也为访问者提供了互动。

预览

我们在文章的前一部分中已经看到了几种技术，现在是时候将这些技巧付诸实践了。 我们将逐步创建以下惊人的结果：

让我们开始创建：添加标准部分 #1

部分设置

渐变背景

首先创建一个新页面并在该页面添加一个部分。 在不添加任何行的情况下，打开部分设置。 我们使用具有以下设置的微妙渐变背景：

• 颜色 1：#5214ff
• 颜色 2：#420fc1
• 渐变类型：线性
• 梯度方向：146deg
• 起始位置：30%

间距

我们也在我们的部分添加了一些顶部和底部填充：

• 顶部填充：55px
• 底部填充：130px

添加第 1 行

行设置

列结构

继续添加第一行。 该部分总共将包含三个不同的行。 对于第一行，我们使用以下列结构：

浆纱

立即打开行设置并在大小设置中启用“使此行全宽”选项。

添加标题文本模块

H1 文本设置

我们只需要向这一行添加一个 H1 文本模块。 添加内容后（并确保它是 H1），打开 H1 文本设置并应用以下更改：

• 标题字体：Arial
• 标题文本对齐方式：左
• 标题文字颜色：#FFFFFF
• 标题文字大小：86 像素（桌面）、65 像素（平板电脑）、45 像素（手机）
• 标题线高度：1.2em

添加第 2 行

行设置

列结构

让我们继续下一行。 我们再次使用只有一列的行。

浆纱

在添加任何模块之前，打开您的行设置并应用以下大小设置：

• 使这一行全宽：是
• 使用自定义装订线宽度：是
• 天沟宽度：1

添加分频器模块

颜色

继续向您的色谱柱添加分隔模块。 我们使用“#edf000”作为分隔线颜色。

浆纱

接下来我们将调整 Divider Module 的 Sizing 设置：

• 分隔线重量：10px
• 宽度：64%
• 模块对齐：右

添加第 3 行

行设置

列结构

最后但并非最不重要的是，添加一行包含两列。

浆纱

打开行设置并在大小设置中启用“使此行全宽”选项。

间距

通过将“0px”添加到顶部和底部填充来删除行自定义填充。

将描述文本模块添加到第 2 列

文字设置

继续使用以下文本设置将描述文本模块添加到第二列：

• 文字字体：Georgia
• 文字颜色：#FFFFFF
• 文字大小：27px（桌面）、22px（平板电脑）、18px（手机）
• 文本行高：1.9em
• 文本对齐：右

将按钮模块添加到第 2 列

按钮对齐

在文本模块的对齐设置中将您的行向右对齐。

按钮设置

我们需要添加到英雄部分的下一个也是最后一个模块是按钮模块。 添加副本后，对其应用以下按钮设置：

• 为按钮使用自定义样式：是
• 按钮文字大小：27px
• 按钮文字颜色：#303030
• 按钮背景颜色：#edf000
• 按钮边框宽度：0px
• 按钮边框半径：0px
• 按钮字体：Georgia

添加标准部分 #2

部分设置

间距

我们可以继续我们的第二部分！ 打开部分设置并使用以下填充：

• 顶部填充：155px
• 底部填充：200px

添加第 1 行

行设置

列结构

我们将添加的第一行将包含我们的红色圆圈。 为您的行选择以下列结构：

第 1 列渐变背景

我们将使用第 1 列径向渐变背景，而不是上传图像模块。 我们将调色板中的红色与完全透明的颜色结合使用。

• 颜色 1：#ff3233
• 颜色 2：rgba(255,255,255,0)
• 第 1 列渐变类型：径向
• 第 1 列起始位置：45%
• 第 1 列结束位置：45%

浆纱

继续更改您的大小设置：

• 使这一行全宽：是
• 使用自定义装订线宽度：是
• 天沟宽度：1

添加分频器模块

隐藏分隔线

为了确保我们的列背景显示出来，我们将向第一列添加一个分隔模块。 但是，我们不希望分隔符出现。 这就是我们将禁用“显示分隔线”选项的原因。

间距

为了使柱状渐变背景显示出来，我们将在分隔模块中添加以下边距：

• 顶部：150 像素（桌面）、200 像素（平板电脑和手机）
• 底部：150 像素（桌面）、200 像素（平板电脑和手机）

返回行设置

添加间距

我们将使这个红色圆圈与我们页面上的两个部分重叠。 为此，我们将重新打开行设置并添加一些负边距：

• 上边距：-350px（桌面），-400px（平板和手机）
• 左边距：-250px（桌面和手机），-400px（平板）

添加第 2 行

行设置

列结构

让我们继续我们的第二排。 该行将包含标题文本模块和分隔符。 选择以下列结构：

间距

通过使用“0px”作为顶部填充来减少此行创建的空间。

添加标题文本模块

H2 文本设置

我们现在可以添加我们的模块。 首先添加具有以下文本设置的新 H2 文本模块：

• 标题 2 字体：Arial
• 标题 2 文本对齐：居中
• 标题文字颜色：#303030
• 标题 2 文字大小：50 像素（桌面）、45 像素（平板电脑）、32 像素（手机）
• 标题 2 行高：1.3em

添加分频器模块

颜色

在文本模块的正下方，添加一个分隔器模块。 这一次，我们确实希望显示分隔符。 给它“#5214ff”颜色代码。

浆纱

接下来更改分隔模块的大小设置：

• 分隔线重量：10px
• 宽度：30%
• 模块对齐：居中

添加第 3 行

行设置

列结构

是时候使用四列创建我们的最后一行了。

复制部分渐变背景

我们将使用与英雄部分相同的渐变背景。 因此，为了节省一些时间，我们只需复制这些设置即可。

在第 1 列和第 3 列中粘贴渐变背景

并将它们粘贴在第一列和第三列中。

浆纱

接下来转到大小设置，并使您的行占据屏幕的整个宽度。

• 使这一行全宽：是
• 使用自定义装订线宽度：是
• 天沟宽度：1

间距

我们还将更改间距设置：

• 上边距：100px
• 顶部和底部填充：0px

添加模糊模块

选择图标

现在我们已经完成了行设置，我们可以开始添加我们的模块了！ 我们需要四个 Blurb 模块，每列一个。 我们将创建一个并在之后复制它，而不是单独创建它们。 添加您的简介内容后，请继续选择您选择的图标。

图标设置

接下来打开您的图标设置并使用“#edf000”图标颜色。

文字设置

继续使用以下文本设置：

• 文字方向：居中
• 文字颜色：浅

标题文字设置

接下来打开标题文本设置并进行一些更改：

• 标题字体：Arial
• 标题文字大小：31px
• 标题行高度：2.6em

正文设置

同样，我们将使正文与我们正在创建的布局相匹配：

• 正文字体：Georgia
• 正文大小：18px
• 车身线高：2.2em

间距

最后，为了给你的 Blurb 模块一些喘息的空间，添加以下自定义填充：

• 顶部和底部填充：50px
• 左右填充：20px

克隆和更改模糊模块

克隆 Blurb 模块并放置在第 2 列中

克隆您刚刚创建的 Blurb 模块并将副本放在第二列中。

更改图标

您需要更改的第一件事是图标。

更改图标颜色

将图标颜色也更改为“#ff3233”。

更改文本颜色

由于我们正在处理白色背景颜色，因此您需要在文本设置中将文本颜色更改为“深色”。

间距

我们正在调整 Blurb Modules 的高度，让一切都更加突出。 为此，请打开间距设置并使用以下上边距值：

• 上边距：100px（桌面），0px（平板和手机）

盒子阴影

最重要的是，我们还将添加一个非常微妙的阴影：

• 框阴影模糊强度：80px
• 框阴影传播强度：-10px
• 阴影颜色：rgba(0,0,0,0.11)

克隆两个 Blurb 模块并放置在剩余的列中

克隆模块

我们现在有两个 Blurb 模块，我们将在其余列中重用它们。 克隆它们中的每一个。

放置在第 3 和第 4 列

将重复的 Blurb 模块放在相应的列中，您就完成了！

预览

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

最后的想法

在这篇文章中，我们分享了一些使用 Divi 创建平面网页设计的技巧和技巧。 平面网页设计现在非常流行，因为它允许访问者轻松浏览页面并更快地处理信息。 如果您有任何问题或建议，请务必在下方评论区留言！