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 嗎？ 在評論中讓我們知道您的想法！