WordPress divi主题

为 Divi 下载 9 个免费的形状图像叠加层

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

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

您在网站上显示图像的方式确实可以对您正在创建的整体设计产生影响。 使用 Divi 的内置选项,您已经可以应用各种设计设置,帮助您以惊人的方式显示图像,例如考虑边框和框阴影。 但是,如果您希望为您的图像赋予更独特的形状,这篇文章将帮助您。 我们将分享 9 个免费的形状图像叠加层,您可以下载并在您创建的任何网站上使用它们。 在分享了这些形状的图像叠加层之后,我们还将向您展示如何在使用 Divi 构建网站时利用它们。 我们希望本教程也能激发您创建自己的形状图像叠加层。

google广告开户

让我们开始吧!

预览

在深入了解教程和下载之前,让我们快速浏览一下不同屏幕尺寸的预期结果。

桌面

形状的图像叠加

电话

形状的图像叠加

免费下载异形图像叠加

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

方法

  • 如果您将它们与白色行和/或部分背景颜色组合在一起,则可以在下载文件夹中找到的形状图像叠加层可供使用
  • 如果要根据另一种背景颜色调整形状图像叠加层,则需要使用上面下载中包含的 illustrator 文件以另一种颜色导出形状图像叠加层
  • 我们将在教程的第一部分向您展示如何更改形状的图像叠加颜色(使用 Adob​​e Illustrator)
  • 然后,我们将继续使用 Divi 并将其中一个成形的图像叠加层上传到图像模块
  • 我们还将向图像模块添加背景图像和渐变背景,它们将通过形状图像叠加显示

使用 Adob​​e Illustrator 将形状图像叠加层修改为部分背景颜色

在下载文件夹中打开 Illustrator 文件

如本文的方法部分所述,如果您想在白色背景上使用图像形状的叠加层,则只需使用下载文件夹中的 PNG 文件即可。 但是,如果您想在不同的行和/或部分背景颜色上使用成形图像叠加层,则需要使用下载文件夹中包含的 Adob​​e Illustrator 文件手动更改颜色。 更改颜色几乎不需要时间,并且允许您在几乎任何您构建的网站上使用成形的图像叠加层,所以让我们完成这些步骤。 首先,您需要打开 Adob​​e Illustrator 文件。

形状的图像叠加

选择选择的图像形状叠加

打开文件后,您会发现 9 种不同的画板,带有形状的图像叠加层,您可以随意将其用于任何目的。 选择您要编辑的那个。

形状的图像叠加

WordPress divi主题

更改颜色以匹配部分背景颜色

继续将形状的颜色更改为您计划用于行和/或部分的背景颜色。

形状的图像叠加

形状的图像叠加

选择画板

修改颜色后,您可以选择包含成形图像叠加的整个画板。

形状的图像叠加

为 Web 保存 PNG 形状的图像叠加层

并将其保存为 Web 的 PNG 图像文件,方法是转到 文件 > 导出 > 保存为 Web.

形状的图像叠加

形状的图像叠加

让我们开始创作吧!

订阅我们的 Youtube 频道

fiverr建站WordPress程序员

添加新部分

是时候切换到 Divi 并创造结果了! 创建一个新页面或打开现有页面并添加一个新的常规部分。

形状的图像叠加

添加新行

立柱结构

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

形状的图像叠加

将图像模块添加到第 1 列

上传异形图像叠加

我们在第 1 列中需要的唯一模块是图像模块。 这就是所有魔法发生的地方。 我们将从上传成形的图像叠加层开始。 您会注意到图像的一部分是完全透明的。 这将允许背景图像和渐变背景在接下来的步骤中显示出来。

独立站选品工具

形状的图像叠加

渐变背景

继续,接下来添加您选择的渐变背景。

  • 颜色 1:#aa2bff
  • 颜色 2:#09f7eb

形状的图像叠加

背景图片

并上传一张PNG背景图片,或者如果您不希望渐变背景显示出来,则只上传一张普通的。 您还可以通过转到以下我们创建的关于如何在悬停时更改渐变背景的帖子来下载我们正在使用的插图。

  • 背景图片尺寸:封面
  • 背景图像位置:底部中心
  • 背景图像重复:无重复

形状的图像叠加

高质量外链购买

浆纱

使本教程工作的另一个重要步骤是在图像模块的尺寸设置中启用“强制全宽”选项。 这将确保渐变背景和背景图像仅通过成形图像叠加层的透明区域显示。

形状的图像叠加

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

添加内容

让我们继续第二列。 在这里,我们需要的第一个模块是标题文本模块。 添加一些选择的内容。

形状的图像叠加

文字设置

然后,转到标题文本设置并进行一些更改。

JasperAI 10000字免费额度试用
  • 标题 2 字体:Antic Didone
  • 标题 2 字体粗细:粗体
  • 标题 2 文字大小:45px
  • 标题 2 字母间距:-2px

形状的图像叠加

间距

添加一些自定义上边距。

形状的图像叠加

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

添加内容

我们需要的第二个模块是描述文本模块。 输入一些选择的内容。

形状的图像叠加

WordPress备份工具updrafplus

文字设置

然后,转到文本设置并更改模块的文本方向。

  • 文本方向:对齐

形状的图像叠加

浆纱

在尺寸设置中更改宽度。

形状的图像叠加

将按钮模块添加到第 2 列

添加副本

我们需要的下一个也是最后一个模块是按钮模块。 输入一些选择的内容。

形状的图像叠加

按钮设置

继续转到按钮设置并更改按钮的外观。

  • 为按钮使用自定义样式:是
  • 按钮文字大小:17px
  • 按钮文字颜色:#ffffff
  • 渐变色 1:#aa2bff
  • 渐变色 2:#09f7eb
  • 渐变方向:111度

形状的图像叠加

  • 按钮边框宽度:0px
  • 按钮边框半径:100px
  • 按钮字母间距:-2px
  • 字体粗细:超粗体
  • 字体样式:大写

形状的图像叠加

间距

也为按钮添加一些额外的自定义填充。

  • 上边距:10px
  • 底部填充:10px
  • 左填充:50px
  • 右内边距:50px

形状的图像叠加

盒子阴影

最后但同样重要的是,通过在按钮上添加微妙的蝴蝶结阴影来完成设计。

  • 盒子阴影模糊强度:50px
  • 盒子阴影传播强度:-5px

形状的图像叠加

预览

现在我们已经完成了所有步骤,让我们最终看看不同屏幕尺寸的结果。

桌面

形状的图像叠加

电话

形状的图像叠加

最后的想法

在这篇文章中,我们为 Divi 分享了 9 个免费的形状图像叠加层,您可以将它们用于您正在构建的任何类型的网站。 我们希望本教程能启发您创建自己的独特形状的图像叠加层,您可以不断地重复使用它们。 如果您有任何问题或建议,请务必在下面的评论部分发表评论!

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