Q: How to create an Image Popup (Free)

Image Popup Type is an effective image advertising tool for your website visitors. <ul> <li>Here are steps to follow to create Image Popup.</li> </ul> 1. Go to your WordPress Dashboard &gt;&gt; Popup Builder and click on Add New. <img src="https://storage.crisp.chat/users/helpdesk/website/3fee58eaeb6dda00/12257514-135ebccc67458b3ba9f4a_6sbbee.png" alt="" /> <ol start="2"> <li>Select Image popup from the menu bar.</li> </ol> <img src="https://storage.crisp.chat/users/helpdesk/website/3fee58eaeb6dda00/add-new-wp1-3_1et1m0a.png" alt="" /> <ol start="3"> <li>Fill in the title and insert the proper image via Image Settings.</li> </ol> <img src="https://storage.crisp.chat/users/helpdesk/website/3fee58eaeb6dda00/12194061-9a69a78d40f943e1d1f78_1f7zfyq.png" alt="" /> <ol start="4"> <li>Customize the Popup using required options via Popup Dashboard.</li> </ol> <img src="https://storage.crisp.chat/users/helpdesk/website/3fee58eaeb6dda00/12195083-395e77320f4a7d9297654_1s9qdci.png" alt="" /> <ul> <li>The result.</li> </ul> <img src="https://storage.crisp.chat/users/helpdesk/website/3fee58eaeb6dda00/image_ygj388.png" alt="" />

Question 1

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, embed codes, shortcodes of other WordPress plugins in the content and create a variety of popups.

It is available in the free version of the plugin.

Steps to create an HTML popup

From your WordPress dashboard open the Popup Builder and click on the Add New.

Choose the HTML popup from the menu bar.

Steps to edit the HTML popup

There are many editors that can be used to edit the HTML popup- depending on what theme and editor you have for your WordPress website. In this article we will touch upon the **Classic and Gutenberg **editors.

First we will check the Classic Editor.

There are two editing modes available to you in Classic Editor Visual and Text, depending on which you are most comfortable with.

In the box you can add your own code (text, images, etc.) by pressing on the **Text **mode.

Also you have options to add media files, Popups and JS Variables and the system will create the HTML code automatically.

![](https://stora

Question 2

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

Accepted Answer

You can use our CSS class sg-popup-id-1 (1 is your Popup ID number) to add On click Popup on pages, posts, etc on your site.

| CSS class can be used for any element if those give a possibility to add CSS class.

In this tutorial we have chosen to show how it can be used on a page.

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 pages option and select the page where you have pasted the CSS class.

You have opportunity to choose 2 events to trigger on click popup.

1st one is to select the Set by CSS class event in the Popup Events section.

2nd one is to select the **On click ** event in the **Pop

Question 3

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.

You can customize the following options for your floating button.

Choose the Style of the button from the available options: Corner and Basic.
Customize the Floating Button Position. | 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. | If the Style is Corner, the following Position types are available: Top left, Top right, Bottom left, Bottom right.
Customize the Font size.
Choose a Background color.
Set a Text color for the button.
And insert the text you wish.

That's it! Now you have a popup which w

Question 4

How to create an Image Popup (Free)

Accepted Answer

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

Here are steps to follow to create Image Popup.

1. Go to your WordPress Dashboard >> Popup Builder and click on Add New.

Select Image popup from the menu bar.

Fill in the title and insert the proper image via Image Settings.

Customize the Popup using required options via Popup Dashboard.

The result.

Question 5

How to Open a Popup via WPBakery Page Builder (Visual Composer)

Accepted Answer

WPBakery Page Builder formally known as a Visual Composer is a page builder plugin for WordPress which allows to create the website content with simple drag and drop.

You can easily add your preferred popups on any elements available within the WP Bakery Page Builder.

In this article we will show you how to add a button to your page and how to add an on click popup on it.

| Please note, that the below steps can be applied to any element available with the WPBakery Page Builder.

Required steps

Create the popup which you would like you show when the button created with the WP Bakery is clicked and choose the On Click event for it from the Events section.

Open the proper Page/Post created with the WP Bakery Page Builder, click on the + sign from the upper left side and choose the Button element.

From the Button Settings, General section scroll down and put the class of the popup into the Extra class name section.

That's it. Update the page and check the button with the popup.

Those were the steps to put the on click popup on a WPBakery Page Builder built button.

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, note, that before activating the License Key(s), you need to install and activate a bundle or a single extension you have purchased.

In order to install a bundle, check this article. To install a single extension, check this article.

Steps to activate the License Key(s)

Log in to your Popup Builder account from here
Copy the License Key under the each extension

Go to your WP account and press on Popup Builder option in the menu bar. After click on the ''License'' option

Paste the keys in the box near the corresponding extension type and hit the ''Activate'' button

Once the License is activated, you will see the ''Active'' sign and can deactivate the License anytime you wish by pressing the ''Deactivate'' button

You are all set!

|| In ca

Frequently Read Articles

Browse All Categories