Need to figure out how to open a popup Elementor in Gutenberg?
In online communities, there is always one thing that is debatable: popups. Some people wonder whether or not to use popups. But in our opinion, popups are okay if the popups you created are simple, attractive, and not annoying to your users.
Let's say you have already created the popups with Elementor and want to open them in the WordPress Gutenberg editor; because you want to deploy popups on your blog posts or pages. If you are wondering, is it possible to do this? Well, the answer is yes, it is possible.
This article will show you how to open popups Elementor in Gutenberg.
How to Open Elementor Popup in WordPress Gutenberg Editor
Step 1: Prepare the popup
Navigate to the popup template you created. If you are new to Elementor and want to learn how to create popups, you can check out the following tutorial: by clicking this link.
Alright, once the popup creation is complete, click the gear icon ( ️ ) in the lower left corner of the item settings panel to open the popup panel. In the popup settings panel, navigate to the tab Advanced and add a selector on the field Open by selector .
Be sure to add the period symbol as a prefix ( e.g., .popup12345).
Once you have added the specified selector, don't forget to update or publish your popup template.
Note: On the tab Display conditions of your popup, please configure it to display your popup on the Entire site; This will allow you to access your popup on the whole Website. You also don't need to define a trigger, because you will display the popup by the selector you just defined.
Step 2: Open the popup in Gutenberg
Now it's time to open the popup in the WordPress Gutenberg editor.
Go to WordPress's Gutenberg editor; you can create a new contents (page/publication) or select a contents existing. Next, choose any block you want to use as a trigger for the popup to appear.
In this tutorial, we will use a Buttons block.
Once you have decided which block you want to use as a trigger to show the popup, go to Settings Block – > Advanced. Then add your Specified CSS classes Additional CSS class ( es ) shampoo
Good. That's it. To see how it worked, publish your project and open it in a new window.
Get Elementor Pro Now!!!
Conclusion
This article shows you how well you can open an Elementor popup in WordPress' Gutenberg editor. We hope this article will be useful to you. Last but not least, please keep in mind that the success of your popup depends on converting your users using a contents relevant and a compelling call to action.
If you have any concerns about how to get there let us know within Comments.
However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
