如何使用 OptiMonk 复制顶级电子商务品牌的弹出窗口

如果您在电子商务行业工作，那么您在网上购物时总是戴着两顶帽子。

当然，您正在寻找您真正喜爱的商品并像其他人一样寻找超值优惠。 但是您还要留意其他电子商务网站上哪些有效，哪些无效。 你正在收集灵感。 许多伟大的想法都是这样开始的。

如果您在顶级品牌的网站上看到令人惊叹的弹出窗口，会发生什么？

好吧，如果您是 OptiMonk 用户，您可以轻松调整我们的弹出模板，使您的现场消息看起来就像来自 Adidas、American Eagle 和 Crocs 等商店的最令人惊叹的弹出窗口！

在本文中，我们将详细介绍如何创建看起来像那些激发您灵感的惊人示例的弹出窗口。

阿迪达斯是世界上最大的生活方式品牌之一，它是许多人的理想品牌。

该公司在下面的弹出窗口中利用了这张图片，为他们的网站访问者提供了“加入 AdiClub”的机会。 谁不想加入那个俱乐部？

如果您的商店也有忠诚度俱乐部，您可以使用类似的设计来推广它。

让我们通过尝试复制弹出窗口来看看它是如何工作的。 （请记住在实际执行此操作时使用您自己的图像并进行复制！）

我们首先选择一个模板，如下所示，它与我们正在复制的模板具有相似的功能。

首先，我们添加了来自 Adidas 弹出窗口的副本：

现在让我们调整弹出窗口的样式。

我们将弹出窗口的角半径更改为 0，使其成为一个完美的矩形：

然后，我们通过改变元素的对齐方式将关闭按钮移动到弹出窗口的边缘：

接下来，我们更改并调整了图像大小，并添加了一个白色边框：

我们使左列更大：

最后，我们做了一些小的改动，比如添加一个新的复选框字段（“是的，我已经 13 岁以上”）和更改按钮的外观。 将字体更改为阿迪达斯使用的类似字体后，我们的弹出窗口如下所示：

几乎无法区分！ 只需进行一些小的更改，我们就可以将此模板变成一个完全不同的弹出窗口。

与我们刚刚看到的阿迪达斯的弹出窗口不同，Fashion Nova 使用精美的极简弹出窗口来宣传 10% 的折扣。 没有图像，也没有颜色，只有黑白文本。 甚至字体也是简单的无衬线字体。

这种设计方法的作用是迫使访问者注意报价——因为这就是屏幕上的全部内容！

此外，Fashion Nova 会要求您从“偏好”列表中选择您感兴趣的产品类型。收集这些信息有助于他们细分客户，确保他们的营销信息是相关的（您可以阅读有关此方法的更多信息在这里）。

如果您想尝试一下，请按照以下方法进行。

再一次，最好选择一个与我们正在复制的元素具有相似元素的模板。 我们选择以这个测验式模板为基础：

我们可以使用 OptiMonk 的 Brand Kit 功能一次更改所有的角、颜色和字体：

已经更近了！ 尤其是在我们将 Fashion Nova 标志添加到顶部之后：

然后，我们更改了副本：

接下来，我们在原始 Fashion Nova 弹出窗口的底部添加了一些元素，即一个电子邮件字段、一个复选框字段和两个按钮：

此时，我们在弹出窗口中拥有了我们需要的所有元素。 下一步是对它们进行自定义，使其看起来像我们开始使用的 Fashion Nova 弹出窗口。

我们从顶部的文本元素开始，更改字体大小和粗细：

我们通过改变它们的宽度和高度并稍微调整它们的边界来缩小调查元素：

最后一步是自定义电子邮件字段和复选框：

和按钮：

全部完成！ 这看起来有多神奇？

American Eagle 没有使用灯箱弹出窗口来请求网站访问者订阅他们的电子邮件列表，而是采用了不同的方法，在网页底部创建了一个粘性栏。

粘性栏不像弹出窗口那样引人注目，但这意味着它们不会像弹出窗口那样干扰用户的浏览体验。

对于一些没有积极尝试尽快增加列表的商店，粘性栏是收集一些电子邮件的好解决方案，同时提供尽可能无中断的体验。

如果这听起来像你，你可以从这个模板开始创建一个像 American Eagle 一样的粘性栏：

我们采取的第一步是删除左侧的图像：

然后，我们更改了副本并更改了格式以匹配 American Eagle 使用的字体和大小：

自定义电子邮件字段和按钮后，我们为“所有电子邮件”和“Airee 电子邮件”添加了复选框（因为我们无法访问切换栏）：

就是这样！

我们将复制的最后一个弹出窗口是来自 Crocs 的经典电子邮件注册弹出窗口。

让我们从这个看起来非常相似的模板开始：

我们从弹出窗口中删除了不必要的元素并更新了图像：

接下来，我们更改了背景和文本的颜色：

然后，我们更新了副本并在整个弹出窗口周围添加了一个白色边框：

将关闭按钮移动到弹出窗口的边缘后，我们就完成了：

一模一样，对吧？

如您所见，OptiMonk 广泛的模板与其强大的拖放编辑器相结合，意味着您可以复制您在网上看到的任何弹出窗口。 只需添加正确的元素并更改正确的设置即可。

通过这篇文章，我们当然不是要告诉您简单地复制其他品牌的弹出窗口。 您的弹出窗口应该与您商店的个性、外观和感觉相匹配。 希望您已经学会了如何轻松地使模板看起来完全不同以匹配您的风格！

当然，从成功的品牌中获得灵感也无妨！ 😉

您是否在网络上看到过您喜欢的任何弹出窗口？ 让我们在评论中知道！