如何使用 Divi 的渐变生成器塑造您的图像

图像蒙版通常用于为图像添加有趣的形状。 它们允许图像通过形状窥视，为页面提供独特的设计元素。 使用 Divi 的 Gradient Builder，您不必使用蒙版来创建形状。 相反，您可以使用渐变色标和设置来创建它们！ 在这篇文章中，我们将了解如何使用 Divi 的 Gradient Builder 塑造您的图像，以帮助您为图像添加独特的设计。

让我们开始吧。

预习

首先，让我们看一下我们将在本教程中构建的内容。

第一个例子——圆形图像形状

桌面

药片

电话

第二个例子——线性图像形状

桌面

药片

电话

第三个例子——椭圆形图像

桌面

药片

电话

第四个例子——锥形图像形状

桌面

药片

电话

创建布局

首先，让我们创建将在所有示例中使用的布局。 此布局可用作英雄部分。 它将在一侧包含标题和描述，在另一侧包含图像。 然后，我们将使用该布局和图像作为示例。

自定义部分

首先，创建一个新的 Divi 页面并自定义 Section。 打开该部分的设置并将背景颜色更改为#f0f3fb。

• 背景颜色：#f0f3fb

接下来，转到设计选项卡并在顶部和底部添加 10% 的填充。 关闭设置。

• 填充：10% 顶部，底部

添加一行

接下来，添加一个具有 2/3列和 1/3 列的行。

• 2/3, 1/3 行

转到其设计选项卡。 启用使用自定义装订线宽度并将最大宽度设置为 1480 像素。

• 使用自定义装订线宽度：是
• 最大宽度：1480px

第一列设置

在 Row's Content 选项卡中，打开 Row 第一列的设置，转到 Design 选项卡并在左侧和右侧添加 9% 的Padding 。 关闭列和行设置。

• 填充：9% 左、右

第一个文本模块设置

接下来，将文本模块添加到左列。

为内容文本选择标题 4 并添加您的正文内容。

• 标题：4
• 正文：欢迎来到 Divi

接下来，转到“设计”选项卡。 将 H4 字体设置为 Montserrat，将粗体设置为粗体，将样式设置为 TT，并将颜色设置为 #1d4eff。

• 标题 4 字体：蒙特塞拉特
• 重量：粗体
• 款式：TT
• 颜色：#1d4eff

设置桌面字体大小为 16px，平板电脑大小为 14px，手机大小为 12px。 将字母间距更改为 0.3em，将行高更改为 1.6em。

• 尺寸：16px 桌面，14px 平板，12px 手机
• 字母间距：0.3em
• 线高：1.6em

向下滚动到间距并将底部边距更改为 0px。 关闭模块。

• 边距：0px 底部

第二个文本模块设置

接下来，在第一个模块下添加一个文本模块。

将文本类型设置为标题 1 并添加您的正文内容。

• 标题：1
• 身体：计划你的财务未来

接下来，选择设计选项卡。 将标题字体更改为 Montserrat，将粗体更改为粗体，并将颜色更改为 #0f1154。

• 标题 1 字体：蒙特塞拉特
• 重量：粗体
• 颜色：#0f1154

将桌面的字体大小设置为 80 像素，平板电脑设置为 40 像素，手机设置为 24 像素。 将行高更改为 110%。 关闭模块。

• 尺寸：80px 桌面，40px 平板，24px 手机
• 线高：110%

第三个文本模块设置

接下来，在第二个下添加一个文本模块。

将文本类型保留为段落并添加您的正文内容。

• 标题：段落
• 正文：内容

接下来，转到“设计”选项卡。 将文本字体更改为 Roboto，将粗细设置为中，颜色设置为黑色。

• 文字字体：Roboto
• 重量：中等
• 颜色：#000000

将台式机和平板电脑的大小更改为 18 像素，将手机更改为 14 像素。 将行高设置为 180%。

• 尺寸：18px 桌面，18px 平板，14px 手机
• 线高：180%

最后，向下滚动到间距并将底部边距设置为 0%。 关闭模块的设置。

• 边距：0px 底部

图像模块设置

现在，在右侧的列中添加一个图像模块。

首先，通过单击图像上方的垃圾桶或重置图标来删除虚拟图像。

接下来，向下滚动Background ，选择Image选项卡，然后添加您的图像。 将所有图像设置保留为默认值。 图像一开始不会显示太多。 我们会解决这个问题。

接下来，选择Design选项卡并向下滚动到Spacing 。 对于台式机，添加 -10% 顶部、-30% 左侧、10% 右侧边距。 添加 300 像素的顶部和底部填充。 这些是桌面设置。 我们将对平板电脑和手机进行调整。

• 边距（桌面）：-10% 顶部，-30% 左侧，10% 右侧
• 内边距：顶部 300 像素，底部 300 像素

接下来，我们要确保图像形状是响应式的。 选择平板电脑图标以打开平板电脑和手机的设置。 将鼠标悬停在边距设置上，然后选择出现的平板电脑图标。 这将打开一组选项卡，其中每个设备类型都有一个选项卡。 选择 Tablet 选项卡并将边距更改为 0% Top、0% Left、0% Right Margin。 电话选项卡将遵循平板电脑设置，因此我们无需针对保证金进行调整。

• 边距（平板电脑/手机）：顶部 0%，左侧 0%，右侧 0%

接下来，选择当您将鼠标悬停在填充设置上时出现的平板电脑图标。 选择电话选项卡并将填充更改为 150 像素顶部和 150 像素底部。 平板电脑 Padding 将遵循桌面设置。 关闭模块的设置。

• 内边距：顶部 150 像素，底部 150 像素

使用 Divi 的 Gradient Builder 示例塑造图像

接下来，我们将使用这些设置并使用 Divi 的 Gradient Builder 塑造图像。 正如我们将看到的，一些设置帮助我们使用 Divi 的 Gradient Builder 创建有趣的图像形状。

要记住的一些关键设置包括堆叠渐变停止和设置模式重复。 请务必在所有屏幕尺寸上测试您的图案，以确保您喜欢这种形状。

有关使用 Divi 渐变生成器的更多信息，请在优雅主题博客中搜索“渐变生成器”。 您会找到几篇带有详细教程的帖子，以指导您完成控件和设置。

第一个示例——圆形渐变生成器图像形状

我们的第一个例子给图像一个中心有一个洞的圆形。

打开图像模块的设置并向下滚动到背景。 选择背景渐变选项卡并设置 6 个渐变色标：

• 第一站：0%，#f0f3fb
• 第二：45%，#f0f3fb
• 第三（在第二之上）：45%，rgba(41,196,169,0)
• 第四：69%，rgba(250,255,214,0)
• 第五（在第四之上）：69％，#f0f3fb
• 第六：100%，#f0f3fb

接下来，为渐变类型选择圆形，将位置设置为中心，使用百分比作为单位，并启用将渐变置于背景图像之上。

• 类型：圆形
• 位置：中心
• 单位：百分比
• 在背景图像上方放置渐变：是

第二个例子——线性渐变生成器图像形状

这是第二个图像形状示例。 此示例在图像上放置对角线。

打开设置，将 dowl 滚动到Background ，然后选择Background Gradient 选项卡。 添加四个渐变停止点：

• 第一站：0%，#f0f3fb
• 第二：5%，#f0f3fb
• 第三（在第二之上）：5%，rgba(175,175,175,0)
• 第四：13%，rgba(41,196,169,0)

将渐变类型设置为线性，方向为 150 度。 将其设置为重复。 使用百分比作为单位并启用将渐变放置在背景图像上方。

• 类型：线性
• 方向：150度
• 重复：是
• 单位：百分比
• 在背景图像上方放置渐变：是

第三个示例 - 椭圆渐变生成器图像形状

这是我们的第三个图像形状示例。 这个使用椭圆形。

打开图像模块的设置并向下滚动到背景。 选择背景渐变选项卡并创建四个渐变色标：

• 第一站：0%，#f0f3fb
• 第二：9%，#f0f3fb
• 第三（在第二之上）：9％，rgba（175,175,175,0）
• 第四：21%，rgba(41,196,169,0)

接下来，将渐变类型更改为椭圆并将位置设置为左上角。 选择重复渐变，使用百分比作为单位并启用将渐变置于背景图像之上。

• 类型：椭圆
• 位置：左上
• 重复渐变：是
• 单位：百分比
• 在背景图像上方放置渐变：是

第四个示例 - 锥形渐变生成器图像形状

我们的第四个示例使用 Conical 创建独特的图像形状。

打开图像模块的设置，向下滚动到背景，然后选择背景渐变选项卡。 这个有 5 个梯度停止点：

• 第一站：23%，#f0f3fb
• 第二：35%，#f0f3fb
• 第三（在第二之上）：35%，rgba(41,196,169,0)
• 第四：65%，rgba(250,255,214,0)
• 第五（在第四之上）：65％，#f0f3fb

将渐变类型设置为锥形，并将方向保留为默认设置。 将位置设置为底部，使用百分比作为单位，并启用将渐变置于背景图像之上。

• 类型：锥形
• 方向：180度
• 位置：底部
• 单位：百分比
• 在背景图像上方放置渐变：是

梯度巨石形状结果

所有的布局都很好。 图像形状突出，图像仍然易于理解。 所有这些都是响应式的，因此它们在任何设备上看起来都很棒。

第一个例子——圆形图像形状

桌面

药片

电话

第二个例子——线性图像形状

桌面

药片

电话

第三个例子——椭圆形图像

桌面

药片

电话

第四个例子——锥形图像形状

桌面

药片

电话

结束的想法

这就是我们对如何使用 Divi 的 Gradient Builder 塑造图像的看法。 渐变生成器可以创建一些有趣的图像形状。 使用渐变停止、尝试不同的渐变类型以及启用渐变重复是创建新设计的好方法。 请务必在所有屏幕尺寸上检查您的设计，并在需要时进行调整。

我们希望收到你的来信。 您是否使用过 Divi 的 Gradient Builder 来塑造您的图像？ 请在评论中告诉我们您的体验。