Popup Builder

Popup Builder

Popup is a window that pops up over the top of your main window to get user attention.

You are having a great Black Friday sale and you are giving away video games for a buck. Normally no user will try to read the offer written in the text format. You need to attract them visually. And here comes a picture, popup.

Pro tip
Google notices the pop-up’s engagement impact. And you are smart enough to check it out online.

Configuration for Popup Builder

We have provided several options for various use cases for popups with eye catching designs. Select popup, pick the opening direction & set the trigger and you are ready to roll.

How to use the Popup Builder Block of The Plus Addons For Gutenberg

The Popup Builder block comes with five different types of popup, with the custom styling options you can create a superior layout for your websites.

Table Of Contents

Setting up

Gutenberg gives multiple ways to add a popup builder into the content building area or we say playground. Check for the “+” icon in the top toolbar or click “+” icon in the content area or start typing popup builder after “/” sign, eg.“/popup builder”, in the content area. Gutenberg also provides drag & drop after opening the list of Blocks panel.

After placing the Block you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.

1. Layout

Content

Type

This is an option to choose the perfect UI for your need to get started with popup builder. We have provided five UI options you might want to checkout.

Open Direction

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

Select Slide Direction

This option is available for types rather than popup. You can decide the opening direction like center, bottom, right, left from here.

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 & Height

This option will be enabled when you choose the popup type in the previous drop down. Popup opens in the center of the window so this option allows you to set width and height for the popup you are going to create.

Popup Position

This option will be enabled for popup type. This allows you to set the popup position on the screen. You can set the popup position from left and top window edges, and popup will be animated at that location.

Width

This option is available for types rather than popup. You can apply width from the edge from which it is opening from here.

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
Short-Code

Content

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

Select Template

Selection of reusable blocks from the block library to display as a content of popup.

Short-Code

With this option, you can set the Gutenberg 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 short-code is selected in the content type.

Selector

Type

Here you can decide the element which would be responsible for the popup trigger. Button & Icon are normal options for click trigger popup. Hidden is the option for some other trigger option to which you’ll be introduced shortly. Hidden simply hides the button, so no click event is there.

Button Text

Text for the button from which popup is going to be triggered.

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 & Select Icon

Icon for the button from which popup is going to be triggered. You can have Nothing as Icon or you can choose from a font-awesome library which provides icons from below the selector.

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.

Icon Position

You can choose the icon position, after or before the text, from here.

Icon Spacing

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

Icon Size

You can manage icon size from this selector.

Upload Image

With this option, you can choose a Custom Image.

Image Size

With this option, you can set the size of the Custom Image.

Alignment

Option will align the button or Icon based on your selection of alignment.

Display Conditions

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.

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.

Element’s ID

With this option, you can set an element’s id to open 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.

Extra 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.

Easing

With this option, you can set different properties of animation(transition).

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.

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.

2. Style

The Style tab is used for customizing the appearance of all the Popup Builder Block components. All these styling options include customizing the fonts, colors, background, margins and padding which are common across all the Blocks. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article

Content Area

Padding

Put-in some inner space to an element.

Background

Apply suitable background like color, gradient, image or video to an element.

Border Radius

Set the radius curve of the box’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Counter Font Color

A color picker to assign suitable color to the element.

Typography

Assign size, weight, spacing and much more to fonts.

Margin

Put-in some outer space to an element.

Border

Draw a border around the element and give width and color to it.

Close Icon

Display Close Icon

By enabling this option, you can see the close icon.

Fixed Icon

By enabling this option, you can fix the position of the icon.

Custom Icon

By enabling this option, you can see custom icon options.

Upload Image

By enabling a custom icon option, you’ll be asked to choose and upload an image.

Icon Alignment

Alignment of icon into left, center or right direction.

Close Image Size

Set size of image from here.

Background

Apply suitable background like color, gradient, image or video to an element.

Border Radius

Set the radius curve of the box’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Overlay Background

Apply suitable overlay background like color, gradient, image or video to an element.

Filters

Apply suitable CSS filters to an element.

Toggle Icon

Icon Color

A color picker to assign a suitable color to the icon.

Background

Apply suitable background like color/ gradient to an element.

Border

By enabling the border option, you can draw a border around the element and give width and color to it.

Border Radius

Set the radius curve of the element’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Toggle Button

Full Width Button

By enabling this option, you can give full width to the button.

Padding

Put in some inner space to an element.

Typography

Assign a size, weight, spacing, and much more to fonts.

Text Color

A color picker to assign a suitable color to the text.

Background

Apply suitable background like color/ gradient to an element.

Border

By enabling the border option, you can draw a border around the element and give width and color to it.

Border Radius

Set the radius curve of the element’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Content Scroll Bar

Content Scrolling Bar

By enabling this option, you can see the content scroll bar options here.

Scroll Bar Width

With this option, you can set the Width of the content scroll bar here.

Scroll Bar Background

Apply suitable background like color/ gradient to an element.

Thumb Background

Apply suitable background like color/ gradient to an element.

Thumb Border Radius

Set the radius curve of the element’s corner.

Thumb Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Track Background

Apply suitable background like color/ gradient to an element.

Track Border Radius

Set the radius curve of the element’s corner.

Track Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

3. Advanced

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

View The Advanced Tab Tutorial

Was this article helpful?
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.