什么是灯箱和我如何制作一个？

你是否曾经浏览过一个网站，也许正在看一些非常棒的鞋子，然后被屏幕中央出现的一个弹出框打断?也许你生气了。或者你很兴奋，因为它提供了折扣。

弹出窗口是一个网页设计的争议趋势．如果处时序，设计或副本关闭，它们可以恶化用户的体验。这就是为什么谷歌开始贬值移动页面，显示“侵入式间隔性”-包括隐藏主要内容的弹出窗口-回到2016年。

但这并不意味着弹出窗口是完全禁止的。事实上，如果做得好，它们可以为用户提供重要的信息提高你的转化率．例如，Lightbox弹出窗口可以通知用户有关促销、活动或他们可能感兴趣的资源——以交换他们的电子邮件地址或您想要的其他信息。reybet雷竞技下载

当弹出窗口为访问者提供价值时，它们可以获得巨大的成功。根据一项相扑研究了17亿个弹出窗口，所有弹出窗口的平均转化率为3.09%。但前10%表现最好的弹出窗口的平均转化率要高得多，高达9.28%。

来帮助你创建有效和吸引人的弹出窗口我们将介绍什么是lightbox，一些流行的例子，以及如何创建自己的lightbox。

灯箱弹出窗口有效原因是有效的。他们在页面上删除了所有其他分心，清楚地告诉访客他们应该做什么。另外，您可以单击弹出窗口外部的任意位置关闭它们。如上图所示，您通常可以单击鼠标悬停时显示的X按钮，或单击按钮下方显示的带下划线的文本。这些选项使灯箱弹出窗口更少的令人沮丧的替代品，而不是其他类型的弹出窗口。

最重要的是让lightbox弹出框与访问者相关，以及他们登陆你的网站或页面的原因。产品页面上的折扣代码是最明显的例子。放置一个电子邮件注册表格在博客文章中也是常见而有效的。您知道您的博客帖子是有用而独特的，因此您将询问读者注册更有用，唯一的内容的灯箱弹出窗口。

现在我们理解了lightbox是什么以及它为什么有效，让我们看看网站上的一些实际例子。

Lightbox例子

Lightbox弹出窗口可以用于多种目的:获得更多的时事通讯订阅者，产生销售，参加活动，吸引人们不要离开您的网站，等等。raybetapp下面让我们看几个旨在实现这些不同目的的示例。

raybetapp通讯注册Lightbox

raybetapp通讯或电子邮件注册是最常见的灯箱弹出。下面是来自纽约人．一旦你在他们的网站上看了一篇文章，这个简单而极简的设计就会出现。唯一突出的颜色是CTA按钮，这使得它比解雇按钮更引人注目。

图片来源

登录/注册Lightbox

增加注册和登录转换是任何数字业务的核心指标。Pinterest的增长技术领导者Jeff Chang将其定义为“建立新用户意图并转换验证用户的艺术”增长工程博客．

Pinterest擅长这种艺术。当访问者点击一个大头针搜索引擎结果页，他们可以查看它并向下滚动以查看其他引脚。此时，Pinterest显示访客一个灯箱弹出窗口，要求他们登录或注册以查看更多内容。虽然访客可以退出继续滚动，但那些准备注册的人和那些已经拥有帐户的人可以轻松登录。

图片来源

内容提供Lightbox

写博客可以帮助您在网站上获取访问者，但为他们提供额外的免费内容可以帮助它们转换为Leads。所以说你有任何人可以访问的博客帖子。然后，您有报告，电子表格，信息图表，视频以及访问者无法正常访问的任何其他内容。您可以创建一个Lightbox弹出窗口，询问访问者的电子邮件地址以换取这些内容升级。

以市场112为例。这家匈牙利营销公司展示了下面的lightbox，在raybet电子竞技一个访问者浏览了他们的一些博客后，免费提供他们的2019-20年市场趋势研究。

图片来源

这里是同样的英语弹出窗口:

折扣Lightbox

电子商务网站最常见的弹出窗口之一就是折扣灯箱。这些弹出窗口为在线购物者提供折扣或优惠券，以申请购买，换取他们的电子邮件地址。

The best part about these popups is that even if they fail to overcome common objections that a visitor might have — like, “I don’t have the budget right now” — and convince them to make a purchase, they can still succeed in getting a visitor’s contact information. Check out this example from Girlfriend Collective, a sustainable activewear brand.

图片来源

增销Lightbox

促销灯箱是另一个伟大的方式来增加你的收入，无论你是一个电子商务网站或非营利组织．你可能会尝试结账，然后弹出一个显示你可以添加到购物车的相关产品的弹出窗口。或者你可能在一个非盈利网站上做了一次捐赠，然后看到一个弹出窗口询问你是否愿意每月捐赠一次，如下所示。

图片来源

下面我们将介绍创建lightbox的过程，这样您就可以重新创建上面的任何一个示例，或者创建您自己的示例。

如何为您的网站制作灯箱

你可以从头创建一个lightbox，但它需要你熟悉HTML，CSS和JavaScript．非开发人员可以找到简化过程的工具，这样他们就不需要接触一行代码就可以为他们的网站创建自定义lightbox。

创建灯箱的过程根据网站构建平台或正在使用的第三方工具而异。下面我们会通过使用Hubspot或WordPress的话来完成创建一个的步骤。

如何在HubSpot制作一个Lightbox

我们将简要介绍在HubSpot中创建lightbox的过程。要获得更详细的说明，你可以查看这个知识库文章．

1.要开始，导航到形式在你的HubSpot账户中。如果你有一个专业或企业帐户，那么你将导航到市场营销>铅捕获>形式．如果您有初学者或免费帐户，您只需导航到市场营销>形式．

2.在右上角，点击创建表单．选择弹出形式从左边的幻灯片。点击下一个．

3.选择弹出式表单的类型，然后单击下一个．

4.控件中弹出窗口的文本、主体和按钮调出选项卡。

5.然后创建并自定义表单访问者将看到他们是否单击了CTA按钮。

您还可以在此时创建谢谢您的消息和后续电子邮件。

6.设置您希望此弹出窗口出现在您的网站上的时间标准。你可以simply type in the URL of the page(s) you want your popup to show up on and choose whether you want it to be triggered by a 50% page scroll, exit intent, or time elapsed. You can also set “exclusion rules” to hide your popups on smartphone and tablet, or for other reasons.

7.当你准备好了，就按一下发布在右上角，以您的弹出形式的活动。

如何在WordPress中创建一个Lightbox

WordPress中没有创建lightbox表单的内置功能，这意味着你需要一个插件。

好消息是你可以免费raybetapp下载Hubspot WordPress插件无缝连接你的WordPress的网站登陆你的HubSpot账户，并使用HubSpot的弹出工具。然后您只需按照上面描述的步骤操作即可。

图片来源

弹出或不弹出

虽然有些弹出窗口很烦人，很烦人，但其他的可以帮助改善用户体验，提高你的潜在客户或销售。例如，Lightbox弹出窗口可以帮助吸引访问者注意重要信息或优惠——无论是内容升级、折扣代码还是电子邮件注册。你只需要遵守就行了网站设计的指导方针设置弹出窗口的副本，设计和时间。