在设计网站时，您有意识或无意识地做出的第一个决定就是您将为网站提供的颜色样式。 我们当中勇敢的人会敢于选择一个完整的充满活力的调色板，但老实说，这很难实现。 这就是为什么使用浅色或深色布局通常更安全的原因。 在 Divi 库的 Premade Layouts 部分，您可以找到大量明暗布局，您可以在构建任何类型的网站时免费使用它们。 但是，如果您喜欢这种布局，但宁愿使用较深的调色板，反之亦然，该怎么办？
借助 Divi 的效率功能，从浅色到深色的布局包，反之亦然，比以往任何时候都更容易。 在这篇文章中，我们将向您展示如何通过 5 个步骤将浅色布局变为深色。 如果您使用正确的技术，则进行此转换所需的时间非常少。 知道您需要采取的步骤数量将始终取决于您正在处理的布局，但是一旦您掌握了整体方法，您就可以使其适用于您正在处理的任何布局。
让我们开始吧！
预览
只需 5 个步骤，我们就可以将 Web Freelancer Layout Pack 的浅色登录页面更改为深色。
上传网络自由职业者登陆页面
添加新页面并启用 Visual Builder
首先添加一个新页面，给你的页面一个标题，然后切换到 Visual Builder。
上传 Web 自由职业者布局包
在屏幕上显示的三个选项中，选择上传预制布局。
在免费布局包列表中找到 Web Freelancer 布局包的登录页面，然后通过单击“使用此布局”的绿色按钮将其上传。
第 1 步：更改整体背景颜色
更改第一部分的部分背景颜色
是时候开始了！ 我们建议您采取的第一步是更改页面上所有部分的背景颜色。 这样做后，您将很快能够注意到需要更改哪些设计元素以匹配深色背景颜色。 打开页面的第一部分并选择“#0c0c0c”作为部分背景颜色。
将样式扩展到所有部分
添加背景颜色后，右键单击它并单击“扩展背景颜色”选项。
完成后，选择将背景颜色扩展到页面上的所有部分。
第 2 步：更改文本颜色
打开全角标题模块并更改文本颜色
您需要采取的下一步是更改正在使用的文本颜色。 您可能知道也可能不知道，Divi 中有一个默认选项，允许您为页面上的文本选择浅色或深色调色板。 但是，一旦您选择了自定义颜色，此选项就会替换为您选择的自定义颜色。 不要检查每个元素以查看那里是否有自定义颜色，而是继续选择“Light”作为全角标题模块中的文本颜色。
将样式扩展到所有模块
然后，通过右键单击并选择“扩展文本颜色”选项来扩展此浅色文本颜色。
将这种新颜色扩展到整个页面的所有模块。
使用多选功能更改自定义颜色
如前所述，上一步不适用于预先选择的颜色。 例如，切换模块具有自定义标题文本颜色。 无需单独修改每个切换，而是使用键盘上的控制/命令键一次选择所有切换，然后单独单击每个模块。 选择所有这些后，单击设置图标。
现在，您可以将更改同时应用于每个选定的模块。 在这种情况下，我们将标题文本颜色更改为“#848484”。
第 3 步：更改按钮
打开按钮一的全角页眉设置
确保页面上的号召性用语与布局调色板保持匹配非常重要。 在这种情况下，我们有一个在浅色和深色布局上看起来都很棒的按钮模块。 这就是为什么我们也要把它扩展到页面上的其他按钮。 继续并打开全角标题模块并转到按钮一设置。
将按钮样式扩展到页面上的所有按钮
然后，右键单击 Button One 设置并选择“扩展 Button One 样式”选项。
将按钮样式扩展到整个页面的所有按钮。
更改英雄部分中的按钮 2 文本颜色
扩展功能没有到达 Fullwidth Header Module 的第二个按钮，因为它不是一个独立的模块。 这就是为什么我们要打开按钮二设置并将文本颜色更改为“#ffffff”。
将样式扩展到页面上的所有全角标题
为确保此文本颜色应用于页面上的所有全角标题模块，我们还将对其进行扩展。
右键单击文本颜色并选择“扩展按钮两种文本颜色”选项后，继续将其应用于整个页面的所有全角标题。
第 4 步：删除自定义边距并替换为自定义填充
删除自定义边距
切换到深色布局时，删除所有为页面带来空白的自定义边距值也很重要。
很多做跨境电商的朋友往往需要外国人的服务，比如录音、社媒代运营等等。我们整理出来很多低价且高质量的外国人服务商，分享给大家。
fiverr上15美元的海外社媒代运营服务
fiverr上25美元的Twitch设计服务
fiver上10美元的短视频广告投放服务
fiverr上15美元的视频编辑服务
fiverr上20美元的谷歌广告投放服务
fiverr上5美元的谷歌SEO服务
fiverr上10美元的英文文章撰写服务
fiverr上20美元的CMS网站建站服务
fiverr上40美元的手机APP开发服务
fiverr上30美元的linkedin代运营服务
fiverr上10美元的Guest Post做客博文服务
fiverr上15美元的红人营销服务
fiverr上20美元的discord运营服务
fiverr上15美元的社群维护服务
fiverr上10美元的shopify店铺优化服务
改用自定义填充
但是，您可以通过将自定义边距添加为自定义填充来保持之前的距离。
第 5 步：搜索和更改特殊设计设置
确定特殊设计设置
您需要采取的最后一步对于每个布局都非常具体。 布局独有的设计元素也需要更改。 这可以包括但不限于以下一些设置：
- 盒子阴影
- 列背景
- 图标颜色
- 分隔线颜色
- …
在行框阴影颜色上使用查找和替换
对于这个特定的布局，我们需要更改的一件事是正在使用的行框阴影颜色。 打开行设置并右键单击框阴影而不更改它。 然后，选择“查找和替换”选项。
如果您想更改整个页面上的特定颜色代码，使用查找和替换功能是最好的方法。 您可以轻松地将其替换为其他颜色代码，在本例中为“#33302f”。 这将确保您不必探索所有设计元素即可准确查看颜色的使用位置。
手动更改一次性发生设置
但是，布局中也有一次性的重复设计设置。 要更改这些，您必须手动进行。 例如，下面打印屏幕中的行具有页面其他地方未使用的框阴影颜色。 这就是我们手动将其更改为“#33302f”的原因。
预览
让我们在经过五个步骤后，最终看看最终的结果。
最后的想法
在这篇文章中，我们引导您通过 5 个步骤将浅色布局包变为深色。 您需要采取的步骤数量将始终取决于您正在处理的布局，但总体而言，方法保持不变。 如果您有任何问题或建议，请在下面的评论部分告诉我们！
