WordPress divi主题

如何在 Divi 中创建背景图像边框设计

by | May 10, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

在构建网站时,边框和背景图像仍然是流行的设计资产。 使用正确的背景图像可以为您的网站增添个性和风格,而无需在自定义图形上花费时间和金钱。 边框有助于为您的内容添加结构。

google广告开户

今天,我们将通过将背景图像设计为边框,将这两种资产组合在一起。 Divi 有一组有用的选项用于自定义背景图像,这使得为独特的边框设计设计背景图像变得容易。 这使我们能够以各种创造性的方式组合颜色、渐变、框阴影和混合模式。

让我们开始吧。

抢先看

这是我们将共同构建的背景图像边框设计。

divi 背景图像边框设计

divi 背景图像边框设计

divi 背景图像边框设计

divi 背景图像边框设计

免费下载布局

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

WordPress divi主题

订阅我们的 Youtube 频道

要将布局导入您的页面,只需提取 zip 文件并将 json 文件拖到 Divi Builder 中。

让我们来看看教程好吗?

你需要什么开始

要开始,您需要具备以下条件:

  1. Divi 主题已安装并处于活动状态
  2. 在前端从头开始构建的新页面(可视化构建器)
  3. 用于模拟内容的图像

之后,您将有一个空白画布开始在 Divi 中进行设计。

创建背景图像边框设计的一般提示

在我们开始构建之前,这里有一些在创建背景图像边框设计时要牢记的一般技巧。

#1 选择有很多纹理的图像

大多数时候,你会希望你的边框更窄。 这意味着您将无法看到大部分图像。 因此,使用具有大量纹理的图像会有所帮助。 例如,您可以使用风景、一束鲜花或城市高楼的照片。 这是我在本教程中使用的一些图像。

divi 背景图像边框设计

#2 在背景图像边框中使用渐变和透明度

背景图像有时可以单独作为您的内容的一个很好的边界。 但大多数时候,您会希望为背景图像添加一些叠加层以获得某种颜色,或者使背景更暗或更亮。 背景渐变是为背景图像添加叠加层并创建独特边框设计的好方法。

#3 使用混合模式

divi 背景图像边框设计

fiverr建站WordPress程序员

在背景图像上使用混合模式可以为边框设计实现独特的颜色和纹理。 您需要做的就是添加背景颜色或渐变以及背景图像,然后为背景图像选择混合模式。 背景图像边框的一些很好的混合模式是颜色、亮度、乘法和屏幕。

为独特的形状使用圆角选项

divi 背景图像边框设计

并非所有边界都需要有直边。 稍微混合一下! Divi 的圆角选项可让您以创造性的方式塑造这些角落。

使用视差背景图像作为边框

divi 背景图像边框设计

视差的伟大之处在于它使设计充满活力。 此外,如果您在边框设计中使用具有视差的背景图像,您可以创建突出的微妙运动并使您的内容流行。

独立站选品工具

在 Divi 中设计背景图像边框

现在我们了解了创建背景图像边框设计背后的总体思路,让我们一起设计一些。 我们将构建 4 种不同的设计。 每个都有一个基本的简介模块作为模拟内容。 我们将使用列设置为模块添加背景图像边框。

让我们从我们的第一个设计开始。

背景图像边框设计#1

divi 背景图像边框设计

第一个设计的特点是带有框阴影的窄背景图像边框,使其看起来更像是内容的框架。

以下是如何设计它。

高质量外链购买

首先,将两列行添加到常规部分。

divi 背景图像边框设计

添加模糊模块

然后在左列添加一个简介模块。

divi 背景图像边框设计

宣传片到位后,打开宣传片设置并取出默认图像,以便仅显示标题和正文内容。

JasperAI 10000字免费额度试用

divi 背景图像边框设计

接下来,给你的简介一个白色的背景颜色。

然后更新简介设计设置如下:

  • 标题字体:Oswald
  • 正文字体:Lato
  • 边距 5% 上、5% 下、5% 左、5% 右
  • 填充:顶部 7%,底部 7%,左侧 10%,右侧 10%
  • 圆角:右上角 20px,左下角 20px
  • 盒子阴影:见截图

divi 背景图像边框设计

将背景图像添加到列

这负责我们的简介模块。 现在让我们添加我们的背景图像边框。 为此,我们将在包含简介模块的列中添加背景图像。 打开行设置,然后打开第 1 列的设置并添加以下背景:

WordPress备份工具updrafplus
  • 背景图片: [upload image of your choice]
  • 背景颜色:#303a7a
  • 背景图像混合:亮度

divi 背景图像边框设计

然后更新圆角和盒子阴影如下:

  • 圆角:右上角 20px,左下角 20px
  • 盒子阴影:见截图

divi 背景图像边框设计

最后结果

现在查看最终设计。

divi 背景图像边框设计

背景图像边框设计#2

divi 背景图像边框设计

下一个设计突出了使用具有大量纹理的图像如何真正制作漂亮的边框,尤其是当您将它们与图像混合模式结合使用时。

以下是如何设计它。

添加模糊模块

要创建设计,我们将把简介添加到包含设计#1 的同一行的第 2 列。 继续复制设计#1 中的简介模块并将其粘贴到第 2 列。然后更新简介模块设置,如下所示:

  • 圆角:恢复默认
  • 边距:顶部 10%,底部 10%,左侧 10%,右侧 10%
  • 填充:顶部 15%,底部 15%,左侧 10%,右侧 10%
  • 边框宽度:1px
  • 边框颜色:#ffffff

divi 背景图像边框设计

将背景图像添加到列

使用我们的模块,打开行设置并将背景渐变添加到第 2 列。

  • 背景渐变左颜色:#f7e0a5
  • 背景渐变右颜色:rgba(237,240,0,0.79)
  • 渐变方向:90度
  • 起始位置:50%
  • 结束位置:0%

divi 背景图像边框设计

然后添加具有良好颜色混合效果的背景图像。

  • 背景图片: [upload image]
  • 背景图像混合:颜色

divi 背景图像边框设计

如您所见,颜色混合模式保留了图像背后两种渐变颜色的亮度,以创建具有柔和色彩的漂亮图像边框设计。

最后结果

查看设计的最终结果。

divi 背景图像边框设计

背景图片边框设计#3

divi 背景图像边框设计

下一个设计突出了在边框设计中使用视差图像。 我们还将使用盒子阴影技巧为视差图像创建颜色叠加。

以下是如何设计它。

对于初学者,在第一行下方添加一个新的两列行,然后从顶行第 1 列中的简介中复制简介模块并将其粘贴到新行的第 1 列中。

然后按如下方式更新简介模块。

  • 背景颜色:#333344
  • 文字颜色:浅色
  • 边距:顶部 10%,底部 10%,左侧 10%,右侧 10%
  • 填充:顶部 10%,底部 10%
  • 圆角:20px
  • 盒子阴影:无

divi 背景图像边框设计

就位后,打开行设置并更新第 1 列的设置,如下所示:

  • 背景图片: [upload image]
  • 使用视差效果:是
  • 视差方法:真实视差
  • 圆角:20px
  • 盒子阴影:见截图

divi 背景图像边框设计

现在,默认情况下带有视差的背景图像边框有点霸道,可能会分散内容的注意力。

divi 背景图像边框设计

为了使具有视差的背景图像更亮,我们可以将框阴影添加到将用作光覆盖的简介。

再次打开简介设置并添加以下内容:

  • 盒子阴影:见截图
  • 盒子阴影模糊强度:0px
  • 盒子阴影传播强度:200px
  • 阴影颜色:#ffffff

divi 背景图像边框设计

最终设计

现在让我们看看最终的设计。

divi 背景图像边框设计

背景图像边框设计#4

divi 背景图像边框设计

对于下一个设计,我们将把背景图像与渐变相结合,作为宣传内容的顶部和底部边框。

添加模糊模块

首先,复制顶行第 2 列中的简介模块并将其粘贴到第二行第 2 列中。

完成后,更新简介模块设置如下:

  • 边界: [Take out the border by restoring the border defaults]
  • 盒子阴影:无
  • 边距:顶部 5%,底部 5%,左侧 0%,右侧 0%

divi 背景图像边框设计

添加背景图像边框

要为此设计添加背景图像边框,请打开行设置并更新第 2 列的设置,如下所示:

  • 背景图片: [upload image]
  • 背景渐变左颜色:#141777
  • 背景渐变右颜色:#ffb7eb
  • 渐变方向:90度
  • 起始位置:50%
  • 结束位置:0%

divi 背景图像边框设计

  • 背景图片: [upload image]
  • 背景图像混合:亮度

divi 背景图像边框设计

最终设计

查看最终设计。

divi 背景图像边框设计

最后的想法

使用 Divi 创建背景图像边框是一种为您的设计增添美感和个性的简单方法。 本教程中的设计旨在展示 Divi 中用于制作独特边框设计的关键选项。 然而,由于所有不同的颜色组合和混合模式都可用,您唯一的限制就是您的想象力。 所以,抓住一些你自己的图片,为你的下一个项目探索新的和令人兴奋的边框设计。

我期待在评论中收到您的来信。

干杯!

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题