> ## Documentation Index
> Fetch the complete documentation index at: https://docs.wpbevel.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Popups

> Popup templates with layout, triggers, advanced rules and a dynamic tag to open them from any link.

A popup is a template of type **Popup** in the [Theme Builder](/kit/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.

| Trigger              | Setting                                                  |
| -------------------- | -------------------------------------------------------- |
| On page load         | after N seconds                                          |
| On scroll            | direction (down or up) and, for down, how far in percent |
| On scroll to element | a CSS selector                                           |
| On click             | after N clicks anywhere on the page                      |
| After inactivity     | N seconds without input                                  |
| On page exit intent  | the pointer leaves toward the browser bar                |

## Advanced rules

| Rule                              | Setting                                                                      |
| --------------------------------- | ---------------------------------------------------------------------------- |
| Show after X page views           | number of page views                                                         |
| Show after X sessions             | number of sessions                                                           |
| Show up to X times                | how many, per ever, session, day, week or month, counted on open or on close |
| When arriving from a specific URL | show, hide or match a regular expression                                     |
| Show when arriving from           | search engines, external links, internal links                               |
| Hide for logged-in users          | all users, or chosen roles                                                   |
| Show on devices                   | desktop and each active Elementor breakpoint                                 |
| Show on browsers                  | all, or chosen from Chrome, Edge, Firefox, Safari, Internet Explorer         |
| Schedule                          | start and end date and time, in the site's or the visitor's time zone        |

The list shows the enabled triggers next to each popup's conditions.

## Opening a popup from a link

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](/kit/elementor-pro).