如何將調色板應用於您的 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的鏈接。 單擊它,整個調色板就會消失。 從這裡,您將通過單擊加號 +圖標設置要在全局範圍內可用的顏色。
當新選擇器出現時,單擊綠色複選標記將當前顏色添加為全局選項。
白色圓圈在哪裡並不重要。 十六進制值是添加到全局顏色中的值。 您現在將看到加號圖標旁邊添加的默認顏色。 您可以看到顏色已應用於站點,因為顏色上有水滴形狀的圖標,而不是通常的圓圈。
此外,您可以右鍵單擊所選顏色並選擇“轉換為全局”以將其添加到列表中。
對所選調色板中的每種顏色重複此過程,以便最終將整個調色板保存在全局鏈接下。 當您將新調色板應用於頁面上的所有元素時,這一點非常重要。
應用全局顏色
接下來,要替換頁面上所有相同顏色的實例可以全局調整。 您要做的是進入具有您要更改的顏色的元素並右鍵單擊它。 然後,您將從上下文菜單中選擇查找和替換。 不要在此處將此顏色轉換為全局顏色。 這是下一步的一部分。
下一個屏幕將是您選擇用全局顏色替換該顏色的地方。 確保在“替換為”下單擊“全局” ,然後選擇要跨頁面擴展的全局顏色。 請務必選中“替換每個選項類型中所有找到的值,不限於[插入當前元素類型]”框。 這將確保無論如何,該顏色都會被替換。
現在,您可以編輯該特定的全局顏色,當您這樣做時,它的每個實例都會發生變化。 請注意,您沒有從調色板中選擇新顏色。 那隻會交換當前的顏色。 您編輯顏色以在所有位置更改它,因為您已將該單一顏色的每個實例標記為全局。
您可以使用顏色選擇器將其作為一個集合進行編輯。 只需單擊液滴即可選擇一個新液滴。
之後,它只是為新調色板中的每種顏色重複該過程。 只需對調色板中的每種顏色進行一次更改。 不是交換某種顏色的每個特定元素。
包起來
為您的 Divi 網站選擇和應用全局調色板從未如此簡單。 您可以使用我們的 Magic Color 功能來幫助您選擇調色板,然後您可以將其設置為您網站的全局顏色。 完成後,您只需選擇要換出的顏色,然後使用 Divi 的內置查找和替換功能在頁面上替換這些顏色。 使用此工作流程,您一定會在重新設計各種網站和更改我們的一些免費贈品佈局包時節省大量時間。
享受!
文章特色圖片由 ART.ICON/shutterstock.com 提供