如何使用 Divi 的效率功能通过 5 个步骤切换到深色布局

在设计网站时，您有意识或无意识地做出的第一个决定之一就是您要为网站提供的颜色样式。 我们当中勇敢的人敢于追求完整的充满活力的调色板，但老实说，这很难实现。 这就是为什么通常采用浅色或深色布局更安全的原因。 在 Divi 库的预制布局部分，您可以找到大量明暗布局，您可以在构建任何类型的网站时免费使用这些布局。 但是，如果您喜欢布局，但更愿意使用较深的调色板，反之亦然，该怎么办？

借助 Divi 的高效功能，从浅色到深色布局包，反之亦然，比以往任何时候都更容易。 在这篇文章中，我们将向您展示如何通过 5 个步骤将浅色布局变成深色布局。 如果您使用正确的技术，则进行此转换所需的时间非常短。 要知道您需要采取的步骤数量始终取决于您正在处理的布局，但是一旦您掌握了整体方法，您就可以使其适用于您正在处理的任何布局。

让我们开始吧！

预览

只需 5 个步骤，我们就会将 Web Freelancer Layout Pack 的浅色登陆页面更改为深色页面。

上传网络自由职业者登陆页面

添加新页面并启用 Visual Builder

首先添加一个新页面，为您的页面指定一个标题并切换到 Visual Builder。

上传网络自由职业者布局包

在屏幕上显示的三个选项中，选择上传预制布局。

在免费布局包列表中找到 Web Freelancer Layout Pack 的登录页面，然后单击“使用此布局”的绿色按钮进行上传。

步骤 1：更改整体背景颜色

更改第一部分的部分背景颜色

是时候开始了！ 我们建议您采取的第一步是更改页面上所有部分的背景颜色。 一旦这样做，您将很快能够注意到需要更改哪些设计元素以匹配深色背景颜色。 打开页面的第一部分并选择“#0c0c0c”作为部分背景颜色。

将样式扩展到所有部分

添加背景颜色后，右键单击它并单击“扩展背景颜色”选项。

完成后，选择将背景颜色扩展到页面上的所有部分。

第 2 步：更改文本颜色

打开全角标题模块并更改文本颜色

您需要采取的下一步是更改正在使用的文本颜色。 您可能知道也可能不知道，Divi 中有一个默认选项，允许您为页面上的文本选择浅色或深色调色板。 但是，一旦您选择了自定义颜色，此选项就会替换为您选择的自定义颜色。 不要检查每个元素以查看那里是否有自定义颜色，而是继续选择“Light”作为全角标题模块中的文本颜色。

将样式扩展到所有模块

然后，通过右键单击并选择“扩展文本颜色”选项来扩展此浅色文本颜色。

将这种新颜色扩展到整个页面的所有模块。

使用多选功能更改自定义颜色

如前所述，上一步不适用于预先选择的颜色。 例如，切换模块具有自定义标题文本颜色。 不要单独修改每个开关，而是使用键盘上的控制/命令键一次选择所有开关，然后单独单击每个模块。 选择所有这些后，单击设置图标。

现在，您可以同时将更改应用于每个选定的模块。 在这种情况下，我们将标题文本颜色更改为“#848484”。

第 3 步：更改按钮

全角页眉的打开按钮一设置

确保页面上的号召性用语与布局调色板保持匹配非常重要。 在这种情况下，我们有一个在明暗布局上看起来都很棒的按钮模块。 这就是为什么我们要将其扩展到页面上的其他按钮。 继续并打开全角标题模块并转到按钮一设置。

将按钮样式扩展到页面上的所有按钮

然后，右键单击按钮一设置并选择“扩展按钮一样式”选项。

将按钮样式扩展到整个页面中的所有按钮。

更改英雄部分中的按钮 2 文本颜色

扩展功能没有到达全角标题模块的第二个按钮，因为它不是一个独立的模块。 这就是为什么我们要打开按钮二设置并将文本颜色更改为“#ffffff”。

将样式扩展到页面上的所有全角标题

为确保此文本颜色应用于页面上的所有全角标题模块，我们还将对其进行扩展。

右键单击文本颜色并选择“扩展按钮两种文本颜色”选项后，继续将其应用于整个页面的所有全角标题。

第 4 步：删除自定义边距并替换为自定义填充

删除自定义保证金

当切换到深色布局时，删除所有给页面带来空白的自定义边距值也很重要。

改用自定义填充

但是，您可以通过将自定义边距添加为自定义填充来保持之前的距离。

第 5 步：搜索和更改特殊设计设置

确定特殊设计设置

您需要执行的最后一步是针对每个布局的。 布局特有的设计元素也需要更改。 这可以包括但不限于以下一些设置：

• 盒子阴影
• 列背景
• 图标颜色
• 分隔线颜色
• …

在行框阴影颜色上使用查找和替换

对于这个特定的布局，我们需要更改的一件事是正在使用的行框阴影颜色。 打开行设置并右键单击框阴影而不更改它。 然后，选择“查找和替换”选项。

如果您想更改整个页面上的特定颜色代码，使用“查找和替换”功能是最好的方法。 您可以轻松地将其替换为其他颜色代码，在本例中为“#33302f”。 这将确保您不必探索所有设计元素来准确查看颜色的使用位置。

手动更改一次性设置

但是，布局中也有一次性重复设计设置。 要更改这些，您必须手动进行。 例如，下面打印屏幕中的行具有尚未在页面其他地方使用的框阴影颜色。 这就是我们手动将其更改为“#33302f”的原因。

预览

在完成五个步骤后，让我们最后看看最终结果。

最后的想法

在这篇文章中，我们引导您通过 5 个步骤将浅色布局包变成深色布局包。 您需要采取的步骤数量始终取决于您正在处理的布局，但总体而言，方法保持不变。 如果您有任何问题或建议，请在下面的评论部分告诉我们！