Divi 插件亮点：Divi Ribbon 模块

Divi Ribbon Module 是 Divi 的第三方插件，可为模块的内容添加可样式化的功能区。 根据需要添加图像、按钮、标题、内容和每个元素的样式。 使用它来突出产品销售、建立号召性用语或引起对任何元素的注意。 在这个 Divi 插件亮点中，我们将看看 Divi Ribbon Module，看看它可以做什么。

安装 Divi Ribbon 模块

1. 前往并下载插件
2. 在 WordPress 仪表板中，转到插件>添加新
3. 点击上传插件
4. 从您的计算机中选择压缩文件
5. 点击立即安装
6. 看到“插件安装成功”，点击激活插件
7. 转到“工具” >“ Divi Ribbon 插件许可证”并输入您的许可证密钥

Divi 色带模块

Divi Builder 中添加了一个名为 Divi Ribbon 的新模块。 该模块创建一个简介（包括标题、内容、图标、图像和按钮）并在该简介上放置一条丝带。 您可以控制功能区以及模块中其他元素的位置和样式。 默认情况下，简介包括框阴影。

Divi 功能区内容选项卡

内容选项卡包括主要设置、模糊旋转、图像和图标、链接、背景和管理标签。 主要设置提供对功能区类型、位置、文本、标题和内容的选择。

主要设置

有 7 种色带类型可供选择。 它们以相同的方式工作并包含相同的内容，但它们显示不同的形状。 形状包括带有叉形末端的丝带、跨越宣传语的丝带、侧面或顶部的丝带，并具有不同类型的末端，例如叉形或圆形。 这为您提供了很多显示选择。

每种功能区类型都有不同的位置选项，具体取决于它们的显示能力。 此示例显示角带。 它可以放在左上角或右下角，也可以放在左下角或右下角。

分叉可以显示在左上角或右上角。

可以在上方或下方显示全宽。

某些功能区类型具有其他选项，可在您选择它们​​时打开。 此示例显示全宽色带。 您可以调整其位置和高度。

侧边功能区包括对位置、宽度和高度的调整。 所有控件都是标准的 Divi 滑块，因此易于使用。

标题和内容被添加到卡片本身。 内容区域具有用于视觉和文本的选项卡，它们可以包括媒体、链接、代码和短代码。

模糊旋转

模糊旋转添加了一个 3D 翻转选项，在卡片翻转后显示内容，以及显示在字体上的图像和图标。

添加媒体库中的图像和列表中的图标。 图像/图标将首先显示，然后卡片将翻转以显示悬停时的内容。 您还可以添加图像作为背景。

按钮

该按钮包括文本、链接、窗口选项、填充和边距。 我添加了一些左边距以从功能区下方取出按钮。

Divi 丝带设计选项卡

Divi Ribbon Design 选项卡包括图像和图标、旋转、文本、大小、功能区、标题文本、正文、按钮、间距、边框、过滤器、变换和动画的设置。

图像和图标

图像和图标设置允许您调整图像宽度、边框、框阴影、颜色、混合模式等。

回转

旋转设置允许您调整面部颜色。 这是图像背后的背景。 禁用原始卡片边框，以便您可以创建自己的卡片边框。 调整旋转图标。 它有很多图标选项。 添加图标颜色、背景、边框，并使用预旋转字体大小。

起初，图标调整在这里而不是图像和图标设置有点令人困惑，但在本节中确实有意义。 将图像设置也放在这里也是有意义的，但是有太多它需要一个单独的选项卡。

文字间距

文本间距为您提供标题和正文文本的边距和填充设置。 通常，功能区将显示在内容上。 这使您可以根据功能区的位置调整文本定位（如果您希望它可见）。 在此示例中，我为标题和正文文本添加了填充。

功能区设置

功能区设置允许您更改颜色、添加将填充功能区的图像、关闭功能区末端（以阻止样式与卡片重叠）、调整字体、添加文本阴影、调整功能区角和边框。 在本例中，我更改了色带颜色。

图像将填充功能区。 我只能让 JPG 工作，但效果很好。 我建议选择一个已经是你想要的大小的图像，这样你就可以控制它的显示方式。

关闭色带末端可以去除卡片后面向后折叠的部分，如本示例中色带左侧所示。

文本

标题和正文包含所有预期选项。 在此示例中，我增加了两者的大小，更改了标题文本的颜色，并将两者居中。

按钮

按钮样式包括所有预期选项，并添加了一项功能以在背景图像上方显示渐变。 在这个例子中，我增加了字体的大小，改变了字体和边框的颜色，使边框变圆，给背景一个渐变，并添加了一个阴影。

Divi 功能区示例

以下是 Divi Ribbon 在 Divi 布局中的外观示例。

在售丝带

对于第一个示例，我将替换右侧的 CTA。

它由三个模块组成：图像、文本和按钮。 我将使用相同的背景、文本和按钮，并使用单个 Divi Ribbon 模块重新创建它。

这是使用 Divi Ribbon 的结果。 我添加了图像、标题文本和正文以匹配原始文本。 我还将功能区添加到角落并将按钮移动到中心并使用功能区背景中的边框颜色。 原文使用了列中的图像。 我删除了它并将图像添加到模块中，但无论哪种方式都可以使用。

我没有包含波浪形图像（三角波），但可以轻松地将其添加到内容区域中。 标题还需要移动到内容区域，以使图形显示在标题上方。 On Sale 丝带使其更加突出。

最新项目功能区

对于这个，我用 Divi Ribbon 模块替换了一张图片，并添加了一个全宽色带作为 CTA 来查看最新的项目。 功能区具有布局中的背景图像和字体。 框阴影是默认设置。 我已将文本居中。

产品 CTA 功能区

对于此示例，我将 Divi Ribbon 模块添加到皮革公司布局的商店页面的英雄部分。 使用布局中的图像，我替换了标准的销售 CTA。 功能区和按钮使用布局中的颜色。 我将色带移到右下角并取下色带末端。

这是一个专业部分。 我很高兴看到它在专业部分运行良好。 许多第三方模块并不总是与这种类型的部分兼容。

测试和购买

您可以从开发人员的网站上以 11 美元的价格购买 Divi Ribbon Module，用于单个网站上的个人或商业用途。

您还可以在购买前测试插件，看看它是否适合您的需求。 在开发人员的销售页面上可以找到测试插件的链接。 它使您可以完全访问 Divi Builder 和插件，因此您可以根据自己的喜好设置样式。 我建议尝试一下。

结束的想法

Divi Ribbon Module 是一个有趣的 Divi Builder 模块。 它包含多个添加图像的位置，您可以包含标题、内容、图标和按钮。 凭借所有这些功能，它可以很好地用作宣传语、号召性用语、产品链接、博客链接等。添加一个可设计的功能区以引起对销售或其他 CTA 的关注，并且此插件提供了难以实现的样式选项使用单个模块。

Divi Ribbon Module 适用于 Visual Builder 和 Theme Builder。 这是一个很好的插件，很容易推荐。

我们希望听到您的意见。 您是否尝试过 Divi Ribbon Module？ 请在评论中告诉我们您的体验。

精选图片来自 Foxys Graphic / shutterstock.com