One of the features that is unavailable in Elementor Pro Essentials subscription is Popups. Now at first sight this is a pretty big deal and one might be tempted to search for a plugin to fill this gap, but hold on a minute. Think about where you actually need a popup. I can immediately think of two: the cookie notice and the mobile menu.
Now there are loads of plugins that claim they are GDPR compliant and provide a popup cookie notice which only appears once on page load until the user accepts it. I never bothered with a plugin because you could easily configure this functionality in a popup in the full version of Elementor Pro. I was looking for a no plugin workaround that could provide me with this simple functionality.
I found that the functionality provided by Website Policies was just what I needed. You generate the cookie notice by selecting the colors and style of your popup and then just insert a few lines of code to run it in your site wide header. See my previous post about code snippets on how to do this. Sure enough it does exactly what I was looking for and is really easy to configure afterwards by editing some JSON. Problem one solved!
The mobile menu is a different use case. We need the flexibility to get exactly the look and feel we want and to have it work in a similar way to the Elementor Pro popup. I found two great examples from developers who used an Elementor template to design the mobile menu and then used either CSS or JavaScript to invoke it. In both cases the template is out of view off-canvas and is made visible using the translate CSS function to move it onto the canvas. By combining a simple transition function you can get a pleasing “slide in” and “slide out” effect just as you can with Elementor Pro popups. Once again here was a solution that did not involve a plugin and can be easily reused on other sites. The limitation in both cases is you can have only one popup on a page unless you adapt the code (which wouldn’t be difficult).
The first solution is from a Hostinger tutorial and describes three ways of doing this with different plugins but scroll down to find the details for the no plugin solution. It’s very easy to follow and uses a small amount of JavaScript, HTML and CSS.
The second solution comes from Jeffrey at Lytbox and he has a video tutorial on YouTube as well as details in his blog post. This solution has no JavaScript and a rather funky transformation of the hamburger menu to a close button and then back again. It’s an elegant solution.
But what about adding an additional in-page popup? Actually, I have struggled with in-page popups. Trying to get the popup sized so that everything fits on a mobile phone screen without a scroll bar being added turns out to be a challenge with what seems like an infinite number of screen sizes. Some browsers can be configured to disable popups which can create a problem. Popups are also not ideal for accessibility reasons and the advice from WCAG is to avoid popups wherever possible. In the end I have favoured using an accordion widget instead of an in-page popup because it is able to show and hide information without any of the complications that popups encompass.
In conclusion, there is a way of creating a cookie notice and a mobile menu without using an additional plugin. If you have a use case for any other popup my advice would be to find an alternative because they are not accessible and many people, including me, find them annoying.