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.
