Creating a modal section:
A modal section is simply a section transformed into a modal one. To enable, simply access the section’s options and go to Modal Settings section eg: https://d.pr/i/fu1meG .
As soon as this option is enabled, the section outline colors will transform into orange :
Add whatever content & elements you want and choose its width from the Section Modal settings.
Do know that the modal is only visible in Elementor edit mode.
Opening the modal from a link / button
The first think you’ll need to do is to access the modal section’s settings and copy the Modal ID eg: https://d.pr/i/N1mwtm .
Create a new Button element, open its settings and in the Link text field paste the Modal ID you copied earlier eg: https://d.pr/i/pFGZe7 .
Final step is to access the button element’s settings and look for the Modal settings section and enable the Modal link option eg: https://d.pr/i/LszGmw .
Here’s a screencast creating the modal & button https://d.pr/v/AKqw2J and how it works in the frontend https://d.pr/v/h1EFq0 .
Adding a modal in the entire site (with global sections)
In a scenario where you have a Call to action button in the header or footer of the site (which implicitly are published on all pages), you will need to also make the modal section available in all pages.
Luckily it’s super easy to be added through Global sections. First you’ll need to create a new generic global section and make sure the section you add inside is a Modal section (has to have its outlines orange) .
After you created the global section, head over to Customizer > General settings > Global sections and create a new section, and position it After Site Container eg: https://d.pr/i/YuLxNR .
Automatically opening modals (as splash popups)
To make the modal automatically open, choose an option in Auto Popup setting . Select the one you prefer the most. You can also disable nagging (to stop showing up).
The triggers are:
- Page Scroll
When the users scrolls a certain percentage of the page, the modal will show up. - On Timeframe
After a specific time, the modal will be displayed. - On Exit Intent
When the users tries to reach the close tab button.
You can also disable nagging for a whole day, to prevent the modal to continually show up on each page reload. Please try testing this feature in Incognito mode (however in case you want to delete the local storage session that prevents reopening, here’s a quick recording how to do it https://d.pr/v/90cWMy ).
Prevent reopening on clicking a button inside the Modal
Create a Button element and in the Advanced > CSS Classes option, add u-close-modal-forever class eg: https://d.pr/i/sUCFEf . This should ensure the modal will stop nagging in future sessions.