作為終身會員和黑色星期五新客戶，我們為您提供的獨家登陸頁面之一是令人驚嘆的軟件銷售登陸頁面。 這個登陸頁面將以其獨特的部分分隔符和高質量的模型讓您大吃一驚。 在本文中，我們將向您展示如何使用 Divi 的動態內容功能為其添加動態定價表！

如果您是當前的終身客戶，或者如果您在我們的黑色星期五促銷期間購買了新帳戶或升級了，您可以立即下載此佈局。

獲取獨家黑色星期五軟件銷售登陸頁面

在進入此用例之前，您需要進入獨家黑色星期五軟件銷售登陸頁面，您可以通過成為新的 Elegant Themes 會員、升級您現有的帳戶或已經成為我們的終身會員來獲得該登陸頁面。 如果您確實已經是終身會員，您可以登錄我們的會員區並在此處下載我們所有的專屬登陸頁面。 其他所有人都需要使用下面的按鈕購買或升級，然後才能學習我們教程的其餘部分。

在它消失之前聲明交易！

使用如何使用 Divi 創建動態定價表

對於本文的其餘部分，我們假設您已經利用了我們的黑色星期五優惠，或者您已經是終身會員並且可以訪問黑色星期五軟件銷售登陸頁面

從我們的會員區下載新的軟件銷售登陸頁面後，您可以觀看下面的視頻，了解它的設置是多麼容易。 我們還鼓勵您按照本教程進行操作，以使您的網站為進一步定製做好準備。

在這個用例帖子中，我們將向您展示如何使用 Divi 和免費的高級自定義字段插件創建動態定價表。 如果您的客戶經常更改訂閱價格，並且您希望允許他們在不訪問 Divi 的情況下自行更改價格，那麼創建動態定價表非常有用。 這將幫助您確保他們不會弄亂頁面本身的任何內容，同時仍然可以更改某個套餐的價格、描述和會員級別。

預覽

在我們深入研究之前，讓我們快速瀏覽一下最終結果。

讓我們開始吧！

安裝高級自定義字段插件

您需要做的第一件事是在您的 WordPress 網站上安裝高級自定義字段插件，方法是轉到插件 > 添加新 > 搜索插件並安裝它。

創建新字段組

激活插件後，您就可以開始使用了。 添加新的字段組。

姓名 + 地點

為您的新字段組命名。 請記住，在本教程的這一部分結束時，您將擁有三個字段組（等於定價表的數量），因此請確保正確命名。 還要更改此字段組的位置設置。

添加會員級別字段

是時候開始添加字段了！ 我們總共需要三個。 使用以下設置添加會員級別字段：

• 字段標籤：會員級別 1
• 字段名稱：membership_level_1
• 字段類型：選擇
• 選擇：添加選擇的內容

添加成員資格說明字段

繼續添加成員資格描述字段。

• 字段標籤：成員資格說明 1
• 字段名稱：membership_description_1
• 字段類型：文本

添加價格字段

您需要的最後一個字段是價格字段。

• 字段標籤：價格 1
• 字段名稱：price_1
• 字段類型：文本

重複字段組兩次並將名稱和字段調整為定價表編號

一個字段組等於我們頁面上的一個定價表。 現在我們已經完成了第一個，我們可以繼續克隆它兩次，以確保我們有足夠的字段組來匹配頁面上定價表的數量。

更改組內所有字段的數量

您創建的每個動態字段都將顯示在 Visual Builder 中。 為確保您知道要鏈接到哪些信息，請為重複的字段組及其字段指定不同的編號。

使用 Divi 的軟件銷售登陸頁面創建新頁面

在本教程的下一部分中，我們將向我們的軟件銷售登陸頁面添加動態定價表。 使用此佈局創建一個新頁面。

向頁面添加動態內容

切換回此頁面的後端並向每個定價表添加動態內容。

在頁面上的定價表下方添加新行

列結構

繼續啟用 Visual Builder 並在此處添加新行：

漿紗

在不添加任何模塊的情況下，打開行設置並更改大小設置。

• 使用自定義裝訂線寬度：是
• 天溝寬度：1

間距

然後，轉到間距設置並添加一些自定義邊距。

• 上邊距：100px
• 下邊距：100px

將 CTA 模塊添加到第 1 列

將標題字段連接到會員級別 1 動態內容

我們在第 1 列中需要的第一個模塊是行動號召模塊。 將標題字段鏈接到您在本教程的前一部分中創建的會員級別 1 字段。

將內容框連接到會員描述 1 動態內容

同樣，將內容框連接到 Membership Description 1。

背景顏色

然後，轉到背景設置並更改 CTA 模塊的背景顏色。

• 背景顏色：#ffffff

背景圖片

添加一個微妙的背景圖像。 上傳軟件銷售登陸頁面後，您將能夠在媒體庫中找到以下背景圖片：

• 背景圖片：software-sale-13.png

文字設置

繼續轉到文本設置並更改模塊的文本方向。

• 文本方向：左

標題文字設置

為了與登陸頁面的設計風格相匹配，還需要對標題文本設置進行一些更改。

• 標題字體：魔方
• 標題字體粗細：輕
• 標題文字顏色：#4258ff
• 標題文字大小：40px
• 標題行高度：1.3em

正文設置

正文文本設置也是如此。

• 正文字體：魔方
• 正文字體重量：中等
• 正文顏色：rgba(0,0,0,0.34)
• 正文文字大小：15px
• 車身線高：1.8em

間距

接下來添加一些頂部填充。

• 頂部填充：60px

邊界

並將“8px”添加到模塊的每個頂角。

盒子陰影

最後但並非最不重要的一點是，我們將添加一個微妙的框陰影以在頁面上創建深度。

• 框陰影垂直位置：50px
• 框陰影模糊強度：100px
• 陰影顏色：rgba(66,88,255,0.2)

將文本模塊添加到第 1 列

將內容框連接到價格 1 動態內容

繼續並在第 1 列中的號召性用語模塊正下方添加一個文本模塊。將此模塊的內容框鏈接到價格 1 動態內容。

背景顏色

繼續更改此模塊的背景顏色。

• 背景顏色：#ffffff

文字設置

還要修改文本設置。

• 文字字體：魔方
• 文字字體粗細：輕
• 文字顏色：#4258ff
• 文字大小：70px
• 文本行高：1em

間距

接下來添加一些自定義填充值。

• 底部填充：60px
• 左填充：40px

邊界

繼續轉到邊框設置並在兩個底角添加“8px”。

盒子陰影

最後但並非最不重要的是，也給這個文本模塊一個框陰影。

• 框陰影垂直位置：80px
• 框陰影模糊強度：100px
• 陰影顏色：rgba(66,88,255,0.2)

將按鈕模塊拖到第 1 列

第一列中我們需要的最後一個模塊是按鈕模塊。 克隆您可以在前一行中找到的一個按鈕模塊，並將其放在第 1 列中。

更改間距

打開按鈕模塊的設置並添加一些自定義邊距。

• 上邊距：30px
• 下邊距：50px

克隆第 1 列中的所有模塊並放置在剩餘的列中

為了節省時間，我們將克隆第 1 列中的所有三個模塊兩次，並將重複項放置在該行的其餘列中。

修改第 2 列中的模塊

CTA 模塊

將標題字段連接到會員級別 2 動態內容

我們需要修改重複項，從第二列中的 CTA 模塊開始。 將標題字段連接到 Membership Level 2 動態內容。

將內容框連接到會員描述 2 動態內容

對內容框做同樣的事情。

添加漸變背景

接下來為模塊添加漸變背景。

• 顏色 1：#6959ff
• 顏色 2：#c1bfff
• 梯度方向：15度
• 起始位置：22%
• 結束位置：95%

更改標題文本顏色

還要更改標題文本顏色。

• 標題文字顏色：#ffffff

更改正文顏色

正文顏色也是如此。

• 正文顏色：#ffffff

更改間距

為了將這個特定的定價表放在聚光燈下，我們還將調整間距值。

• 上邊距：-50px（桌面），0px（平板和手機）
• 頂部填充：100px

文本模塊

將內容框連接到價格 2 動態內容

繼續打開第 2 列中的文本模塊並將內容框鏈接到價格 2 動態內容。

更改背景顏色

接下來更改此模塊的背景顏色。

• 背景顏色：#6959ff

更改文本顏色

並將文本顏色更改為白色。

• 文字顏色：#ffffff

更改間距

最後但並非最不重要的是，更改間距設置中的自定義填充值。

• 底部填充：120px
• 左填充：40px

修改第 3 列中的模塊

CTA 模塊

將標題字段連接到會員級別 3 動態內容

我們還需要更改第 3 列中的模塊。 將標題字段鏈接到會員級別 3 動態內容。

將內容框連接到會員描述 3 動態內容

內容框也是如此。

添加漸變背景

然後，為模塊添加漸變背景。

• 顏色 1：#c87cff
• 顏色 2：#ffbcf8
• 梯度方向：18度
• 起始位置：22%
• 結束位置：95%

更改標題文本顏色

將標題文本顏色更改為白色。

• 標題文字顏色：#ffffff

更改正文顏色

對正文文本顏色做同樣的事情。

• 正文顏色：#ffffff

文本模塊

將內容框連接到價格 3 動態內容

繼續打開第 3 列中的文本模塊並更改此處的動態內容。

更改背景顏色

接下來添加不同的背景顏色。

• 背景顏色：#c87cff

更改文本顏色

最後但並非最不重要的一點是，將文本顏色更改為白色，您就完成了！ 您的頁面上現在擁有三個完全動態的定價表！

• 文字顏色：#ffffff

最後的想法

此用例是我們黑色星期五交易的一部分，我們與黑色星期五客戶和終身會員共享 6 個免費的限量版登錄頁面。 通過在這些天加入我們授權的社區並成為會員，您將獲得：

• 25% 關閉一切
• 所有 6 個登陸頁面都是免費的
• 訪問我們很棒的主題和插件
• 獎金獎品

抓住機會，今天就成為會員！