为 Divi 下载 6 个免费的重复背景图案
已发表: 2018-09-06让您的网站格外关注细节,对您的整体网页设计风格的影响比您想象的要大。 通常是帮助人们区分模板类型网站和定制网站的小细节。
有几种方法可以实现更高的设计。 您可以做的一件事是为页面上的任何设计元素使用微妙的背景重复模式。 这不仅可以帮助您减小背景图像的大小,还可以帮助您填充空白背景而不会压倒它们。
在这篇文章中,您将能够下载 6 种基本但用途广泛的背景图案,您可以在使用 Divi 构建任何类型的网站时使用它们。 当您需要为网页设计增添趣味时,这些图案非常适合放在口袋后面。
预览
让我们来看看使用这些背景图案可以在您的网站上获得什么样的结果:

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

免费下载
加入 Divi 时事通讯,我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包,以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随,您很快就会成为 Divi 大师。 如果您已经订阅,只需在下面输入您的电子邮件地址,然后单击下载即可访问布局包。
您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包!
方法
- 下载文件夹并解压后,您会发现 5 个不同的文件夹
- 这些文件夹中的每一个都代表一个不同的维度集:1000×1000、500×500、100×100、50×50 和 25×25
- 尽管这些在技术上是相同的模式,但根据您决定使用的维度集,您网站上的最终结果会有所不同
- 我们将这些图案与 Divi 的背景选项相结合,以创建背景重复效果
- 这不仅可以使您的背景图像保持一致,还可以减少对高分辨率背景图像的需求
这个怎么运作
在您的页面上选择一个部分
您可以将这些背景图案应用于页面上的任何设计元素。 我们将通过添加作为部分背景来演示它。 但是,您可以随意将这些相同的模式添加到其他设计元素中,例如行、列和模块。 你的设计元素越小,你需要的图案尺寸就越小,这取决于你想要的外观和感觉如何。
选择您喜欢的尺寸
图案一:1000×1000

后台设置
要实现我们上面分享的结果,请继续在下载的 1000×1000 文件夹中找到模式 #1。 然后,将其上传到您的部分背景设置并使用以下设置:
- 背景图片尺寸:实际尺寸
- 背景图片位置:中心
- 背景图像重复:重复

带渐变叠加
想要使用渐变背景混合图案吗? 你也可以这样做。 在下面的示例中,我们使用了一种纯色和一种半透明色,并结合将渐变放置在背景图像上方来创建混合效果。
- 颜色 1:#E2E2E2
- 颜色 2:rgba(255,255,255,0.37)
- 渐变类型:线性
- 梯度方向:181度
- 起始位置:7%
- 结束位置:35%


图案#1 :500×500

后台设置
您还可以使用 Divi 的内置背景选项使图案仅水平或垂直显示。 对于上面的示例,我们使用了 500×500 尺寸的图案 #1 图像文件。 上传后,结合以下背景设置:
- 背景图片尺寸:实际尺寸
- 背景图片位置:顶部中心
- 背景图像重复:重复 X(水平)

图案#2 :500×500

后台设置
我们使用 500×500 文件夹中的第二个模式做了同样的事情。
- 背景图片尺寸:实际尺寸
- 背景图片位置:顶部中心
- 背景图像重复:重复 X(水平)

图案#3 :100×100

后台设置
对于下一个示例,在 100×100 维度文件夹中找到图案 #3 并将其与以下背景选项组合,使图案占据整个部分:
- 背景图片尺寸:实际尺寸
- 背景图片位置:中心
- 背景图像重复:重复

图案#4 :50×50

后台设置
尺寸越小,模式频率越高。 在 50×50 维度文件夹中找到背景 #4 并将其与以下背景设置组合:
- 背景图片尺寸:实际尺寸
- 背景图片位置:顶部中心
- 背景图像重复:重复

图案 #5 :100×100

后台设置
当您使用具有以下背景设置的 100×100 尺寸集时,第五个图案提供了令人惊叹和微妙的设计:
- 背景图片尺寸:实际尺寸
- 背景图片位置:顶部中心
- 背景图像重复:重复

图案 #6 :25×25

后台设置
最后但并非最不重要的一点是,在 25×25 尺寸文件夹中找到图案 #6,并将其与以下背景设置一起上传到您的部分背景:
- 背景图片尺寸:实际尺寸
- 背景图片位置:顶部中心
- 背景图像重复:重复

对行、列和模块背景也使用模式
我们上面处理的示例只是您拥有的几个选项。 如果您对包含的不同维度进行试验,您将为每个模式获得不同的结果。 最重要的是,您还可以使用 Divi 的背景选项来创建各种结果。 您不仅限于将这些背景图案用于部分。 您可以将这些用于 Divi 的 Visual Builder 中的每个设计元素。 图案的大小需要与元素的大小相匹配。 使用行、列和模块背景的图案来创建个性化和独特的设计。

预览
现在处理了一些不同的最终结果,您可以使用背景图案获得,让我们最后看看最终结果:

最后的想法
在网页设计中,注意细节很重要。 有很多方法可以做到这一点,但在这篇文章中,我们专门处理了使用背景图案来获取使用 Divi 的设计元素的微妙背景。 我们为您提供了 6 种不同的图案,您可以免费下载和使用。 对于每一种模式,我们还提供了不同的维度,一旦在页面上使用,就会导致不同的结果。 如果您有任何问题或建议,请务必在下方评论区留言!
