使用Elementor及其外掛建立彈窗教學

彈出式表單可以成為必不可少的營銷工具，使您能夠捕獲電子郵件地址、促進銷售等。然而，在WordPress中製作有吸引力的自定義彈窗並不總是那麼簡單。

幸運的是，Elementor頁面構建器外掛可以輕鬆在您的網站上建立和自定義彈窗。您可以調整它們以匹配您網站的設計 ，並根據使用者行為或來源新增觸發器。

本教學將概述不同型別的Elementor彈窗以及您可能想要使用它們的原因。然後，我們將解釋如何使用免費和Pro Elementor工具製作這些彈窗。

1. Elementor彈窗概述
2. 如何使用Elementor建立彈窗（免費）
3. 如何使用Elementor Pro建立彈窗
4. 如何配置高階Elementor彈窗設定
5. Elementor彈窗外掛

Elementor彈窗概述

Elementor是WordPress網站最受歡迎的頁面構建器外掛之一。它使您能夠將元素拖放到位以設計美觀且使用者友好的頁面：

Elementor頁面構建器

此外，Elementor使您能夠建立各種彈窗。這些是在預定時間後或使用者完成特定操作後出現在您網站上的自定義表單。

出於各種原因，彈窗可能是必不可少的工具。您可以使用它們來收集潛在客戶並擴充套件您的電子郵件營銷列表。Elementor彈窗與電子郵件營銷軟體整合，將客戶地址直接傳送到您選擇的平臺。

您甚至可以利用它們來促進與您的電子商務商店相關的銷售、折扣和活動。因此，彈窗可以成為您整體營銷策略的一部分。

此外，彈窗可以幫助您與客戶建立聯絡。您可以嵌入調查以徵求消費者反饋並改進您的產品和服務。

但是，如果您沒有很好地設計彈窗併為您的受眾選擇正確的觸發器，那麼彈窗可能會讓人覺得廉價和侵入性。因此，您需要確保有效地使用它們。這就是Elementor的用武之地。

Elementor彈窗的型別

Elementor帶有100多個彈出模板，您可以根據自己的需要進行自定義。這些設計包括：

• 潛在客戶捕獲表格
• 電子郵件註冊彈窗
• 促銷彈窗
• 登入和歡迎表格
• 受限內容彈窗
• 追加銷售和交叉銷售表格

這些彈出模板內建在Elementor工具包中，其中包括針對不同型別網站的各種設計功能：

ElementorKits彈出模板

此外，您可以從不同的彈窗位置和視覺設計中進行選擇，包括：

• 模態
• 滑入式
• 全屏
• 頂部或底部欄

最後，您可以使用Elementor編輯器快速自定義任何彈出模板以滿足您的需求。我們現在將解釋如何使用免費和Elementor Pro做到這一點。

如何使用Elementor建立彈窗

以前，Elementor外掛的基本外掛具有模態彈出功能，使使用者能夠建立免費的彈出表單。使用它是為Elementor Pro付費的最流行的方式之一。您可以找到許多幾年前的教學視訊，向您展示如何使用此方法。

但是，免費的Modal Popup功能已轉變為高階Lightbox和Modal元素。它不再免費使用。因此，您需要升級到Elementor Pro或支付我們在本文後面介紹的高階Elementor外掛之一。

如何使用Elementor Pro建立彈窗

Elementor Pro帶有我們將在本教學中使用的內建彈窗功能。您首先需要購買並啟用Elementor Pro。然後，您可以前往WordPress儀表盤開始製作彈窗。

第 1 步：製作彈窗

首先導航到WordPress儀表盤中的Elementor > Templates > Popups。然後，單擊ADD NEW POPUP建立一個新的：

轉到“模板”然後“新增新彈窗”

然後系統會提示您命名模板。確定名稱後，選擇CREATE TEMPLATE：

命名您的彈窗模板並單擊“建立”

這將啟動Elementor頁面構建器。您現在可以從現有的彈出模板設計中進行選擇，也可以從頭開始構建自己的模板。在我們的示例中，我們選擇了現有模板之一進行編輯：

從現有的彈出式設計中選擇或從頭開始構建

您現在可以使用設計設定來自定義彈窗。例如，您可以更改其佈局、對齊方式、背景影象和顏色。

第 2 步：選擇您的顯示條件

對設計感到滿意後，單擊PUBLISH旁邊的向上箭頭。然後，從出現的選單中選擇Display Conditions：

選擇您的顯示條件

接下來，點選ADD CONDITION以選擇Elementor彈窗將在您的網站上顯示的位置。然後，您可以從以下選項中選擇一個位置：Entire Site、Archives、Singular或WooCommerce：

選擇您希望彈窗顯示的位置

當您對自己的選擇感到滿意時，請點選NEXT。您將被帶到彈出表單的Triggers。

第 3 步：設定彈窗觸發器

在Triggers頁面上，您可以決定使用者需要做什麼來檢視您的Elementor彈窗。預設情況下，每個選項都被禁用，您可以通過單擊滑塊來啟用它。然後，您需要為觸發器指定值。

例如，如果您選擇On Page Load，您需要選擇在幾秒鐘內您的彈窗將顯示：

選擇您想要的彈窗觸發器

使用On Scroll，您可以選擇使用者需要滾動的方向以及在彈窗出現之前他們必須覆蓋多少頁面：

頁面滾動觸發器

On Scroll To Element設定要求您輸入CSS ID 。當使用者到達您頁面上的該元素時，將出現彈窗：

滾動到元素觸發器

使用On Click，您必須指定使用者必須在彈窗顯示之前點選您的網站的次數：

高階規則下的更多觸發選項

 After Inactivity設定使您可以在使用者在您的頁面上閒置特定時間後觸發彈窗：

不活動觸發器

最後，您可以選擇啟用On Page Exit Intent。當使用者試圖離開您的頁面時，此設定將觸發您的彈窗：

在適用時選擇“頁面退出意圖”觸發器

完成後點選SAVE & CLOSE或NEXT導航到Advanced Rules when you’re done。我們將在本教學的稍後部分檢視這些規則。

第 4 步：向您的網站新增彈出按鈕（可選）

當使用者單擊頁面上的特定元素時，您可能希望觸發Elementor彈窗。例如，您可以設計一個顯示“立即註冊”的按鈕並將其嵌入到您的頁尾中。當使用者單擊該按鈕時，他們會在他們的螢幕上看到您的電子郵件登錄檔單。

首先，您需要在您的網站上建立一個Elementor按鈕。在Elementor編輯器中開啟文章或頁面，然後從選單中選擇Button。將其拖放到您的頁面上：

從選單中選擇“按鈕”選項

指定按鈕文字並自定義其外觀後，單擊Link > Dynamic Tags。然後， 從下拉選單中選擇Actions > Popup ：

選擇按鈕的彈出操作

單擊Popup，然後從Action下拉選單中選擇Open Popup。您還可以從Popup選單中選擇您的表單：

選擇彈出下拉選項

最後，選擇UPDATE以釋出您的按鈕。每當使用者點選它時，他們都會被帶到您的登錄檔單。

第 5 步：儲存您的彈出模板以備後用

您還可以將彈窗儲存為模板。使用Elementor編輯器開啟彈窗，然後單擊UPDATE旁邊的向上箭頭。 從選單中選擇Save as Template：

將彈窗另存為模板

然後系統會提示您命名模板。完成後，點選SAVE：

為彈窗模板命名，然後單擊“儲存”

彈窗將儲存到您的模板庫中。您現在可以在使用模板構建頁面或釋出時使用它。

如何配置高階Elementor彈窗設定

我們已經介紹瞭如何製作基本的Elementor彈窗。但是，您可能還想使用一些高階設定。

使用Elementor編輯器再次開啟您的彈窗並導航到Display Rules。讓我們來看看不同的設定。

彈窗顯示設定

一些高階彈窗顯示設定使您能夠控制使用者何時看到您的表單。這些配置可以方便地定位回訪者而不是首次訪問者。

例如，您可以選擇在訪問者瀏覽您的頁面一定次數後顯示您的彈窗：

更高階的設定和條件

或者，您可以選擇Show after X sessions。此設定針對整體訪問而不是特定頁面：

在一定數量的會話後顯示彈窗

最多顯示X次設定可以限制使用者看到您的彈窗的次數。如果您不想不斷地向訪問者傳送侵入性表單的垃圾郵件，則可以考慮啟用它：

選擇使用者將看到您的彈窗的次數

您還可以使用“Show on devices” 和“Show on browsers” 設定來限制彈窗的顯示位置。彈窗在移動裝置上可能特別具有侵入性，因此您可以考慮在此處禁用它們：

您可以選擇“在裝置上顯示”選項

提供更好的移動使用者體驗可以讓您的訪問者滿意。它還可以促進您的搜尋引擎優化 (SEO) 工作，並幫助您的網站在搜尋結果中排名更高。

使用者來源設定

最後，Elementor使您能夠根據使用者的來源配置彈出顯示設定。如果您將訪問者引導至促銷登入頁面，然後使用彈窗進行廣告交易或詢問聯絡方式，這些設定可能會很方便。

以下設定使您能夠指定URL並選擇哪些連結將觸發彈窗：

向來自特定地點的使用者展示

最後，您可以選擇對登入使用者隱藏彈窗。如果您執行付費會員網站，您可能會使用此設定：

隱藏已登入使用者的彈窗

當您對所有選擇的設定感到滿意時，點選SAVE & CLOSE。如果需要，您可以返回此處並更改任何這些配置。

Elementor彈窗外掛

正如我們所見，Elementor Pro可以輕鬆為您的網站建立彈窗。但是，您可能還沒有準備好升級到高階頁面構建器。或者，您可能正在尋找其他設計功能。

以下是一些考慮到這些因素的Elementor彈窗的最佳外掛。

1. JetPopUp（Crocoblock）

JetPopUp（Crocoblock）

JetPopUp是一個使用者友好的外掛，具有與Elementor完美整合的拖放介面。它使您能夠建立動態和自定義的彈出表單，包括電子郵件註冊、cookie同意表單和倒計時。

JetPopUp以其互動功能而大放異彩。您可以從多種動畫設定中進行選擇，例如滑動、翻轉和旋轉。此外，該外掛具有各種模板，您可以根據需要進行自定義。

此外掛還允許您選擇和自定義多個顯示設定。例如，您可以在使用者嘗試離開您的網站時的特定日期或在一定數量的滾動後向他們展示您的JetPopUp表單。

特徵：

• 從預設的彈出模板中選擇
• 選擇不同的彈窗顯示條件
• 包括和排除特定條件
• 使用動畫效果

定價： JetPopUp每年收費22美元。該軟體包包括MailChimp整合、彈窗小工具和客戶支援。您還可以以每年130美元的價格升級到全包訂閱。它帶有20個額外的外掛和150個額外的小工具。

2.Popup Box Widget (PowerPack)

Popup Box Widget (PowerPack)

如果您正在尋找高階Elementor彈出設定，請考慮使用PowerPack的Popup Box Widget 。它允許您構建包含動態元素（如視訊、影象和Google地圖）的自定義彈窗。

該外掛使您能夠根據各種使用者操作觸發彈窗，包括退出意圖和自定義時間延遲。您還可以使用連結和號召性用語 (CTA) 的其他元素建立互動式兩步彈窗。

此外，彈出框小工具具有高階動畫設定。您可以使彈窗縮放、使用報紙格式或使用3D動畫。

特徵：

• 從動畫效果中選擇
• 建立兩步彈窗
• 使用時間延遲和使用者觸發器
• 顯示影象、視訊和其他互動元素

定價：彈出框小工具包含在PowerPack訂閱中。計劃起價為每年49美元，附帶70多種不同的Elementor小工具。

3. Lightbox & Modal（Elementor的基本外掛）

Lightbox & Modal（Elementor的基本外掛）

我們之前簡要介紹了這個Elementor彈出外掛。Lightbox & Modal是一個多功能小工具，帶有Elementor工具的基本外掛。它可以幫助您建立具有視訊、影象和動畫等互動式功能的彈窗。

Lightbox & Modal旨在使用Elementor網站上的按鈕和連結。您可以建立觸發彈出表單的自定義按鈕、圖示和文字。此外，小工具可以使用時間延遲和其他使用者操作。

總體而言，Lightbox & Modal可能是與使用者互動的最佳選擇，而不是簡單地展示資訊。

特徵：

• 為彈窗使用按鈕觸發器
• 顯示影象、視訊和自定義內容
• 自定義彈出佈局
• 從不同的動畫型別中選擇

定價： Lightbox和Modal包含在Elementor Pro的基本外掛中。計劃起價為每年39.97美元，包含70多個小工具和7個擴充套件。

小結

彈出式表單對於您的潛在客戶生成和營銷活動至關重要。它們還可以幫助您與訪問者互動並將其保留在您的頁面上。幸運的是，您可以使用Elementor頁面構建器建立自定義彈窗。

使用Elementor Pro建立彈窗非常容易。您可以自定義它們以匹配您的品牌，並決定它們在您網站上的顯示位置。您還可以設定高階顯示設定以根據使用者操作和來源顯示彈窗。