How to Open an Elementor Popup in Gutenberg (Post or Page)

In online communities, there is one thing that is always debatable: popups. Some people are arguing about whether use popups or not. But in our opinion, popups are okay if the popups you created are simple and attractive, so your users don’t feel annoyed.

Let’s say you’ve already created the popups with Elementor and want to open them in the Gutenberg WordPress editor; because you want to deploy your popups on your blog posts or pages. If you’re wondering, is it possible to do that? Well, the answer is yes, it’s possible.

This article will show you how to open the Elementor popups in Gutenberg.

Steps to Open an Elementor Popup in Gutenberg WordPress Editor (Post or Page)

Step 1: Prepare the Popup

Go to the template of the popup that you’ve created. If you’re new to Elementor and want to learn how to make the popups, you can see the tutorial by clicking this link.

Alright, once done creating the popup, click the gear icon (⚙️) on the bottom-left corner of the Elementor settings panel to open the Popup Settings panel. On the Popup Settings panel, go to the Advanced tab and add a selector on the Open By Selector field. Make sure to add the dot symbol as the prefix (e.g., .popup12345).

Once you’ve added the specified selector, don’t forget to update or publish your popup template.

Note: On your popup Display Conditions, please set it to display your popup template to the Entire Site; it allows you to access your popup across the whole website. You don’t also need to set any trigger, as you will show the popup by the selector you’ve just set.

Step 2: Open the Popup in Gutenberg

Now, it’s time to open the popup in Gutenberg WordPress Editor.

Go to the Gutenberg WordPress editor; you can create new content (page/ post) or select your existing content. Afterward, choose any block you want to use as a trigger for the popup to show up. In this example, we will use a Buttons block.

Once you’ve decided on a block you want to use as a trigger to show the popup, go to the Block settings -> Advanced. Next, add your CSS Classes specified into the Additional CSS class(es) field.

Well. That’s it. To see how it worked, publish your project and open it on a new window.

The Bottom Line

This article shows you how easy to open an Elementor popup in the Gutenberg WordPress editor. We hope this article is helpful to you.

Last but not least, please keep in mind that the success of your popup depends on converting your users using relevant content and a compelling call to action.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Akbar Padma

Akbar Padma

Akbar is a WordPress expert and a writer staff at WPPagebuilders. He mainly writes about Gutenberg, Elementor, Divi, and other WordPress page builders.
Want to save yearly expense up to $219? why not?

Leave a Comment

Haven’t used Elementor Pro yet?