网站设计如何创建POPUP：完美的说明与示例

2022-10-01 分类：网站设计

似乎互联网上的人被分为两个阵营 - 那些讨厌弹出窗口的人，以及耐心点击X按钮甚至订阅邮件的人。是的，对弹出窗口的态度总是存在争议。因此，这部分营销活动是最复杂，最耗时的。

主要目标在于创建一个弹出窗口：

引起用户的注意（仔细）;

传达这个想法（清楚）;

说服完全做出所需的行动。

从表面上看，遵循所有这些规则并不是一件大事。但是，在启动弹出窗口之前，必须完成太多微小但必不可少的步骤。例如，重要的是收集有关目标受众及其行为的信息，测试窗口的不同配置，出现的时间，关闭的方式等。

经验丰富的营销人员将处理这些步骤。在本文中，网站设计将重点讨论该问题的技术方面 - 即关于弹出窗口的创建。您将学习如何使用CSS，JS和HTML语言在WordPress中创建弹出窗口。

不过，让我们弄清楚什么弹出窗口可以被视为有效且转换友好的弹出窗口。

一个有效的POPUP看起来像什么？

毫无疑问，一个突然跳出来的响亮的自动播放弹出窗口会刺激最耐心的人。好消息是，如今弹出窗口可能会以一种不那么令人恼火的方式出现，并且完全按照预期的功能执行。

作为每天都面对弹出窗口的互联网用户，我强调了理论上有用的关键规则：

提高点击率;

扩展邮件列表;

注册数量增加;

增加转换次数。

所以，一个有效的弹出窗口应该：

1、很容易理解。每个窗口都包含信息或鼓励执行某个操作。无论选择何种方式，清楚地传达信息至关重要。没有误解的地方，如果你想强调一些东西，可以使用粗体文字。

2、有一个可操作的标题。鼓励用户采取行动的标题有力量。与正确的内容一起，它可以推动他们实际需要的行动。

3、包含一个“魔术”按钮。窗口中的按钮应反映弹出窗口传达的消息。例如，如果它的目的是让一个人订阅邮件，那么按钮应该有一个“订阅邮件”文本。如果弹出窗口提供折扣，该按钮应显示“获取折扣”：

4、与页面内容相关。与页面内容没有任何共同之处的弹出窗口至少会使用户感到困惑。如果该页面包含该书的新闻稿，那么放置一个提供购买折扣书或至少留下电子邮件的弹出窗口将是一个好主意。

5、出现在正确的时间，在正确的地方。当突然出现时，弹出窗口确实会分散人们对信息的注意力。因此，请访问者有时间熟悉页面上的信息。

6、很容易摆脱。使用X按钮关闭窗口或点击页面上的某个位置的机会会为您的业力增加几点。

实际上，遵循这些规则并不能保证弹出窗口会将转换提升到令人难以置信的高度。尽管如此，考虑到这些规则，你肯定会获得比你完全忽略它们更多的成就。

让我们最后转到流程的技术方面，了解如何使用不同的工具在不同条件下创建弹出窗口。

网站设计如何创建POPUP：好的说明与示例" src="/upload/pic19/1-210Q31A132424.gif" />

如何为WORDPRESS创建一个POPUP

那些在数十种其他CMS中选择WordPress的人是幸运的，因为它提供了多个插件来快速创建弹出窗口。

例如，您可以考虑ZemezJet Jet Popup插件，该插件以启动弹出窗口的简单，直观的过程脱颖而出。不需要编码或编程语言的技能。与JetElements系列的其他成员一样，只需点击几下即可创建复杂的内容元素。

此外，还有机会选择触发事件，窗口的位置，其外观，并以多种方式将其定制为网站的概念。

湖州网站设计了解到另一个惊人的WordPress插件--PopUp Domination - 能够收集多个功能，用于创建和自定义optin弹出窗口。可以测试A / B并在各种目标选项中进行选择。此外，它还拥有丰富的模板集合。

对于那些寻求具有一系列功能的免费服务的人来说，Icegram可以成为一个合适的解决方案。它可能不是非常方便使用（设计有点复杂），但它提供了多次创建和调整弹出窗口的机会。它是免费的，你还记得吗？

Popup Builder可能是最流行的插件之一，用于在WordPress市场中弹出Windows创建。它提供了一组通用功能和大量用于各种目的的模板。

另一个简单的选项是免费提供。Dreamgrow Scroll Triggered Box只有一个模板，以各种颜色出现。是的，机会有限。尽管如此，这是那些做一件事但好无缺的产品之一。

要考虑的最后一个WordPress选项与Cherry framework产品有关。

说到电子商务网站，弹出窗口值得特别关注，因为转换在这种情况下起着重要作用。以下是来自顶级电子商务商店的精彩弹出样本，可以为您提供一些新鲜的想法。

如何使用编程语言创建一个POPUP

首先，您可能认为使用编程语言创建弹出窗口不是您的选择（如果CSS，JS或HTML不是您的强项）。很多人都会选择这个选项，因为这意味着完全定制，并有更多的机会将弹出窗口调整到网站的概念（和你的品味）。

那么，让我们弄清楚如何使用CSS，Javascript和HTML创建一个弹出窗口。

如何使用CSS和JAVAscript创建一个POPUP

以下是使用CSS和JS创建简单弹出窗口的通用代码。

如何使用HTML创建POPUP

要使用HTML创建弹出窗口，只需使用此代码即可。

要处理输入，请使用<form>元素。

当我学习如何使用各种编程语言创建弹出窗口时，我使用了Traversy Media YouTube频道中的详细教程，指导我完成整个过程。

底线

毫无疑问，对弹出窗口的态度不会发生显着变化，因为不管它们的形式如何，角色都是一样的 - 它应该强加给访问者通常认为绝对没用的某些行为。正如所说："弹出窗口与贾斯汀比伯相似 - 你可以恨他们或爱他们，但无论如何，你都会在任何地方看到它们"。

尽管如此，弹出窗口依然有效。如果您仍对自己的权力有疑问，请查看此文章。

成功弹出窗口的主要秘诀在于彻底发展的策略，这种努力用于创建一个不引人注目的吸引人的原始窗口。

我希望通过使用这些知识和上述服务和教程之一，您的弹出窗口将成为吸引潜在客户和促进转换的强大工具。

网站名称：网站设计如何创建POPUP：完美的说明与示例
网站路径：/news12/200262.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有网站设计等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容