# Popups

{% embed url="<https://www.youtube.com/watch?v=aMeUQDG2Gxs>" %}

A popup is a modal window that automatically appears on a website while the user is browsing. Modal window appears in specified moment or under specific triggers and conditions. To create new Popup you need to go **Dashboard > Popups > Add new:**&#x20;

<figure><img src="https://353263333-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDPE9netawUH7O_3vVu%2Fuploads%2FQ3yGMYO4Zhhb6CfrmkO1%2FPopup%20-%20add%20new.png?alt=media&#x26;token=f630987b-3781-4889-9efc-4dfac16a6b47" alt=""><figcaption></figcaption></figure>

While editing the Popup on the backend, you can set the title and after publishing scroll to Popup settings.

### Popup Settings

In the Popup Settings section, it is required to adjust the layout and customize the general appearance of the Modal window.

<figure><img src="https://353263333-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDPE9netawUH7O_3vVu%2Fuploads%2FlZfAMG7Lx8wcInzOvUr7%2FPopup%20-%20Popup%20settings.png?alt=media&#x26;token=39c8b26d-df25-4ca6-8a1e-4f264839f198" alt=""><figcaption></figcaption></figure>

* **Width (px)** - Exact width of the popup in Pixel (px).
* **Height (px)** - Exact height of the popup in Pixel (px).
* **Popup Background Image** - Background image of the Popup modal window.
* **Select Background Color** - Background Color of the Popup modal window. It overwrites Popup background image.&#x20;
* **Popup Border Radius (px)** - Set the border radius to control the corner roundness of the Popup.
* **Popup Position** - Fixed position of the Popup window where it appears.

{% hint style="success" %}
As soon as Popup will be published the unique ID will be assigned, and this ID is used display Modal windows with [Custom Triggers](https://docs.stylemixthemes.com/consulting-theme-documentation/theme-options/popups-settings#control-popup-by-manual-triggering).
{% endhint %}

<figure><img src="https://353263333-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDPE9netawUH7O_3vVu%2Fuploads%2F9mjfHGWPSbJj6nCLY5J7%2FPopup%20-%20shortcode.png?alt=media&#x26;token=ae5d670b-90c5-4b81-bb41-225b22d385ed" alt=""><figcaption></figcaption></figure>

### General Settings of Popups

To select a popup to display on the page, you must specify general display rules in **Theme Options > Popups**.

{% content-ref url="../theme-options/popups-settings" %}
[popups-settings](https://docs.stylemixthemes.com/consulting-theme-documentation/theme-options/popups-settings)
{% endcontent-ref %}

### Popup Content

The content of the Popup Modal window can be edited using Elementor or WPBakery page builders depending on selection while [importing demo content](https://docs.stylemixthemes.com/consulting-theme-documentation/getting-started/activate-the-theme-and-import-the-demo-content).

<figure><img src="https://353263333-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDPE9netawUH7O_3vVu%2Fuploads%2Fkdc3jOGhMsBVJSch9zbJ%2FPopup%20-%20Popup%20edit%20with%20Elementor.png?alt=media&#x26;token=caea78b6-79f8-42c2-b338-28ea74fc02dc" alt=""><figcaption></figcaption></figure>

Depending on Layout settings the Modal box will be created, and you can add widgets as you edit the page or post.

<figure><img src="https://353263333-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDPE9netawUH7O_3vVu%2Fuploads%2FhrkeeRe90MCzYMG5dj6A%2FPopup%20-%20Edit%20Elementor.png?alt=media&#x26;token=4ca3f969-290c-424e-9e6b-32c79f855787" alt=""><figcaption></figcaption></figure>

### Popups Library

There is ready made Popups for bot Elementor and WPBakery page builders that can be imported in one-click in **Dashboard > Popups > Popups Library** section.

<figure><img src="https://353263333-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDPE9netawUH7O_3vVu%2Fuploads%2Fk3vD7yznfTGwwIKA2Knx%2FPopup%20-%20Library.png?alt=media&#x26;token=7bf76cf0-a408-43d1-af19-5b45ae092874" alt=""><figcaption></figcaption></figure>

You can choose one and click **Install** button.

<figure><img src="https://353263333-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDPE9netawUH7O_3vVu%2Fuploads%2FDa8N3LMa3zN3AZqYTfcD%2FPopup%20-%20Library%20install.png?alt=media&#x26;token=f002f17c-f73c-4b2b-be02-643bc06c984d" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
It is possible to import several Modal windows from Popups Library and use in different pages.
{% endhint %}

<figure><img src="https://353263333-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDPE9netawUH7O_3vVu%2Fuploads%2FREZusN7gYYQ3b3xM1rZb%2FPopup%20-%20Library%20installed.png?alt=media&#x26;token=d6b87fb8-fe26-4284-be43-42906fe82581" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Popup windows will appear on the page according to the triggers that were set in [theme options](https://docs.stylemixthemes.com/consulting-theme-documentation/theme-options/popups-settings) or in individual page settings.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.stylemixthemes.com/consulting-theme-documentation/content/popups.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.