如何使用 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 创建一个单击按钮即可打开的弹出窗口。 另外，订阅 我们的博客会及时了解此类教程、提示和技巧。