How to create an HTML Popup (Free)
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.
From your WordPress dashboard open the Popup Builder and click on the Add New.
Choose the HTML popup from the menu bar.
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.
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.
The Visual editor icons allow you to format text, change font alignment, insert bulleted and numbered lists, and more.
In addition, you can use the Popup Builder Button inside the popup by choosing the appropriate function for it.
In order to add the content into the popup, first click on the + sign next to the block, after on the Browse all button to be able to select the content from the available options
From the Text section, select the Paragraph, Heading, List, Code etc.
It is also possible to insert the Popup Builder Button inside the popup from the Text section. Please, check this article on how to do that.
Add images, videos, audios and etc. from the Media section:
Design section gives you a chance to add buttons, columns, rows etc.
Ensure to add shortcodes, calendar, social icons from the Widget section. While choosing the Popup Builder from the section, select the popup with the appropriate event to trigger inside the HTML popup.
It is possible to add content from the Theme, Embeds and WooCommerce sections as well.
Once you are done editing the popup, you can select the " Events" and "Display Rules" on how and where you wish the popup to be opened and other necessary options depending on your goals.
Before you publish the popup you may press on the ''Preview'' button to check how it looks.
With the Gutenberg editor you can save the popup as a draft using the appropriate, ''Save Draft'' button.
If you are satisfied with the result, you can publish the popup by clicking on the ''Publish'' button.
Congrats! Now you have the HTML popup.
Here is an HTML popup to bring as an example:
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.
The Visual editor icons allow you to format text, change font alignment, insert bulleted and numbered lists, and more.
In addition, you can use the Popup Builder Button inside the popup by choosing the appropriate function for it.
The HTML popup can be edited using the Gutenberg editor as well
In order to add the content into the popup, first click on the + sign next to the block, after on the Browse all button to be able to select the content from the available options
From the Text section, select the Paragraph, Heading, List, Code etc.
It is also possible to insert the Popup Builder Button inside the popup from the Text section. Please, check this article on how to do that.
Add images, videos, audios and etc. from the Media section:
Design section gives you a chance to add buttons, columns, rows etc.
Ensure to add shortcodes, calendar, social icons from the Widget section. While choosing the Popup Builder from the section, select the popup with the appropriate event to trigger inside the HTML popup.
It is possible to add content from the Theme, Embeds and WooCommerce sections as well.
Steps to publish the HTML popup
Once you are done editing the popup, you can select the " Events" and "Display Rules" on how and where you wish the popup to be opened and other necessary options depending on your goals.
Before you publish the popup you may press on the ''Preview'' button to check how it looks.
With the Gutenberg editor you can save the popup as a draft using the appropriate, ''Save Draft'' button.
If you are satisfied with the result, you can publish the popup by clicking on the ''Publish'' button.
Congrats! Now you have the HTML popup.
Here is an HTML popup to bring as an example:
Updated on: 11/05/2022
Thank you!