如何使用 Divi 創建橫向定價表

橫向定價表是推廣具有許多功能的產品的好方法。 而且，使用 Divi 的新五列佈局，這非常容易做到。 然而，與任何具有五列或更多列的佈局一樣，挑戰在於使佈局具有響應性，以便在移動設備上看起來也不錯。 在本教程中，我將向您展示如何創建在所有設備上看起來都很棒的水平定價表。 而且，我什至會向您展示複製橫向定價表和使用“查找和替換”等新設計功能，只需單擊幾下即可快速更改每個表的配色方案是多麼容易。

讓我們開始吧。

搶先看

入門

對於本教程，您只需要 Divi。 我們將使用 Visual Builder。 由於我們將從頭開始構建表，因此您需要創建一個新頁面，部署可視化構建器，然後選擇“從頭開始構建佈局”選項。

之後，您就可以開始了。 我們開始做吧！

為您的水平定價表設置五列行

首先，讓我們為可視化構建器中已經等待我們的部分提供一個五列佈局。

在我們開始添加任何模塊之前，讓我們更新部分設置以具有沒有任何頂部或底部填充的自定義寬度。

寬度：1200px
截面對齊：居中
自定義填充：0px 頂部，0px 底部

然後轉到行設置以快速為您的行以及三個中間列提供背景顏色，如下所示：

背景顏色：#00cbc9
第 2 列背景顏色：#00cbc9
第 3 列背景顏色：#eeeeee
第 4 列背景顏色：#eeeeee

然後按如下方式更新尺寸：

將此行設為全寬：是
天溝寬度：1
均衡柱高：是

我們將需要稍微回到行設置來更新間距，但現在讓我們開始為我們的每一列添加內容。

用內容模塊填充列

產品名稱

在第一列中，在內容框中（在文本選項卡下）添加具有以下標題的文本模塊：

<h2>Starter</h2>

這將作為您所展示的計劃或產品的標題的位置。 在此示例中，這將是某種“入門”計劃。

然後更新以下設計設置：

標題 2 字體樣式：TT
標題 2 文本顏色：#ffffff
標題 2 文字大小：38px
自定義填充（桌面）：頂部 90%，底部 90%，左側 10%
自定義填充（平板電腦）：頂部 30%，底部 30%

為特徵類別標題添加模糊

在第二列中，添加一個模糊模塊。 然後刪除內容框中的填充文本並保留標題文本。 然後選擇使用圖標而不是圖像並使用您選擇的一個更新圖標。

跳轉到設計選項卡並更新其餘設置，如下所示：

圖標顏色：#00cbc9
圖像/圖標放置：左
標題文字大小：16px
自定義填充：2vw 底部
底行邊框寬度：4px
底部邊框顏色：#cccccc

由於此簡介設計將用作第 2、3 和 4 列中的要素類別標題，因此您可以復制簡介模塊並將其粘貼到第二和第三列中。

我意識到間距現在看起來不太好。 您可能會想在模塊級別添加一些間距，但是對於這種設計，我發現在列級別（在行設置下）進行間距調整更容易。 我們稍後會談到這一點。

為功能描述列表添加文本模塊

Next 在第二列的模糊下添加一個文本模塊。 然後在內容框中添加下表html代碼：

• 功能描述在這裡。
• 功能描述在這裡。
• 功能描述在這裡。
• 功能描述在這裡。

無序列表樣式類型：方形
無序列表項縮進：4px
自定義填充：頂部 20 像素，底部 20 像素，左 5%，右 5%

現在就像我們為宣傳語所做的那樣，繼續複製文本模塊並將其粘貼到第 3 列和第 4 列的每個宣傳語模塊下。

將價格和按鈕添加到最後一列

在最後一列（第五列）中，我將使用定價表模塊來設計帶有美元符號的定價文本。 這就是定價表模塊中我們真正需要的全部內容，因此我將剔除其餘的內容和設計元素，留下定價文本和美元符號。 我可以使用定價表模塊中包含的按鈕，但是在平板電腦上做一些響應式魔法有點困難（稍後你會明白我的意思）。 所以我也將使用按鈕模塊。

繼續將定價表模塊添加到第五列。 通過單擊其中之一右側的垃圾桶圖標，刪除默認包含的兩個表之一。

然後通過添加完全透明的顏色代碼擺脫背景顏色。

背景顏色：rgba(255,255,255,0)

然後更新以下內容：

表頭背景顏色：rgba(255,255,255,0)
貨幣和頻率文本顏色：#ffffff
貨幣和頻率文本大小：30px
價格文字顏色：#ffffff
邊框寬度：0px
自定義保證金（平板電腦）：-100% 正確
自定義保證金（智能手機）：0% 正確
自定義填充：頂部 0px，底部 10px，左側 0px，右側 0px

現在通過單擊單個表顯示菜單左側的齒輪圖標轉到單個表設置。

現在刪除標題、副標題和內容的默認內容。 這將只留下貨幣和價格文本。

現在我知道你此時在想什麼。 如何處理價格文本下的邊界線？ 好吧，有一小段自定義 css。 轉到高級選項卡並將以下 CSS 添加到 Pricing Top 輸入框：

定價最高：

border: none;

現在，您就是這樣成功地為定價文本和貨幣符號創建了定價表！

對於按鈕，在定價表模塊下添加一個按鈕模塊並更新以下內容：

按鈕對齊：居中
文字顏色：淺
自定義保證金（平板電腦）：-100% 正確
自定義保證金（智能手機）：0% 正確

自定義邊距將與我們添加到定價表模塊的邊距相匹配，以便在平板電腦上獲得全角模塊。 由於平板電腦上的五列佈局會將第五列放在兩列佈局的左側，將模塊向右拉 -100% 將強制模塊達到行的全寬。

添加箭頭設計和響應列間距

通過分層漸變添加箭頭

為了在第一列中創建箭頭設計效果，我們將分層兩個漸變背景。 第一個漸變背景將在列級別添加。 我們稍後將在模塊級別添加下一個。

要添加漸變背景，請轉到行設置並添加以下內容：

第 1 列漸變背景左顏色：rgba(255,255,255,0)
第 1 列漸變背景右顏色：#eeeeee（這應該與第 2 列的背景顏色匹配）
梯度方向：-245deg
起始位置：75%
結束位置：0%

保存設置並跳轉到第一列中的文本模塊設置。 這是我們將添加第二層背景漸變以完成箭頭的地方。 更新以下內容：

第 1 列漸變背景左顏色：#eeeeee
第 1 列漸變背景右顏色：rgba(255,255,255,0)
梯度方向：245度
起始位置：25%
結束位置：0%

請注意，這些值彼此相等。 比如色階變了，245deg從負變正，75%現在是25%（差值）。 這就是如何使箭頭點的兩側完全對稱。

行和列的間距

回到行設置，讓我們通過更新以下內容來調整行和列的間距：

自定義填充：0px 頂部，0px 底部，0px 左，0px 右
自定義 2 填充：頂部 5%，底部 5%，左側 2%，右側 2%
自定義 3 填充：頂部 5%，底部 5%，左側 2%，右側 2%
自定義 4 填充：頂部 5%，底部 5%，左側 2%，右側 2%
自定義 5 填充：頂部 10%，底部 10%

您可能想知道為什麼我不只使用 2 個裝訂線寬度並完成它。 嗯，那是因為我想盡可能地最大化包含文本的列中的空間，以提高所有設備上的可讀性。 我們可以節省的每一點空間都很重要。 這就是為什麼列之間的邊距是用左右填充百分比創建的。

為新表格和配色方案複製表格

顯然，您需要多個橫向定價表供用戶進行比較。 要創建第二個定價表，請複制包含您創建的第一個表的整個部分。

然後打開行設置並將鼠標懸停在背景顏色上，然後單擊查找和替換。

在“內”下選擇“本節”。
在“替換寬度”下，添加顏色：#f84f51
然後選中該框以替換該部分中找到的所有值（不僅僅是背景顏色）。

然後單擊替換並觀看神奇的發生。 這是一種使用新顏色更改先前顏色的所有實例的快速簡便方法。

不要忘記在退出之前保存行設置以保存更改。

現在您有一個帶有新配色方案的新表。

再次重複此過程以添加另一個帶有顏色的表：#bdc958

製作特色表

為了使您的一張桌子看起來有特色並突出一點，您可以在放置桌子的部分添加一個框陰影，並將用於列背景和漸變的灰色更改為漂亮的白色。

為此，請轉到第二部分（中間部分）的部分設置並更新以下內容：

盒子陰影：見截圖
框陰影垂直位置：0px
框陰影模糊強度：80px

要替換灰色背景色，請轉到行設置並找到第 2 列的背景色 (#eeeeee)。 右鍵單擊它，然後單擊“查找和替換”。 更新內容如下：

在“內”下選擇“本節”。
在“替換寬度”下，添加顏色：#ffffff
然後選中該框以替換該部分中找到的所有值（不僅僅是背景顏色）。
然後點擊“替換”。

使用查找和替換來測試字體

如果您想在整個表格中使用不同的字體，您可以使用“查找和替換”功能輕鬆測試不同的字體。 我特意為所有模塊保留了默認字體，以使這個過程順利進行。 要更改整個表格頁面的字體，您需要做的就是在任何表格部分的第一列中打開文本模塊的設置（它實際上可以是使用頁面上默認字體的任何模塊）。 然後右鍵單擊正在使用的標題 2 字體並選擇“查找和替換”。 然後更新以下內容：

在“內”下保留“此頁面”。
在“替換寬度”下，選擇一種字體（我使用的是 Roboto Condensed）。
然後選中該框以替換該部分中找到的所有值（或者您無法選中它以替換所有 h2 字體）。
然後點擊“替換”。

現在整個頁面的所有字體都已更改。

就是這樣！ 現在橫向定價表已經完成。

讓我們來看看結果。

平板電腦和智能手機上的五列調整效果也很好。

最後的想法

Divi 的五列佈局，以及 Visual Builder 中強大的設計功能，讓您可以製作一些漂亮的水平定價表。 使用“查找和替換”在整個過程中調整顏色和字體可以節省大量時間，進一步改進設計過程。 我希望您發現本教程既有信息又有啟發性。

我期待在評論中收到您的來信。

乾杯!