spot_img
HomeDivi主题使用教程为 Divi 下载 5 个免费的边框图像

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

spot_img

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

让我们开始吧!

预览

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

边框形状

免费下载图像文件

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

WordPress divi主题

方法

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

创建整体设计

添加新部分

间距

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

  • 上边距:300px
  • 底部填充:300px

边框形状

添加新行

立柱结构

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

边框形状

浆纱

在不添加任何模块的情况下,打开行设置,转到 Sizing settings 并使行全宽。

  • 使这一行全宽:是

边框形状

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

添加 H2 内容框

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

边框形状

标题文字设置

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

  • 标题 2 字体:Abril Fatface
  • 标题 2 文本大小:80 像素(桌面)、70 像素(平板电脑)、50 像素(手机)

边框形状

WordPress建站服务

间距

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

边框形状

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

添加链接到内容框

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

边框形状

链接文本设置

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

H10的年终大促
  • 链接字体粗细:超粗体
  • 链接字体样式:大写
  • 链接文本颜色:#000000
  • 链接文字大小:21px

边框形状

间距

添加一些上边距以在此文本模块和前一个模块之间创建空间。

边框形状

边界

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

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

边框形状

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

文字设置

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

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

边框形状

浆纱

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

  • 宽度:82%(桌面)、100%(平板电脑和手机)

边框形状

间距

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

高质量外链购买
  • 上边距:100px
  • 下边距:100px

边框形状

添加边框形状

左边框背景​​设置

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

  • 背景图像尺寸:实际尺寸
  • 背景图像位置:左中
  • 背景图像重复:无重复

边框形状

右边框背景设置

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

  • 背景图像尺寸:实际尺寸
  • 背景图像位置:右中
  • 背景图像重复:无重复

边框形状

writesonic

顶部边框背景设置

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

  • 背景图像尺寸:实际尺寸
  • 背景图像位置:顶部中心
  • 背景图像重复:无重复

边框形状

底部边框背景设置

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

  • 背景图像尺寸:实际尺寸
  • 背景图像位置:底部中心
  • 背景图像重复:无重复

边框形状

使用半透明叠加混合颜色

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

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

边框形状

预览

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

边框形状

最后的想法

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

WordPress花园粉丝福利

想做跨境电商独立站但是没什么钱?可以免费试用Shopline智能建站工具,一个月都不要一顿火锅的钱!(这里就可以在线申请!) 或者扫描下方二维码
shopline
siteground guangda
WordPress花园官方账号
WordPress花园隶致力于为广大跨境电商和独立站爱好者提供优质的WordPress教程、Woocommerce教程、Facebook、Twitter、tiktok、Instagram教程和谷歌SEO教程等资料和对应的建站推广服务。关注‘哟派出海’公众号了解最新资讯。粉丝福利:Shopline免费独立站建设14天优惠 商务合作: [email protected]
RELATED ARTICLES

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据