You can add HTML code into your widget, and insert it into a block that you can position or resize like any other element.
In this article, you will learn how to:
- Add a HTML element
- Edit HTML code
- Position your HTML element
Add a HTML element
- Click on Add element (first item of the left menu) or on the plus icon appearing at the right of each element listed in the element list (when Design left menu item is selected)
- In the list, unfold the Media section and click on HTML.
- It opens a new panel from where you can edit your HTML (read next chapter).
Edit HTML code
- Add your HTML code in the HTML Content section.
The block with the black background is our built-in code editor. Start typing your code and you will benefit from our smart code completion. As for any other element, the result of your code will be directly displayed in the preview area on the right.
- Click on the icon in the upper right corner to open the code editor in full screen mode.
- You have added custom CSS or JS in the Custom Code section (last item on the left menu)? You can of course use all these resources in your HTML code here.
Example
In Custom Code section, add the following Custom CSS code:
.demo {
background-color: red !important;
}
Then, apply this class to one element of your HTML code (here <h1> tag):
<h1 class="demo">My title</h1>
The preview zone on the right will be updated.
Position your HTML element
- By default, your HTML code is not positioned in your widget (you can position it wherever you want using the CSS positioning properties, such as margin, padding …).
- Check the option Enable wrapper container in order to be able to position or resize your HTML block from the right preview area, like any other element.
