Q: How to create an Image Popup (FREE)

Image Popup Type is an effective image advertising tool for your website visitors. <ul> <li>Steps to Follow.</li> </ul> 1. Go to your WordPress Dashboard &gt;&gt; Popup Builder and click on Add New to select Image Popup from the menu bar. <img src="https://storage.crisp.chat/users/helpdesk/website/3fee58eaeb6dda00/image_9c1c3x.png" alt="" /> <ol start="2"> <li>Fill in the title and insert the proper image via Image Popup Main Option.</li> </ol> <img src="https://storage.crisp.chat/users/helpdesk/website/3fee58eaeb6dda00/image_1c25o3y.png" alt="" /> <ol start="3"> <li>Customize the Popup using required options via Popup Dashboard.</li> </ol> <ul> <li>The result.</li> </ul> <img src="https://storage.crisp.chat/users/helpdesk/website/3fee58eaeb6dda00/image_ygj388.png" alt="" />

Question 1

Create your 1st Popup

Accepted Answer

Required steps:

Please open your WordPress Dashboard, press on the button Popup Builder >> Add New, after then, please select the Popup, which you would like to create (the Subscription was chosen as an example).

Add the title and text content for your Popup as you see on the screenshot below

Subscription Options.

The Background option, to select and customize the background's color.
The First name, and Last name, to set the required fields of the Popup.

The Inputs' style, to select the size, background's color, text, and placeholder's color

The Submit button styles, to manage the button's size, title, background, and text color

With the help of this section, you can customize the Error message and Successful Subscription.

Popup Display Rules

This section responses, where to show the Popup on the website. In the example, we have selected All pages to open t

Question 2

Open On click /On hover/On load Popup via CSS class

Accepted Answer

If you need to add an On click Popup on any page/post on your site, you can use our CSS class: sg-popup-id-1 (1 is your Popup ID number)

Required steps:

Go to the page you want to insert the Popup.
Switch to the Text tab.
Paste the following CSS class - sg-popup-id-1 (for On click) or sg-popup-hover-1 (for On hover) inside your HTML element.

Ex. for On Click. Click text Ex. for On Hover Hover text

Type your Popup ID number in the class.

From your Popup list select the Popup you would like to show when your visitors press the click text.
In the Popup Display Rules section, you can choose the Selected posts option and select the post where you have pasted the CSS class.

You need to select the Set by CSS class event in the Popup Events section.

You can also use the On load event to open the Popup during the load. In this case, you can set the time (in seconds) to appear the Popup.

You have an opportunity to set On hover event via

Question 3

How to create an HTML Popup (Free)

Accepted Answer

HTML Popup is a Popup Type which works with HTML code. You can add text, images, links and embed codes in the content and create variety popups.

It is available in the free version of the plugin. Here are the steps to create it.

Please go to your WordPress Dashboard, find **"Popup Builder" **plugin and press on it.
Please press on "Add New" button.
After, you need to select the HTML Popup icon to start creating the popup.
In the box you can add your own code (text, images, etc.) by pressing on the **Text **mode.

_Here: _

Also you have options to add media files, Popups and JS Variables and the system will create the HTML code automatically. Here:
After, you can scroll the page to see all the Popup options under the box.
After, you can select the "Popup Events" and "Conditions" on how you wish the popup to be opened and other necessary options depending on your goals.
Lastly, you need to press on the "Publish" button to save all the changes.

Congrats! You have created the Popup. You can check the Popup on a page by pressing on "Preview" button.

We have created an HTML popup to bring an example, here: ![](https://stor

Question 4

How to Use the Floating Button

Accepted Answer

One of the ways to trigger a popup is by using a Floating Button. The button will be shown on your website all the time and the popup will be opened as soon as the button is clicked.

Let's see how to use the Floating Button in Popup Builder plugin.

| Make sure to have at least one popup created so you can use the Floating Button.

Open the popup editing area from Popup Builder Plugin and click the "Enable" button under the Floating Button.

Choose the Style of the button from the available options: Corner and Basic.

Customize the Floating Button Position.

• If the Style is Corner, then the following Position types can be chosen: Top left, Top right, Bottom left, Bottom right.

• If the Style is Basic, the following Position types are available: Top left, Top right, Bottom left, Bottom right, Top center, Bottom enter, Right center, Left center. You can also customize the Position Top and Position right with percents. The default values are 40% for Position Top and 50% for Position Right.

![](https://storage.crisp.chat/users/helpdesk/website/3fee58eaeb6dda00/floating-button-article-image-_n

Question 5

How to create an Image Popup (FREE)

Accepted Answer

Image Popup Type is an effective image advertising tool for your website visitors.

Steps to Follow.

1. Go to your WordPress Dashboard >> Popup Builder and click on Add New to select Image Popup from the menu bar.

Fill in the title and insert the proper image via Image Popup Main Option.

Customize the Popup using required options via Popup Dashboard.

The result.

Question 6

How to activate License Key(s)

Accepted Answer

In order to receive all the updates on your Extension(s) you need to activate the License Key(s)

In this article you will learn how to activate them.

Please log in to your Popup Builder account.
After, press on "View Licenses" button under the "License keys".
You will see a **key **button near each extension type, please press on it and copy the key (CTRL+C for Windows and CMD+C for Mac).
Then, please go to your WP account and press on Popup Builder option in the menu bar.
You will see "Licenses" button there, press on it.
Please paste (CTRL+V for Windows and CMD+V for Mac) the key in the box near the corresponding extension type.
After, please press on "Activate" button.

You are all set up!

Please also see the gif below in order to visualize the steps:

Frequently Read Articles

Browse All Categories