如何使用 Divi Gradient Builder 輕鬆混合多種漸變顏色

Divi 的新漸變生成器是一個強大的工具，可以創建您想要的任何類型的漸變背景。 它易於使用，您可以添加多種顏色來創建有趣且獨特的漸變。 但是，添加更多顏色可能需要在設計過程中進行更多思考。 在這篇文章中，我們將了解如何使用 Divi Gradient Builder 輕鬆混合多種漸變顏色，以幫助您開始創建自己的多色漸變。

多種漸變顏色預覽

首先，讓我們看一下我們將在本教程中構建的內容。 我們將使用相同的佈局創建四種不同的漸變。

第一個示例結果

第二個示例結果

第三個示例結果

第四個示例結果

組合多種漸變顏色的最佳實踐

與所有設計原則一樣，在組合多種漸變顏色時需要牢記一些事項。 在組合多種漸變顏色以獲得最佳網站外觀和感覺時，請記住以下幾點。

專注於色系

在使用相同顏色的不同色調時保持在相同的顏色系列中。 這樣可以降低背景顏色之間的對比度，從而防止背景變得過於分散注意力。 我們將在第一個示例中使用這種技術。

嘗試柔和的顏色

嘗試相同級別的各種色調的淡化顏色。 這可以為您提供更多顏色，同時保持它們之間的低對比度。 粉彩就是一個很好的例子。 這為您的背景提供了多種顏色，而不會分散前景的注意力。 我們將在第二個示例中使用此方法。

優先考慮易讀性

在您的設計中始終優先考慮易讀性。 使用漸變設計顏色和圖案時，請確保您的內容始終清晰易讀。 一種方法是將漸變推到屏幕的一側。 這允許您設計一個在不妨礙內容的情況下突出的漸變。 我們將在第三個示例中使用此方法。

使用相交和混合漸變

將相交漸變與混合漸變相結合，以創建硬線條和柔和色調。 這可以創建有趣的模式，而不會妨礙您的內容。 嘗試不同的方向和漸變停止點，看看什麼最適合您的佈局。 使用這些設置來創建圓圈、硬線等。 我們還將在第三個示例中使用此方法。

使用不同的漸變類型

嘗試不同的漸變類型以獲得獨特的結果。 例如，錐形是一種很好的漸變類型，可以使用不同的漸變顏色創建獨特的外觀和感覺。 我們將在第四個示例中使用圓錐形。

不要使用太多顏色

不要為了擁有更多顏色而使用更多顏色。 兩到三種顏色通常是理想的，但如果你小心的話，你可以使用更多。 當使用更多顏色時，盡量保持它們相似，這樣它們就會變成陰影而不是形成鮮明的對比。

不要隨意選擇顏色

使用適合您的內容和網站的顏色。 這不僅使您的內容清晰易讀，而且看起來它也屬於網站。

記住用戶體驗

始終考慮用戶體驗。 檢查帶有內容的漸變，看看它的效果如何。 讓幾個用戶查看內容和漸變，以確保它適合他們。

測試你的梯度

通過 a/b 測試嘗試多種類型和顏色的漸變，看看哪種效果最好。

多種漸變顏色示例

現在，讓我們看幾個 Gradient Builder 示例。 對於這些示例，我從 Divi 中提供的免費 Flooring Layout Pack 中調整了 About 頁面中的英雄。 我給了它一個新的背景顏色，#6294d1，和一個新的按鈕顏色，#c1fff4。

• 背景顏色：#6294d1
• 按鈕顏色：#c1fff4

如何使用 Divi Gradient Builder 創建多種漸變顏色

首先，讓我們看看如何在 Divi Gradient Builder 中進行調整。 我們將漸變添加到部分的背景中。 要開始，請單擊該部分的設置圖標。

接下來，向下滾動到Background 。 選擇背景漸變選項卡，然後單擊添加背景漸變。

漸變以兩種顏色開始。 選擇漸變停止欄上的漸變以更改它們的顏色並將它們拖動到新的起始位置。 添加任意數量的漸變。 您可以添加更多、刪除它們、編輯它們等。

調整Type 、 Direction 、 Repeat 、 Unit以及是否希望它覆蓋背景圖像以獲得所需的設計。

有關 Divi Gradient Builder 的詳細概述，請參閱文章 Introducing The Advanced Gradient Builder For Divi。

多種漸變色示例一

對於我們的第一個示例，我們將創建四個漸變色標。 打開背景漸變選項卡並選擇第一個漸變。 將漸變位置保留為 0%，並將漸變顏色更改為 #6294d1。

• 梯度停止第一點位置：0%
• 顏色：#6294d1

接下來，通過單擊漸變色標欄添加新的色標。 將其漸變位置移動到 29% 並將其顏色更改為#b5bfd1，

• 梯度停止第二點位置：29%
• 顏色：#b5bfd1

接下來，添加第三個 Gradient Stop並將其Position移動到 84%。 將其顏色更改為#8eacd1。

• 梯度停止第三點位置：84%
• 顏色：#8eacd1

最後，將第四個漸變色標的顏色更改為#b5bfd1。 我們將這個梯度位置保留為 100%。

• 梯度停止第四點位置：100%
• 顏色：#b5bfd1

接下來，我們將調整漸變的設置。 將方向更改為 225 度。 將其餘設置保留為默認值。 我將在此處包含這些設置，以便您查看它們。 您現在可以關閉模塊的設置並保存您的工作。

• 類型：線性
• 方向：225度
• 重複梯度：否
• 梯度單位：百分比
• 在背景圖像上方放置漸變：否

多種漸變色示例二

對於我們的第二個示例，我們將創建三個漸變色標。 打開背景漸變設置並將第一個漸變停止的顏色更改為#bffffc。 將其位置保留為 0%。

• 第一梯度停止位置：0%
• 顏色：#bffffc

添加一個新的漸變色標並將其位置移動到 42%。 將其顏色更改為#bbc7f9。

• 第二梯度停止位置：42%
• 顏色：#bbc7f9

接下來，將第三個漸變色標的顏色更改為#adbdd1。 我們將其梯度位置保留為 100%。

• 第三梯度停止位置：100%
• 顏色：#adbdd1

接下來，將漸變類型更改為圓形。 將其餘設置保留為默認值。 這會在該部分的中心創建一個熱點。 關閉您的設置並保存您的工作。

• 漸變類型：圓形

多種漸變色示例三

對於我們的第三個示例，我們將使用三個漸變色標來構建漸變。 將第一個漸變的位置移動到 15%，並將其顏色更改為#afc3ed。

• 第一梯度停止位置：15%
• 顏色：#afc3ed

接下來，將第二個漸變色標移至 33%，並將其顏色更改為 #adbdd1。

• 第二梯度停止位置：33%
• 顏色：#bffffc

接下來，將第三個漸變色標移動到 33%，直接位於第二個漸變色標的上方，並將其顏色更改為 #adbdd1。 看起來您在漸變停止欄上有兩個漸變。

• 第三梯度停止位置：33%
• 顏色：#adbdd1

這將有一個有趣的拱門，我們將使用設置創建它。 將漸變類型更改為圓形，將漸變位置更改為右。 關閉設置並保存您的工作。

• 類型：圓形
• 位置：右

多種漸變色示例四

我們的第四個例子包括五個梯度停止。 對於第一個漸變停止，將顏色更改為 #878ebc。 將此位置保留為 0%。

• 第一梯度停止位置：0%
• 顏色：#878ebc

在 22% 的位置添加第二個漸變色標。 將其顏色更改為#a0c1d6。

• 第二梯度停止位置：22%
• 顏色：#a0c1d6

接下來，在 48% 的位置添加第三個漸變色標。 將其顏色更改為#bffffc。

• 第三梯度停止位置：48%
• 顏色：#bffffc

對於我們的第四個漸變停止，將其放置在 73% 位置並將其顏色更改為#d3d8ff。

• 第四梯度停止位置：73%
• 顏色：#d3d8ff

對於第五個漸變停止，將其移動到 77% 位置並將顏色更改為 #c6dfff。

• 第五梯度停止位置：77%
• 顏色：#c6dfff

最後，將漸變類型更改為圓錐形，並將漸變方向更改為 233 度。 關閉設置並保存您的工作。

• 類型：錐形
• 方向：233度

多種漸變顏色結果

第一個示例結果

第二個示例結果

第三個示例結果

第四個示例結果

結束對多種漸變顏色的思考

這就是我們對如何使用 Divi Gradient Builder 輕鬆混合多種漸變顏色的看法。 漸變生成器玩起來很有趣。 您可以根據需要添加任意數量的顏色，但您需要遵循一些簡單的設計原則才能使它們看起來很棒。 這些示例展示了使用三到五種顏色來構建漸變，同時使它們與您的網站設計相得益彰是多麼容易。

我們希望收到你的來信。 您是否使用這些方法通過 Divi 的新漸變生成器創建多種漸變顏色？ 請在評論中告訴我們您的體驗。