How to open On click /On hover Popup via CSS class

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

1. Go to the page you want to insert the Popup

2. Switch to the Text tab.

3. Paste the following CSS class - sg-popup-id-1 (for On click) or sg-popup-hover-id-1 (for On hover) inside your HTML element.

Ex.  <span class="sg-popup-id-1" > Click text</span> 


*Type your Popup ID number in the class

4. From your Popup list select the Popup you would like to show when your visitors press the click text.

5. In the Popup Display Rules section you can choose the Selected posts option and select the post where you have pasted the CSS class.

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

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

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

Take consider, you can choose more than one Popup Event at the same time.

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.

Also, please consider, that all above-mentioned examples you can set with On hover CSS class.