如何建立和使用Elementor選項卡小工具

在構建網站時，確保您的內容井井有條是至關重要的。整齊地排列您的頁面有助於改善使用者體驗 (UX) 並使文字更易於理解。組織內容的一種方法是使用Elementor Tabs小工具。

選項卡式內容可讓您的使用者在不同的內容部分之間切換。此功能消除了訪問者導航到頁面不同區域的需要。將相關內容分組到選項卡式容器中可以增強您網站的外觀和可用性。另外，您可以在沒有任何WordPress開發經驗的情況下設定這一切。

在這篇文章中，我們將簡要介紹Elementor及其不同版本。然後，我們將引導您瞭解如何建立和自定義Elementor選項卡以及一些可用於增強小工具預設功能的第三方工具。

1. Elementor概述
2. 如何建立Elementor選項卡（選項卡小工具）
3. 如何自定義Elementor選項卡
4. Elementor選項卡的高階設定
5. Elementor選項卡的8個頂級外掛

Elementor概述

Elementor是一個流行且功能強大的網站構建器外掛：

Elementor頁面構建器

您可以使用頁面構建器從頭開始或使用預製模板為您的網站建立漂亮的頁面。Elementor具有拖放式編輯器，因此您無需觸控一行程式碼。

重要的是要注意Elementor有免費和付費版本。免費的Elementor外掛可讓您建立標準頁面和文章。

但是，它的特性和功能可能會受到限制。要解鎖全套工具，我們建議升級到Elementor Pro。在這篇文章中，我們將指出使用Tabs小工具時免費計劃與專業計劃的區別。

如何建立Elementor選項卡（選項卡小工具）

現在我們對Elementor有了更多瞭解，讓我們看看如何使用Tabs小工具。請注意，對於以下教程，我們假設您已經在WordPress網站上安裝並啟用了Elementor。

首先，導航到要新增選項卡式內容的WordPress文章或頁面，然後選擇使用Edit with Elementor：

選擇“Edit with Elementor”

這將啟動Elementor編輯器介面。在左側面板的Elements下，搜尋並選擇Tabs小工具：

搜尋並選擇“Tabs”小工具

您可以將小工具拖放到頁面部分。放置選項卡小工具後，將出現一個新儀表盤及其設定：

將小工具拖動到您的頁面

您可以輸入每個選項卡的標題和內容。您還可以單擊+ Add Item按鈕以插入另一個選項卡。在Type下，選擇是水平顯示選項卡還是垂直顯示選項卡。

如何自定義Elementor選項卡

將文字新增到選項卡後，您可以自定義整體小工具設定。有幾種不同的選擇。

選擇每個自定義選項卡以修改其屬性，包括其標題、框內容和圖示。您還可以更改其位置和對齊方式：

根據需要修改選項卡

接下來，在Style選項卡下，您會發現許多用於自定義Elementor選項卡小工具的設計和外觀的選項。您可以修改其文字顏色和陰影、版式、間距等：

自定義樣式和間距

您可以更改選項卡周圍的邊框顏色和寬度。此設計功能可以幫助區分各個部分。

在Title下，您可以修改選項卡標題的文字顏色。您還可以通過單擊Typography更改字型和文字大小：

更多修改選項

完成後，儲存更改。您還可以考慮使用一些高階設定來使您的選項卡式內容更加複雜。

Elementor選項卡的高階設定

在小工具設定面板的“Advanced”選項卡下，您會發現大量附加選項：

高階選項卡選項

讓我們仔細看看上圖對應的設定選項分別包括哪些，自上而下：

• 高階：更改選項卡的邊距和填充。
• 運動效果：新增滾動和滑鼠效果，使小工具更具互動性並新增入口動畫。
• 變換：翻轉、旋轉和縮放您的小工具。
• 背景：選擇標準背景或懸停以插入過渡。
• 邊框：選擇邊框型別，例如實線或虛線。
• 面具：選擇時尚的設計面具並將其應用於小工具。
• 定位：調整小工具的寬度和位置。
• 響應式：更改將影響預覽或實時頁面的響應式可見性。
• 屬性：為元素包裝器設定自定義屬性。
• 自定義CSS：插入您的自定義CSS。

請務必注意，如果您使用的是 Elementor 的免費版本，您將無法訪問所有這些高階設定。例如，您不能新增自定義屬性、滾動效果或CSS。

如何在選項卡小工具中新增元素

使用Elementor Pro，您還可以在選項卡小工具中插入另一個元素。例如，假設您想在Locations選項卡下新增Maps小工具。

為此，建立您要使用的地圖，然後通過右鍵單擊鉛筆圖示並選擇Save as a Global將其儲存為Global Widget：

另存為“全域性”小工具

接下來，導航到您的Template Library（從您的 WordPress 儀表盤）並複製您剛剛建立的全域性小工具的簡碼。

然後單擊選項卡小工具內部並選擇+ Add Item按鈕以新增新選項卡。在容器的文字區域中，貼上您剛剛複製的簡碼：

將短程式碼貼上到容器中

完成後，單擊螢幕底部的UPDATE或PUBLISH。然後，您可以預覽小工具在您網站前端的外觀：

前端檢視

Elementor選項卡的8個頂級外掛

Elementor是一個強大的工具，它具有建立美觀、實用的選項卡式內容所需的所有功能和特性。

但是，您可能希望進一步擴充套件您的設計或使用高階功能。在這種情況下，您還可以考慮將Elementor與其他第三方工具配對。

讓我們看一下Elementor Tabs的一些頂級外掛，排名不分先後。

1. ElementsKit Elementor Table Widget

ElementsKit Elementor Table Widget是一個流行的擴充套件：

ElementsKit Elementor Table Widget

它的Table Widget可以讓您以有組織的方式展示大量未同步的資料。您可以構建可自定義的表格、新增正文內容以及插入影象和導航元素。

ElementsKit的功能包括：

• 比較表
• 時間表和日曆
• 專案管理
• 選單
• 500+區塊
• 70多個外掛
• 大型選單生成器
• 視差效果
• 彈出模式構建器

ElementsKit的單個站點起價為每年39美元。該計劃包括一年的更新和支援。

2. Elegant Tabs for Elementor

Elegant Tabs for Elementor是一個直觀的工具，可幫助您建立和自定義動態標籤：

Elegant Tabs for Elementor

如果您正在尋找具有許多設計自定義選項的擴充套件，此附加元件可能是一個不錯的選擇。您可以新增自定義顏色、圖示和字型。您還可以使用優雅的標籤為您的標籤新增自動切換功能，並將它們連結到您網站上的其他內容。

優雅標籤的主要功能包括：

• 高階樣式選項
• 自動切換功能
• 將任何選項卡設定為在載入時處於活動狀態的選項
• 對齊和垂直標籤
• 深層連結
• 製表符對齊支援

優雅標籤的起價為每年19美元。該計劃包括六個月的更新。

3. Livemesh Addons

Livemesh Addons包括大量現成的元素，可幫助您輕鬆設計和構建選項卡式內容：

Livemesh Addons

您可以從淺色和深色選項卡型別、10多種選項卡設計以及水平和垂直佈局選項中進行選擇。Livemesh Addons使用起來也很簡單，如果您是WordPress或Elementor的新手，這非常好。

Livemesh的主要功能包括：

• 10個淺色標籤設計和10個深色標籤設計
• 垂直和水平選項
• 可定製的移動解析度
• 25+外掛
• 支援圖示

Livemesh外掛計劃起價為每年37美元。該計劃包括一年的更新和支援。

4. Elementor Addons

來自流行的PowerPack的Elementor Addons是一個功能豐富的外掛，用於提升Elementor Tabs小工具的設計和功能：

Elementor Addons

您可以使用此外掛將文字和影象新增到您的選項卡，併為高階選項卡小工具應用六種樣式。它易於使用且易於理解。此外，Elementor Addons也是輕量級的，因此您不必擔心會降低網站速度。

PowerPack的Elementor Addons的主要功能包括：

• 快速輕量級的介面
• 預建模板
• 自定義內容顯示
• 高階選項卡樣式

每年44美元起，這個外掛比這個列表中的其他選項更貴。但是，它具有一整套小工具，可以自定義您網站的各個方面，而不僅僅是您的選項卡式內容。

5. JetElements

JetElements提供了一個響應式表格小工具，如果您正在尋找一種快速簡便的方法來對您的內容進行分組，它可能是理想的選擇：

JetElements

它可以讓您以乾淨、現代的方式展示非結構化資料。JetElements還提供定價表小工具，以八種不同的方式自定義和設定您的定價詳細資訊。

JetElements的主要功能包括：

• 45個小工具
• CSV 匯入表設定
• 8種造型選擇
• 支援所有內容型別
• 完全可定製

JetElements訂閱起價為每年24美元。Crocoblock還提供每年130美元的全包套餐，其中包含150多個小工具。

6. Essential Addons

您可能會考慮為Elementor選項卡使用的另一個流行外掛是Essential Addons：

Essential Addons

它是最受歡迎的Elementor小工具外掛之一。它包括100多個現成的區塊和80多個用於擴充套件和增強網站構建器的元素。

您可以為選項卡式內容利用的最佳元素之一是外掛的Data Table。此工具可讓您無縫設計幾乎任何表格型別並新增圖示、過濾器等。

Essential Addons的主要功能包括：

• CSV匯入表設定
• 過濾選項
• 完全可定製的設定
• 高階樣式選項
• 高階選項卡和手風琴元素
• 定價表

一個網站的Essential Addons起價為每年39.97美元。它附帶一年的更新和支援。

7. Premium Addons

Premium Addons是Elementor的一個高度可定製的工具，帶有各種免費和高階小工具：

Premium Addons

此外掛包含的許多強大的小工具之一是Elementor定價表。它具有排序功能、實時搜尋以及按升序或降序排列專案的選項。

高階外掛的主要功能包括：

• 匯入CSV檔案的選項
• 將URL新增到表格單元格
• 實時搜尋和排序
• 自定義和樣式選項
• 樂蒂動畫

您可以免費下載和使用高階外掛Elementor表格小工具。還有一個高階版，起價為每年39美元。

8.Element Pack

您可能會考慮與Elementor Tabs小工具一起使用的最後一個外掛是Element Pack：

Element Pack

這個Elementor擴充套件包包括一個表格小工具，可以以一種引人入勝且時尚的方式呈現您的內容。您可以在選項卡式內容中建立各種表格，包括定價、內容和加密貨幣表格。

Element Pack的主要功能包括：

• CSV匯入表設定
• 三表元素
• 自定義和樣式選項
• 過濾功能
• 實時搜尋

Element Pack的單站點許可證每年收費29.25美元，使其成為此列表中較便宜的選項之一。該計劃還包括20天退款保證。

小結

Elementor是一款出色的工具，可以幫助您輕鬆設計和構建您的網站。如果您希望以吸引人的方式對內容進行分組和組織，您可以考慮使用Elementor Tabs小工具。

正如我們在這篇文章中所討論的，您可以通過Elementor編輯器輕鬆將此小工具插入到任何頁面或文章中。然後，您可以新增內容並對其進行樣式設定以匹配您的品牌。要擴充套件小工具的功能，您還可以將其與第三方外掛配對，例如ElementsKit。