如何在WordPress中建立Elementor表格

如何在WordPress中建立Elementor表格

表格是大多數網站的關鍵元件。您可以使用它們來共享各種資訊,從價格到功能列表和連結。WordPress使您能夠為您的網站設定基本表格,但您可能正在尋找更多自定義選項。

使用Elementor,您可以訪問多個表格小工具。此外,還有許多Elementor表格外掛可以為流行的頁面構建器新增新的小工具。

在本文中,我們將討論WordPress表格的工作原理以及它們與Elementor小工具的比較。然後,我們將向您展示如何手動建立Elementor表格,並向您介紹一些將新表格小工具新增到編輯器的外掛。

  1. 何時使用WordPress表格
  2. Elementor表格可以做什麼
  3. 如何建立Elementor表格
  4. Elementor表格外掛推薦

何時使用WordPress表格

一旦你開始尋找它們,你會發現網路上到處都是表格。那是因為它們是您可以在網站中使用的最通用的元素。

以定價表為例。很難找到不使用表格來幫助您比較選項的服務或訂閱網站:

定價表

定價表

表格使您能夠以易於讀者消化的方式呈現大量資訊。更好的是,表格使使用者可以更輕鬆地相互比較多個資料集:

比較多個資料集

比較多個資料集

除了幫助您共享資訊之外,表格還可以幫助打破部落格文章或頁面中長段落的單調。通常,我們建議您避免使用長長的文字牆,因為它們可能難以導航。

區塊編輯器讓您可以輕鬆地將表格新增到您的網站。表格區塊使您可以設定所需的行數和列數:

WordPress區塊編輯器表

WordPress區塊編輯器表

儘管在WordPress中新增表格很容易,但您在自定義選項方面受到了一些限制。您可以更改背景顏色、自定義按鈕樣式和修改字型大小,但僅此而已。如果您想建立更時尚、更復雜的表格,則需要使用Elementor(甚至Divi)等頁面構建器。

Elementor表格可以做什麼

如果您想超越基本的WordPress表格,Elementor可讓您訪問高度可定製的價格表小工具。這使您能夠編輯表格標題、設定Header標籤、新增功能列表、調整號召性用語 (CTA) 等等:

Elementor價格表小工具

Elementor價格表小工具

請記住,使用Elementor,您可以為任何頁面或文章建立任何型別的佈局。這意味著您可以設定多列設計,以便您可以並排擁有多個價格表小工具:

Elementor中的價格表小工具並排

Elementor中的價格表小工具並排

Elementor還帶有一個目錄小工具。這使您的讀者更容易瀏覽長篇內容。

如何建立Elementor表格

使用Elementor建立定價表很簡單。要開始使用,請開啟Elementor編輯器。從這裡,您可以選擇從空白頁面開始或從Elementor庫中匯入模板:

從Elementor庫中選擇頁面或模板

從Elementor庫中選擇頁面或模板

當您準備好新增元素時,您需要選擇您希望表格具有的列數。單擊編輯器底部的Elementor加號,然後選擇要用於價格部分的列結構:

選擇所需的列數

選擇所需的列數

請記住,如果您使用多個列,則需要在每個列中新增一個單獨的價格表小工具。儘管每個表格都是一個獨特的元素,但使用者會看到它們並排(或在移動裝置上彼此下方)作為一個部分的一部分:

需要時新增多個表格小工具

需要時新增多個表格小工具

我們建議先新增一個價格表模組並對其進行樣式設定。然後,您可以將該元素複製或複製到其餘列中,併為每個列新增唯一文字。

要自定義表格,請選擇元素並移至小工具設定下的樣式選項卡。Elementor為您提供了大量的樣式選項。這些包括顏色選擇、排版設定和表格每個部分的獨特配置:

使用Elementor中的樣式選項自定義表格

使用Elementor中的樣式選項自定義表格

對價格表的樣式感到滿意後,右鍵單擊元素並選擇複製選項。表格的副本將出現在原始元素下,您可以將其拖到其中一個空列中:

複製表格以節省時間

複製表格以節省時間

您需要對儘可能多的列重複該過程。請記住,如果您不想重複使用設定,則每個表都可以具有獨特的樣式。在這種情況下,請確保樣式足夠相似,以便訪問者瞭解他們正在檢視比較。

在自定義表格時,請記住Elementor使您能夠將自定義CSS新增到任何模組。為此,請轉到小工具的高階設定並選擇自定義CSS選項卡:

新增自定義CSS

新增自定義CSS

通過Elementor新增自定義CSS比手動編輯WordPress程式碼要容易得多。同樣,在WordPress中編輯CSS 需要您訪問主題檔案並優化程式碼以獲得最佳效能。使用Elementor,您只需在每個模組的相應欄位中新增CSS程式碼。

如果手動新增CSS聽起來很嚇人,請不要擔心。學習CSS並不要求您是Web開發人員。然而,這是一項寶貴的技能,可以幫助您自定義您的WordPress網站。

設定好所有表格後,就可以編輯其文字併為每個條目新增所需的任意數量的功能了。您可以通過選擇一個表格並移動到小工具設定下的內容選項卡來做到這一點:

編輯表格文字和其他表格內容

編輯表格文字和其他表格內容

編輯價格表的內容很容易。您可以單擊小工具中的任何元素開始編輯它。一旦您對結果感到滿意,您的價格表就會很好用。

Elementor表格外掛推薦

儘管Elementor包含大量可幫助您建立表格的工具,但您始終可以將更多小工具新增到花名冊中。在本節中,我們將介紹12個Elementor外掛,您可以使用這些外掛將新型別的表格新增到您的文章和頁面中。即使很多這些外掛都是為Elementor構建的,您也可以將它們安裝為常規外掛。

與往常一樣,我們只推薦提供出色效能並定期更新的一流WordPress外掛。使用優化好的外掛將幫助您擴充套件您的網站 ,而不會遇到效能問題。

1. ElementsKit Add-Ons for Elementor

ElementsKit 

ElementsKit

ElementsKit為Elementor新增了超過85個小工具。您可以選擇基本表、定價表、支援嵌入TablePress元素等。

ElementsKit的專業版還包括一個高階表格小工具。這使您可以向表中新增搜尋和過濾功能。另外,您可以包含分頁功能,這樣使用者就可以在您的網站上沒有大量表格的情況下瀏覽條目。

主要特徵:

  • 三種型別的表格小工具
  • 支援表格過濾、搜尋和分頁
  • 與TablePress整合以嵌入表格

價格:  ElementsKit許可證起價為每年39美元

2. WP Table Builder

WP Table Builder

WP Table Builder

如果您是拖放編輯器的粉絲(如果您使用 Elementor,您應該會喜歡),您會喜歡使用WP Table Builder。該外掛使您能夠使用預配置的元素(例如按鈕、評論部分、產品評級等)來構建表格。

除了高階元素之外,您還可以訪問基本模組,例如文字和影象。該外掛還附帶表格模板,這將使您的工作更加簡單。

您可以使用區塊編輯器將WP Table Builder表新增到您的網站。該外掛還與Elementor整合,可以輕鬆地將表格放置在您網站的任何位置。

主要特徵:

  • 使用拖放式表格構建器
  • 訪問預建元素,例如按鈕、評論部分和產品評級
  • 自定義表格中每個元素的樣式
  • 使用預建的頁面模板

價格:  WP Table Builder許可證起價為每年39美元

3. TablePress

TablePress

TablePress

TablePress 是一個免費外掛,幾乎可以將電子表格功能新增到WordPress。該外掛可以匯入多種格式的資料,包括Excel、CSV和JSON檔案。您甚至可以為其他程式匯出表格資料。

使用TablePress,您可以建立包含搜尋功能的表格。如果您要顯示海量資料集,使用者可以選擇要顯示的條目數並在頁面之間移動。

使用Elementor嵌入TablePress表格很簡單。該外掛為每個表建立唯一的簡碼。Elementor Shortcode小工具將幫助您在網站的任何位置新增這些程式碼。

主要特徵:

  • 以Excel、CSV、JSON和HTML格式匯入和匯出資料集
  • 將可搜尋表新增到WordPress
  • 為表格啟用分頁

價格:  TablePress是一個免費外掛,但您可以找到它的高階擴充套件

4. Essential Addons for Elementor

Essential Addons for Elementor

Essential Addons for Elementor

Essential Addons for Elementor向頁面構建器新增了80多個新小工具。您可以選擇定價表、資料表、目錄等。

Elementor的基本外掛有兩個版本。免費外掛新增了更好版本的Elementor隨附的定價表小工具。如果您想訪問資料表(包括過濾、搜尋和多種樣式),您需要支付高階許可證費用。

主要特徵:

  • 新增定價、資料和內容表小工具
  • 在表中啟用搜尋和過濾

價格:  Elementor有免費版Essential Addons,高階許可證起價為每年39.97美元

5. PowerPack for Elementor

PowerPack for Elementor

PowerPack for Elementor

PowerPack for Elementor向頁面構建器新增了70多個小工具。該外掛還包括大量新模板,您可以使用這些模板更快地設計網站。

就表格而言,PowerPack使您能夠設定可排序和可搜尋的資料表格。您可以使用CSV檔案將資料匯入表中。該外掛還包括多個表格模板選項。

除了資料表,PowerPack還提供資訊和定價表小工具。如果您想向訪問者提供您提供的服務的詳細資訊,資訊表是完美的選擇。

主要特徵:

  • 建立可排序和可搜尋的資料表
  • 以CSV格式匯入資料表
  • 新增定價和資訊表小工具

價格:  PowerPack許可證起價為每年44美元

6. Exclusive Addons for Elementor

Exclusive Addons for Elementor

Exclusive Addons for Elementor

Elementor的獨家外掛提供免費和高階版本。免費外掛為Elementor新增了39個新小工具,而高階許可證將為您提供超過69個新元素。

在表格方面,免費版本新增了一個新的定價表模組。使用高階版,您可以訪問比較表和資料表。比較表的工作方式類似於定價元素,但您可以使用新的佈局和樣式。

主要特徵:

  • 新增新的定價表模組
  • 訪問比較表和資料表
  • 訪問表格小工具的多個佈局

價格: Elementor有免費版的Exclusive Addons。高階許可證起價為每年29美元

7. JetElements

JetElements

JetElements

JetElements為Elementor新增了45個新的小工具。他們中的大多數都面向電子商務和訂閱網站。但是,JetElements在其名冊中還包括幾個有趣的表格小工具。

在這些小工具中,您有定價和響應表。與Elementor中的基本定價表相比,JetElements版本為您提供了許多新的自定義選項。例如,您可以玩很多視覺效果,例如表格元素的視差和微動畫。

主要特徵:

  • 將定價和響應表新增到Elementor
  • 使用視差等新視覺效果自定義表格

價格:  JetElements全包許可證起價為每年130美元。您還可以建立自定義小工具捆綁包,只選擇您想要使用的選項。

8. Premium Addons for Elementor

Premium Addons for Elementor

Premium Addons for Elementor

Elementor的高階外掛有免費和高階版本。但是,只有高階外掛才會向Elementor新增新的表格小工具。

如果您為高階許可證付費,您將可以訪問新的資料和定價表小工具。如果您想為訪問者顯示更多資訊,您可以將資料表與圖表和圖形小工具一起使用。

主要特徵:

  • 將資料和定價表小工具新增到Elementor
  • 附有圖表和圖形小工具的表格

價格:  Elementor高階外掛的許可證起價為每年39美元

9. DataMentor

DataMentor 

DataMentor

DataMentor是一個向Elementor新增單個表格小工具的外掛。但是,該小工具包含的功能比我們迄今為止看到的大多數附加元件要多得多。

DataMentor表用途廣泛。您可以在每個元素中新增影象、按鈕、列表和圖示。該小工具使您能夠為每列或每行建立具有單獨樣式的表格。如果您想啟動設計過程,您還可以訪問多個表格模板。

主要特徵:

  • 向Elementor新增一個新的表格小工具
  • 訪問多個表格模板
  • 在表格中新增影象、文字、按鈕、列表和圖示

價格:  DataMentor是一個免費外掛。

10. Happy Addons for Elementor

Happy Addons for Elementor

Happy Addons for Elementor

Happy Addons for Elementor是頁面構建器中最全面的外掛之一。該工具向Elementor新增了超過99個小工具,並將大量新模板新增到其庫中。

就表格而言,Happy Addons包括基本和高階表格小工具。高階版支援多種格式的匯入資料,以及搜尋、過濾和分頁。此外,您還可以訪問多個預先設計的表格佈局。除了這些選項之外,Happy Addons還包括定價和比較表元素。

主要特徵:

  • 訪問基本和高階表格小工具
  • 為高階人才匯入資料
  • 使用預先設計的表格佈局
  • 新增定價和比較表

價格: 有一個免費版的快樂外掛。高階許可證起價為每年39美元

11. Royal Elementor Addons

Royal Elementor Addons

Royal Elementor Addons

Royal Elementor Addons為Elementor新增了40多個新小工具。這些都是免費的,但該外掛還提供高階版本,可為每個小工具解鎖額外的自定義選項。

使用Royal Elementor Addons,您可以獲得在Elementor中使用的新定價表。此小工具包括幾個新的樣式選項。此外,它還帶有一個切換選項,訪問者可以使用它在每月和每年的價格(或其他選項)之間切換。

主要特徵:

  • 向Elementor新增新的定價表小工具
  • 使用新樣式選項自定義定價表
  • 為您的表格新增價格切換

價格:  Royal Elementor Addons是免費的。高階許可證每個網站的費用為29美元 (這是一次性費用)。

12. Elementor Addon Elements

Elementor Addon Elements

Elementor Addon Elements

Elementor Addon Elements是一個免費外掛,可為Elementor新增超過24個新小工具。其中,您可以選擇價格、比較和資料表。

價格表包括預設Elementor小工具沒有的許多其他自定義選項。對於資料表,您可以在建立可搜尋或可過濾元素之間進行選擇。此外,表格支援動畫,這可以使它們更具視覺吸引力。

主要特徵:

  • 將價格、比較和資料表新增到Elementor
  • 在可過濾和可搜尋的資料表之間進行選擇
  • 向資料表新增動畫

價格: Elementor Addon Elements是免費的

小結

Elementor為您提供了廣泛的工具來建立時尚和複雜的WordPress表格。許多WordPress表格外掛也與Elementor相容,這意味著頁面構建器使您可以將幾乎任何型別的表格新增到您的網站。

Elementor頁面構建器帶有一個直觀的價格表小工具。如果您想新增其他型別的表格,我們建議使用Elementor表格外掛,例如ElementsKit或WP Table Builder。

評論留言