比較 Divi 漸變生成器中的漸變類型

漸變類型是新的 Divi Gradient Builder 的一部分。 新的 Divi 漸變類型使您能夠為背景添加不同的形狀和顏色。 在這篇文章中，我們將比較這些漸變類型，並向您展示如何使用它們來創建獨特的背景！

讓我們開始吧。

什麼是 Divi 梯度類型？

Divi 的新漸變生成器添加了幾個新的漸變功能，包括漸變類型。 有四種漸變類型可供選擇：

• 線性
• 圓
• 橢圓機
• 錐

每種類型都以不同的方式顯示漸變。 它們用於塑造漸變以顯示為線性顏色圖案、圓形、橢圓形或圓錐形。 我們將在示例中詳細了解這些內容。

漸變類型還受其他控件的影響，例如位置、是否重複、漸變滑塊的測量單位以及將漸變置於背景之上。

每次調整都會對漸變產生很小或很大的影響。 漸變可以是微妙的，也可以是突出的。 只需一次調整即可進行小的或大的更改。

考慮到這一點，讓我們看一些使用每種漸變類型的漸變示例。 我們將展示每種漸變類型的三個示例。 第一個將是您在網絡上看到的標準漸變類型。 接下來的兩個將更具實驗性，只是為了看看可以用漸變類型做什麼。

漸變類型示例

對於漸變類型示例，我使用 Divi 中提供的免費 Bed and Breakfast Layout Pack 的登錄頁面中的 hero 部分。 這部分已經有了漸變，但我們將替換它並做一些實驗。 我們可以刪除原始背景漸變或對其進行修改。 結果是一樣的。 為簡單起見，我將對其進行修改。

我自定義了標題文本，將其從黑色更改為白色。

線性漸變類型

線性漸變顯示漸變，就好像它們在頁面上展開一樣。

第一個線性梯度示例

這是我們的第一個示例。 它在屏幕左側顯示較淺的顏色，在右側顯示較深的顏色，它們之間的過渡平滑。

要創建此示例，請添加兩種顏色。 第一個是 0% 位置的 rgba(92,158,82,0.76)。 第二個是 97% 位置的 rgba(0,10,4,0.76)。

• 顏色 1：rgba(92,158,82,0.76)（在 0% 位置）
• 顏色 2：rgba(0,10,4,0.76)（在 97% 位置）

接下來，將漸變類型更改為線性並將方向設置為 131 度。 有它不重複。 將單位設置為百分比。 將漸變放在背景圖像上方。

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

第二個線性梯度示例

這是第二個線性漸變示例。 它像第一個一樣工作，但它在左邊有一個硬停止，一個較暗的陰影接管。

要創建這個，添加三個漸變色標。 第一個是 rgba(18,76,41,0.76) 在 13% 的位置。 第二個是 rgba(92,158,82,0.76) 在 13% 的位置。 顏色 3在 34% 的位置是 rgba(18,76,41,0.76)。

• 顏色1：rgba(18,76,41,0.76)（在13%位置）
• 顏色 2：rgba(92,158,82,0.76)（在 13% 位置）
• 顏色 3：rgba(18,76,41,0.76)（在 34% 位置）

接下來，將漸變類型設置為線性並將方向設置為 90 度。 有它不重複。 將單位更改為百分比。 將其放在背景圖像上方。

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

第三個線性梯度示例

我們的第三個示例在右上角對角放置了一條淺色線，與一條較暗的顏色線相接觸。

這個有三種顏色。 顏色 1在 13% 的位置是 rgba(92,158,82,0.76)。 顏色 2在 23% 的位置是 rgba(92,158,82,0.76)。 第三個顏色是 rgba(18,76,41,0.76) 在 32% 的位置。

• 顏色1：rgba(92,158,82,0.76)（在13%位置）
• 顏色 2：rgba(92,158,82,0.76)（在 23% 位置）
• 顏色 3：rgba(18,76,41,0.76)（在 32% 位置）

將漸變類型設置為線性，方向為 209 度。 不要重複並將單位設置為百分比。 將漸變放在背景圖像上方。

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

圓形漸變型

圓形漸變類型使用顏色創建一個圓形。

第一個圓形漸變示例

我們的第一個圓形漸變示例在中心放置了淺色，在邊緣放置了深色。

這個有2種顏色。 第一個是 0% 位置的 rgba(92,158,82,0.76)。 第二個是 62% 位置的 rgba(0,10,4,0.76)。

• 顏色 1：rgba(92,158,82,0.76)（在 0% 位置）
• 顏色 2：rgba(0,10,4,0.76)（在 62% 位置）

將漸變類型設置為圓形。 中心方向。 不要重複，將單位更改為百分比，並將其放在背景圖像上方。

• 漸變類型：圓形
• 方向：中心
• 重複：否
• 單位：百分比
• 在背景圖像上方放置漸變：是

第二個圓形漸變示例

此漸變在屏幕中央放置一個清晰的圓形邊緣。

它有四種顏色。 兩種顏色疊加。 第一個是 rgba(18,76,41,0.76) 在 13% 的位置。 第二個是 rgba(92,158,82,0.76) 在 33% 的位置。 顏色 3在 51% 的位置是 rgba(92,158,82,0.76)。 顏色 4是 rgba(18,76,41,0.76)。 它位於顏色 3 上方的 51% 位置。

• 顏色1：rgba(18,76,41,0.76)（在13%位置）
• 顏色 2：rgba(92,158,82,0.76)（在 33% 位置）
• 顏色 3：rgba(92,158,82,0.76)（在 51% 位置）
• 顏色 4：rgba(18,76,41,0.76)（在 51% 位置）

將漸變類型設置為圓形，並將方向放在左上角。 不要重複，將單位更改為百分比，並將其放在背景圖像上方。

• 漸變類型：圓形
• 方向：左上
• 重複：否
• 單位：百分比
• 在背景圖像上方放置漸變：是

第三個圓形漸變示例

這個例子在較暗的顏色中放置了幾個淺色圓圈，從圓圈的中間開始。

這個也是按照一定的順序堆疊兩種顏色來得到這個設計的。 第一種顏色是 13% 位置的 rgba(18,76,41,0.76)。 顏色 2在 44% 的位置是 rgba(18,76,41,0.76)。 第三種顏色疊加在第二種顏色之上。 在 44% 的位置是 rgba(92,158,82,0.76)。 顏色 4在 51% 的位置是 rgba(92,158,82,0.76)。

• 顏色1：rgba(18,76,41,0.76)（在13%位置）
• 顏色 2：rgba(18,76,41,0.76)（在 44% 位置）
• 顏色 3：rgba(92,158,82,0.76)（在 44% 位置）
• 顏色 4：rgba(92,158,82,0.76)（在 51% 位置）

將漸變類型更改為圓形。 將方向放在底部。 有這個重複。 將單位設置為百分比並將漸變放在背景圖像上方。

• 漸變類型：圓形
• 方向：底部
• 重複：是
• 單位：百分比
• 在背景圖像上方放置漸變：是

橢圓漸變型

橢圓漸變將顏色置於橢圓形狀中。

第一個橢圓梯度示例

我們的第一個橢圓示例在屏幕中央放置一個顏色較淺的橢圓，其周圍顏色較深。

這個有兩種顏色。 第一個是 0% 位置的 rgba(92,158,82,0.76)。 第二個是 50% 位置的 rgba(0,10,4,0.76)。

• 顏色 1：rgba(92,158,82,0.76)（在 0% 位置）
• 顏色 2：rgba(0,10,4,0.76)（在 50% 位置）

將漸變類型更改為橢圓。 將方向設置為中心。 讓這個不要重複，將單位設置為百分比，並將其放在背景圖像上方。

• 漸變類型：橢圓
• 方向：中心
• 重複：否
• 單位：百分比
• 在背景圖像上方放置漸變：是

第二個橢圓梯度示例

我們的第二個示例在整個漸變中放置了許多精細的圓形線條。

它有兩種顏色。 第一個是 34pt 位置的 rgba(92,158,82,0.76)。 第二個是 39pt 位置的 rgba(0,10,4,0.76)。

• 顏色 1：rgba(92,158,82,0.76)（在 34pt 位置）
• 顏色 2：rgba(0,10,4,0.76)（在 39pt 位置）

將漸變類型更改為橢圓並將方向設置為左。 有這個重複。 將單位更改為點。 將其放在背景圖像上方。

• 漸變類型：橢圓
• 方向：左
• 重複：是
• 單位：點
• 在背景圖像上方放置漸變：是

第三個橢圓梯度示例

我們的第三個示例在漸變中放置了許多半圓。

這個有兩種顏色。 第一個是 34vmin 位置的 rgba(32,68,35,0.73)。 第二個是 39vmin 位置的 rgba(0,10,4,0.76)。

• 顏色 1：rgba(32,68,35,0.73)（在 34vmin 位置）
• 顏色 2：rgba(0,10,4,0.76)（在 39vmin 位置）

將漸變類型更改為橢圓並將方向設置為頂部。 有這個重複。 將單位更改為視口最小值。 將其放在背景圖像上方。

• 漸變類型：橢圓
• 方向：頂部
• 重複：是
• 單位：視口最小值
• 在背景圖像上方放置漸變：是

錐形漸變型

圓錐漸變類型以圓錐形狀顯示漸變，就好像從上面看到的圓錐一樣。

第一個錐形梯度示例

此示例從漸變中心向左放置一條對角線，一側為淺色，另一側為深色。

它有兩種顏色。 第一個是 0% 位置的 rgba(92,158,82,0.76)。 第二個是 50% 位置的 rgba(0,10,4,0.76)。

• 顏色 1：rgba(92,158,82,0.76)（在 0% 位置）
• 顏色 2：rgba(0,10,4,0.76)（在 50% 位置）

將漸變類型更改為錐形。 將方向設置為 221 度。 將位置居中並使其不再重複。 將漸變放在圖像上方。

• 漸變類型：錐形
• 方向：221度
• 位置：中心
• 重複：否
• 在背景圖像上方放置漸變：是

第二個錐形梯度示例

此示例與上一個示例類似，但它將線從中心向上放置。

這個有四種顏色。 第一個是 rgba(20,40,20,0.76) 在 7% 的位置。 顏色 2在 24% 的位置是 rgba(30,73,25,0.68)。 顏色 3在 65% 的位置是 rgba(103,132,30,0.68)。 第四種顏色是 85% 位置的 rgba(38,86,26,0.68)。

• 顏色 1：rgba(20,40,20,0.76)（在 7% 位置）
• 顏色 2：rgba(30,73,25,0.68)（在 24% 位置）
• 顏色 3：rgba(103,132,30,0.68)（在 65% 位置）
• 顏色 4：rgba(38,86,26,0.68)（在 85% 位置）

將漸變類型設置為圓錐形，方向設置為 0 度。 居中位置。 不要重複並將其放在圖像上方。

• 漸變類型：錐形
• 方向：0度
• 位置：中心
• 重複：否
• 在背景圖像上方放置漸變：是

第三個錐形梯度示例

我們的最後一個示例從漸變的頂部中心向各個方向向外放置一系列線條。

這個有兩種顏色。 第一個是 5° 位置的 rgba(30,73,25,0.68)。 第二個是 7deg 位置的 rgba(20,40,20,0.76)。

• 顏色1：rgba(30,73,25,0.68)（在5度位置）
• 顏色 2：rgba(20,40,20,0.76)（在 7 度位置）

將 eth Gradient Type設置為 Conical，將Direction設置為 221deg。 將位置放在頂部。 重複這個並將其放在背景圖像上方。

• 漸變類型：錐形
• 方向：221度
• 位置：頂部
• 重複：是
• 在背景圖像上方放置漸變：是

結束的想法

這就是我們比較 Divi 的 Gradient Builder 中的漸變類型的看法。 正如您在這些示例中看到的，設置很簡單，但其中任何一個都可以對漸變設計產生重大影響。 為獲得最佳效果，請嘗試具有不同方向和位置的漸變類型，並啟用或禁用重複選項以查看您可以創建的內容。

我們希望收到你的來信。 您是否在 Divi Gradient Builder 中使用過不同的漸變類型？ 請在評論中告訴我們您的體驗。