Popup Builder

< All Topics
Widget Used
Popup Builder
Demo URL
Click Here
Tutorial Videos
Official Video

If you want to give a prime look content of your website or article or post looks good in a popup that will attract your user. we have made a well-designed Popup Builder widget for content. This will also help in your single post or page on your website.

Pro tip
Why not add this widget to your website/product? Because this widget will make the content of your website better in a Popup with the custom style option.

How to use the Popup Builder Widget of The Plus Addons For Elementor

The Popup Builder widget comes with six different types of Popup With the custom styling options you can create a superior layout for your websites.

General Steps

Search for the Popup Builder element from the Elementor screen in the left and then drag and drop it into the content building area. After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to the Popup Builder widget. First, click on the Content tab.

1. Content

Popup Builder

1.1: Content

Select Popup Type

We have provided six different types for a popup. Select your desired type for a popup. You can watch this video to know more about it. The types we provided are:

Slide
Push Content
Reveal Content

Slide Along Content
Corner Box
Modal Popup

Select Open Direction

With this option, you can set the popup’s opening direction.

Select Corner Box Direction

With this option, you can set the direction to open a popup from in the corner when the Corner Box Option is Selected in the Popup Type Menu.

Popup Width

With this option, you can set the width of the popup when the Modal Popup Option is Selected in the Popup Type Menu..

Popup Height

With this option, you can set the height of the popup when the Modal Popup Option is Selected in the Popup Type Menu..

Popup Left/Right Space

With this option, you can set the Left/Right Space of the popup when the Modal Popup Option is Selected in the Popup Type Menu.

Open Width

With this option, you can set the width of the popup’s opening direction.

Content-Type

We have provided three different options as Content-Type. Select your desired option which you can see on the screen and open Popup by clicking on it. The options we provided are:

Template
Content
Shortcode

Select Content

With this option, you can see the template created for a single post or page in this option and by selecting it, you can see the content of that template in pop When the template is selected in the content type.

Content

With this option, you can set the custom content when the content is selected in the content type.

Elementor Template Shortcode

With this option, you can set the elementor single post or page template id in this option, and by selecting it, you can see the content of that template in pop when the shortcode is selected in the content type.

Select Option

We have provided three different options as a click event. Select your desired option which you can see on the screen and open Popup by clicking on it. The options we provided are:

Icon
Call To Action
Hidden

Option 1. Icon

With this option, you can see the icon on the screen to open Popup.

Icon Style

With this option, you can set the icon’s style. We have also given the option of a custom icon or image.

Icon Width

With this option, you can set the width of the icon.

Icon Weight

With this option, you can set the weight of the icon.

Icon Padding

With this option, you can set the padding of the icon.

Custom Image/SVG

With this option, you can choose a Custom Image/SVG.

Custom Image/SVG Size

With this option, you can set the size of the custom Image/SVG.

Option 2. Call To Action

With this option, you can see the Button with Icon on the screen to open Popup.

Button Text

With this option, you can set the text of the Button.

Icon Font

With this option, you can select the font of the Button icon and select the None option if you do not want to keep the icon. Example: Font Awesome, Font Awesome 5, Icons Mind, None.

Select Icon/Icon Library

With this option, you can choose the icon that you think is appropriate for the different icon font types.

Icon Position

With this option, you can set the position of the icon. For example, the icon has to be displayed before or after the text of the button.

Icon Spacing

With this option, you can set the space between the icon and the button.

Icon Size

With this option, You can set the size of the icon.

Option 3. Hidden

With this option, you can hide the click event to open Popup.

Alignment

With this option, you can set the alignment of the option that will be selected to open Popup.

1.2: Extra Options

Esc Button Close Content

Enabling this option will allow you to close the popup by clicking on the Esc (escape) button.

Outer Click Close Content

Enabling this option will allow you to close the popup content by clicking Outside.

On Click Link Popup Close

Enabling this option will allow you to close the popup by clicking on the icon or button.

Fixed Toggle Button

Enabling this option lets you fix the position of the Toggle Button for Desktop, Tablet, and Mobile layouts.

Show Menu Scroll Offset

Enabling this option allows you can see a menu to set the scroll offset.

Scroll Top Offset Value

With this option, you can set the value of the Scroll Top Offset.

Left | Right | Top | Bottom

With this option, you can set the position of the Toggle Button Left-Right-Top-Bottom.

1.2.1: Model Popup In/Out Animation Options

In Animation

With this option, you can set different properties of animation when the animation content is coming.

Out Animation

With this option, you can set different properties of animation when the animation content is going.

Delay

With this option, you can set the specific delay time before the animation starts.

Speed

With this option, you can set the display speed of the animation.

1.3: Display Options

On Button Click

By enabling this option you can display a popup by clicking on the button.

On-Page Load

By enabling this option you can see a popup when the page is load.

On Scroll

By enabling this option you can see a popup on the scroll.

Scroll Offset

With this option, you can set the scroll offset value.

On Exit Inlet

By enabling this option you can see a popup when your cursor is out of the content area.

After Inactivity

By enabling this option you can decide after how many millisecond want to see a popup on the screen.

Inactivity Millisecond

With this option, you can set a Time in the millisecond to watch a popup on the screen.

After X Page Views

By enabling this option you can decide after how many pages want to see a popup on the screen.

Page View Count

With this option, you can set the value of pages.

Arriving From Specific URL

By enabling this option you can decide to open a popup by clicking on a specific URL.

Source URL

With this option, you can set a custom URL to open a popup.

On Any Other Element’s Click

By enabling this option you can decide to open a popup by clicking on a specific element of the content.

Unique Class (Open)

With this option, you can set a unique class to open a popup.

Unique Class (Close)

With this option, you can set a unique class to close a popup.

Show For Specific Time

By enabling this option you can decide to open a popup between a certain time.

Start Date

With this option, you can set the starting date to open a popup.

End Date

With this option, you can set the ending date to close a popup.

Show X Times per User

By enabling this option you can decide to want to open a popup how many times and after how many days on the screen.

Number of Times

With this option, you can set the Number of Times to open a popup on the screen.

Inactive Days

With this option, you can set how many days later to open a popup on the screen.

2.Style

The Style tab is used for customizing the look of all the Popup Builder widget components such as Open Content, Toggle Icon/Humberger, Toggle Button, Content Scrolling Bar, Sticky Navigation Connection, and On Scroll View Animation

Open Content Style

Set Padding, Content Text Typography, Content Text Color, Background, Border Radius, and Box Shadow, and for the Open Content here.

Close Icon

Set Display Close Icon Switcher, Sticky/Fixed Close Icon Switcher, Custom Close Icon Switcher, Select Image, Icon Alignment, Icon Color, Close Image Size, Background, Border Radius, and Box Shadow for the Close Icon here.

Popup Background Overlay Style

Set Overlay Color, CSS Filters, and Overflow Switcher for the Popup Background here.

Toggle Icon/Humberger Style

Set Border Switcher, Border Style, Icon Color, Background, Border Radius, and Box Shadow for the Toggle Icon/Humberger here.

Toggle Button Style

Set Full-Width Button Switcher, Padding, Typography, Border Switcher, Border Style, Text Color, Background, Border Radius, and Box Shadows for the Toggle Button here.

Content Scrolling Bar Style

Set Width and Background for the ScrollBar here.
Set Background, Border Radius, and Box Shadow for the Thumb Option here.
Set Background, Border Radius, and Box Shadow for the Track Option here.

Sticky Navigation Connection Style

Set Text Color , Background, Border Color, and Icon Color for the Sticky Navigation Connection here.

On Scroll View Animation Style

Select In Animation Effect, Animation Delay, Animation Duration, Duration Speed, Out Animation Effect, Out Animation Delay, Out Animation Duration, and Out Duration Speed from the Drop-down menu for the On Scroll View Animation here.

Preview

Here you can see with details how the Style option of the Popup Builder Widget works.

3. Advanced

Advanced Tab Options are common across all the widgets. So, we have written a detailed tutorial explaining how to use these options

View The Advanced Tab Tutorial

Do you want to rate this article?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.
Need help?