如何将调色板应用于您的 Divi 网站

已发表: 2021-09-05

互联网上没有什么比乏味的网站更糟糕的了。 当然,有些网站故意追求野蛮或极简主义的外观(看着你的 Craigslist),但即使是那些也不是平淡无奇的。 有一个坚实的调色板是一个万无一失的方法,使您的网站从米色群众中脱颖而出,那些平庸的单色网路商店是按超过IM按。 值得庆幸的是,Divi 为您提供了我们的 Magic Color 系统和 Global Colors 功能的组合。 您可以轻松地将调色板应用到您的 Divi 网站。 结果一定会给您的访客留下深刻印象。

调色板的一般提示

无论将调色板添加到您的 Divi 网站有多么容易,您都必须为您的行业和品牌使用正确的调色板。 如果您已经拥有品牌颜色,那么这些是显而易见的选择。 除了深入了解颜色理论(顺便说一句,这非常有趣)之外,我们还有一些技巧可以帮助您确定从哪里开始新的调色板。

1.决定使用深色或浅色网站

在您将使用的调色板中,您无疑将拥有浅色和深色。 调色板中的对比度是强制性的,因此书面内容不会丢失。

现在,这让我们立即想到了在您的网站上应用调色板时必须问自己的第一个问题; 你想创建一个深色或浅色的网站吗? 仅仅因为您选择了一个并不意味着您不能将它们组合起来,但是做出选择可以帮助您更轻松地选择您的调色板。

2. 颜色选择

理论上,您可以自行确定您希望调色板具有多少种颜色。 没有应用或确定调色板的标准方法。 但是,要在 Divi 中创建良好的颜色平衡,我们建议使用五种颜色。

为了帮助您将具有五种颜色的调色板应用到您的网站,我们选择了一种方法,在展示不同的调色板时,我们将始终将其应用于相同的布局。 但在我们深入研究之前,如果您想遵循我们的方法,让我们看看您的调色板中需要具有的不同类型的颜色。

背景颜色

调色板

确保您选择的背景颜色相互匹配。 您将使用这些彼此接近的背景颜色并获得漂亮的效果; 他们必须有某种和谐。

字体颜色

调色板变化

您需要选择的下一件事是字体颜色。 从逻辑上讲,字体颜色取决于您选择的背景颜色。 如果您选择了浅色背景颜色,请确保您的字体颜色为深色,反之亦然。

超链接和 CTA 颜色

调色板变化

您选择的超链接颜色是使您的网站栩栩如生的颜色之一。 确保此颜色与调色板中的其他颜色不同,因为您将使用它来调用您网站上包含的号召性用语。

最后润色的颜色

调色板变化

最后但并非最不重要的一点是,您可以选择另一种开箱即用的颜色,为您的网站带来色彩。 尽管此颜色不如超链接颜色重要,但它会帮助您完成网站上的色彩平衡。

3. 确保有足够的对比度

如前所述,必须在调色板中的某些颜色之间提供对比。 如果您为网站使用调色板,这种对比将主要帮助您使您共享的书面内容具有可读性。 因为,如果您的内容不易阅读,那么它的目的到底是什么?

4. 找到合适的色彩使用平衡

有多种方法可以确定您希望在调色板中使用特定颜色的频率。 如果您不想让他们对您在网站上使用的颜色感到不知所措,那么创建良好的色彩平衡是必要的。

确保大部分时间在调色板中使用更中性的颜色,并使用其他颜色来突出您提供的内容。

如何为您的 Divi 网站添加调色板

考虑到所有这些,是时候深入研究 Divi 并应用您网站的新调色板了!

默认的 Divi 调色板

首先,进入您的 WordPress 仪表板并转到Divi – 主题选项。 在General选项卡下,您将看到一个名为Color Pickers Default Palette的条目。 这样做的目的是让您可以在任何时候在 Divi 构建器中打开颜色选项时选择想要快速访问的任何 8 种颜色。 默认情况下,这些是许多人使用的鲜艳颜色,但它们不是应该在任何单个网站上使用的完整调色板。

默认调色板

请注意,这不会将颜色应用于您的网站本身。 它仅将它们显示为构建器中的快速选项。

进入 Divi Builder

无论您是否在 Divi 设置中设置调色板,您仍然可以选择将各种颜色应用于您网站上的元素。 为此,请进入 Divi Builder 并将要调整的任何模块的设置输入到新调色板中。

颜色选择器

在任何元素当前选择的颜色下,您将看到省略号图标(三个点) 。 当你点击它时,你会调出 Divi 的 Magic Color 工具。 构建器会考虑您最近使用的颜色和页面本身的颜色,为您提供一系列由互补颜色组成的多个调色板,这些调色板应该可以很好地协同工作。

将颜色设置为全局

一旦决定了要使用的颜色,就可以将它们设置为全局颜色。 全局颜色可以设置为在整个页面上更改,而不管 module 或 element 。 这意味着,如果您想换出 5 种不同的颜色,则不必在该颜色的实例上单独进行 100 次以上。 你会做5次。

首先,使用颜色选择器进入任何模块。 在它下面,您将看到一个名为Global的链接。 单击它,整个调色板就会消失。 从这里,您将通过单击加号 +图标设置要在全局范围内可用的颜色。

全球的

当新选择器出现时,单击绿色复选标记将当前颜色添加为全局选项。

全局颜色

白色圆圈在哪里并不重要。 十六进制值是添加到全局颜色中的值。 您现在将看到加号图标旁边添加的默认颜色。 您可以看到颜色已应用于站点,因为颜色上有水滴形状的图标,而不是通常的圆圈。

水滴意味着全局颜色

此外,您可以右键单击所选颜色并选择“转换为全局”以将其添加到列表中。

div 全局转换

对所选调色板中的每种颜色重复此过程,以便最终将整个调色板保存在全局链接下。 当您将新调色板应用于页面上的所有元素时,这一点非常重要。

应用全局颜色

接下来,要替换页面上所有相同颜色的实例可以全局调整。 您要做的是进入具有您要更改的颜色的元素并右键单击它。 然后,您将从上下文菜单中选择查找和替换不要在此处将此颜色转换为全局颜色。 这是下一步的一部分。

查找和替换

下一个屏幕将是您选择用全局颜色替换该颜色的地方。 确保在“替换为”下单击“全局” ,然后选择要跨页面扩展的全局颜色。 请务必选中“替换每个选项类型中所有找到的值,不限于[插入当前元素类型]”框。 这将确保无论如何,该颜色都会被替换。

查找并替换为全局

现在,您可以编辑该特定的全局颜色,当您这样做时,它的每个实例都会发生变化。 请注意,您没有从调色板中选择新颜色。 那只会交换当前的颜色。 您编辑颜色以在所有位置更改它,因为您已将该单一颜色的每个实例标记为全局。

挑选颜色

您可以使用颜色选择器将其作为一个集合进行编辑。 只需单击液滴即可选择一个新液滴。

编辑颜色

之后,它只是为新调色板中的每种颜色重复该过程。 只需对调色板中的每种颜色进行一次更改。 不是某种颜色的每个特定元素的交换。

包起来

为您的 Divi 网站选择和应用全局调色板从未如此简单。 您可以使用我们的 Magic Color 功能来帮助您选择调色板,然后您可以将其设置为您网站的全局颜色。 完成后,您只需选择要换出的颜色,然后使用 Divi 的内置查找和替换功能在页面上替换这些颜色。 使用此工作流程,您一定会在重新设计各种网站和更改我们的一些免费赠品布局包时节省大量时间。

享受!

文章特色图片由 ART.ICON/shutterstock.com 提供