elementor_现在，您可以直接从Elementor构建面向设计的弹出窗口

Love The Way You Lie 2022-12-03 08:56 64阅读 0赞

elementor

*This sponsored article was created by our content partner, [BAW Media][]. Thank you for supporting the partners who make SitePoint possible.*

*这篇赞助文章是由我们的内容合作伙伴[BAW Media][]创建的。* *感谢您支持使SitePoint成为可能的合作伙伴。*

You either hate pop-ups, or you love them. And if you say you love them, you’re probably lying.

您要么讨厌弹出窗口，要么喜欢它们。 如果你说你爱他们，那你可能在撒谎。

It isn’t so much the popups themselves that irritate people. It’s the designs and the way in which they're presented.

弹出窗口本身并不会激怒人们。 这是设计及其呈现方式。

So, you've been waiting for the popup revolution to arrive, but it never has – until now. Your visitors never again have to feel visually assaulted every time one lands on a page.

因此，您一直在等待弹出式革命的到来，但直到现在为止，它从未如此。 您的访问者再也不用每次在页面上着陆时都受到视觉冲击了。

Elementor has just launched their new [WordPress pop-up plugin][] – aptly named the Popup Builder. Now you can say goodbye forever to popups that chase visitors from your web pages, by designing beautiful popups that don't look like popups at all.

Elementor刚刚启动了他们的新[WordPress弹出式插件][WordPress pop-up plugin] \-恰当地命名为Popup Builder。 现在，您可以通过设计完全看起来不像弹出窗口的漂亮弹出窗口，永远与那些从您的网页吸引访问者的弹出窗口说再见。

Just how will you be able to accomplish that?

您将如何做到这一点？

Read on.

继续阅读。

## 弹出式生成器简介 **(**Introducing the Popup Builder**)** ##

With this WordPress plugin you can create a popup that won't tempt a visitor to go elsewhere. With the [Popup Builder][WordPress pop-up plugin] you can build one that aligns perfectly with the look and feel of your site. Or, you can stretch the envelope, or even break away from it, and design something totally new and different.

使用此WordPress插件，您可以创建一个不会吸引访问者前往其他地方的弹出窗口。 使用[Popup Builder，][WordPress pop-up plugin]您可以构建一个与您网站的外观和风格完全匹配的产品。 或者，您可以拉伸信封，甚至可以脱离信封，设计出全新的和与众不同的东西。

Your choice.

你的选择。

The best part about this pop-up plugin for WordPress is that it lets you create a pop-up inside Elementor just as you would create a website page. Elementor's design, styling, layout, and advanced customization options are already in place, along with widgets and mobile editing tools that allow you to fine-tune your popup design down to the tiniest detail.

关于此WordPress弹出式插件的最好的部分是，它使您可以像在创建网站页面一样在Elementor中创建弹出式窗口。 Elementor的设计，样式，布局和高级自定义选项已经到位，并且小部件和移动编辑工具使您可以将弹出式设计微调到最细微的细节。

Even if you let your imagination run wild, with proper attention to detail your pop-up design can give the appearance of being an integral part of your website, instead of being a less-than-welcome intruder.

即使让您的想象力变得疯狂，对细节的适当关注也会使弹出式设计看起来像是网站的组成部分，而不是受欢迎的入侵者。

And you can do it without writing a line of code!

您无需编写任何代码就可以做到这一点！

## 元素 **(**Elementor**)** ##

A few words about [Elementor][] are in order, or at least a recap if you've already heard about or used this \#1-rated WordPress website builder.

关于[Elementor][]的几句话是按顺序排列的，如果您已经听说或使用过此排名第一的WordPress网站构建器，则至少要重述一下。

Elementor is the first completely free, open-source front-end page builder that makes it possible to visually and dynamically design every aspect of a website without requiring any coding whatsoever.

Elementor是第一个完全免费的开源前端页面构建器，它使可视化和动态设计网站的各个方面成为可能，而无需进行任何编码。

The fact that more than 1,000,000 users have come on board since Elementor was launched less than 2 years ago attests to its popularity and \#1 ranking. As an encore, the same team that created this remarkable page builder decided to end ugly popups forever by creating the best popup plugin for WordPress you'll find anywhere.

自从不到2年前推出Elementor以来，已有超过100万用户加入，这一事实证明了其受欢迎程度和排名第一。 令人鼓舞的是，创建了这个出色的页面构建器的团队决定通过为您在任何地方都能找到的WordPress创建最佳弹出窗口插件来永远结束丑陋的弹出窗口。

More Elementor encores are certain to come.

肯定会有更多的Elementor再来一次。

## 是什么让Elementor的Popup Builder与众不同？ **(**What Makes Elementor’s Popup Builder Different?**)** ##

There are 5 major pop-up building capabilities that make this product different from anything else we've seen on the market.

有5种主要的弹出式构建功能，使该产品与我们在市场上看到的其他产品不同。

**1. Popups are created as an integral part of the website-building process — not as something separate.**

**1.弹出窗口是网站建设过程中不可或缺的一部分，而不是单独存在的。**

You can create your pop-up right inside the editor rather than have to rely on a different design interface.

您可以直接在编辑器中创建弹出窗口，而不必依赖于其他设计界面。

This promotes consistency in your design, while at the same time allowing your creativity to rise to the surface. An example of this would be to select a transparent background for a popup that shows off your creative genius while delivering your message in a manner that grabs attention and engages your visitors.

这可以提高设计的一致性，同时又可以使您的创造力浮出水面。 例如，为弹出窗口选择透明背景，以显示您的创意天才，同时以吸引注意力和吸引访问者的方式传递消息。

What this builder allows you to do is to replace an irritating, unwelcome interruption with an appealing, high-converting marketing funnel. It also eliminates the knee-jerk reaction that compels visitors to click on X and go somewhere else.

该构建器允许您执行的操作是，用一个吸引人的，高转化率的营销渠道替换一个令人讨厌的，不受欢迎的干扰。 它还消除了强迫访问者单击X并转到其他位置的过快React。

**2. It takes but four simple steps to create your popup, and no coding is involved in any of them.**

**2.仅需四个简单步骤即可创建弹出窗口，并且其中的任何一个都不涉及编码。**

*  Elementor’s WordPress pop-up plugin makes it as simple as can be
    
    Elementor的WordPress弹出插件使它变得尽可能简单
 *  Customize the pop-up window
    
    自定义弹出窗口
 *  Build inside the window
    
    在窗口内构建
 *  Put in place your targeting rules and conditions
    
    制定您的定位规则和条件
 *  Connect the popup to site links and popup forms
    
    将弹出窗口连接到站点链接和弹出表单
 *  and that’s it!
    
    就是这样！

**3. You have full control over the pop-up’s design AND its content as well.**

**3.您可以完全控制弹出窗口的设计及其内容。**

You have the same degree of control over your pop-up as you have when you're creating a web page using the editor. You're using the same assets to build the pop-up, and at the same time you can copy-paste the type of content you want it to contain.

与使用编辑器创建网页时一样，您对弹出窗口的控制程度相同。 您使用相同的资源来构建弹出窗口，同时可以复制粘贴您想要包含的内容类型。

If you choose, you can add WooCommerce products, incorporate dynamic content and request parameters, Elementor forms, ACF custom fields, related posts lists, and more.

如果选择，则可以添加WooCommerce产品，合并动态内容和请求参数，Elementor表单，ACF自定义字段，相关的帖子列表等。

As a bonus, your pop-up design options are not limited to the pop-ups themselves, but to their surrounding website designs. How's that for seamless integration?

另外，您的弹出窗口设计选项不仅限于弹出窗口本身，还限于其周围的网站设计。 如何实现无缝集成？

**4. Work from a template or build your pop-up from scratch.**

**4.从模板开始工作或从头开始构建弹出窗口。**

More than 100 professionally-crafted pop-up design templates come with the plugin.

该插件随附100多个专业制作的弹出式设计模板。

Their styles include:

他们的风格包括：

*  Bottom Bar
    
    底栏
 *  Hello Bar
    
    你好吧
 *  Fly In
    
    飞进
 *  Classic
    
    经典
 *  Full Screen, and
    
    全屏和
 *  Slide In
    
    滑入

You can in fact use any Elementor template or content block inside your popup whether you choose a ready-made one or one you've customized to suit your tastes and needs.

实际上，无论选择现成的模板还是自定义的模板来满足您的口味和需求，您都可以在弹出窗口中使用任何Elementor模板或内容块。

**5. You can establish advanced targeting rules, conditions, and triggers.**

**5.您可以建立高级的定位规则，条件和触发器。**

By applying these targeting settings, you can determine when and the manner in which a popup will appear.

通过应用这些定位设置，您可以确定弹出窗口的显示时间和显示方式。

**Conditions** address the pages, posts, or areas where you want popups to be displayed.

**条件**解决了您要显示弹出窗口的页面，帖子或区域。

**Triggers** determine when popups will activate based on user actions such as scrolling, scrolling to an element, clicking, and page load or page exit intent.

**触发器**根据用户操作(例如滚动，滚动到元素，单击以及页面加载或页面退出意图)确定何时激活弹出窗口。

**Advanced Rules** specify the requirements that must be met to allow a popup to appear, Popups that appear at random can be extremely irritating, no matter how carefully they are designed.

**高级规则**指定了弹出窗口出现所必须满足的要求。随机弹出的窗口无论设计得多么仔细，都可能非常令人讨厌。

**What can you build with Elementor's Popup Builder?**

**您可以使用Elementor的Popup Builder构建什么？**

The answer is more than you might think. It includes:

答案超出了您的想象。 这包括：

*  Email Subscriptions
    
    电子邮件订阅
 *  Login Forms
    
    登录表格
 *  Promotion & Sale Banners
    
    促销和销售横幅
 *  Lead Capture
    
    铅捕获
 *  Content Lock & Upgrades
    
    内容锁定和升级
 *  Announcements
    
    公告公告
 *  Exit Intent
    
    退出意图
 *  Welcome Mat
    
    欢迎垫
 *  Related Products & Upsells
    
    相关产品和加售

## 为什么要尝试Elementor的Popup Builder \*\* **(**Why You Should Try Elementor's Popup Builder\*\***)** ##

The Popup Builder is far and away the [best WordPress popup plugin][WordPress pop-up plugin]on the market. It differs from any of its competitors in 5 major pop-up building approaches:

Popup Builder是目前市场上[最好的WordPress弹出插件][WordPress pop-up plugin] 。 它在5种主要的弹出式窗口构建方法上与其他竞争对手不同：

1.  Pop-up building is part of the website-building process and not a stand-alone function requiring a different design interface with its unique set of tools.
    
    弹出式窗口构建是网站构建过程的一部分，而不是需要使用其独特工具集的不同设计界面的独立功能。
2.  Build an attractive, design-oriented popup in 4 simple steps and you're done — without having to write a single line of code.
    
    通过4个简单的步骤构建一个有吸引力的，面向设计的弹出窗口，您就可以完成工作-无需编写任何代码。
3.  Your ability to control your pop-up's design AND content enables you to maintain design consistency throughout your website.
    
    通过控制弹出窗口的设计和内容的能力，您可以在整个网站上保持设计的一致性。
4.  You can choose among 100+ carefully crafted templates, use one you've customized, or build your popup from scratch.
    
    您可以在100多种精心设计的模板中进行选择，使用自定义的模板或从头开始构建弹出窗口。
5.  It's easy to set the advanced targeting rules, conditions, and triggers you need to ensure your popups will serve as high-converting funnels.
    
    轻松设置所需的高级定位规则，条件和触发器，以确保弹出式窗口可以用作高转化渠道。

Check into additional details about Elementor's [Popup Plugin for WordPress][WordPress pop-up plugin] here.

在此处查看有关Elementor的[WordPress弹出式插件的][WordPress pop-up plugin]其他详细信息。

> 翻译自: [https://www.sitepoint.com/now-you-can-build-design-oriented-pop-ups-straight-from-elementor/][https_www.sitepoint.com_now-you-can-build-design-oriented-pop-ups-straight-from-elementor]

elementor

[BAW Media]: https://bawmedia.com
[WordPress pop-up plugin]: https://elementor.com/popup-builder/
[Elementor]: https://elementor.com/
[https_www.sitepoint.com_now-you-can-build-design-oriented-pop-ups-straight-from-elementor]: https://www.sitepoint.com/now-you-can-build-design-oriented-pop-ups-straight-from-elementor/