如何創造性地使用 Divi 的切換模塊來展示定價計劃

在您的網站上展示定價計劃時，您可以輪流創建絕對令人驚嘆和有吸引力的定價頁面或部分。 使用 Divi 構建網站時，您很可能會選擇定價表模塊。 該模塊允許您快速添加定價表並根據需要對其進行樣式設置。 但是，如果您想向頁面的這一特定部分添加更多交互，您還可以使用切換模塊在點擊時顯示定價計劃。 這是通過保持其狀態打開並關閉其他兩個來突出特定定價計劃的好方法。

在本教程中，我們將逐步向您展示如何使用 Divi 的切換模塊創建華麗的切換定價表設計。 一旦你掌握了方法，你就可以為你建立的任何類型的網站創建各種切換定價計劃。

讓我們開始吧！

預覽

在我們深入學習本教程之前，讓我們快速瀏覽一下不同屏幕尺寸下的結果。

讓我們開始創作吧！

訂閱我們的 YouTube 頻道

添加新部分

間距

使用 Divi 的 Visual Builder 創建一個新頁面或打開一個現有頁面。 向頁面添加一個新部分，打開部分設置並添加一些自定義頂部和底部填充以在該部分的頂部和底部創建一些空間。

• 頂部填充：160px
• 底部填充：160px

添加第 1 行

列結構

完成修改部分間距設置後，您可以繼續使用以下列結構添加新行：

添加文本模塊

添加內容

無需對行進行更改，因此請立即添加文本模塊。 在模塊的內容框中輸入一些選擇的 H2 內容。

標題文字設置

繼續轉到設計選項卡並更改標題文本設置。

• 標題 2 字體：Didact Gothic
• 標題 2 字體粗細：常規
• 標題 2 文本對齊：居中
• 標題 2 文本顏色：#000000
• 標題 2 文字大小：40px
• 標題 2 字母間距：-1px

添加分頻器模塊

能見度

在您在前面的步驟中添加和修改的文本模塊正下方添加一個分隔模塊。 確保啟用了分隔器模塊的“顯示分隔器”選項。

• 顯示分隔線：是

顏色

繼續轉到設計選項卡並更改分隔線顏色。

• 顏色：#000000

漿紗

在大小設置中更改模塊的寬度。

• 寬度：39%
• 模塊對齊：居中

間距

添加一些自定義底部邊距。

• 下邊距：50px

添加第 2 行

列結構

我們完成了第一行及其模塊的修改。 是時候使用以下列結構添加新行了：

第 1 列漸變背景

尚未添加任何模塊，打開行設置並向第 1 列添加漸變背景。

• 顏色 1：#00fff2
• 顏色 2：rgba(255,255,255,0)
• 第 1 列漸變類型：徑向
• 第 1 列徑向：右下角
• 第 1 列起始位置：30%
• 第 1 列結束位置：30%

第 2 列漸變背景

對第二列也做同樣的事情。

• 顏色 1：#fce96f
• 顏色 2：rgba(255,255,255,0)
• 第 2 列漸變類型：徑向
• 第 2 列徑向：右上
• 第 2 列起始位置：40%
• 第 2 列結束位置：40%

第 3 列漸變背景

同樣，使用以下設置向第三列添加漸變背景：

• 顏色 1：#a659ff
• 顏色 2：rgba(255,255,255,0)
• 第 3 列漸變類型：徑向
• 第 3 列徑向：底部
• 第 3 列起始位置：30%
• 第 2 列結束位置：30%

漿紗

完成添加漸變背景後，轉到設計選項卡並更改大小設置。

• 使這一行全寬：是
• 使用自定義裝訂線寬度：是
• 天溝寬度：2

將切換模塊添加到第 1 列

添加內容

是時候開始創建不同的定價計劃了！ 將新的切換模塊添加到第一列並輸入標題。 為了設置內容框中不同元素的樣式，我們使用了一些額外的 HTML 標籤。 繼續複製以下幾行並將它們添加到內容框的文本選項卡中：

<p>&nbsp;</p>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>
<p>&nbsp;</p>
<p><span><span style="font-size: 50px; font-weight: bold;">$30</span>/mo</span></p>
<p>&nbsp;</p>
<p><a href="#" style="font-weight: bold; color: #ffffff; background-color: #000000; padding: 15px 40px 15px 40px;">Buy now</a></p>
<p>&nbsp;</p>

狀態

您可以選擇是否要打開或關閉切換模塊的狀態。 為了能夠看到您在本教程的其餘部分所做的所有更改，我建議保持狀態“打開”，直到您完成修改所有不同的設計設置。

背景顏色

繼續轉到切換模塊的背景設置並添加白色背景色。

• 背景顏色：#ffffff

圖標設置

接下來在設計選項卡中更改圖標顏色。

• 圖標顏色：#000000

切換設置

並在切換設置中修改打開切換背景顏色。

• 打開切換背景顏色：rgba(255,255,255,0)

標題文字設置

然後，對標題文本設置進行一些更改。

• 標題字體：Didact Gothic
• 標題字體粗細：粗體
• 標題文字顏色：#000000
• 標題文字大小：3.5vw（桌面）、60px（平板電腦）、40px（手機）

正文設置

還要修改正文設置。

• 正文字體：Didact Gothic
• 正文對齊方式：左
• 正文顏色：#000000
• 正文大小：18px
• 車身線高：1.5em

克隆切換模塊兩次並放置在剩餘的兩列中

完成第 1 列中的切換模塊的修改後，您可以繼續克隆它兩次並將重複項放置在剩餘的兩列中。

更改副本

確保您更改了重複項的所有副本，然後就大功告成了！

預覽

現在我們已經完成了所有步驟，讓我們最後看看我們在不同屏幕尺寸上創建的設計結果。

最後的想法

在本教程中，我們向您展示了使用 Divi 的切換模塊在您的網站上展示定價計劃的創造性方法。 這是與訪客互動並提升您的設計風格的好方法。 通過保持打開一個選項而關閉其他兩個選項，可以更輕鬆地突出顯示您部分中的特定定價計劃。 您可以將這種方法用於您正在構建的任何類型的網站。 如果您有任何問題或建議，請務必在下方評論區留言！