Divi 插件亮點：Table Maker

雖然Divi有很多模塊，但它沒有一個模塊來建表。 幸運的是，有一個解決方案。 Table Maker 是一個第三方插件，允許您使用 Divi Builder 構建完全可定制的表格。 為了幫助您確定這是否適合您的 Divi 網站插件，在本文中，我們將看看 Table Maker，看看它可以做什麼。

安裝 Table Maker

安裝簡單明了。

1. 導航到插件>添加新>上傳插件
2. 單擊選擇文件
3. 在您的計算機上找到插件的 zip 文件並選擇它
4. 點擊立即安裝
5. 點擊激活

表格製作模塊

Divi Builder 中添加了一個名為 Table Maker 的新模塊。 讓我們來看看主要功能。

Table Maker 內容選項卡

內容選項卡包括子模塊區域。 這些用於創建表的列。 對於列，您可以調整頁眉和頁腳計數以及列和行的大小、調整每種設備類型的響應斷點、啟用滾動以及選擇圖標、按鈕和圖像。 圖標、按鈕和圖像對大小、顏色、位置等進行了自定義。

列子模塊

子模塊定義列並包含一個字段以向行添加內容。 它的工作方式很像代碼編輯器，其中每一行都有編號。 您還可以調整寬度、圖標、按鈕和圖像。

默認情況下，第一行是列的標題，但如果您不想有標題，則可以更改此項。 您可以包含 HTML，這意味著您需要避免某些用於標記的字符。 您還可以添加 CSS、簡碼、iFrame、圖標、圖像、按鈕等。

這些列包括每個元素的設計自定義，包括文本、背景、單元格、頁眉和頁腳單元格等。

根據需要創建任意數量的列。 您可以單獨設置它們的樣式，將樣式從一種擴展到另一種，等等。我添加了 4 列並分別調整了每列的顏色和寬度。

頁眉和頁腳

您可以設置頁眉和頁腳的列數。 默認情況下，它有 1 個頁眉，沒有頁腳。 在本例中，我將前 2 個設置為頁眉，將最後一個設置為頁腳。 顏色是獨立的樣式。

您可以對行執行相同的操作。 在此示例中，我將 2 行設置為頁眉（左側的兩行），將一行設置為頁腳（右側的行）。

表格滾動

表格滾動提供水平和垂直滾動。 如果需要，您可以使列標題和行標題具有粘性。 這使它們保持在原位，因此它們不會滾動到視野之外。 在這個例子中，我啟用了滾動並使標題具有粘性。 我添加了很多列，所以它可以垂直滾動。 行標題保持原位。

表格圖標

您可以為每個單元格添加任意數量的圖標。 設置默認圖標並分別為每個單元格選擇圖標。 選擇默認圖標並從內容選項卡調整大小和顏色。

通過使用子模塊內容區域中的圖標標記，將圖標添加到您希望它們顯示的特定單元格中。 您可以覆蓋默認圖標並通過從子模塊的圖標選項卡中選擇此列來設置默認圖標，並且您可以輸入您希望它顯示的任何特定圖標的名稱。 Elegant Themes Marketplace 中的銷售頁面提供了指向圖標及其名稱列表的鏈接。

表格按鈕

表格按鈕也是使用標籤添加的。 在“內容”選項卡中添加一個默認按鈕。 您還可以從這些設置中設置按鈕樣式。 在每個列子模塊中使用這些相同的設置覆蓋默認按鈕。

將按鈕添加到每個帶有子模塊內容區域中的按鈕標記的單元格中。 通過將其添加到標籤中來更改按鈕上的文本。 在此示例中，我為默認按鈕添加了幾個單元格並更改了第二個按鈕的文本。

表格圖片

您可以向單元格添加圖像、圖標和其他類型的內容。 設置圖像質量、比例、比例以及水平和垂直對齊方式。 它有很多圖像選項。

即使圖像已添加到圖庫中，它們也不會顯示，直到您告訴它們要在哪個單元格中顯示。這是使用標籤完成的。 通過鍵入開始圖像標籤，將自動添加結束標籤，並且圖像顯示在該單元格中。 您可以將其與單元格中的其他內容一起包含在內。 在標籤之間添加一個數字以指定要顯示的特定圖像。

表製造商設計選項卡

設計選項卡包括表格框架、條紋、單元格、文本、頁眉、頁腳、大小、間距、邊框等的設置。以下是主要設置。

錶框

設計選項卡包括對錶格框架、單元格、文本、頁眉、行、頁腳、大小、間距、邊框等的自定義。這是表格框架。 默認框架類型使用間隙，在單元格之間放置一點空間。 這是 None，它刪除了單元格之間的邊界。

對於間隙，您可以獨立調整列間隙和行間隙。 我已將列間距增加到 8px，將行間距增加到 4px。

線條在每個單元格周圍放置一個邊框。 您可以控制線條的樣式、顏色和粗細。 這是默認設置。

在這個例子中，我將樣式設置為虛線，更改了顏色，並將線寬調整為 3px。

表條紋

Table Stripes 可以像標準電子表格一樣創建條紋效果。 您可以選擇它適用的位置，選擇順序，並調整色調、飽和度和亮度。 這些是默認設置。

在本例中，我將條紋色調調整為 86 度，飽和度調整為 172%，亮度調整為 82%。 所有三個調整共同作用以創建有趣的顏色選項。

在本例中，我調整了表格單元格、標題單元格和列標題單元格的顏色。

對於此示例，我已將 #1 框陰影添加到標題單元格，並將 #3 框陰影添加到行標題單元格。 我已分別為每種單元格類型將文本的水平和垂直對齊居中。 我還為間隙添加了更多空間。

頁眉和頁腳樣式

您可以單獨設置頁眉和頁腳文本以及單元格的顏色樣式。 在此示例中，我添加了一個頁腳，將文本設為白色並全部大寫，將單元格顏色設置為深藍色，並為單元格添加了框陰影。

在本例中，我獨立調整了單元格、頁眉單元格和頁腳單元格的邊框。

表格製作示例

我創建了一個包含 5 列、一個列標題和一個行標題的表格。 行標題有一個購物按鈕，可將您帶到每個產品的產品頁面，以及一個產品圖片。 兩個標題都使用黑色背景、圓角和佈局中的字體。

單元格使用條紋、佈局中較大的字體和圓角。 最後一列顯示圖標以顯示產品是否有庫存。 我為每個標題和單元格添加了一個框陰影。 表格框架使用列間距為 4 個像素，行間距為 7 個像素的間距。

這是相同的設計，行標題中沒有圖像。

這是在移動設備上顯示的帶有產品圖片的佈局。 它將表格減少到 2 列，其中一列是行標題。 這一個按列打破它。

您也可以讓它按行中斷。 此示例刪除圖像並顯示按行拆分的表格。

這把行顯示為手風琴。 單擊一個打開它以顯示其內容。

哪裡可以買到桌子製造商

您可以在 Divi 市場購買 Table Maker。 無限網站的費用為 35 美元，包括 30 天退款保證和一年的支持和更新。 文檔以視頻演練和文本形式提供。

結束的想法

這就是我們對 Divi 的 Table Maker 的看法。 它有很多功能可以為 Divi 構建和自定義表格，其中包括一些我沒有在這裡介紹的功能。 我只需要文檔來了解如何使用圖像、圖標和按鈕。

起初，使用標籤將按鈕、圖標和圖像添加到表格中似乎有點尷尬，但它很容易做到，而且由於單元格的內容是使用代碼編輯器添加的，它為您提供了比您更多的控制權。 d 通常有。

Table Maker 是一個用 Divi 創建表格的優秀插件。 能夠添加 HTML、簡碼、iFrame、CSS 等內容，極大地增強了您可以創建的表格類型。 如果您有興趣使用 Divi 構建自己的自定義表格，Table Maker 值得一看。

我們希望聽到您的意見。 您是否嘗試過 Divi 的 Table Maker？ 請在評論中告訴我們您對此的看法。

精選圖片來自 PCH.Vector/shutterstock.com