---
title: "Popup Builder/Off Canvas Elementor Widget Settings Overview"
url: https://theplusaddons.com/docs/popup-builder-elementor-widget-settings-overview/
date: 2023-02-09
modified: 2026-09-11
lang: en
author: "Aditya Sharma"
description: "Popups are a great way to engage users and increase the visibility of your products and services. They are easy to create and manage, and they can help you get..."
image: https://theplusaddons.com/wp-content/uploads/2020/10/Off-Canvas-Elementor-Widget-Settings-Overview-1024x536.jpg
word_count: 1844
---

# Popup Builder/Off Canvas Elementor Widget Settings Overview

## 

- Elementor Popup Builder allows users to create various popups such as Modal Popup, Slide Popup, and Corner Box Popup.
- The Plus Addons for Elementor requires the PRO version to access the Popup Builder widget and its features.
- Popup triggers can be customized using elements like buttons, icons, or Lottie files, enhancing user interaction.
- Display conditions for popups include options like On Page Load, On Exit Intent, and After X Page Views for targeted engagement.
- Styling options in the Popup Builder include background overlays, typography settings, and custom close icons to match website design.

Popups are a great way to engage users and increase the visibility of your products and services. They are easy to create and manage, and they can help you get more conversions, leads, and sales. Elementor popup provides an easy to use drag and drop interface to create stunning popups with multiple styling options. 

Using the popups in Elementor, you can create amazing popups for your marketing purposes and use them for creative purposes like showing a menu in a full screen popup or creating an off canvas menu.

The Popup Builder widget from The Plus Addons for Elementor is packed with powerful features to create amazing popups in Elementor.

### Check the Live Widget Demo

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-builder/popup-builder/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Required Setup

- [Elementor FREE Plugin](https://wordpress.org/plugins/elementor/) installed & activated.

- You need to have [The Plus Addons for Elementor plugin](https://wordpress.org/plugins/the-plus-addons-for-elementor-page-builder/) installed and activated.

- This is a Premium widget, and you need the [PRO version of The Plus Addons for Elementor](https://theplusaddons.com/pricing//?utm_source=tpae&utm_medium=docs&utm_campaign=text).

- Make sure the Popup widget is activated, to verify this, visit The Plus Addons → Widgets → and Search for Popup Builder and activate.

## Learn via Video Tutorial:

https://youtu.be/74bj6WcEhiY

## How to Activate the Popup Builder Widget?

Go to 

- **The Plus Addons **→** Widgets **

- **Search **the widget name** **and** turn on the toggle.**

![The Popup Builder widget switched on in The Plus Addons widget settings](https://theplusaddons.com/wp-content/uploads/2023/02/popup-builder-1024x357.png)

## Key Features

- **Create different types of popups** - You can create different popups like Modal Popup, Slide Popup, Reveal Content Popup and Corner Box Popup.

- **Multiple ways to add content** - You can directly add content or you can use Elementor Templates or Template Shortcodes to add content.

- **Multiple popup trigger elements**- You can set different popup trigger elements like button, icon, Lottie or you can hide the trigger as well.

- **Different ways to close the popup** - You can use different options to close the popup.

- **Fixed Toggle Button **- You can easily place the popup trigger element anywhere on the page.

- **Show Menu Scroll Offset** - Show the popup trigger button on scroll.

- **Content Transform** - You can add a transform effect to your content when the popup opens.

- **Multiple display conditions** - You can add different display conditions on your popup to make it dynamic.

## How to add content in the Elementor Popup Builder?

Once you add the Popup Builder widget on the page, first you have to choose the type of popup you want from the **Popup Type** section.

> *Note: To show the popup on all pages you have to add the widget in the header or the footer template.*

You can click on the **Import Presets** button to import a preset template and customise it as per your requirements.

Here you’ll find four types of popups -

**Slide** - For creating sliding popups, it is similar to the Reveal Content popup but it doesn’t push the content. You can use this popup type to create an off canvas popup menu.

**Reveal Content** - For creating reveal content type popups, in this type of popup, the entire content will be pushed along with the popup while opening and closing.

**Corner Box** - For creating small popups at the corner of your page.

**Modal Popup** - For creating standard popups.

![The Popup Type choices in the Popup Builder widget](https://theplusaddons.com/wp-content/uploads/2026/09/tp-off-canvas-popup-type-wide-base.webp)

Depending on the type of popup, you’ll find relevant popup settings for open direction and size.

Now for the content of the popup, you’ll find three options under the **Content Type** dropdown. 

**Template**- This is a very powerful option as you can use the Elementor template directly as your popup content. This gives you the option to create some amazing popups for your website requirements. [Learn more about the process](https://theplusaddons.com/docs/popup-with-elementor-templates/).

**Content** - In this option, you’ll get an editor where you can directly write the content. This is suitable if you primarily want to show some basic text and images. 

**Shortcode** - This is an alternative way of adding the Elementor template here, you’ll have to use the Elementor template shortcode.

![The Content Type dropdown in the Popup Builder widget](https://theplusaddons.com/wp-content/uploads/2026/09/tp-off-canvas-content-type-wide-base.webp)

Then you can choose the popup trigger element from the **Select Option** dropdown, this is very useful as you can set the trigger element within the popup and you don’t have to set them separately like in other popup widgets.

Here you’ll find four types of trigger options - 

**Icon** - You can use an icon as the popup trigger element. This can be used when you are creating a popup menu.

**Call To Action** - This option will add a button to the page that users can click to open the popup.

**Hidden** - This will hide the trigger element. This is useful if you want to show your popup on various display conditions without any user interactions like showing the popup on page load.

**Lottie** - You can even use Lottie files to open your popups.

Depending on the trigger options, you’ll get relevant customization options.

## Extra options

In the **Content > Extra Options** section, you’ll find some additional options for your popups.

![The Extra Options section of the Popup Builder widget](https://theplusaddons.com/wp-content/uploads/2026/09/tp-off-canvas-esc-button-close-content-wide-extra.webp)

**Esc Button Close Content** - Allow users to close the popup by pressing the Esc button on the keyboard. [Learn more about the process](https://theplusaddons.com/docs/close-elementor-popup-with-esc-or-clicking-outside/).

**Outer Click Close Content** - This option will close the popup when someone clicks outside the popup.

**On Click Link Popup Close** - In this option, if you have any links in your popup, clicking on them will close the popup. This is useful if you want to hide the popup close button and add a custom close button within the popup. 

**Fixed Toggle Button** - This will allow you to put your toggle button or the popup trigger element in a fixed position on the page. You can easily customize its position for different devices and add a scrolling effect to the button by using the **Show Menu Scroll Offset** option.

**Content Transform** - If you want to add cool transform effects to your page on popup open and close, then you can use this option. You can use the customization options to fine tune the transform effect.

**Modal Popup In/Out Animation** - If you choose **Modal Popup** as your popup type, then you’ll see this option. From here, you can control the popup in and out animation.

## How to set Display Conditions for Popup in Elementor?

When creating a popup using the Popup Builder widget of The Plus Addons for Elementor, you have the option to set different display conditions. This allows you to choose when and where the popup will be displayed.

You can set the popup to appear after a certain amount of time or when the user scrolls to a certain point on the page. You can also choose to display the popup when the user clicks on a certain element on the page.

You’ll find all the display conditions in the **Content > Display Options** section, and we have covered a dedicated doc on each one so that you can understand them in depth.

![The Display Options section of the Popup Builder widget](https://theplusaddons.com/wp-content/uploads/2026/09/tpae-the-display-options-section-of-the-popup-builder-widget.webp)

- [On Page Load](https://theplusaddons.com/docs/trigger-popup-on-page-load-in-elementor/)

- [On Exit Intent](https://theplusaddons.com/docs/exit-intent-popup-in-elementor/)

- [On Scroll](https://theplusaddons.com/docs/popup-after-page-scroll-in-elementor/)

- [After Inactivity](https://theplusaddons.com/docs/popup-on-user-inactivity-in-elementor/)

- [After X Page Views](https://theplusaddons.com/docs/popup-on-page-views-in-elementor/)

- [Arriving From Specific URL](https://theplusaddons.com/docs/show-elementor-popup-arriving-from-a-specific-url/)

- [On Any Other Element's Click](https://theplusaddons.com/docs/elementor-popup-on-other-element-click/)

- [Show For Specific Time](https://theplusaddons.com/docs/elementor-popup-on-specific-date-and-time/)

- [Show X Times per User](https://theplusaddons.com/docs/elementor-popup-once-per-website-session/)

> *Note: You can use several display conditions together. Three of them — After X Page Views, Show For Specific Time and Show X Times per User — only decide whether the popup is allowed, so pair them with a trigger such as On Page Load.*

## How to style Popup/OffCanvas in Elementor?

Styling your popup is very important to match your website design or your offer like if you’re running an offer for Christmas or Black Friday, you want to design your popup accordingly.

The Popup Builder widget of The Plus Addons for Elementor gives you all the styling options you need to make your popup style the way you want.

You’ll find all the styling options under the **Style** tab. The styling options will change depending on the popup settings.

**Open Content** - In this section, you’ll find all the styling options related to the popup and the popup content, like popup padding, background, content typography, and text colour. 

- **Close Icon** - From here, you can even hide the popup close button or use a custom image or icon as the close button and manage other styling aspects like background, border radius, box shadow etc.

- **Popup Background Overlay** - From this section, you can manage the style of the popup background overlay.

Suggested reading, [how to show Elementor popup for a specific date and time period](https://theplusaddons.com/blog/speedup-elementor-website-performance/)

![The Open Content section on the Style tab of the Popup Builder widget](https://theplusaddons.com/wp-content/uploads/2026/09/tpae-the-open-content-section-on-the-style-tab-of-the-popup-builder-widget.webp)

**Toggle Button** - If you’ve chosen **Call To Action** as your popup trigger element, you’ll see this option in the Style tab. From here, you can make the button full width, and adjust its padding, typography, text colour, background, border etc.

**Toggle Icon/Hamburger** - This option will be available if you choose **Icon** as the popup trigger element. From here, you can manage the icon colour, border, background etc.

**Content Scrolling Bar** - Form here, you can even control the styling of the popup scroll bar. You’ll find separate styling options for different parts of the scroll bar. 

**Sticky Navigation Connection** - If you are using The Plus Addons for Elementor’s Popup Builder and the Navigation Menu widget together with the Sticky menu option, then you can control the popup trigger element styling from here.

**On Scroll View Animation** -  This is our global extension available for all our widget, this adds scrolling animation as the widget comes in viewport.

[Learn more about On Scroll View Animation](https://theplusaddons.com/docs/on-scroll-view-animation/)

Advanced options remain common for all our widget, you can explore all it options from here.

[View Advanced tab tutorial.](https://docs.posimyth.com/tpae/advanced-tab/)

Also read, [how to trigger a popup on page load in Elementor](https://theplusaddons.com/blog/best-wordpress-countdown-timer-plugins/)

## How Each Display Option Behaves

Checked against the widget's code. **Triggers** open the popup; **conditions** only decide whether it may appear.

| Option | Kind | What it actually does |
| ------ | ---- | --------------------- |
| On Page Load | Trigger | Opens about half a second after the page loads |
| On Exit Intent | Trigger | Opens when the cursor leaves the page; desktop only |
| On Scroll | Trigger | Opens once the page is scrolled past Scroll Offset (PX) |
| After Inactivity | Trigger | Opens Inactivity MilliSecond after the page loads; activity does not reset it |
| Arriving From Specific URL | Trigger | Opens when the referrer exactly matches Source URL; from other sites only the site address is sent |
| On Any Other Element's Click | Trigger | Opens when an element with the Unique Class (Open) is clicked |
| After X Page Views | Condition | Allows the popup from the Nth page load in that browser onwards |
| Show For Specific Time | Condition | Outputs the popup only between Start and End Date, in the site timezone |
| Show X Times per User | Condition | Allows it for Number of Times page loads, then hides it for Inactive Days; both fields required |

> *Scroll, exit intent and page load open the popup once per page view, and once one of them has opened it the others stay quiet on that page view.*

## Task Guides

- [Open a popup on button click](https://theplusaddons.com/docs/open-popup-on-button-click-in-elementor/)- [Open a popup by clicking any element](https://theplusaddons.com/docs/elementor-popup-on-other-element-click/)- [Open a popup on page load](https://theplusaddons.com/docs/trigger-popup-on-page-load-in-elementor/)- [Open a popup after scrolling](https://theplusaddons.com/docs/popup-after-page-scroll-in-elementor/)- [Open a popup on exit intent](https://theplusaddons.com/docs/exit-intent-popup-in-elementor/)- [Open a popup after a delay](https://theplusaddons.com/docs/popup-on-user-inactivity-in-elementor/)- [Show a popup to visitors from a specific URL](https://theplusaddons.com/docs/show-elementor-popup-arriving-from-a-specific-url/)- [Show a popup after a number of page views](https://theplusaddons.com/docs/popup-on-page-views-in-elementor/)- [Show a popup between two dates](https://theplusaddons.com/docs/elementor-popup-on-specific-date-and-time/)- [Show a popup only once per visitor](https://theplusaddons.com/docs/elementor-popup-once-per-website-session/)- [Control how a popup closes](https://theplusaddons.com/docs/close-elementor-popup-with-esc-or-clicking-outside/)- [Use an Elementor template in a popup](https://theplusaddons.com/docs/popup-with-elementor-templates/)- [Create an off-canvas side menu](https://theplusaddons.com/docs/off-canvas-popup-menu-in-elementor/)- [Create a full-width menu popup](https://theplusaddons.com/docs/full-width-menu-popup-in-elementor/)

## Frequently Asked Questions

**Q: Why isn’t the Popup Builder widget showing on my page?**
A: The usual blocker is setup, not styling. The Popup Builder widget in The Plus Addons for Elementor is a Premium widget, so Elementor FREE Plugin, The Plus Addons for Elementor plugin, and the PRO version all need to be installed and activated. It also has to be turned on under The Plus Addons → Widgets. If you want it on every page, place it in the header or footer template instead of a normal page section.

**Q: What kind of popups can I build with this widget?**
A: The widget supports four popup types: Modal Popup, Slide Popup, Reveal Content Popup, and Corner Box Popup. That matters because each type behaves differently. Slide is the one to use for an off canvas popup menu, Reveal Content pushes the page content while opening and closing, Corner Box is for small corner popups, and Modal Popup is the standard centered style.

**Q: Can I use an Elementor template inside a popup?**
A: The content area supports Elementor templates directly, which is the cleanest way to reuse a designed block inside a popup. The widget also accepts Template Shortcodes and plain Content, so you are not locked into one workflow. That makes it practical for marketing popups where you want the same design reused across pages without rebuilding it each time. See [Learn more about the process](https://theplusaddons.com/docs/popup-with-elementor-templates/).

**Q: How do I make a popup open only in certain situations?**
A: Display conditions control when the popup is allowed to appear, and they can be combined with triggers. The widget includes On Page Load, On Exit Intent, On Scroll, After Inactivity, After X Page Views, Arriving From Specific URL, On Any Other Element's Click, Show For Specific Time, and Show X Times per User. A useful gotcha is that After X Page Views, Show For Specific Time, and Show X Times per User only decide whether the popup may appear, so they need a trigger such as On Page Load.

**Q: What’s the best trigger for an off-canvas menu or popup menu?**
A: Icon or Call To Action are the most practical trigger choices for menus because they give users a clear control point. The Slide popup type is also the right fit when you want an off canvas popup menu since it behaves like a sliding panel instead of pushing content like Reveal Content does. If you want the trigger fixed in place while people scroll, the Fixed Toggle Button option helps keep it visible.

**Q: How do I close a popup without using the default close button?**
A: The widget includes several close behaviors that let you change how users dismiss it. Esc Button Close Content lets people close with the keyboard Esc key, Outer Click Close Content closes when they click outside the popup, and On Click Link Popup Close closes it when a link inside the popup is clicked. That last one is useful if you hide the close button and build your own custom close action inside the popup.