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

# Ajouter un bloc HTML à votre widget

> Insérez un élément HTML dans votre widget, ajoutez du code HTML personnalisé et positionnez le bloc à l'aide de CSS ou de l'option de conteneur wrapper.

Dans cet article, vous apprendrez à :

* Ajouter un élément HTML
* Modifier le code HTML
* Positionner votre élément HTML

## Ajouter un élément HTML

1. Cliquez sur **Ajouter un élément** dans la barre latérale gauche.
   * Cliquez sur l'icône **+** si vous avez sélectionné le menu **Design**.
2. Cliquez sur **Média** > **HTML**.

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/insert-html-code-in-your-widget/add-an-html-block-to-your-widget/0.png)
</Frame>

## Modifier le code HTML

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/insert-html-code-in-your-widget/add-an-html-block-to-your-widget/1.png)
</Frame>

1. Ajoutez votre code HTML dans la section **Contenu HTML**.
2. Cliquez sur l'icône d'agrandissement dans le coin supérieur droit de l'éditeur de code pour ouvrir l'éditeur en plein écran.

Si vous avez ajouté du CSS ou du JS personnalisé dans la section **Code personnalisé**, vous pouvez ajouter ce code à votre code HTML.

Par exemple, dans la section **Code personnalisé**, vous pouvez ajouter le code CSS personnalisé suivant :

```css theme={null}
 .demo {
    background-color: red !important;
 }
```

Ensuite, appliquez cette classe à un élément dans votre code HTML (ici, la balise `<h1>`) :

`<h1 class="demo">Mon titre</h1>`

La zone de prévisualisation à droite sera mise à jour.

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/insert-html-code-in-your-widget/add-an-html-block-to-your-widget/2.png)
</Frame>

## Positionner votre élément HTML

Votre code HTML n'est pas positionné dans votre widget par défaut. Cependant, vous pouvez le positionner où vous le souhaitez en utilisant les propriétés de positionnement CSS, comme margin et padding.

Cochez **Activer le conteneur wrapper** pour positionner votre bloc HTML dans la zone d'aperçu à droite comme n'importe quel autre élément.

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/assets/widgets/insert-html-code-in-your-widget/add-an-html-block-to-your-widget/3.png)
</Frame>
