Divi 插件亮点：Divi Mask

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

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

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

Divi 遮罩模块

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

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

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

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

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

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

这是 Splodge 蒙版的选项 3。

蒙版设置的文本选项卡为标题和内容添加了区域，并为每个区域进行了独立的自定义。

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

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

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

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

Divi 蒙版示例

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

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

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

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

对于此示例，我将创建一个全角部分，并将添加一个将与部分分离混合的蒙版。 我添加了标题和内容文本，更改了它们的颜色和大小，使它们的背景透明，并将它们定位在图像上我想要的位置。

我添加了一个三角形蒙版并选择了选项 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 面膜？ 请在下面的评论中告诉我们您对此的看法。

精选图片来自 Oleksandr Korchahin/shutterstock.com