如何為訂閱計劃創建 Elementor 定價表

正在尋找為您的會員網站創建 Elementor 定價表的方法？

如果您想為您的會員網站創建一個時尚的定價表，Elementor 是一個不錯的選擇。 通過這篇文章中的提示，您將能夠完全控制定價表的設計和內容來創建如下內容：

如果您使用付費會員訂閱創建了會員網站，付費會員訂閱還提供與 Elementor Pro 中可用的定價表 Elementor 小部件的專門集成。

或者，您也可以使用第三方 Elementor 定價表插件。 雖然這不是本文的重點，但如果您無權訪問 Elementor Pro，我們也會快速向您展示如何進行設置。

準備好開始了嗎？

在本指南中，您將學習如何創建 Elementor 定價表並將其與您的會員計劃集成以創建無縫的購買/註冊流程。

如何為您的會員網站創建 Elementor 定價表

無需進一步介紹，讓我們直接進入我們的分步教程，了解如何使用 Elementor 為會員網站創建定價表。

要為您的會員網站創建 Elementor 定價表，您需要確保安裝了一些插件：

1. Elementor – WordPress.org 上的核心免費版本。
2. Elementor Pro – 如果您無法訪問 Elementor Pro，我們將在下一節中分享另一種免費方法。 但是，我們主要關注 Elementor Pro 中的定價表 Elementor 小部件，因為付費會員訂閱提供了與 Elementor Pro 動態內容功能的專門集成，可以輕鬆鏈接您的訂閱計劃。
3. 付費會員訂閱——這篇文章中的方法適用於 WordPress.org 的免費版本和高級版本。

1. 設置您的訂閱計劃（如果您還沒有這樣做的話）

在設置 Elementor 定價表之前，您首先要確保已設置付費會員訂閱並配置訂閱計劃。 即，您要在定價表中顯示的計劃。

當您設置定價表時，您將能夠為您提供的每個計劃創建一個列，包括免費和付費計劃。

如果您已經制定了計劃，請隨時跳到下一部分。

如果您還沒有任何訂閱計劃，您首先要安裝付費會員訂閱插件（您可以使用免費版或高級版）並完成簡短的設置嚮導。

然後，您可以通過轉到付費會員訂閱 → 訂閱計劃 → 添加新來創建您的第一個訂閱計劃。

為您的會員計劃命名，然後填寫定價詳細信息。

根據需要重複創建要在定價表中顯示的盡可能多的計劃。 您還可以按層次關係將計劃鏈接在一起，以便用戶可以在定義的路徑中輕鬆升級/降級。

我們保持簡短，因為我們專注於在這篇文章中創建定價表。 但是，如果您需要有關設置會員網站的更多詳細說明，可以查看我們關於如何創建 Elementor 會員網站的完整指南。

2.在 Elementor 中添加價格表小部件

接下來，打開要添加定價表的帖子或頁面的 Elementor 編輯器。

然後，在您希望顯示定價表的位置添加 Price Table Elementor 小部件。 此小部件可通過 Elementor Pro 獲得，因此它將出現在Pro小部件部分中。

當您添加價格表小部件時，它最初只會顯示一個價格表列。

要創建其他列，請右鍵單擊現有列：

確保右鍵單擊上面屏幕截圖中標記的圖標。 如果您改為右鍵單擊小部件，它將在現有的下方而不是旁邊創建一個新的定價表。 這不是問題，但如果您這樣做，則需要手動將該小部件移動到另一個小部件旁邊。

然後，從下拉列表中選擇複製。

您應該會看到另一列出現在原始列的旁邊。

要設置額外的定價表列，只需根據需要多次重複相同的步驟。

注意——您可能會發現在復制列之前設置定價表的樣式會更容易。 或者，您也可以使用複制/粘貼樣式功能在不同定價表列之間複製樣式。

3. 設置定價表的設計和內容

添加小部件後，您可以使用 Elementor 的設置側邊欄來控制定價表的內容和設計。

您可以使用“內容”選項卡中的不同部分添加內容。 例如，您可以在此處控制標題、功能列表、定價、CTA 按鈕文本等。

設置完內容後，您可以轉到“樣式”選項卡來配置每個定價表的設計。

我們建議使用強調色來吸引人們對您最受歡迎的計劃的注意。 您還可以使用內置的功能區功能來進一步吸引註意力，例如我們屏幕截圖中銀計劃中的“熱門”功能區。

如果需要，您還可以瀏覽“高級”選項卡以訪問其他設置，但通常不需要在那裡進行任何更改。

4.將您的定價錶鍊接到您的會員計劃

一旦您對定價表的內容和設計感到滿意，下一步就是將您的定價表 CTA 按鈕鏈接到付費會員訂閱中的訂閱計劃。

為此，請打開您的價格表小部件之一的設置，然後轉到“內容”選項卡中的“頁腳”設置。

找到“鏈接”部分並單擊其旁邊的“動態標籤”圖標。

您應該會看到一個下拉列表。 選擇訂閱計劃標題下的訂閱計劃URL選項。

然後，單擊訂閱計劃 URL文本旁邊的扳手圖標以展開設置面板。

使用訂閱計劃下拉菜單選擇您要鏈接到此定價表的特定會員計劃。

就是這樣！ 對定價表中的所有其他列重複相同的步驟，確保將每一列鏈接到正確的計劃。

5. 測試您的 Elementor 定價表

為了解決問題，我們建議測試您的 Elementor 定價表，以確保它的行為符合您的預期。

例如，如果用戶單擊 Silver Plan 下的Buy Silver ……

…應該會直接將他們帶到註冊/結帳頁面，並預先選擇了 Silver Plan。

如果您想為用戶提供在註冊頁面上更改其計劃的選項，您可以在鏈接到訂閱計劃時禁用 Elementor 設置中的單一計劃切換。

當您禁用此切換時，付費會員訂閱仍會在註冊頁面上預先選擇所選計劃。 但是，用戶可以根據需要手動更改計劃。

如何使用附加組件為 Elementor 創建定價表

如果您無權訪問 Elementor Pro，您還可以使用第三方 Elementor 定價表模板或附加組件。

有大量優質的 Elementor 附加插件，包括許多可幫助您添加定價表的插件。

唯一的缺點是您需要手動鏈接到您的會員計劃，而不是像 Elementor Pro 允許的動態標籤功能那樣動態鏈接它們。

不過別擔心——設置它仍然不會太複雜。

我們不會在這裡深入，但這裡有一個關於如何做到這一點的快速指南……

1. 安裝免費的定價表 Elementor 插件

雖然 Elementor 的免費版本沒有自己的定價表小部件，但您可以找到很多免費的附加組件。

這裡有一些選項可以讓你開始……

• ElementsKit Elementor 插件
• Elementor 的基本插件
• Elementor 的高級插件
• 皇家元素插件

您可以通過在 WordPress.org 上搜索“Elementor 定價表”找到更多信息。

我們將在此示例中使用 ElementsKit，但基本思想對於任何插件都是相同的。 所以 - 如果您更喜歡不同附加組件的設計選項/樣式，您可以自由使用那個。

2. 創建您的定價表

接下來，使用所選插件中的定價表 Elementor 小部件來創建定價表的內容和設計。

下面是 ElementsKit 定價表小部件的外觀：

3.手動將定價錶鍊接到訂閱計劃

如果您沒有 Elementor Pro，則無法訪問動態標籤功能以自動鏈接到您的訂閱計劃。

但是，您仍然可以手動將定價表 CTA 鏈接到相關訂閱計劃。

以下是手動創建直接鏈接的方法……

首先，您需要找到訂閱計劃的 ID：

1. 轉到付費會員訂閱 → 訂閱計劃並編輯您要查找 ID 的訂閱計劃。
2. 查看訂閱計劃編輯頁面的 URL。
3. 在 URL 中找到post=[number]之後的數字。 這是您的訂閱計劃 ID。

例如，如果編輯屏幕的 URL 是這樣的：

https://yoursite.com/wp-admin/post.php?post=24481&action=edit

那麼會員計劃 ID 是24481 。

然後，將計劃 ID 添加到此 URL 結構中（確保還用您的真實域名替換示例域名）。

https://yoursite.com/register/?subscription_plan=[ID_NUMBER]

例如，如果會員計劃 ID 為 24481，則正確的 URL 應如下所示：

https://yoursite.com/register/?subscription_plan=24481

獲得訂閱計劃的直接鏈接後，手動將該鏈接插入您正在使用的任何定價表小部件的按鈕中：

對其他訂閱計劃重複該過程。

立即創建您的 Elementor 定價表

我們的指南總結瞭如何使用 Elementor Pro 和付費會員訂閱為您的會員網站創建定價表。

或者，如果您可以手動插入鏈接，則還可以使用帶有免費版 Elementor 的第三方定價表 Elementor 插件。

付費會員訂閱的偉大之處在於，它以更多方式與 Elementor 集成，而不僅僅是定價表。

您還可以使用您的會員計劃來限制對某些 Elementor 部分、列和小部件（以及您網站上的其他內容）的訪問，自定義您的註冊和登錄頁面等。

我們有關於如何使用付費會員訂閱創建 Elementor 會員網站的完整指南。

如果您已準備好開始，請立即安裝付費會員訂閱。

付費會員訂閱專業版

付費會員訂閱讓您可以創建 Elementor 定價表來顯示您的訂閱計劃

獲取插件

或下載免費版