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. <span class="sg-popup-id-1" > Click text</span>
Ex. for On Hover <span class="sg-popup-hover-1" > Hover text</span>

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 CSS class. This one has 2 options to choose the condition for the event:

Default added class into your HTML element - sg-popup-hover-1 (1 is the ID number of your created Popup, which can be changed according to the Popup)

Custom class gives you an opportunity to set the proper CSS class into your HTML element

Examples with Page Builder Plugins of the site(s).

Very often users have page builder plugins in their sites, and in this case, the CSS class adding differs a little.

Suppose you want to add an On click Popup on a Button element.

In this case, you should go to your Button module settings, find Custom CSS option and enter our CSS class (sg-popup-id-1, 1 is your Popup ID number) there.

On click Popup with Divi Builder:

On click Popup with Visual Composer

Here you can see the result of the On click Popup added via CSS class.

Was this article helpful?
Thank you!