Divi 插件亮点：Divi SuperTabs

Divi SuperTabs 是 Divi 的第三方插件，它为 Divi Builder 添加了一个选项卡模块。 虽然 Divi Builder 已经有一个选项卡模块，但这个插件提供了一些独特的设计选项和功能，允许您为您的 Divi 网站创建更复杂的选项卡。 在此插件亮点中，我们将了解 Divi SuperTabs 可以做什么，并帮助您确定这是否是适合您网站的插件。

让我们开始吧！

安装 Divi SuperTabs

安装 Divi SuperTabs 简单明了。 导航到 WordPress 仪表板上的插件页面，然后单击上传插件。 上传插件的 ZIP 文件，然后在安装后激活插件。

Divi SuperTabs 模块

一个名为 SuperTabs 的新模块被添加到 Divi Builder 中。 此模块允许您向 Divi 布局添加复杂且可自定义的选项卡。 让我们看一下主要功能。

Divi SuperTabs 选项卡设置

在 SuperTabs 设置的内容选项卡下，您可以添加选项卡。 每个选项卡还有自己的设置菜单，允许您自定义每个选项卡的设计。

选项卡设置 - 内容

在每个选项卡的设置中，您可以添加选项卡内容，例如标题、副标题和选项卡内容。

在“布局”部分，您可以为选项卡中的内容选择多种布局。 在上面的示例中，我使用了 Image Left、Text、Button 布局。

或者，您可以选择库选项以在选项卡中使用任何 Divi 库布局，从而允许您使用其他 Divi 模块创建更复杂的设计。

要将库项目与 Divi SuperTab 一起使用，请将所需的布局保存到 Divi 库，并确保将其添加到“标签内容”类别。

然后，在选项卡布局设置下选择库并添加您的 Divi 库布局。

同样在选项卡设置的内容选项卡下，您可以向选项卡添加图标。 SuperTab 允许您使用 Divi 的默认图标、FontAwesome 的图标，甚至可以上传您自己的自定义图标。

您还可以将选项卡设置为链接到 URL，以便在选择选项卡时打开链接。 这是在选项卡内容旁边链接到外部网站的便捷方式。 您还可以在链接设置下为整个模块设置链接。

最后，您可以为选项卡设置独特的背景。 背景设置包括 Divi 的所有默认背景选项（颜色、渐变、图像、视频、图案和蒙版）。 在这个例子中，我为这个选项卡添加了一个简单的彩色背景。

选项卡设置 - 设计

在选项卡设置的设计选项卡下，您可以找到许多选项来完全自定义选项卡的外观。 当您以这种方式自定义设计时，您的更改仅应用于您正在编辑的单个选项卡，而不是其余选项卡。 各个选项卡设置中的设计选项与 SuperTabs 设置中的设计选项相同，因此主要区别在于您是希望将设计应用于每个选项卡还是仅应用于单个选项卡。

通过设计设置，您可以编辑导航、选项卡、内容、布局、文本、大小、间距等的外观。我们将在本文后面详细介绍所有设计选项。

选项卡设置 - 高级

在 Advanced 选项卡下，您拥有所有默认的 Advanced Divi 选项，包括自定义 CSS、条件、可见性、过渡、位置和滚动效果。

Divi SuperTabs 内容标签

现在我们已经介绍了 Divi SuperTabs 模块中各个选项卡的设置，让我们从内容选项卡开始探索 SuperTabs 模块的一般设置。 正如我们已经介绍过的，这里是您添加每个选项卡的地方。

箭

使用此选项，您可以向将显示在活动选项卡上的选项卡添加箭头。 你可以在上面看到一个例子。 可以在设计选项卡中自定义箭头颜色。

关联

此选项是默认的 Divi 模块选项，允许您将模块链接到 URL。

背景

您可以使用“背景”选项为模块添加背景。 当您以这种方式添加背景时，颜色会跨越选项卡导航和内容区域。 在此示例中，我为模块添加了黄色背景。 “设计”选项卡中还有其他背景选项，允许您为选项卡和内容区域添加不同的颜色。 我们将在下一节中介绍这些设计选项。

Divi SuperTabs 设计标签

设计选项卡是这个插件真正闪耀的地方。 有许多选项供您自定义 SuperTabs 模块的各个方面。 让我们来看看。

导航设置

在导航设置下，您可以更改导航位置、对齐方式和字幕位置。 在上面的示例中，导航位置设置为左侧。 您还可以使选项卡具有粘性，以便在您滚动浏览选项卡内容时它们会粘在页面顶部。

同样在导航设置下，您可以通过更改导航宽度、边距、填充和装订线来完全自定义导航间距。 在此示例中，我删除了左侧填充并将导航宽度更改为 20%。 最后，您可以通过更改背景颜色、添加圆角或添加边框来自定义导航栏的颜色和整体设计。 我将导航栏背景更改为绿色。

选项卡设置

在选项卡设置中，您可以自定义选项卡填充、活动选项卡背景颜色和非活动选项卡背景颜色。 您还可以更改图标位置、对齐方式、边距和大小。 最后，您可以选择隐藏图标或标题、添加圆角或添加边框。

在下面的示例中，我将活动选项卡的背景颜色更改为浅绿色，并将图标位置更改为左侧并添加了图标边距。

箭头设置

在箭头设置中，您可以更改箭头颜色。 我将其更改为更浅的绿色以匹配活动选项卡的背景颜色。

内容设置

您可以在此处自定义选项卡中内容的整体设计。 您可以添加填充、圆角和边框。 我在内容部分添加了一些填充，以便为整体设计带来更好的平衡。

布局

在布局设置中，您可以将导航栏设置为嵌入，显示在选项卡的框架内。

导航项文本

在这里您可以自定义导航项的字体、字体粗细、样式、颜色、大小、间距、行高和阴影。 在这里，我将导航项字体颜色更改为白色，这也更改了图标颜色。

活动导航项文本

活动导航项文本设置与导航项文本设置具有相同的设置，但这些选项仅适用于处于活动状态（选中）的导航项。 在这里，我将活动导航项文本颜色更改为橙​​色。

副标题文本

在这里您可以自定义字幕文本设计。 这些选项与导航文本选项相同。

活动选项卡子标题文本

在此部分中，您可以自定义活动字幕文本设计。 同样，我们有与最后三个部分相同的自定义选项，但这些设置仅适用于激活的字幕。

其他设计设置

除了我们介绍的独特设置外，还有其他默认选项，例如大小调整、间距边框、框阴影、滤镜、变换和动画。

Divi SuperTabs 高级选项卡

Divi SuperTabs 的高级选项卡非常标准。 您可以添加自定义 CSS 以进一步自定义模块，您可以使用其他设置（如条件、可见性、过渡、位置和滚动效果）将您的 SuperTabs 设计提升到一个新的水平。

Divi SuperTabs 示例

以下是如何使用 Divi SuperTabs 的几个示例。

定价表

第一个示例是定价表。 内容来自 Device Repair 布局包。 我将每个定价表保存到 Divi 库，并使用库布局功能将内容添加到每个选项卡。 这使得在选项卡中添加更复杂的内容布局变得容易。

怎么运行的

第二个示例使用选项卡来组织流程的不同步骤。 此布局是使用 Estate Planning 布局包制作的。 我使用单独的选项卡设置为每个选项卡设置不同的选项卡颜色和背景。

特征

最后一个示例使用 Divi Home Staging Layout Pack。 我使用 SuperTabs 来组织页面上突出显示的一些功能。 此外，我使用自定义图标为选项卡添加一些视觉趣味。

购买 Divi SuperTabs

Divi SuperTabs 在 Divi Marketplace 中可用。 市场。 无限制的网站使用和 1 年的支持和更新费用为 29 美元。 该价格还包括 30 天退款保证。

最后的想法

Divi SuperTabs 是 Divi Builder 的一个功能丰富的插件，允许您为您的 Divi 网站创建复杂的标签。 这个插件的强项绝对是能够从您的 Divi 库中导入布局作为选项卡，允许您添加包含其他 Divi 模块的复杂选项卡内容。 此外，插件的可定制性非常好。 使用所有可用的设置，您可以自定义和微调选项卡以获得您想要的外观。

总体而言，Divi SuperTabs 非常易于设置和使用，您可以创建美观的标签来组织您网站上的信息。 如果您觉得受 Divi 的本机选项卡模块限制，或者想在您的选项卡中使用 Divi 库内容，这个插件可能是您的不错选择。

我们很想听到您的声音！ 您尝试过 Divi SuperTabs 吗？ 在评论中让我们知道您的想法！