How To Use The Modal Widget By Atomic Addons

The Modal widget by Atomic Addons opens a popup window over the page. It can open from its own button, from any element you point it at, after a delay, when the visitor scrolls, or when the pointer leaves the window. The window has an optional header and footer, and its body holds your own text, an Elementor template or a section of the page. This guide covers adding the widget, choosing how the modal opens and filling it.

Enable the Modal Widget

Modal is a Free widget and works with the free Atomic Addons plugin. Switch it on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Modal. You can also open the Content category.

4. 4

   Turn the Modal widget on.

5. 5

   Click Save Settings.

Add the Modal Widget

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Modal. The widget sits in the Atomic Addons category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

Where you drop the widget only matters for the Default layout, which prints a button at that spot. The modal window itself always opens over the whole page, centered on a dark overlay. Visitors close it with the close button, the Esc key or a click on the overlay.

Layout

Open the widget and go to Content → Layout. The first setting decides how the modal opens:

1. 1

   Layout: Default (the default) shows a button that opens the modal. Splash Screen opens it by itself a few seconds after the page loads. Exit Popup opens it when the pointer leaves the browser window. On Scroll opens it as the visitor scrolls. Custom Link opens it when a visitor clicks an element of your choice.

2. 2

   Modal Selector: Custom Link only: the ID or class of the element that opens the modal, such as #aea-custom-modal (the default) or .open-offer. To use it, give a button or image the same ID in its Advanced → CSS ID field (without the #), or the same class in CSS Classes. Every element that matches opens the modal.

3. 3

   Splash After (sec): Splash Screen only: how many seconds after the page loads the modal opens, 1 to 60. 5 by default.

4. 4

   After Inactivity: Splash Screen only: opens the modal once the visitor has done nothing for a while instead of after a fixed delay. Set the time in Within (sec), 30 by default. Moving the mouse, clicking, typing, touching or scrolling starts the count again.

5. 5

   Scroll Direction: On Scroll only. Down (the default) opens the modal once the visitor has scrolled the share of the page set in Offset (%), 40 by default. UP opens it the first time the visitor scrolls back up. Selector opens it when the bottom of the element you name in Selector (for example #pricing or .my-class) scrolls into view.

6. 6

   Display Times: Splash Screen, Exit Popup and On Scroll only: how many times one visitor sees the modal, 3 by default. The count is kept in the visitor's browser. Clear the field for no limit.

7. 7

   Display Times Expiry (Hour): After this many hours the count starts again, 12 by default.

8. 8

   Works on Login Mode: Off by default, so while you are logged in the modal opens every time and the limit is ignored, which makes testing easier. Turn it on to apply Display Times to logged-in users too.

9. 9

   Modal Width: The width of the modal window, 320px to 1200px.

10. 10

    Show Modal Header / Show Modal Footer: Both on by default. Turn them off to remove the header or footer and their settings.

Trigger Button

With the Default layout, Content → Trigger Button sets up the button that opens the modal:

1. 1

   Text: The button label, “Open Modal” by default.

2. 2

   Alignment: Left, center, right or justified (full width). Use the device icon to set it per screen size.

3. 3

   Size: Extra Small, Small (the default), Medium, Large or Extra Large.

4. 4

   Icon: An optional icon from the icon library or an uploaded SVG.

5. 5

   Icon Position: Before or After the text (the default). Shown once you pick an icon.

6. 6

   Icon Spacing: The space between the icon and the text, 8px by default.

Modal Header

Content → Modal Header holds the title at the top of the window:

• Header Text — the title, “This is your modal header title” by default. Leave it empty to show no header.
• Alignment — left (the default), center or right.

Modal Content

Content → Modal Content fills the body of the window:

1. 1

   Select Source: Custom Content (the default) gives you a text editor for text, images and links. Elementor Template shows a saved template you pick in Select Template (type to search). AE Template shows a template from the AnyWhere Elementor plugin, if you use it. Link Section moves a section of the same page into the modal.

2. 2

   Section ID: Link Section only: the CSS ID of the section or container to move, without the #. Set that ID on the section in Advanced → CSS ID. On the live page the section leaves its place and appears only inside the modal; in the editor it stays where it is.

3. 3

   Alignment: Left, center or right alignment of the body text.

An Elementor template is the easiest way to put a form, a video or a full layout in the modal. Create it under Templates → Saved Templates, then pick it here.

Modal Footer

Content → Modal Footer adds a line at the bottom of the window:

• Footer Text — “Modal footer goes here” by default. Basic HTML such as links is allowed. Leave it empty to show no footer.
• Alignment — left (the default), center or right.

Additional Settings

Content → Additional controls the window itself:

1. 1

   Overflow Scroll: Gives the body a scroll bar when the content is taller than the screen.

2. 2

   Modal Close Button: Default puts the close button in the top corner of the window. Outside puts it outside the window, over the overlay. No Close Button removes it; visitors can still close the modal with Esc or a click on the overlay.

3. 3

   Close Button Delay Show: Hides the close button when the modal opens and fades it in over the Close Button Delay Time(sec), 2 seconds by default.

4. 4

   Full screen: Makes the modal fill the whole screen. Not available while the close button is set to Outside.

5. 5

   Center Position: Centers the window vertically on the screen. Without it, the window sits near the top. Hidden while Full screen is on.

Style the Modal

Everything below is on the Style tab. Sections that belong to a part you turned off are hidden.

• Trigger Button — color, background, border, radius, padding and typography in Normal and Hover states, plus a hover animation. Default layout only.
• Modal Close Button — color, background, border, radius, padding, margin and icon size, with a Hover state and an animation.
• Modal Header — color, background, border, padding and typography of the title area.
• Modal Content — text color, background, border, radius, padding and typography of the body.
• Modal Footer — color, background, border, radius, padding and typography of the footer.
• Additional — the Overlay Background color behind the window and the modal's Opacity.