为 Divi 下载 5 个免费边框图像

在为自己或客户构建新网站时，拥有可以使用的额外资源总是很棒的。 这就是为什么我们要确保您每周都会收到新的布局包。 但是还有其他资源也可能派上用场，例如“边框图像”或您可以沿着 Divi 设计元素的一侧或另一侧使用的图像，以增加风格的蓬勃发展。 使用 Divi 的内置选项以及这些边框图像可以带来惊人的效果。 在这篇文章中，我们为您提供了 5 种不同的边框图片，您可以在下方免费下载。 我们将解释如何充分利用这些边框图像并创建令人惊叹的最终结果。

让我们开始吧！

预览

让我们来看看您可以在本文下方进一步下载的不同边框图像。 对于每个形状，您会发现 4 个版本：顶部、底部、左侧和右侧。 这些图像将使您获得与以下前四张图像完全相同的结果：

免费下载图像文件

要获得免费边框图像，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您很快就会成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

方法

• 下载并解压包含所有 5 个边框图像的文件夹后，您将找到 4 个子文件夹：上边框、下边框、左边框和右边框
• 这意味着共有 20 个图像文件可供您使用
• 在这篇文章的后面，您将找到与每个边框边相匹配的随附设置
• 最重要的是，您可以将边框图像与渐变叠加相结合
• 这些颜色叠加将帮助您使图像看起来像您想要的那样充满活力或微妙
• 您可以不受任何限制地自由使用这些边框图像，即使用于商业目的

创建整体设计

添加新部分

间距

让我们从创建用于展示边框图像的整体设计开始。 打开一个新的或现有的页面，添加一个新的常规部分并添加一些自定义填充：

• 顶部填充：300px
• 底部填充：300px

添加新行

列结构

继续使用以下列结构向您的部分添加新行：

浆纱

尚未添加任何模块，打开行设置，转到大小设置并使行全宽。

• 使这一行全宽：是

将标题文本模块添加到第 1 列

添加 H2 内容框

让我们开始添加一些模块吧！ 需要的第一个模块是文本模块。 将一个添加到第一列并将您选择的 H2 副本添加到内容框中。

标题文字设置

然后，对“设计”选项卡中的 H2 文本设置进行一些更改。

• 标题 2 字体：Abril Fatface
• 标题 2 文字大小：80 像素（桌面）、70 像素（平板电脑）、50 像素（手机）

间距

继续在此文本模块的顶部添加一些边距。

• 上边距：150px

将链接文本模块添加到第 1 列

添加链接到内容框

在您刚刚添加的标题文本模块的正下方，继续添加一个新的文本模块。 我们将此文本模块用作按钮，因此请确保添加指向 CTA 的链接。

链接文字设置

接下来，更改“设计”选项卡中的链接文本设置。

• 链接字体粗细：超粗
• 链接字体样式：大写
• 链接文字颜色：#000000
• 链接文字大小：21px

间距

添加一些顶部边距以在此文本模块和前一个文本模块之间留出空间。

• 上边距：100px

边界

最后，为链接文本模块添加一个微妙的底部边框。

• 底部边框宽度：1px
• 底部边框颜色：#333333

将描述文本模块添加到第 2 列

文字设置

第二列只需要描述文本模块。 将内容添加到内容框后，应用以下文本设置：

• 文字大小：22px（桌面）、20px（平板电脑）、18px（手机）
• 文本行高：2.6em
• 文本方向：对齐

浆纱

使 Sizing 设置也匹配不同的屏幕尺寸：

• 宽度：82%（桌面），100%（平板电脑和手机）

间距

最后，添加一些顶部和底部边距。

• 上边距：100px
• 下边距：100px

添加边框形状

左边框背景​​设置

现在我们已经完成了整体设计，我们可以开始添加边框图像了！ 我们将从左边框开始。 在“左边框”文件夹中找到您选择的边框图像并将其上传为部分背景图像。 然后，应用以下背景图像设置：

• 背景图片尺寸：实际尺寸
• 背景图像位置：左中
• 背景图像重复：不重复

右边框背景设置

或者，您可以在“右边框”文件夹中找到您选择的边框图像，并使用以下设置将其添加为部分背景：

• 背景图片尺寸：实际尺寸
• 背景图片位置：中右
• 背景图像重复：不重复

顶部边框背景设置

顶部边框图像也是如此，但使用以下背景设置：

• 背景图片尺寸：实际尺寸
• 背景图片位置：顶部中心
• 背景图像重复：不重复

底部边框背景设置

或者，最后但并非最不重要的一点是，您可以在“底部边框”文件夹中找到底部边框图像，并将其与这些部分背景设置相结合：

• 背景图片尺寸：实际尺寸
• 背景图像位置：底部中心
• 背景图像重复：不重复

使用半透明叠加混合颜色

对于每个包含的边框形状，您还可以决定添加颜色叠加。 此叠加可帮助您使边框图像看起来更微妙。 要添加叠加层，请转到您的部分设置并在边框背景图像的顶部添加渐变背景。

• 颜色 1：#ffffff
• 颜色 2：rgba(255,255,255,0.36)
• 梯度方向：141deg
• 将渐变放在背景图像上方：是

预览

现在我们已经完成了所有步骤，让我们最后看看使用这些免费边框图像可以实现的一些潜在设计。

最后的想法

在这篇文章中，我们分享了 5 张不同的边框图片，您可以免费下载。 您可以将这些边框图像用于您正在处理的任何网站，而不受任何限制。 我们鼓励您尝试所有这些并创造出令人惊叹的设计。 如果您有任何问题或建议，请务必在下方评论区留言！