WordPress divi主题

Divi 插件亮点:Divi 面具

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

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

在 Divi 市场中找到它

Divi 面具可在 Divi 市场购买! 这意味着它已通过我们的审查,并符合我们的质量标准。 您可以访问市场上的 Divi Works 以查看他们所有可用的产品。 从 Divi Marketplace 购买的产品具有无限的网站使用和 30 天退款保证(就像 Divi)。

google广告开户

在 Divi 市场购买

Divi Mask 是 Divi 的第三方插件,它为 Divi Builder 添加了一个新模块,具有一些独特的图像和背景样式。 它在图像上放置一个遮罩,使图像具有遮罩的形状。 蒙版之外的所有内容都可以是您想要的任何颜色,包括渐变甚至不同的背景。

它包括 54 个预设蒙版,可用作抠图,显示其背后的图像。 您也可以使用 SVG 添加自己的。 它包括标题、内容和背景工具。 每个元素都可以调整和设置样式。

在这个插件亮点中,我们将看看 Divi Mask,看看它可以做什么,看看它是多么容易使用。 您可以从开发者的网站购买 Divi Mask。

Divi 遮罩模块

正常上传并激活插件。 没有什么可设置的。 激活后即可使用。 Divi Mask 模块已添加到 Divi Builder。

内容选项卡允许您添加图像、蒙版和文本。 其他调整允许您自定义图像背景颜色、镜像图像和设置图像不透明度。 您还可以添加链接和背景。 此图像显示了“蒙版设置”中的“蒙版”选项卡。 我从电子竞技布局包中添加了一张图片。

WordPress divi主题

这是蒙版设置中的蒙版选项卡。 它添加了一个下拉框,您可以在其中选择 54 个内置蒙版或使用名为 Save SVG 的免费插件上传您自己的自定义蒙版。

此选项卡还添加了填充模块的选项,在三个版本的蒙版之间进行选择,缩放到您想要的大小,旋转它,以及调整水平和垂直位置。 在这个例子中,我已经调整了它们中的每一个。 这是 Splodge 遮罩的选项 1。

这是启用填充模块的选项 1。 它伸展并填满了分配给模块的空间。

这是 Splodge 遮罩的选项 2。 它创造了一些有趣的斑点图案。

这是 Splodge 遮罩的选项 3。

fiverr建站WordPress程序员

掩码设置的文本选项卡为标题和内容添加了区域,每个区域都有独立的自定义。

选择标题标签,调整背景颜色、背景宽度、水平和垂直位置以及旋转。 文本调整在设计选项卡中处理。

内容区域添加了一个完整的编辑器,您可以在其中添加文本、图像、媒体等。它还包括颜色、宽度以及水平和垂直位置的背景调整。 这个不包括旋转。 文本的调整位于“设计”选项卡中。

独立站选品工具

设计选项卡包括标题、正文文本、大小调整、间距、边框、框阴影、过滤器、变换和动画的所有预期设置。

高级选项卡包括标题和文本的 CSS 区域。

Divi 蒙版示例

高质量外链购买

在此示例中,我使用平行四边形掩码集来填充模块。 我已经缩放了蒙版并调整了它的旋转和对齐方式。 我还添加了与我在“蒙版设置”的“图像”选项卡中使用的完全相同的图像的背景和渐变。 蒙版显示图像的一部分,并允许背景图像在背景中显示出来。 稍后我将使用一个更明显的。

对于这个,我添加了一个圆形蒙版。 我将标题放在具有白色背景的图像上。 我减少了背景的宽度和不透明度,并为文本添加了阴影效果。 我移动了图片下方的内容并添加了一组可点击的照片。 由于它使用内容编辑器,每个元素可以有不同的 URL,与模块的链接分开。 当然,如果我愿意,我可以将内容放在图像上。 这将是一个有趣的 CTA。

对于这个,我将背景更改为深色并移动文本以与图像重叠。 我增加了标题和内容文本的大小,并给了它们一个白色背景。 我从上一个示例中删除了缩略图,因此焦点将位于中心图像上。

JasperAI 10000字免费额度试用

对于此示例,我替换了 Travel Agency 布局包中的中心图像模块,并在 Divi Mask 模块中添加了相同的图像。 我降低了图像的不透明度,添加了标题文本,将其设置为 50% 垂直位置,更改了标题背景的颜色,并降低了不透明度。 这是一种创建页面、项目、帖子或仅显示信息的链接的简单方法。

对于这个例子,我正在创建一个全宽部分,我将添加一个将与部分分隔混合的蒙版。 我添加了标题和内容文本,更改了它们的颜色和大小,使它们的背景透明,并将它们放置在图像上我想要的位置。

WordPress备份工具updrafplus

我添加了一个三角形蒙版并选择了选项 2。我将其放大并调整了水平设置。 我还在模块中添加了渐变背景。 可以镜像相同的渐变并将其添加到下一部分,以便它们相互融合。

这是选项 3。它将遮罩翻转到另一侧。 我移动了水平位置以显示更多图像,并调整了标题和文本的垂直位置以与蒙版重叠。 文本自动重叠。

这个在选项 1 上显示了一个箭头掩码。

这是箭头选项 4。我将它放在一个较小的行中,以便更多内容显示在我的屏幕上。

这是使用带有我的背景渐变的默认设置的引导掩码。

这是一个漂亮的蝴蝶面具。

这是心形面具。 我更改了背景渐变以匹配心脏主题。

现在,我添加了与背景相同的图像,并将渐变设置为显示在背景图像上方。 这使它具有遮罩切除部分渐变的效果。

当然,任何图像都可以用作背景。 在这个例子中,我已经替换了背景图像,所以面具的图像显示在它上面。 我还降低了背景的不透明度,以便显示更多内容,使效果更加突出。

对于这个,我旋转了遮罩并将其移到了右侧。 我已经调整了背景的渐变不透明度。 它仍然显示与蒙版图像不同的背景图像。 我还添加了内容文本并调整了文本大小,以及内容的垂直位置和宽度。 这将创建一些有趣的 CTA 或信息简介。

这个使用语音掩码。 我已经调整了它的水平位置并将内容移动到它的中心。

这是边框蒙版。 它创建了一个相框。 我已将其居中,缩放以适合图像,并将内容居中。

对于这个,我将比例设置回默认值并选择填充模块。 边界仍然存在,但它在可视区域之外。

对于这个,我调整了比例以显示边框。

这个使用菱形面具。 这是一个转角的正方形。 我已将其放大并向右移动。 我已经使内容居中,并为内容提供了一个具有足够透明度的背景,以便背景显示出来。 我添加了一个标题并将其放置在它的一侧。 我还给了它一个带有一点透明度的背景。

Divi 面膜价格和文档

Divi Mask 是 12 美元,包括 6 个月的支持和终身更新。 它可以在无限的网站上使用。 您可以从开发者的网站购买 Divi Mask。

开发人员的网站还包括该插件的详细演练。 这显示了基础知识,包括如何使用 SVG 功能来创建您自己的自定义蒙版。 该站点还包含一个简短的常见问题解答,可指导您完成安装过程。

结束的想法

我发现 Divi Mask 是一个有趣的模块。 它非常直观。 我从不需要阅读说明或观看视频,但很高兴它们可以以防万一。 我最喜欢使用它的方式是代替简介,作为 CTA,链接到页面或产品,或者只是为图像添加一些设计样式。

它是响应式的,但可以创建响应不如您想要的设计。 这只是我在设计时要记住的事情。 当然,您也可以创建设计的平板电脑和移动版本,并且可以使用 Divi Builder 中的各种视觉模式测试设计。

我喜欢内置的 54 个面具。 它们提供了一些有趣的视觉效果,并且控件进一步扩展。 我也喜欢你可以使用 SVG 创建自己的。 具有可以移动的背景的单独的标题和内容元素也很有趣。

Divi Mask 为图像和文本开辟了许多设计可能性。 如果您有兴趣在 Divi 中为图像添加剪裁,Divi Mask 值得一看。

我们希望收到你的来信。 你试过Divi Mask吗? 在下面的评论中让我们知道您对此的看法。

特色图片来自 Oleksandr Korchahin / shutterstock.com

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