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

為您的客戶創建配色方案模型是網頁設計過程中的重要一步。 有時，客戶可能已經準備好可用於網站的公司品牌調色板。 但是很多時候，您需要提供一些您認為既適合公司品牌又在其網站上看起來很棒的建議配色方案。

使用 Divi，您可以使用視覺構建器中的查找和替換和顏色建議等設計功能輕鬆更改任何給定頁面佈局的配色方案。 您還可以為您的客戶創建多個版本的頁面（具有不同的配色方案）。

在本教程中，我將引導您完成使用 Divi 為主頁創建新配色方案模型的過程。 希望您能在此過程中學到一些技巧。

讓我們開始吧！

設置您的新頁面

我將在本教程中使用 Business Coach 主頁佈局。 因此，如果您還沒有，請創建一個新頁面，然後部署可視化構建器。 然後選擇“選擇預製佈局”。 從 Add From Library 彈出窗口中，選擇 Business Coach 主頁佈局。

將佈局加載到頁面後，不要忘記發布它。

我們將使用此主頁佈局來創建不同的配色方案模型。 但是現在，我們需要選擇一個新的配色方案。

選擇你的配色方案

您可能已經有一個配色方案，但如果沒有，您可以使用 Divi 的顏色建議或第三方配色方案生成器。 如需更多靈感，您可以瀏覽 Web 以查找適合您所在行業的配色方案。

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

網絡上有一些很棒的第三方（和免費）配色方案生成器，可幫助您為您的網站選擇完美的配色方案。 我最喜歡的一些調色板生成器來自 Coolers.co、Canva 和 Adob​​e。

大多數這些配色方案生成器將生成至少五種顏色。 確保保存了構成新配色方案所需的所有顏色。

使用 Divi 的內置顏色建議創建配色方案

自推出 Divi 的新顏色管理器和神奇顏色建議以來，Divi 會自動跟踪您保存的和最近使用的顏色，在 Divi Builder 中更改顏色選項時可以訪問這些顏色。 您可以通過單擊“已保存”或“最近”選項卡來查看每個調色板。

Divi 還在視覺構建器中內置了一個簡單而智能的顏色建議工具。 我不打算詳細介紹所用算法的所有細節（無論如何我不確定我是否可以），但總的來說，Divi 將根據當前基色（顏色在選項中選擇）。 這將幫助您為您的設計選擇和諧的顏色組合。

要查看顏色建議（或顏色景觀），只需單擊所選顏色選項正下方的顏色景觀圖標（帶有三個點的圖標）。 在那裡，您會找到由您保存的和最近使用的顏色的互補色和類似色生成的調色板，並且每一行都有一個新的擴展配色方案，用於您最近或保存的調色板中的每種顏色。

儘管此顏色建議工具旨在幫助在部分、行和模塊級別進行顏色選擇，但您可以輕鬆地將建議的調色板用作每個頁面的新配色方案。

為 Business Coach 主頁佈局創建配色方案

現在讓我們開始為之前添加到新頁面的 Business Coach 主頁佈局創建新的配色方案模型。 這種預製佈局目前有一個基本的配色方案。 主要顏色顯然是貫穿始終的深藍色。 它也有一些不同的灰色陰影作為強調色。 它們也是用於內容背景的標準白色和用於文本的黑色。 所以你可以想像，如果你用另一種顏色替換那個原深藍色的每個實例，你將擁有一個全新的配色方案。

從可視化構建器中，打開佈局頂部的全角標題設置並找到按鈕一文本顏色。 這是此佈局使用的主要藍色。 現在單擊顏色景觀圖標以查看當前藍色的顏色建議。 它們將在最頂行的調色板中找到。

此時，您可以從調色板中選擇任何顏色以查看新的配色方案，但對於本示例，我將堅持使用生成的第一個顏色。

將您的配色方案保存到默認調色板

為了讓事情變得更加方便，您需要更新新的調色板顏色以替換主題選項中的顏色選擇器默認調色板。 這樣，在其餘的顏色更改過程中，您的顏色將在 Visual Builder 中保存的調色板下可用。

在新選項卡中，導航到 Divi > 主題選項。 您將在“常規”選項卡下看到默認調色板選項。 沒有真正簡單的方法可以復制從我們藍色的顏色建議生成的調色板。 我建議打開你的頁面，在一個窗口中激活可視化構建器，在另一個窗口中打開 Divi 主題選項。 然後將每個顏色代碼複製到默認調色板。

保存設置。

提示：為了方便以後編輯文本和背景，您可能不想替換前兩種默認顏色（黑色和白色），但如果您需要所有顏色插槽，請隨意使用它們。

當前頁面上的默認調色板不會更新，因為它已經繼承了以前的默認調色板。 您需要再次使用佈局創建一個新頁面，才能在設置中查看新保存的調色板。

如果這給您帶來太多不便，您可以選擇僅更新當前頁面的默認調色板。 為此，請打開設置菜單並單擊頁面設置圖標。 然後更新設計選項卡下的調色板。

這將更新整個頁面的調色板，而無需創建另一個頁面。

我選擇更新主題（而不僅僅是頁面）的默認調色板的原因是為了避免必須向我將創建的每個新頁面模型添加新的調色板。

使用查找和替換更新頁面顏色

現在返回到主頁佈局，並激活您的可視化構建器，然後轉到全角標題設置下的按鈕一種文本顏色選項（您之前所在的位置）。 現在您保存的佈局尚未顯示，但沒關係。 確保選擇了原始的深藍色，然後單擊顏色景觀圖標以扇出顏色建議。 這將在頂行顯示我們相同的配色方案。

選擇深棕色 (#54381c)。

然後打開顏色選擇器以查看顏色代碼並通過突出顯示顏色代碼並按 ctrl + C（或 Cmd + C）將顏色代碼複製到剪貼板。

由於我們實際上還不想進行更改，請單擊設置模式底部的紫色撤消按鈕以恢復我們需要替換的原始藍色。

現在右鍵單擊原始藍色，然後單擊“查找和替換”選項。

在“查找和替換”彈出窗口中，在“替換為”下粘貼棕色。 由於我們要替換整個頁面上的顏色，您可以將“內”選項保留為“此頁面”。 確保並選擇“全部替換”選項，以便顏色更改的範圍不僅限於按鈕一文本顏色。 然後點擊替換。

不要忘記保存您的設置。

現在看看新的配色方案。

現在，通過打開設置菜單並單擊“保存到庫”圖標，將佈局保存到您的 Divi 庫中。 為佈局命名為“Brown”，然後單擊“保存到庫”。

這將允許您在新頁面上部署該版本的佈局。

將新的配色方案佈局添加到新頁面

要將使用新棕色配色方案保存的佈局添加到新頁面，首先您需要創建一個新頁面。 然後給你的頁面一個標題（類似“Brown”）並部署可視化構建器。 然後選擇選擇預製佈局。 在從庫加載彈出窗口中，單擊“您保存的佈局”選項卡並選擇您剛剛保存到庫中的新佈局。

不要忘記發布您的頁面。

現在重複創建新頁面並將保存的佈局添加到頁面的相同過程。 這次將您的頁面命名為“紫色”。

將佈局添加到頁面後，請確保發布它。 然後打開可視化構建器並打開全角標題設置並找到按鈕一文本顏色（就像以前一樣）。 現在您應該看到保存的主題調色板已更新為您的新顏色。 這將派上用場。 右鍵單擊顏色選項（當前為深棕色），然後單擊查找和替換。 打開“替換為”下的顏色選擇器，從保存的調色板中選擇一種新顏色。 這次選擇紫色（#5a5ae2）。 然後選擇全部替換選項。 並且不要忘記保存您的設置。

就像魔法一樣，你的頁面有一個紫色的配色方案！

創建高級配色方案頁面模型

使用新的配色方案後，您可能需要在頁面上嘗試多種顏色。 例如，您可以為頁面的每個部分選擇不同的顏色。 這也可以通過“查找和替換”功能輕鬆完成。

對於下一個模型，創建一個新頁面並將您的頁面命名為“Multicolor”。 然後部署可視化構建器，選擇“選擇預製佈局”並將相同（棕色）保存的佈局導入頁面（就像您之前所做的那樣）。 在可視化構建器中，打開 Fullwidth Header 設置並找到 Button One Text Color（就像以前一樣）。 右鍵單擊按鈕一種文本顏色，然後選擇“查找和替換”。 然後更新以下內容：

內：本節
替換為：#0f1f2e
選擇全部替換

然後單擊替換按鈕。

不要忘記保存設置。

這將使用深藍色配色方案更新頂部標題部分。

現在跳過第二部分（它可以保留棕色配色方案）並轉到第三部分。 在該部分底部找到標題為“仍然不確定？ 保持聯繫”。 打開按鈕設置，右鍵單擊按鈕背景顏色，選擇“查找和替換”。

然後更新查找和替換如下：

內：本節
替換為：#366ba2
選擇全部替換

然後點擊替換按鈕。 並且不要忘記保存設置。

跳過第五部分。 然後重複相同的過程，用第一部分中相同的深藍色替換 6 部分（帶有“我曾與之合作過的公司和人員”的部分）中的棕色。 您可以通過在“文本文本顏色”選項下打開帶有大引號文本的文本模塊來執行此操作。

在上一節中，在右欄中找到文本模塊並打開文本模塊設置。 右鍵單擊背景顏色並選擇“搜索和替換”選項。 更新以下內容：

內：本節
替換為：#5a5ae2（紫色）
選擇全部替換

然後單擊替換按鈕並保存設置。

現在你有一個主頁模型，每個部分都有多種顏色。

創建一個菜單來預覽每個配色方案模型

最後一步是創建一個新的主菜單，使客戶可以輕鬆預覽每個配色方案模型。 從您的 WordPress 儀表板，導航到外觀 > 菜單。 然後為您的菜單命名，單擊創建菜單，然後將您創建的頁面添加到新菜單中。 然後確保選擇主菜單作為顯示位置。 然後單擊保存菜單。

現在您有一個網站可以展示您的配色方案模型。

最後的想法

借助 Divi 的設計選項，您可以使用內置的顏色建議和 Visual Builder 的“查找和替換”選項，輕鬆地為頁面佈局部署全新的配色方案。 這將便於為您的客戶展示不同的配色方案模型。 我希望本教程能幫助您為下一個項目找到完美的配色方案。 我期待在評論中收到您的來信。

乾杯!