如何使用Divi 5創建顏色系統

隨機顏色選擇很少導致凝聚力設計。如果您要專業地構建網站，則需要有意的系統。您可以使用顏色管理和設計變量在Divi 5中構建真實的顏色系統。這些是您直接在Visual編輯器中設置​​的顏色，可以在任何顏色字段中訪問，並提供許多其他便利（我們將在下面向您展示）。

這篇文章將向您展示如何在Divi 5中設置靈活的可擴展顏色系統。

什麼是顏色系統？

顏色系統基本上是在您的網站上始終使用的預先計劃的顏色調色板。它有助於所有有意地樣式而不是隨機扔在一起。對於一個好的系統，您通常需要：

• 原色：主要品牌顏色。
• 次要顏色：支持和對比主要。
• 文字顏色：清晰可讀的標題和段落。
• 口音：警報，通知和其他重要內容的其他顏色（可選）。
• 背景顏色：通常是中性或微妙的色彩。

60-30-10規則適用於Web設計中的顏色。通常，中性顏色（如截面背景和負空間）將用於60％的設計，30％的原色以及其餘10％的次級/口音顏色。

如何選擇網站顏色

品牌顏色和網站上使用的顏色並不是要輕易採取的決定。創建有目的的調色板取決於設計師的技能，顏色心理學，行業和品牌差異化。但是，一旦擁有基本顏色和品牌資產（例如徽標變化），就可以開始創建設計系統。

如果您的設計資源有限，則可以執行一些快速任務來為您的網站構建做準備。首先，粗略地閱讀色彩心理學。尋找您要傳達的品牌價值觀（信任，年輕，創新等），並嘗試根據這些價值觀匹配顏色。然後，查看一些您認為適合自己品牌價值的家庭認可的品牌。他們使用什麼顏色？他們如何在網站，廣告和社交帖子中使用它們？

您的公司價值甚至可能取決於您所做的工作類型。鎖匠和水管工必須可靠，因此藍色是傳達這一點的好方法。金融規劃師和園丁從事增長和可持續性（在各自的領域），因此格林在那裡是一個很好的錨點。花農，育兒中心和餐館可以依靠紅色和黃色，將能量和活力與品牌聯繫起來。一旦有了一般的想法，請使用諸如Coolors之類的東西來創建一個簡單的調色板。

在Divi 5中構建您的顏色系統

Divi 5帶有設計變量管理器，這是處理全球顏色的最簡單方法。在其中，您有四種預分配的全球顏色，供您開箱即用。他們是：

1. 原色
2. 次要顏色
3. 標題文字顏色
4. 身體文字顏色

步驟1：將基本顏色定義為變量

在Divi的左側邊欄中，打開設計變量管理器。找到顏色部分，您應該看到這四個不同的默認值。

這四個標籤無法刪除，但是您可以選擇要設置的顏色。除這四個外，您還可以通過單擊“添加全局顏色”按鈕來添加任意多的顏色。繼續並輸入顏色生成器的顏色的十六進制值。

這些變量在Divi的Visual Builder中隨處可見，這非常方便。但是請確保保存它們！

步驟2：創建帶有HSL顏色的陰影和色調

使用Divi的HSL過濾器，我們可以創建色調（顏色的較輕版本）和陰影（顏色的較深版本）。對於這個項目，我們只會為主要和次要顏色做出變化。您可以使用調色板生成器來創建這些顏色變化。

這裡的第一步是創建另一種全局顏色。但是，與其粘貼十六進制值，不如選擇現有顏色來創建變體（陰影和色調）。

現在，我們需要將過濾器應用於該基本顏色以創建變體。單擊“顏色芯片”，然後選擇“過濾顏色”，或單擊“新的相對顏色變量”的顏色色板。

為您的每種顏色變化執行此操作。確保給出您的顏色變化名稱並保存。

例如，由於主要顏色相當深，我們可以添加一些較輕的色調和幾個深色的陰影。當我們將顏色系統應用於頁面設計時，這應該給我很多選擇。

重複上述步驟的次要和/或重音顏色。創建這些變體時，請始終選擇一種基本顏色，然後在其頂部應用過濾器。這樣，如果您改變了原色，這些變化將效仿。

用Divi應用您的顏色

您的變量現在存在。是時候使用它們了。我們將從空白的Divi頁面開始，然後依次朝著設計精美的佈局工作。

步驟1。創建頁面的線框

您可以從線框而不是空白頁開始，這可以幫助您更好地了解顏色系統。一旦了解頁面的一般結構和流程，就可以開始做出設計選擇。您也可以使用Divi的許多預製佈局包或入門網站之一。他們是否已經定義了顏色都沒關係。我們可以輕鬆更改這些。

在此示例中，我們選擇修改諮詢佈局包並使用其主頁佈局。如果您做類似的事情，則可以導入預設。但是，您將需要編輯這些預設中的顏色。為了簡單起見，我們將直接在模塊/元素級別修改樣式。

步驟2。版式和顏色

默認情況下，Divi使用您的全球標題和身體文本顏色，使您的文本清潔和可讀。您總是可以通過更改模塊或預設上的文本顏色來覆蓋這些預定的顏色選擇，但是您不必經常這樣做。

請注意，模塊中的標題顏色如何不設置。 Divi自動為您為標題和正文文本分配了全局顏色。當然，您可以通過選擇其他顏色來覆蓋它。

您可以自定義鏈接可以使它們更明顯並吸引點擊的顏色。

您可能還有其他要樣式的文本，還有其他模塊（除標題和文本模塊外）。諸如聯繫表，倒計時計時器和博客模塊之類的模塊都可能需要獨特地應用顏色。

步驟3。造型按鈕

默認情況下，Divi的按鈕很簡單，並且採用您的主要顏色。但是，如果您想要不同的事情，您就不會被迫做出這個決定。打開模塊的設置面板，導航到“設計”選項卡，然後選擇按鈕。在按鈕設置下，啟用“使用自定義樣式進行按鈕”。將您的背景設置為您選擇的全局顏色，並將按鈕文本視為可讀的顏色，例如白色。

如果您在頁面上有兩個按鈕或多個按鈕，則可以使用輔助顏色或其他口音為輔助按鈕樣式創建一個單獨的按鈕預設。

用色調和/或陰影創建懸停狀態

懸停狀態增加了互動和目的感。使用懸停樣式的早期色調和陰影。在按鈕上實現很明顯，但也可以在其他地方巧妙地使用。

單擊背景顏色選項旁邊的光標圖標以啟用懸停狀態。設置懸停背景顏色。當用戶懸停在按鈕上時，它在視覺上響應，自然引導互動。

步驟4。用顏色預設和梯度創建部分

Divi中的部分默認情況下具有透明的背景。這意味著如果保持不定，它們通常會顯示為白色。您可以通過根據您的主要顏色之一的色調創建中性顏色變化來添加一些陰謀。

這種背景顏色接近黑色，但具有與主顏色相同的基本色調，使其具有微妙的“主題”凝聚力。

您還可以使用顏色變體嘗試梯度。這裡的訣竅是不要使用太多的顏色組合。您需要基於顏色配對和層次結構的紀律嚴明的設計。

此時提醒您。您想將這些顏色配對和決策中的大多數保存到預設中（選項組或元素預設）。一旦通過預設創建並實現了設計中的設計變量，就可以使用設計系統更快地創建後續頁面。這也確保了您在整個網站中使用一致的設計模式。

而且，如果您以後確定顏色略有關閉，則可以調整基本顏色的HSL值，並且該顏色的所有實例（以及所有基於該顏色相對創建的顏色）都會為您而變化。

包裝您的Divi 5顏色系統

周到的顏色系統是網絡設計中最簡單的勝利之一，Divi 5為您提供了使其適合您的工具。只需幾個步驟，您就可以：

• 將您的核心品牌顏色定義為可重複使用的設計變量
• 用HSL濾波器將它們擴展到有用的陰影和色調中
• 在文本，按鈕，表單和部分中始終如一地應用它們
• 將您的選擇保存為預設，以便每個新頁面都遵循相同的規則

收益大於美學。純色系統可創造清晰度，指導訪客採取行動，並使您的品牌在網站的每個角落都具有凝聚力。而且由於Divi中的所有內容都是可變驅動的，因此對基本顏色的一種調整可以立即在整個站點中閃爍。這意味著更少的修補和更有信心，即您的設計隨著擴展而融合在一起。