> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.popup-builder.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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](https://help.popup-builder.com/en/article/how-to-install-and-activate-popup-builder-core-plugin-free-1hoof9z/) of the plugin.

###  Steps to create an HTML popup 

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

![](https://storage.crisp.chat/users/helpdesk/website/3fee58eaeb6dda00/screenshot35_1kx8o7s.png)
2.  Choose the **HTML** popup from the menu bar.


![](https://storage.crisp.chat/users/helpdesk/website/3fee58eaeb6dda00/screenshot38_au12af.png)

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

![](https://storage.crisp.chat/users/helpdesk/website/3fee58eaeb6dda00/screenshot_8_c3rpt5.png)

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

![](https://storage.crisp.chat/users/helpdesk/website/3fee58eaeb6dda00/screenshot_10_1gt45a1.png)

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


![](https://storage.crisp.chat/users/helpdesk/website/3fee58eaeb6dda00/screenshot5_s1o05n.png)

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


![](https://storage.crisp.chat/users/helpdesk/website/3fee58eaeb6dda00/screenshot1_1jc0j9u.png)


* From the **Text** section, select the Paragraph, Heading, List, Code etc.


![](https://storage.crisp.chat/users/helpdesk/website/3fee58eaeb6dda00/screenshot2_1sc62g9.png)

|| It is also possible to insert the Popup Builder Button inside the popup from the Text section. Please, check [this article](/en/article/how-to-use-the-popup-builder-button-inside-the-popup-9hny9c/) on how to do that.


* Add images, videos, audios and etc. from the **Media** section:

![](https://storage.crisp.chat/users/helpdesk/website/3fee58eaeb6dda00/screenshot3_1q3y6i1.png)
* **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

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

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

![](https://storage.crisp.chat/users/helpdesk/website/3fee58eaeb6dda00/01artboard-1_4pq6os.jpg)