spot_img
HomeDivi主题使用教程如何使用 Divi 创建页面的不同配色方案模型

如何使用 Divi 创建页面的不同配色方案模型

为您的客户创建配色方案模型是网页设计过程中的重要一步。 有时,客户可能已经准备好可用于该网站的公司品牌调色板。 但很多时候,您需要提供一些您认为既适合公司品牌又在其网站上看起来很棒的配色方案建议。

使用 Divi,您可以使用视觉构建器中的查找和替换以及颜色建议等设计功能轻松更改任何给定页面布局的配色方案。 您还可以为您的客户创建一个页面的多个版本(具有不同的配色方案)。

在本教程中,我将引导您完成使用 Divi 为主页创建新配色方案模型的过程。 希望您在此过程中学到一些技巧。

让我们开始吧!

设置您的新页面

我将在本教程中使用 Business Coach 主页布局。 因此,如果您还没有,请创建一个新页面,并部署可视化构建器。 然后选择“选择预制布局”。 从 Add From Library 弹出窗口中,选择 Business Coach 主页布局。

谷歌SEO优化服务

迪维配色方案

布局加载到页面后,不要忘记发布它。

我们将使用此主页布局来创建不同的配色方案模型。 但是现在,我们需要选择一个新的配色方案。

选择你的配色方案

您可能已经想到了配色方案,但如果没有,您可以使用 Divi 的配色建议或第三方配色方案生成器。 如需更多灵感,您可以浏览 Web 以查找适合您所在行业的配色方案。

使用第三方配色方案生成器创建您的配色方案

网络上有一些出色的第三方(和免费)配色方案生成器,可帮助您为网站选择完美的配色方案。 我最喜欢的一些调色板生成器来自 Coolers.co、Canva 和 Adob​​e。

WordPress divi主题

大多数这些配色方案生成器将生成至少五种颜色。 确保保存构成新配色方案所需的所有颜色。

使用 Divi 的内置颜色建议创建配色方案

自推出 Divi 的新色彩管理器和神奇色彩建议以来,Divi 会自动跟踪您保存的和最近使用的颜色,在 Divi Builder 中更改颜色选项时可以访问这些颜色。 您可以通过单击“已保存”或“最近”选项卡来查看每个调色板。

迪维配色方案

Divi 还在视觉生成器中内置了一个简单而智能的颜色建议工具。 我不打算详细介绍所用算法的所有细节(不确定我是否可以),但一般来说,Divi 将根据当前基色(颜色在选项中选择)。 这将帮助您为您的设计选择和谐的色彩组合。

要查看颜色建议(或颜色景观),只需单击所选颜色选项正下方的颜色景观图标(带有三个点的图标)。 在那里,您会发现调色板是由您保存的和最近使用的颜色的互补色和类似色生成的,并且每一行都有一个新的扩展配色方案,用于您最近或保存的调色板中的每种颜色。

迪维配色方案

虽然此颜色建议工具旨在帮助在节、行和模块级别选择颜色,但您可以轻松地将建议的调色板用作每个页面的新配色方案。

为 Business Coach 主页布局创建配色方案

现在让我们开始为我们之前添加到新页面的 Business Coach 主页布局创建新的配色方案模型。 这个预制布局目前有一个基本的配色方案。 主色显然是贯穿始终的深蓝色。 它也有一些不同深浅的灰色作为强调色。 它们也是内容背景的标准白色和用于文本的黑色。 因此,您可以想象,如果将深蓝色原色的每个实例都替换为另一种颜色,您将拥有全新的配色方案。

在可视化构建器中,打开布局顶部的全角标题设置,然后找到 Button One Text Color。 这是此布局使用的主要蓝色。 现在单击颜色景观图标以查看当前蓝色的颜色建议。 它们位于最顶行的调色板中。

迪维配色方案

H10的年终大促

此时您可以从调色板中选择任何颜色以查看新的配色方案,但对于本例,我将坚持使用第一个生成的颜色。

将配色方案保存到默认调色板

为了让事情变得更方便,您需要更新新的调色板颜色以替换主题选项中的颜色选择器默认调色板。 这样,您的颜色将在 Visual Builder 中保存的调色板下可用,贯穿您的其余颜色更改。

在新选项卡中,导航至 Divi > 主题选项。 您将在“常规”选项卡下看到默认的调色板选项。 没有真正简单的方法来复制从我们的蓝色颜色建议生成的调色板。 我建议打开您的页面,在一个窗口中激活可视化构建器,在另一个窗口中激活 Divi 主题选项。 然后将每个颜色代码复制到默认调色板。

迪维配色方案

保存设置。

提示:您可能不想为了以后编辑文本和背景的方便而替换前两种默认颜色(黑色和白色),但如果您需要所有颜色槽,请随意使用它们。

默认调色板不会在您的当前页面上更新,因为它已经继承了以前的默认调色板。 您将需要再次创建一个带有布局的新页面,才能在您的设置中看到新保存的调色板。

如果这给您带来太多不便,您可以选择仅更新当前页面的默认调色板。 为此,请打开设置菜单并单击“页面设置”图标。 然后更新设计选项卡下的调色板。

迪维配色方案

这将更新整个页面的调色板,而无需创建另一个页面。

高质量外链购买

我选择更新主题(而不仅仅是页面)的默认调色板的原因是为了避免必须向我将创建的每个新页面模型添加新的调色板。

使用查找和替换来更新页面颜色

现在回到主页布局,您的视觉构建器处于活动状态,然后转到全角标题设置下的“按钮一个文本颜色”选项(与之前相同的位置)。 现在您保存的布局尚未显示,但没关系。 确保选择了原始的深蓝色,然后单击颜色景观图标以展开颜色建议。 这将在顶行显示我们相同的配色方案。

选择深棕色 (#54381c)。

迪维配色方案

然后打开颜色选择器查看颜色代码,并通过突出显示颜色代码并按 ctrl + C(或 Cmd + C)将其复制到剪贴板。

JasperAI 10000字免费额度试用

迪维配色方案

由于我们实际上还不想进行更改,请单击设置模式底部的紫色撤消按钮以恢复我们需要替换的原始蓝色。

迪维配色方案

现在右键单击原始蓝色,然后单击“查找和替换”选项。

迪维配色方案

在“查找和替换”弹出窗口中,粘贴“替换为”下的棕色。 由于我们要替换整个页面的颜色,可以将“Within”选项保留为“This Page”。 确保并选择“全部替换”选项,以便颜色更改的范围不仅限于按钮一个文本颜色。 然后单击替换。

迪维配色方案

不要忘记保存您的设置。

现在检查新的配色方案。

迪维配色方案

WordPress花园粉丝福利

想做跨境电商独立站但是没什么钱?可以免费试用Shopline智能建站工具,一个月都不要一顿火锅的钱!(这里就可以在线申请!) 或者扫描下方二维码
shopline

现在继续,通过打开设置菜单并单击“保存到库”图标将布局保存到您的 Divi 库。 为布局命名,例如“Brown”,然后单击“保存到库”。

迪维配色方案

这将允许您在新页面上部署该版本的布局。

将新的配色方案布局添加到新页面

要将使用新的棕色配色方案保存的布局添加到新页面,首先您需要创建一个新页面。 然后给你的页面一个标题(比如“棕色”)并部署可视化构建器。 然后选择选择预制布局。 在“从库中加载”弹出窗口中,单击“您保存的布局”选项卡并选择您刚刚保存到库中的新布局。

迪维配色方案

不要忘记发布您的页面。

现在重复创建新页面并将保存的布局添加到页面的相同过程。 这次将您的页面命名为“紫色”。

将布局添加到页面后,确保发布它。 然后打开可视化构建器并打开 Fullwidth Header 设置并找到 Button One Text Color(就像之前一样)。 现在您应该看到保存的主题调色板已更新为您的新颜色。 这会派上用场。 右键单击颜色选项(当前为深棕色),然后单击查找和替换。 打开“替换为”下的颜色选择器,从保存的调色板中选择一种新颜色。 这次选择紫色 (#5a5ae2)。 然后选择全部替换选项。 并且不要忘记保存您的设置。

迪维配色方案

就像魔术一样,您的页面有一个紫色配色方案!

迪维配色方案

创建高级配色方案页面模型

有了新的配色方案,您可能想在页面上尝试多种颜色。 例如,您可以为页面的每个部分选择不同的颜色。 这也可以通过“查找和替换”功能轻松完成。

对于下一个模型,创建一个新页面并将页面命名为“多色”。 然后部署可视化构建器,选择“选择预制布局”并将相同(棕色)保存的布局导入页面(就像之前一样)。 在可视化构建器中,打开 Fullwidth Header 设置并找到 Button One Text Color(就像之前一样)。 右键单击按钮一种文本颜色,然后选择“查找和替换”。 然后更新以下内容:

内:本节
替换为:#0f1f2e
选择全部替换

然后点击…

5分钟生成10篇英文软文article forge软件试用
siteground

【WordPress花园提醒您】如果想购买国外正版WordPress主题和插件,您需要一张VISA信用卡才能支付,这里我们推荐光大银行信用卡!赶快免费申请,别耽误了买插件哦!

guangda
WordPress花园官方账号
WordPress花园隶致力于为广大跨境电商和独立站爱好者提供优质的WordPress教程、Woocommerce教程、Facebook、Twitter、tiktok、Instagram教程和谷歌SEO教程等资料和对应的建站推广服务。关注‘哟派出海’公众号了解最新资讯。粉丝福利:Shopline免费独立站建设14天优惠 商务合作: [email protected]om
RELATED ARTICLES