Skip to main content

Add an HTML block to your widget

In this article, you will learn how to:

  • Add an HTML element
  • Edit HTML code
  • Position your HTML element

Add an HTML element​

  1. Click Add element in the left sidebar.
    • Click the + icon if you've selected the Design menu.
  2. Click Media > HTML.

Edit HTML code​

  1. Add your HTML code in the HTML Content section.
  2. Click the enlarge icon in the upper right corner of the code editor to open the editor in full-screen.

If you have added custom CSS or JS in the Custom Code section, you can add this code to your HTML code.

For example, in the Custom Code section, you can add the following custom CSS code:

 .demo {
    background-color: red !important;
 }

Then, apply this class an element in your HTML code (here, the <h1> tag):

<h1 class="demo">My title</h1>

The right preview zone will be updated.

Position your HTML element​

Your HTML code is not positioned in your widget by default. However, you can position it wherever you want, using CSS positioning properties, like margin and padding.

Check Enable wrapper container to position your HTML block in the right preview area like any other element.