Modal Sections and how to create them

You are here:
Estimated reading time: 1 min

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.

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)

You can program a modal section to automatically open, on various triggers:

  1. Page Scroll
    When the users scrolls a certain percentage of the page, the modal will show up.
  2. On Timeframe
    After a specific time, the modal will be displayed.
  3. 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.

Settings can be found in the Modal options section, of the Section Element.

Was this article helpful?
Dislike 0
Views: 28

Join the conversation