How to Open On click /On hover/On load Popup via CSS class
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. <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 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 Popup Events section. This one has 2 options to trigger on click popup.
Default added class into your HTML element - sg-popup-onclick-1 (1 is the ID number of your created Popup, which can be changed according to the Popup).
Custom class which gives you an opportunity to set the proper CSS class into your HTML element.
You have an opportunity to set On hover event via CSS class. Here you have opportunity to select either Default added class or Custom class.
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 which again 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.
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. <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 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 Popup Events section. This one has 2 options to trigger on click popup.
Default added class into your HTML element - sg-popup-onclick-1 (1 is the ID number of your created Popup, which can be changed according to the Popup).
Custom class which gives you an opportunity to set the proper CSS class into your HTML element.
You have an opportunity to set On hover event via CSS class. Here you have opportunity to select either Default added class or Custom class.
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 which again 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.
Updated on: 20/06/2022
Thank you!