你想使用 Gradient Builder Divi 但你不知道该选择哪种类型的渐变？
渐变类型是新的一部分 Divi 渐变生成器 。 新型渐变 Divi 允许您向背景添加不同的形状和颜色。
在本文中，我们将比较这些类型的渐变，并向您展示如何使用它们来创建独特的背景！
让我们开始。
Divi 渐变类型有哪些？
Divi 的新渐变生成器添加了几个新的渐变功能，包括渐变类型。 有四种类型的渐变可供选择：
- 线性的
- 圆
- 椭圆形
- 锥
每种类型都以不同的方式显示渐变。 它们用于塑造渐变以显示为线性颜色图案、圆形、椭圆形或圆锥形。 我们将在示例中详细了解它们。
渐变类型还受其他控件的影响，例如位置、是否重复、渐变滚动条的度量单位以及渐变在背景上方的位置。
每次调整都会对渐变产生很小或很大的影响。 渐变可以是微妙的或突出的。 只需一次调整即可进行大小更改。
考虑到这一点，让我们看一些使用每种渐变类型的渐变示例。 我们将展示每种渐变类型的三个示例。
第一个是您将在网络上看到的标准渐变类型。 接下来的两个将更具实验性，只是为了看看你可以用渐变类型做什么。
渐变类型示例
渐变类型的例子，我们使用首页的Hero部分 免费的床和早餐布局包 在 Divi 中可用。 这部分已经有了渐变，但我们将替换它并做一些实验。
我们可以删除原始背景渐变或对其进行修改。 结果是一样的。 为简单起见，我们将对其进行修改。
我们通过将标题文本从黑色更改为白色来自定义标题文本。
线性渐变型
另请参阅： Divi：如何在背景图像上使用图案混合
线性渐变显示渐变，就好像它散布在页面上一样。
线性渐变类型的第一个示例
这是我们第一个示例的预览。 它在屏幕左侧显示较浅的颜色，在右侧显示较深的颜色，它们之间的过渡平滑。
要创建此示例，请添加两种颜色。 这 总理 是 rgba(92,158,82,0.76) 在 0% 的位置。 这 第二 在 0,10,4,0.76% 的位置是 rgba(97)。
- 梯度停止：
- 0%：RGBA(92,158,82,0.76)
- 97%：RGBA(0,10,4,0.76)
然后更改 Type 渐变为线性并设置 方向性 超过 131 度。 他 不要重复. 设置团结 关于百分比。 将渐变放在背景图像上方。
- 渐变类型：线性
- 渐变方向：131度
- 重复梯度：否
- 梯度单位：百分比
- 背景图像上方的方形渐变：是
线性渐变类型的第二个例子
这是第二个线性渐变示例的预览。 它像第一个一样工作，但它在左侧有一个硬停止，在那里较暗的阴影接管了。
要创建这个，添加三个渐变色标。 这 总理 是 rgba(18,76,41,0.76) 在 13% 的位置。 这 第二 在 92,158,82,0.76% 的位置是 rgba(13)。 颜色 3 在 18,76,41,0.76% 的位置是 rgba(34)。
- 梯度停止：
- 13%：RGBA(18,76,41,0.76)
- 13%：RGBA(92,158,82,0.76)
- 34%：RGBA(18,76,41,0.76)
然后设置 Type 渐变为线性并设置 方向性 超过 90 度。 他 不要重复 . 更改团结 百分比。 将其放在背景图像上方。
- 渐变类型：线性
- 渐变方向：90度
- 重复梯度：否
- 梯度单位：百分比
- 背景图像上方的方形渐变：是
线性渐变类型的第三个例子
我们的第三个示例在右上角对角放置一条浅色线，与深色线接触。
这个有三种颜色。 颜色 1 在 92,158,82,0.76% 的位置是 rgba(13)。 颜色 2 是 rgba(92,158,82,0.76) 在 23% 的位置。 这 第三种颜色 在 18,76,41,0.76% 的位置是 rgba(32)。
- 梯度停止：
- 13%：RGBA(92,158,82,0.76)
- 23%：RGBA(92,158,82,0.76)
- 32%：RGBA(18,76,41,0.76)
定义 Type 渐变到线性 方向 209 度。 出生 不要重复 并设置团结 关于百分比。 将渐变放在背景图像上方。
- 渐变类型：线性
- 渐变方向：209度
- 重复梯度：否
- 梯度单位：百分比
- 背景图像上方的方形渐变：是
圆形渐变型
圆形渐变类型使用颜色创建一个圆形。
圆形渐变类型的第一个示例
我们的第一个圆形渐变示例在中心放置了浅色，在边缘放置了深色。
这个有2种颜色。 这 总理 是 rgba(92,158,82,0.76) 在 0% 的位置。 这 第二 在 0,10,4,0.76% 的位置是 rgba(62)。
- 梯度停止：
- 0%：RGBA(92,158,82,0.76)
- 62%：RGBA(0,10,4,0.76)
定义 Type 圆形渐变。 居中 方向 . 确保他 不要重复 , 改变团结 作为百分比并将其放在背景图像上方。
- 渐变类型：圆形
- 渐变位置：中心
- 重复梯度：否
- 梯度单位：百分比
- 背景图像上方的方形渐变：是
圆形渐变类型的第二个例子
此渐变在屏幕中央放置一个清晰的圆形边缘。
它有四种颜色。 两种颜色叠加。 这 总理 是 rgba(18,76,41,0.76) 在 13% 的位置。 这 第二 在 92,158,82,0.76% 的位置是 rgba(33)。 颜色 3 在 92,158,82,0.76% 的位置是 rgba(51)。 颜色 4 是 rgba(18,76,41,0.76)。 它位于颜色 51 上方的 3% 位置。
- 梯度停止：
- 13%：RGBA(18,76,41,0.76)
- 33%：RGBA(92,158,82,0.76)
- 51%：RGBA(92,158,82,0.76)
- 51%：RGBA(18,76,41,0.76)
定义 Type 渐变到圆形并放置 方向性 在左上角。 确保他 不要重复 , 改变 团结 作为百分比并将其放在背景图像上方。
- 渐变类型：圆形
- 渐变位置：左上角
- 重复梯度：否
- 梯度单位：百分比
- 背景图像上方的方形渐变：是
圆形渐变类型的第三个例子
此示例将几个浅色圆圈置于最暗的颜色中，从圆圈的中间开始。
这一款也是按照一定的顺序叠加两种颜色来实现这个设计的。 这 首映 颜色是 rgba(18,76,41,0.76) 在 13% 的位置。 颜色 2 是 rgba(18,76,41,0.76) 在 44% 的位置。 这 troisième 颜色与第二种颜色重叠。 这是 92,158,82,0.76% 位置的 rgba(44)。 颜色 4 在 92,158,82,0.76% 的位置是 rgba(51)。
- 梯度停止：
- 13%：RGBA(18,76,41,0.76)
- 44%：RGBA(18,76,41,0.76)
- 44%：RGBA(92,158,82,0.76)
- 51%：RGBA(92,158,82,0.76)
更改 渐变型 在圆形。 放置 方向 在底部。 重复 这个。 设置团结 在百分比上并将渐变放在背景图像上方。
- 渐变类型：圆形
- 渐变位置：底部
- 重复梯度：是
- 梯度单位：百分比
- 背景图像上方的方形渐变：是
椭圆渐变型
椭圆渐变将颜色置于椭圆的形状中。
椭圆渐变类型的第一个示例
我们的第一个椭圆示例在屏幕中央放置了一个浅色椭圆，其周围颜色较深。
这个有两种颜色。 这 总理 是 rgba(92,158,82,0.76) 在 0% 的位置。 这 第二 在 0,10,4,0.76% 的位置是 rgba(50)。
- 梯度停止：
- 0%：RGBA(92,158,82,0.76)
- 50%：RGBA(0,10,4,0.76)
更改 渐变型 在椭圆。 设置 方向 在中心。 确保这个 不要重复 , 调整团结 百分比并将其放在背景图像上方。
- 渐变类型：椭圆
- 渐变位置：中心
- 重复梯度：否
- 梯度单位：百分比
- 背景图像上方的方形渐变：是
椭圆渐变类型的第二个例子
我们的第二个示例在整个渐变中放置了许多细圆形线。
它有两种颜色。 这 总理 在 92,158,82,0.76pt 位置是 rgba(34)。 这 第二 是 rgba(0,10,4,0.76) 在位置 39pt。
- 梯度停止：
- 34pt: RGBA(92,158,82,0.76)
- 39pt: RGBA(0,10,4,0.76)
更改 Type 渐变到椭圆并调整 方向性 在左边。 有这个在 重复. 更改团结 以点为单位。 将其放在背景图像上方。
- 渐变类型：椭圆
- 渐变位置：右
- 重复梯度：是
- 渐变单位：点（pt）
- 背景图像上方的方形渐变：是
椭圆渐变类型的第三个例子
我们的第三个示例在渐变中放置了很多半圆。
这个有两种颜色。 这 总理 是 rgba(32,68,35,0.73) 在位置 34vmin。 这 第二 在 0,10,4,0.76vmin 位置是 rgba(39)。
- 梯度停止：
- 34vmin: RGBA(32, 68, 35, 0.73)
- 39vmin: RGBA(0,10,4,0.76)
更改 Type 渐变到椭圆并调整 方向性 在高。 有这个在 重复. 更改单元 在视口最小值中。 将其放在背景图像上方。
- 渐变类型：椭圆
- 渐变位置：顶部
- 重复梯度：是
- 渐变单位：视口最小值 (vmin)
- 背景图像上方的方形渐变：是
锥形渐变型
也可以看看： Divi：如何在元素之间创建背景过渡
圆锥渐变类型将渐变显示为圆锥，就好像从上面看圆锥一样。
锥形渐变类型的第一个示例
此示例从渐变中心向左放置一条对角线，一侧为浅色，另一侧为深色。
它有两种颜色。 这 总理 是 rgba(92,158,82,0.76) 在 0% 的位置。 这 第二 在 0,10,4,0.76% 的位置是 rgba(50)。
- 梯度停止：
- 0%：RGBA(92,158,82,0.76)
- 50%：RGBA(0,10,4,0.76)
更改 渐变型 在圆锥形。 调整 方向 超过221度。 居中 位置 et 不要重复 . 将渐变放在图像上方。
- 渐变类型：锥形
- 渐变方向：221度
- 位置：中心
- 重复梯度：否
- 背景图像上方的方形渐变：是
锥形渐变类型的第二个例子
此示例与上一个示例类似，但将中心线放置在上方。
这个有四种颜色。 这 总理 在 20,40,20,0.76% 的位置是 rgba(7)。 颜色 2 在 30,73,25,0.68% 的位置是 rgba(24)。 颜色 3 是 rgba(103,132,30,0.68) 在 65% 的位置。 这 第四 颜色是 rgba(38,86,26,0.68) 在 85% 的位置。
- 梯度停止：
- 7%：RGBA(20,40,20,0.76)
- 24%：RGBA(30,73,25,0.68)
- 65%：RGBA(103,132,30,0.68)
- 85%：RGBA(38,86,26,0.68)
定义 渐变型 在圆锥和 方向 在 0 度。 居中 位置 . 出生 不要重复 并将其放在图像上方。
- 渐变类型：锥形
- 渐变方向：0度
- 位置：中心
- 重复梯度：否
- 背景图像上方的方形渐变：是
锥形渐变类型的第三个例子
我们的最后一个示例从渐变的顶部中心向各个方向向外放置一系列线条。
这个有两种颜色。 这 总理 在 30,73,25,0.68 度位置是 rgba(5)。 这 第二 在 20,40,20,0.76 度位置是 rgba(7)。
- 梯度停止：
- 5度：RGBA（30,73,25,0.68）
- 7度：RGBA（20,40,20,0.76）
设置 渐变类型 在圆锥形和 方向性 在 221 度。 放置 位置 以上。 重复 这个并将其放在背景图像上方。
- 渐变类型：锥形
- 渐变方向：221度
- 位置：顶部
- 重复梯度：是
- 背景图像上方的方形渐变：是
立即下载 DIVI！！！
结论
这是我们在 Divi 的 Gradient Builder 中对渐变类型的比较。
从这些示例中可以看出，设置很简单，但其中任何一项都可以对渐变的设计产生重大影响。
为获得最佳效果，请尝试具有不同方向和位置的渐变类型，并打开或关闭重复选项以查看您可以创建的内容。
我们希望本教程能激发您的下一个 Divi 项目。 如果您有任何疑虑或建议，请联系我们 评论部分 讨论一下。
您也可以咨询 我们的资源，如果您需要更多元素来执行创建Internet网站的项目。
不要犹豫，也请咨询我们的指南 WordPress博客创建 或者那个 Divi：有史以来最好的WordPress主题.
但与此同时， 在您不同的社交网络上分享此文章.
...
