如何使用 Elementor 在按鈕單擊時打開彈出窗口？ [2022]

想知道如果單擊按鈕打開彈出窗口，您的網站將如何吸引訪問者？ 如果您想要這種打開彈出窗口的交互式按鈕，那麼最受歡迎的網站構建器Elementor有多種方法。 今天，我們將向您展示如何無需編碼即可通過單擊按鈕輕鬆創建令人驚嘆的彈出窗口。

帶有 Elementor 模態彈出窗口的 5 個最佳按鈕用例

在開始本教程之前，讓我們看看通過在按鈕單擊時打開 Elementor 模式彈出窗口，您將享受到哪些好處。 基本上這種交互式模式彈出用於網站營銷活動。 除此之外，還有很多通用的用例，可以在單擊按鈕時打開彈出窗口。 以下是模態彈出窗口的前 5 個用例。

1. 為業務捕獲潛在客戶

為了順利開展業務並促進公司發展，您需要潛在客戶。 通過培養潛在客戶，您可以將他們轉化為您的固定客戶。 網站是捕獲潛在客戶的最佳媒介。 如果您在單擊按鈕時打開一個彈出窗口，那麼您可以輕鬆收集潛在客戶的姓名、電話號碼、電子郵件和其他詳細信息。

2. 收集郵件訂閱

通常，如果您添加一個基本按鈕來收集電子郵件訂閱，它會將您的用戶帶到一個新網頁。 您可以在單擊按鈕時打開一個彈出窗口，而不是這樣做，這樣您的用戶就不必離開當前網頁。 這種做法驚人地增加了您的電子郵件訂閱 順利數數。

3. 營銷推廣與銷售

當您通過您的網站進行營銷促銷時，單擊按鈕即可打開彈出窗口，可以為您的網站提供交互式外觀並增加銷售額。 您可以在 Elementor 的單個彈出窗口中添加圖像、表格、特殊折扣券等。 在不使您的網站與促銷部分一起不需要的情況下，您可以將其替換為單擊按鈕時打開的彈出窗口。

4. 分享激動人心的公告

如果您打算宣布一個盛大的發布或其他激動人心的公告和促銷活動，點擊按鈕打開彈出窗口可能是最好的方式。 它將為您的網站帶來令人驚嘆的外觀，您可以使用虛擬五彩紙屑和其他節日裝飾品來裝飾網站。 此外，如果您打算宣布任何“即將推出”的重大新聞，那麼單擊按鈕即可打開彈出窗口，可以幫助您創建嗡嗡聲。

5.用作內容鎖

當您擁有一個多功能網站時，可能需要根據年齡、會員資格、訂閱等對內容進行限制。 如果您直接在網站部分直接提供受限制的內容，那麼它肯定會減少您的每次操作點擊次數。 取而代之的是，您可以創建一個有吸引力的彈出窗口，通過單擊按鈕立即打開。

為什麼 Elementor 是在按鈕上創建彈出窗口的最佳平台？

在網站中，有多種方法可以創建在 WordPress 中單擊按鈕時打開的彈出窗口。 一種方法是通過自定義編碼或聘請專家。 如果您不精通技術，那麼編寫代碼或聘請專家可能會花費您一大筆錢。 但是，當您使用Elementor – 最受歡迎的 WordPress 網站構建器時，您無需編碼即可完成。

要在單擊按鈕時創建彈出窗口，您只需拖放即可完成，無需編碼。 此外，在Elementor Popup builder的幫助下，通過單擊按鈕創建彈出窗口非常簡單，您可以自己創建它。 Elementor 提供無限的自定義和個性化選項。 因此，將其與您的網站品牌價值保持一致，您可以創建任何類型的彈出式窗口，該彈出式窗口可在單擊按鈕時立即打開。

無代碼教程：如何在單擊按鈕時打開 Elementor 模態彈出窗口？

現在讓我們進入教程並開始在按鈕單擊時打開一個彈出窗口。 在開始創建 Elementor 彈出窗口之前，您只需要集中註意力 5 分鐘，然後逐步按照這個簡單的教程進行操作。

第 1 步：開始使用 Elementor PRO

如果您打算使用 Elementor 創建一個在單擊按鈕時打開的模式彈出窗口，那麼您必須獲取Elementor PRO 。 使用 Elementor PRO 的獨家功能Elementor Popup Builder ，您可以立即構建單擊按鈕即可打開的彈出窗口。 Elementor 提供多種定價計劃，起價 49 美元。 獲得 Elementor PRO 插件後，將其安裝並激活到您的 WordPress 網站。

第 2 步：使用 Elementor Popup Builder 創建模板

現在是時候為單擊按鈕打開彈出窗口創建模板了。 為此，請轉到您的 WordPress 儀表板，轉到Templates → Popup 。 通過單擊選項卡，它會立即將您帶到 Elementor 彈出窗口構建器。 然後單擊“添加新彈出窗口”按鈕。 將出現一個彈出窗口。 模板類型自動選擇為彈出窗口。 如果需要，您可以提供模板名稱，然後單擊“創建模板”按鈕。

然後您將被重定向到Elementor 模板庫。 有 100 多個彈出式集合，可用於多種類別。 根據您的 WordPress 網站要求，選擇合適的 Elementor 彈出模板。 單擊模板以獲取簡要預覽。 然後單擊“插入”按鈕以在單擊按鈕時打開模式彈出窗口。

第 3 步：配置和個性化彈出模板

之後，Elementor 編輯器面板將打開，左側有所有配置選項。 從那裡，您可以輕鬆自定義單擊按鈕打開的彈出窗口。 您可以使用Boxed或Full Width保留模式彈出窗口。 同樣，您可以配置模式彈出高度、列間距、列位置、垂直對齊、溢出、HTML 標記等等。 不同類型的寬度提供不同類型的配置。

要自定義模式彈出內容，只需單擊文本、圖像或按鈕。 編輯面板將立即在左側打開。 您可以輕鬆更改彈出內容、字體系列等。還可以添加多個電子郵件輸出部分、按鈕高度、寬度、顏色、文本等等。 有一個選項可用於在提交後設置操作、管理提交、添加自定義電子郵件內容、收件人電子郵件、發件人電子郵件 ID 等。進行所有更改後，單擊“發布”按鈕。

第 4 步：設置條件和触發器

您可以通過單擊按鈕打開整個 WordPress 網站或選擇性頁面的彈出窗口。 您也可以在選定頁面中包含或排除 Elementor 彈出窗口。 所有這些配置都在“條件”選項卡中可用。

在“觸發器”選項卡中，您必須設置希望在單擊按鈕時打開彈出窗口的時間。 由於我們想使用按鈕單擊預覽彈出窗口，因此切換以啟用'On Click' 。 從“高級規則”中，您可以配置條件，例如向誰顯示彈出窗口、在到達表單時顯示等等。 然後單擊“保存並關閉”按鈕。 這就是您可以輕鬆創建 Elementor 彈出模板的方法。 然後返回 WordPress 儀表板。

第 4 步：在需要的地方添加 Elementor 按鈕

現在，打開一個要設置彈出窗口的頁面，單擊按鈕即可打開。 如果要創建新頁面，請轉到Pages → Add New 。 對於本教程，我們將使用 Elementor 按鈕連接彈出模式。 拖放頁面上的Elementor 按鈕。

個性化按鈕外觀、文本等，以根據您的網站品牌顏色進行調整。 下一步是將按鈕與彈出模式鏈接。 為此，請單擊“鏈接”字段中的“動態類型” ，從操作中選擇彈出窗口。 然後，單擊彈出窗口旁邊的“設置”圖標並選擇先前創建的彈出模板。 就是這樣！

在 Elementor 按鈕單擊時打開彈出窗口的最後一瞥

這就是您可以輕鬆地在單擊按鈕時創建彈出窗口。 進行其他自定義後，發布頁面。 現在進行預覽，以查看單擊按鈕時彈出窗口的打開方式。

如果您想為不同的頁面使用相同的按鈕，請將按鈕複製並粘貼到新網頁。 此外，您可以復制Elementor 彈出模板短代碼，並在您想要添加彈出窗口的任何地方使用它，單擊按鈕即可打開。

Elementor 用戶基本插件的獎金

Elementor 的基本插件是最強大的 Elementor 庫，擁有超過100 萬活躍用戶和 85 多個獨特的小部件。 它的創意按鈕小部件為客戶提供了更多功能的設計和多用途的可用性。 如果您使用的是 Essential Addons 按鈕小部件，那麼就像 Elementor 按鈕一樣，您可以在單擊按鈕時輕鬆打開彈出窗口。

Elementor使網站開髮變得更加容易。 就像單擊按鈕會打開彈出窗口一樣，您可以為您的 WordPress 網站創建更多令人驚嘆的多功能功能。 本教程到此結束。 如果您發現本教程有幫助，請不要忘記與他人分享。

讓我們知道您如何在我們的Facebook 社區中使用 Elementor 創建一個單擊按鈕即可打開的彈出窗口。 另外，訂閱 我們的博客會及時了解此類教程、提示和技巧。