如何在 Elementor 中建立有效的點擊觸發訂閱彈出窗口

點擊觸發訂閱彈出窗口可以有效提高您網站的電子郵件註冊率,同時提升使用者體驗。Elementor 提供了強大的工具來建立和自訂彈出窗口,讓您輕鬆設定 「點擊開啟」。 訂閱彈出窗口.本教學將引導您完成每個步驟,以建立僅在使用者按一下特定連結或按鈕時才會出現的訂閱彈出式視窗。

簡介
訂閱彈出窗口是吸引訪客並鼓勵他們註冊您的電子報、促銷活動或更新的好方法。與可能會中斷使用者體驗的自動觸發彈出式視窗不同,點擊觸發彈出式視窗只會在使用者準備好要看的時候才會開啟,因此對使用者更友善,也更有可能達成轉換。讓我們探討一下如何在 Elementor 中建立一個點擊連結或按鈕時開啟的訂閱彈出窗口。
步驟 1:建立訂閱快顯範本
- 存取元件或彈出式樣板
- 登入您的 WordPress 面板,並導航至 範本 > 快顯.
- 按一下 新增快顯 來建立新的快顯範本。

- 命名並建立您的快顯範本
- 為您的彈出視窗命名,例如"訂閱彈出窗口" 然後按一下 建立範本.

- 選擇或設計您的 Popup 佈局
- Elementor 會向您展示各種預先設計的彈出視窗模板。選擇一個適合您需求的,或從一個 空白樣板.
- 按一下 插入 以在 Elementor 編輯器中開啟選取的範本。點擊"x" 帶您進入空白範本頁面。

- 新增訂閱表格
- 拖曳 形式 小工具 到彈出式視窗中,以新增訂閱表格。
- 設定表單欄位以擷取必要的資訊,典型的做法是:
- 名稱 (選購) - 提供更個人化的體驗。
- 電子郵件 (必填) - 作為訂閱的主要資訊。
- 保持簡單,只填寫電子郵件欄位,以增加註冊的可能性。

- 設定表單提交動作
- 將表單的提交按鈕文字更新為吸引人的文字,例如「立即訂閱」或「取得更新」。
- 在 提交後的動作 區段,選擇 電子郵件 或 MailChimp (如果您使用 MailChimp 進行電子郵件行銷)。
- 自訂提交後的動作,例如傳送感謝訊息或新增 成功通知.


- 設計您的快顯風格
- 使用 Elementor 的樣式選項自訂 表格的顏色, 字體以及 間距 以配合您的網站品牌。
- 為了吸引注意,請加上標題,例如「保持更新!」或「」。訂閱最新消息. “


- 儲存並發佈快顯
- 對設計感到滿意後,按一下 發表.現在會提示您設定彈出視窗的顯示設定。
步驟 2:組態彈出視窗的顯示與觸發設定
- 設定顯示條件
- 按一下 新增條件 並選擇 整個網站 或您希望彈出視窗可存取的特定頁面。


- 設定觸發器
- 關閉任何自動觸發器(如「在頁面載入時」或「在捲動時」)。這一步驟可確保彈出視窗只會在使用者按一下指定連結或按鈕時出現。

- 儲存顯示設定
- 按一下 儲存與關閉.
步驟 3:建立連結或按鈕,以觸發彈出式視窗
- 編輯需要連結的頁面或文章
- 在 Elementor 中開啟您要新增觸發連結或按鈕的頁面或文章。
- 為彈出觸發器新增連結或按鈕
- 插入一個 按鈕 或文字連結 widget 來作為彈出式觸發器。使用「立即註冊」或「訂閱更新」等吸引人的文字。
- 您可以將彈出觸發器附加到圖片、圖示或其他可點選的元素,以獲得自訂的外觀。

- 設定開啟快顯視窗的觸發動作
- 選取連結或按鈕,並前往 連結設定 在 Elementor 編輯器中。
- 將連結類型設定為 動態標籤, 然後選擇 動作 > 快顯 從下拉式清單中選取。


- 選擇彈出動作和名稱
- 選擇 開啟快顯 作為動作,並選擇之前建立的訂閱彈出式視窗名稱。
- 如果您希望使用者可以手動關閉快顯視窗,也可以設定關閉快顯視窗動作。

- 儲存您的變更
- 按一下 更新 來儲存您對頁面的變更。
步驟 4:測試快顯
- 預覽頁面
- 造訪您新增彈出式觸發器的頁面,按一下連結或按鈕,並確保訂閱彈出式視窗正確顯示。
- 提交檢查表格
- 提交測試項目,以確保表單如預期般運作。如果您將表單設定為傳送電子郵件通知,請檢查是否收到電子郵件。
- 如果連接至 MailChimp 等工具,請驗證測試訂閱是否已新增至正確的清單。
其他提示和建議
- 新增動畫:在彈出視窗的進階設定中,您可以加入入口和出口動畫 (例如淡入或滑入),讓彈出視窗看起來更流暢、更吸引人。

- 針對行動裝置進行最佳化:在 Elementor 編輯器中切換至行動檢視,並針對行動螢幕調整快顯的設計,以確保行動使用者的無縫體驗。
- 頻率控制:如果您打算使用多個彈出式視窗,請限制彈出頻率,以免使用者不堪負荷。

- 隱私權聲明:使用 正文 在表單底部加入簡短的隱私權免責聲明,向使用者保證他們的電子郵件資訊將受到安全保護。
總結
在 Elementor 中建立點擊觸發訂閱彈出窗口,可有效提高網站的電子郵件註冊率,同時確保良好的使用者體驗。與自動觸發彈出窗口不同,這種方式只會在使用者準備好參與時才顯示彈出窗口,因此侵擾性低、轉換率高。遵循這些步驟,您就可以輕鬆設計、自訂和配置符合您的品牌並鼓勵使用者互動的訂閱彈出式廣告。精心設計、策略性放置的彈出式視窗對於建立您的電子郵件名單以及與您的受眾保持聯繫非常有價值。
不錯