> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Add an HTML block to your widget
> Insert an HTML element into your widget, add custom HTML code, and position the block using CSS or the wrapper container option.
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:
```css theme={null}
.demo {
background-color: red !important;
}
```
Then, apply this class an element in your HTML code (here, the `` tag):
`My title
`
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.
