如何在 Elementor 網站中使用高級數據表小部件(5 個簡單步驟)

已發表: 2021-07-03

您是否面臨在 Elementor 網站上創建數據表並尋找智能解決方案的麻煩?

查看 Happy Addons 的新高級表格小部件,該小部件通過從 Google 表格、網站數據庫、TablePress 插件、CSV 導入等導入數據來幫助您創建表格。

借助 WordPress 和 Elementor 的強大功能,網站建設變得比以往任何時候都容易。

在本完整指南中,我們將向您展示如何使用 Happy Addons 的高級數據表小部件為您的 Elementor 網站創建數據表。

讓我們開始吧:

為什麼使用快樂插件的高級數據表小部件

How to Use Happy Addons’ Advanced Data Table Widget

每當您使用 Elementor 網站時,選擇正確的 Elementor 插件非常重要。 Happy Addons 是最合適的 3rd 方插件之一,它提供了大量的小部件和功能來構建一個令人驚嘆的網站。

在這些強大的小部件中,高級數據表是一個獨家小部件,可幫助您在幾分鐘內在您的網站上創建和導入響應式數據表。

您還可以向數據表添加其他快樂特性和高級功能,使其對您的用戶更加用戶友好。

這些是為您的網站考慮高級數據表小部件的重要原因:

  • 允許更好的定制
  • 獨家預先設計的演示桌
  • 輕鬆導入選項
  • WordPress 表格插件支持
  • 谷歌表兼容
  • 顯示數據庫表數據
  • & 還有很多

看起來很有趣,對吧? 好吧,現在讓我們指導您如何在 Elementor 網站中使用此小部件輕鬆創建數據表。

如何使用快樂插件高級數據表小部件創建數據表

在開始本教程之前,請確保您已在您的網站上成功安裝並使用了下面提到的這些插件。

先決條件:

  • 元素(免費)
  • 快樂插件(免費)
  • 快樂插件專業版

了解有關 Elementor 的一切:如何使用 Elementor(初學者分步指南)

第 1 步:創建新頁面

要創建新頁面,您必須訪問WordPress Dashboard –> Pages–> Add New 。 稍等片刻,您將獲得頁面設置選項。

第 2 步:將快樂插件“高級數據表”小部件添加到您的網頁

在搜索欄中找到“高級數據表”小部件。

然後從左側菜單中選擇小部件。 最後,將其拖放到選定區域。

Add Happy Addons 'Advanced Data Table’ Widget to Your Web Page

第三步:選擇合適的數據表

是時候根據自己的需要選擇合適的數據表了。 您可以使用 4 種不同的表類型來創建表。

1. Google Sheets:您可以使用 Google Sheet 插入表格。 為此,您必須添加Google API Key並設置Google Sheet ID ,並定義Google Sheets Range 。 而已。

2. TablePress:借助 Happy Addons Pro 高級數據表小部件,您還可以使用 TablePress 插件創建數據表。

查看博客以並排比較最好的 WordPress 表格插件。

3. 數據庫:有時您需要使用表格顯示數據庫中的數據。 為此,您可以選擇數據庫作為您的表類型。

4. 導入:您可以輕鬆導入 Elementor 網站上的任何表格。 您需要以CSV格式粘貼表格數據。

 Select Suitable Data Table

在這裡,在本指南中,我們使用Google Sheet作為表格類型。 看看下面的圖片。

Select Google Sheet as the data table

您還可以設置表格的 Head & Row 對齊方式。

第 4 步:自定義高級數據表小部件

您可以自定義您的餐桌設置。 轉到內容 -> 設置並以您自己的方式設置您的表格。

您將獲得所有這些多個設置選項:

  • 啟用搜索
  • 啟用分頁
  • 啟用條目
  • 啟用導出表
  • 導出為 CSV 文件
  • 導出表
  • 允許訪問者導出表格
  • 水平滾動的表格寬度
Advanced Data Table Settings

在樣式部分,您將獲得 3 個樣式選項來設計表格。

  1. 常見的
  2. 表頭
  3. 表行

常見風格

Style–> common中,您可以重新設計SearchPagination樣式。 您還可以使用..更改搜索欄樣式

  • 填充
  • 邊界半徑
  • 邊框類型
  • 寬度
  • 顏色
  • 標籤顏色
  • 輸入背景顏色

並且還重新設計了表格分頁使用..

  • 頂部間距
  • 之間的空間
  • 填充
  • 未鏈接的值邊界半徑
  • 邊框類型
  • 寬度
  • 顏色
  • 顯示條目顏色
  • 數據計數器顏色
  • 背景顏色
  • 顏色
Style Common Settings of Advanced-Data Table

樣式表頭

你甚至可以給表頭一個驚人的外觀。 這些樣式選項可以幫助您做到這一點。

  • 填充
  • 邊框類型
  • 寬度
  • 顏色
  • 排版
  • 背景顏色
  • 顏色
  • 排序圖標顏色
Style Data Table Head

樣式表行

如果您想以自己的樣式更改表格行樣式。 您可以使用以下這些選項。

  • 填充
  • 邊框類型
  • 寬度
  • 顏色
  • 排版
  • 背景顏色(偶數)
  • 背景顏色(奇數)
  • 顏色(偶數)
  • 顏色(奇數)
Style Advanced Data Table Row

注意:完成編輯 Google 表格後,不要忘記關閉刪除緩存。 並確保單擊應用按鈕以更新網頁上的更改。

Update Advanced Data Table Settings

第 5 步:使用高級部分添加更多樣式和效果

在默認的 Elementor“高級”選項中,您將獲得更多選項來添加運動效果、快樂效果、背景,以及使您的頁面響應的選項。

Advanced Settings

閱讀本文檔以了解有關高級功能及其用途的更多信息。

網頁的最終預覽

使用這個方便的小部件後,這是我們的最終輸出。

Advanced-Data Table Widget Final Preview
單擊此處檢查所有文檔

您準備好使用高級數據表小部件了嗎

在本博客中,我們展示瞭如何在 Elementor 網站上高效地創建數據表。 我們還解釋了為什麼您應該使用 Happy Addons 高級數據表小部件來創建和自定義數據表。

現在,是時候為您的站點創建數據表了。 你準備好出發了嗎? 在潛水之前,請確保您閱讀了完整的文檔。

如果您喜歡,可以在您的社交渠道上分享此博客。

並且不要忘記訂閱您的時事通訊。 免費!

查看如何在您的在線市場上使用 WooCommerce 產品表!