使用 Divi 创建大胆多彩网站的 7 种技术

为您的网站使用大胆而多彩的设计风格是让您的网站流行起来的好方法。 它将帮助您为您的网站带来积极的氛围，尽管它不适合任何类型的网站，但它绝对适合其中的许多网站。

在这篇文章中，我们将向您展示 7 种不同的 Divi 技术，了解如何仅使用 Divi 的内置选项来创建大胆而多彩的网页设计。 首先，我们将了解不同的技术，然后我们将重新创建一个与描述相匹配的示例。

这是该系列文章的最后一篇文章，我们已经处理了 4 种不同的网站样式以及如何使用 Divi 实现它们：

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

让我们开始吧！

订阅我们的 YouTube 频道

1. 将行“变成”带有列的部分

您可以用来创建大胆而多彩的网页设计的第一种技术是将行变成部分。 通过删除部分和行之间的所有默认填充，您将不会在两者之间留下明显差异。 这与删除装订线宽度相结合，允许您将两列压在一起。

2.渐变+背景纹理

在您的网站上使用渐变背景可以提供惊人的结果。 但是，帮助您赋予这些颜色更多的功能是将它们与带纹理的背景相结合。 为了保持平衡，请将此组合仅用于一列。 保持第二列的清洁和轻便，以获得现代感。

3.半透明渐变色+下部分分隔线

将一行变成一个部分后，您还可以将部分分隔线添加到您的列背景中。 为了确保分隔线显示出来，而不重叠内容，请为您的列使用略微透明的渐变颜色。

4. 模块的横列重叠

您经常看到网站使用垂直重叠。 另一方面，水平重叠虽然可以带来绝对惊人的效果，但使用频率较低。 要获得这种结果，重要的是要知道右列中的元素比左列中的元素具有层次优势。 如果将元素放在左列中，则无法获得相同的结果。

5. 拆分副本以实现完美对齐

没有什么比完美对齐更令人满意的了。 这是区分好设计和坏设计的主要设计原则之一。 为了确保在重叠两列时这种对齐是完美的，请尝试将您的副本拆分为不同的文本模块。 这将允许您通过使负左边距特别匹配该单词或句子来创建完美对齐。

6. 结合黑色和半透明文本颜色

要将粗体添加到您的网站，请为您共享的副本使用大字体大小以及超粗体文本字体粗细。 为了平衡粗体，您可以在使用黑色文本颜色和半透明文本颜色之间切换。 这将帮助您在网站上创建足够的深度和变化。

7. 避免在顶部或底部使用框阴影来统一部分

通过使用框阴影选项，您可以轻松地将页面上的两个部分联合起来。 首先，使用一个非常微妙的盒子阴影。 这意味着使用足够的模糊强度、负扩散强度和非常浅的阴影颜色。 创建微妙的框阴影后，请使用垂直位置。 对于页面上的第一部分，请确保移动垂直位置，直到框阴影不会出现在您的部分底部。 同样适用于最后一部分，但请确保它不会出现在顶部。

预览

现在我们已经了解了所有不同的技术，是时候将事情付诸实践了。 我们将重新创建以下设计：

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

部分设置

顶部分隔线

添加带有标准部分的新页面并立即打开部分设置。 我们需要的第一件事是顶部分隔线：

• 分隔线样式：在列表中查找
• 分隔线颜色：rgba(0,0,0,0.13)
• 分隔线高度：900px
• 分隔线翻转：垂直
• 分隔线安排：在部分内容下方

底部分隔线

继续添加一个类似的底部分隔线。

• 分隔线样式：在列表中查找
• 分隔线颜色：rgba(0,0,0,0.13)
• 分隔线高度：900px
• 分隔线安排：在部分内容下方

间距

接下来，为该部分留出一些边距并删除默认填充。

• 上下边距：50px
• 左右边距：50px
• 顶部和底部填充：0px
• 左右填充：0px

圆角

然后，打开边框设置并添加一些圆角。

• 左上角：20px
• 右上角：20px

盒子阴影

通过进行以下调整，我们在部分顶部使用了一个微妙的框阴影：

• 框阴影垂直位置：-23px
• 框阴影模糊强度：37px
• 框阴影扩散强度：-29px
• 阴影颜色：rgba(0,0,0,0.22)
• 框阴影位置：外阴影

添加新行

列结构

并不是说我们已经完成了对部分设置的修改，我们可以继续添加一个包含两列的行。

第 1 列渐变背景

尚未添加任何模块，我们将打开行设置。 我们需要做的第一件事是为我们的第一列添加渐变背景。

• 颜色 1：RGBA(255,191,0,0.76)
• 颜色 2：RGBA(153,0,255,0.87)

第 1 列纹理背景图像

我们将把这个渐变背景与带纹理的背景结合起来。 我使用的图像是 Divi 的 Meetup Layout Pack 的一部分。 通过右键单击并保存以下图像，将其保存到桌面（它是一个带有白色纹理的 png 文件，除非您在计算机上打开它和/或在您的网站上使用它，否则您将无法看到它的外观） )：

将图像上传到媒体库后，请确保选择“适合”作为第 1 列背景图像大小。

第 2 列背景颜色

接下来，为您的第二列设置“#F7F7F7”背景色。

浆纱

我们将通过使其占据该部分的整个宽度来将我们的行“变成”一个部分。

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

间距

除了使行占据部分的整个宽度外，我们还需要删除部分的顶部和底部填充。

• 顶部和底部填充：0px

将分频器模块添加到第 1 列

隐藏分隔线

让我们开始添加模块吧！ 我们需要的第一件事是第一列中的分频器模块。 我们仅使用此模块在第一列中创建所需的空间。 我们实际上并不希望它出现。 添加模块后，请确保禁用“显示分隔符”选项。

间距

接下来转到间距设置并将以下自定义填充添加到分隔符：

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

将文本模块 #1 添加到第 2 列

添加副本

我们现在可以转到第二列。 在这里，我们将删除三个不同的文本模块并使它们与两列重叠。 如果你想让一个模块与两列或更多列重叠，你总是需要把它放在右边的列中。 这就是层次结构的工作原理。 添加您的第一个文本模块并添加一些副本。

文字设置

接下来打开文本设置并应用以下更改：

• 文字字体粗细：超粗
• 文本字体样式：大写
• 文字颜色：#000000
• 文字大小：250 像素（桌面）、200 像素（平板电脑）、100 像素（手机）
• 文本行高：0.75em

间距

我们还需要一些保证金。 我们使用的负左边距与我们选择的副本相匹配。 如果您还想让它与其他文本一起使用，则需要使用此值。 更改它，直到您看到字符的开头与列的过渡对齐。

• 上边距：200px（桌面）、-250px（平板）、-120px（手机）
• 左边距：-279px（桌面），5%（平板和手机）

克隆文本模块两次

克隆 #1

更改文本

我们已经创建了我们的第一个文本模块，为了节省一些时间，我们将克隆它两次并进行一些更改。 关于第二个文本模块，您需要更改的第一件事是副本。

更改间距

我们在这里使用的副本是不同的，所以这意味着我们需要更改左边距。 请注意我们还如何使用十进制数字使文本模块完美对齐。 摆脱上边距。

• 左边距：-360.7px（桌面），5%（平板和手机）

克隆 #2

更改文本

也更改您的第三个文本模块的副本。

更改文本颜色

为了使设计更加突出，我们将这个模块的文本颜色更改为“rgba(0,0,0,0.19)”。

更改间距

我们正在移除此模块的顶部边距并添加一些底部边距。 负左边距也不同。

• 下边距：200px
• 左边距：-410px（桌面），5%（平板和手机）

添加标准部分 #2

部分设置

间距

我们已经完成了第一部分，是时候进入下一部分了！ 添加新的标准部分后，打开间距设置并进行以下更改：

• 上下边距：50px
• 左右边距：50px
• 顶部和底部填充：0px
• 左右填充：0px

圆角

继续添加一些底部圆角：

• 左下角：20px
• 右下角：20px

盒子阴影

也在该部分的底部添加一个框阴影。

• 框阴影垂直位置：47px
• 框阴影模糊强度：37px
• 框阴影扩散强度：-29px
• 阴影颜色：rgba(0,0,0,0.22)
• 框阴影位置：外阴影

添加新行

列结构

接下来，向新部分添加一行三列。

浆纱

我们也将这一行“转换”为一个部分：

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

间距

我们将删除默认的顶部和底部填充。

• 顶部和底部填充：0px

将 Blurb 模块 #1 添加到第 1 列

选择图标

我们总共需要三个 Blurb 模块。 每列一个。 我们首先在第一列中添加一个，完成后，我们将克隆它并将其放置在剩余的列中。 这将帮助我们节省时间。 将内容添加到 Blurb 模块后，在图像和图标设置中选择一个图标。

渐变背景

我们将通过使用渐变背景使图标看起来像是重叠在 Blurb 模块的顶部：

• 颜色 1：rgba(255,255,255,0)
• 颜色 2：#A21DF9
• 起始位置：20%
• 结束位置：20%

纹理背景图像

我们将渐变背景与上一节中使用的相同纹理背景相结合。

图标设置

接下来更改图标设置：

• 图标颜色：#000000
• 使用图标字体大小：是
• 图标字体大小：85px

文字设置

继续修改文本设置。

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

标题文字设置

然后，我们将使用以下设置来设计我们的简介标题：

• 标题字体粗细：超粗
• 文本字体样式：大写
• 标题文字大小：46px

正文设置

以及正文的以下设置：

• 正文字体重量：轻
• 正文大小：18px

间距

最后但并非最不重要的一点是，我们将通过添加自定义填充为 Blurb 模块提供一些呼吸空间：

• 顶部填充：50px
• 底部填充：100px
• 左右填充：50px

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

克隆 #1

更改图标

完成对 Blurb 模块的修改后，将其克隆两次。 执行此操作后，将重复项放在剩余的列中。 然后，打开第二列中的 Blurb 模块并更改正在使用的图标。

更改渐变背景

继续将第二个渐变背景颜色更改为“#D47A9A”。

克隆 #2

更改图标

对最后一列中的 Blurb 模块执行相同的操作。

更改渐变背景

对于此模块，我们使用“#F3BF3E”作为第二个渐变背景色。

预览

如果您已按照上述每一个步骤进行操作，您应该会在不同的屏幕尺寸上获得以下结果：

最后的想法

在这篇文章中，我们向您展示了如何仅使用 Divi 的内置选项创建大胆而多彩的网站。 首先，我们已经了解了一些您可以解决的 Divi 技术，然后，我们从头开始重新创建了一个匹配的示例。 如果您有任何问题或建议，请务必在下方评论区留言！