如何使用 PowerPack 插件在 Elementor 中創建選項卡式內容

想知道如何在 Elementor 中創建選項卡式內容？

選項卡式內容通過以緊湊而實用的方式顯示大量信息來增強網頁的外觀。

在本文中，我們將討論如何使用 Elementor 和 PowerPack 插件為 WordPress 網站創建選項卡式內容。

PowerPack 高級選項卡小部件 - 概述

PowerPack Addons for Elementor 是 Elementor 頁面構建器的終極插件之一。 它有 150 多個獨特而時尚的模板和 80 多個方便的小部件，包括用於在 Elementor 上創建選項卡式內容的高級選項卡小部件。

高級選項卡小部件是在任何 WordPress 網站上創建選項卡式內容的最佳選項卡小部件。 讓我們看一下 Elementor 的 PowerPack Advanced Tabs 小部件的功能：

• 支持多種內容來源
• 多個內容可自定義選項來設置您的內容樣式。
• 允許您創建水平選項卡和垂直選項卡。
• 提供出色的響應支持並在所有屏幕上流暢運行。
• 提供多種樣式選項，例如文本顏色、排版、背景類型、製表符間距、邊框、文本對齊等等。
• 允許您分別自定義圖標、標題和內容部分。

使用 PowerPack 插件在 Elementor 中創建選項卡式內容

在開始之前，請確保您已安裝並激活 Elementor 頁面構建器和適用於 Elementor 的 PowerPack 插件。

在 WordPress 網站上激活這兩個插件後，使用 Elementor 編輯器打開頁面。

接下來，在小部件區域中搜索“高級選項卡”，然後將小部件拖放到頁面上。

不要忘記檢查 PowerPack “ 聚丙烯” 小部件右上角的標誌。

高級選項卡小部件的內容選項卡

高級選項卡小部件的內容選項卡包括兩個部分：

1. 高級選項卡
2. 佈局

讓我們詳細看看這些部分。

高級選項卡

讓我們看一下本節中的可用功能：

• 您可以根據需要添加任意數量的“標籤”。 只需單擊“添加項目”即可創建更多選項卡。
• 您可以單獨自定義每個選項卡。
• 內容類型：此選項允許您選擇多種內容類型，例如內容、圖像、鏈接（視頻/圖像）、已保存部分、已保存小部件和已保存頁面模板。

“內容”作為內容類型

當您想要顯示內容時，您可以自定義這些選項：

1. 標題：使用此選項為內容編寫標題。
2. 內容：在此部分中，您可以將內容添加到選項卡，其中包含數字列表、項目符號列表、鏈接、粗體、斜體、下劃線和許多其他功能來設置文本樣式。 除此之外，您還可以從媒體庫中添加圖像。

“圖像”作為內容類型

當您想要顯示圖像時，您可以自定義這些選項：

1. 選擇圖像：使用此選項從圖像庫中選擇圖像。
2. 圖像尺寸：此選項允許您選擇所需的圖像尺寸。

當您想顯示鏈接時，您可以將鏈接拖放到“鏈接”選項。 如果您選擇保存的部分、保存的小部件或保存的頁面模板，您可以相應地選擇它們。

當您為每個選項卡單獨自定義內容部分時，同樣，您可以為每個選項卡的圖標這樣做。

圖標部分的特點是：

1. 圖標類型：您可以選擇圖標類型，圖標或圖像。 它可能是您品牌的標誌或任何其他東西。
2. 圖標：您可以從圖標庫中選擇一個圖標。

佈局

讓我們看一下本節中的可用功能：

• 佈局：您可以選擇佈局為水平或垂直模式。
• 響應式支持：高級選項卡小部件支持所有設備上的響應式模式，無論是台式機、平板電腦還是移動設備。
• 選擇樣式：使用此選項選擇選項卡樣式。
• 滾動到頂部：您可以在單擊標題時選擇是或否來選擇是否要滾動到選項卡的頂部。

[注意：此選項僅在您為選項卡選擇垂直佈局模式時可用。]

• 默認活動選項卡索引：此選項可以設置默認活動選項卡。 因此，每當您訪問您的網站時，您選擇的選項卡將默認顯示。
• 自定義 ID 前綴：您可以添加自定義 ID 前綴，該前綴將應用於 HTML 中選項卡的 ID 屬性。

將這些更改應用到您的“高級選項卡”小部件以查看最佳結果。

高級選項卡小部件的樣式選項卡

高級選項卡小部件的樣式選項卡包括兩個部分：

1. 標籤
2. 標題
3. 內容

讓我們詳細看看這些部分。

標籤

讓我們看看本節中包含的所有功能：

• 水平或垂直對齊：使用此選項選擇選項卡的對齊方式，但首先選擇佈局。
• 選項卡之間的間距：使用此選項自定義選項卡之間的間距。
• 背景顏色：使用此選項，您可以為選項卡選擇背景顏色。
• 邊框半徑：如果要在選項卡邊框上顯示彎曲邊緣，請應用邊框半徑。
• 填充：調整選項卡的填充以保持選項卡邊框和內容之間的間距。

標題

讓我們看看本節中包含的所有功能：

• 圖標位置：選擇頂部、底部、右側或左側的圖標位置。
• 圖標大小：使用此選項調整圖標大小。
• 圖標圖像寬度：使用此選項調整圖標圖像寬度。
• 邊框半徑：如果要在選項卡標題邊框上顯示彎曲邊緣，則應用邊框半徑。
• 填充：調整選項卡的填充以保持選項卡標題邊框和內容之間的間距。
• 標題排版：使用此選項自定義標題文本排版。
• 圖標顏色：使用此選項選擇圖標顏色。
• 標題顏色：使用標題顏色選項自定義標題文本顏色。
• 標題背景顏色：如果要顯示標題的背景顏色，可以使用此選項選擇顏色背景。
• 懸停效果：此選項使您可以靈活地啟用或禁用懸停效果。

內容

讓我們看看本節中包含的所有功能：

• 對齊：使用此選項設置選項卡中顯示的內容對齊方式。
• 背景類型：您可以選擇經典或漸變背景類型。
• 文本顏色：選擇要在選項卡上顯示的內容的文本顏色。
• 文本排版：您可以使用此選項自定義內容文本的排版。
• 邊框類型：從可用選項中為內容選擇一種邊框類型，例如實線、雙線、點線、虛線或凹槽。
• 邊框寬度：可以通過此選項調整應用於內容的邊框寬度。
• 填充：調整填充以允許內容文本與其邊框之間的間距，使其看起來有條理和乾淨。
• 邊框顏色：可以使用此選項自定義內容邊框顏色。
• 邊框半徑：如果您已將邊框應用於內容部分，則可以使用此選項調整其半徑。

因此，這就是通過 PowerPack Addons 為 Elementor 自定義高級選項卡小部件的內容和样式選項卡。

根據您的選擇安裝、激活和進行一些更改； 就這麼簡單。

獲取 Elementor Page Builder 的 PowerPack 高級選項卡

在了解了 PowerPack Elementor Addons 提供的高級選項卡小部件的所有這些功能之後，我們非常確定您會喜歡在您的網站上使用它。

我們希望本教程幫助您使用 PowerPack 高級標籤小部件為您的網站創建時尚的“標籤”。

PowerPack Addons 的小部件由我們的創意編碼人員精心設計，因此非編碼人員可以在幾分鐘內輕鬆使用它們。

單擊此處獲取 PowerPack 高級選項卡小部件並增強您網站的外觀和用戶體驗。

如果您喜歡閱讀本文，您也很想體驗我們的其他 PowerPack 元素。

請隨時在此處發表您的評論； 我們很樂意收到您的回复。
此外，在 Twitter、Facebook 和 YouTube 上加入我們。