Skip to main content
A popup is a template of type Popup in the Theme Builder. It is designed in Elementor like any other template, printed in the page footer wherever its display conditions match, and shown when a trigger fires or a link asks for it. A new popup has no display conditions, on purpose: a popup that shows everywhere is rarely what anyone wants. Set them in the conditions dialog, or open it from a link with the Popup dynamic tag and leave conditions empty.

​
Layout

Under Settings → Layout in the editor panel:
  • Width, responsive; default 640 px.
  • Height: fit to content, fit to screen, or a custom height (default 380 px). Content position (top, centre, bottom) applies when the height is not “fit to content”.
  • Position: horizontal (left, centre, right) and vertical (top, centre, bottom), responsive.
  • Overlay and Close button, shown by default.
  • Entrance and exit animation, with a duration (default 1.2 s).
Under Style: the popup’s background, border, radius and shadow; the overlay colour (default 80% black); the close button’s position (inside or outside, with offsets), colours in normal and hover state, and size. Under Advanced:
  • Show the close button after a delay; close automatically after a delay.
  • Prevent closing on the overlay; prevent closing with Escape.
  • Disable page scrolling while open.
  • Avoid multiple popups: stay hidden when another popup already opened on this page.
  • Accessible navigation (on by default): keyboard focus stays inside the popup.
  • Open by selector: a CSS selector (#id, .class). Clicking anything matching it opens the popup. The popup still needs a display condition for that page.
  • Margin, padding, CSS classes and per-device custom CSS.

​
Triggers

Set in the Display rules / Triggers / Advanced rules dialog on the Theme Builder list. All off by default.

​
Advanced rules

The list shows the enabled triggers next to each popup’s conditions. Use the Popup dynamic tag on any link or button (group Actions):
  • Action: open, close or toggle.
  • Popup: which one, for open and toggle.
  • Don’t show again, for close.
Choosing a popup in the tag also forces that popup onto the page, so a link can open a popup that has no display condition of its own.

​
Elementor Pro

Markup and class names follow Elementor Pro’s popups, so popups built with Pro keep their styling after the switch. With Pro active, the Kit’s popups stand down. See Working next to Elementor Pro.