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

# Einen HTML-Block zu Ihrem Widget hinzufügen

> Fügen Sie ein HTML-Element in Ihr Widget ein, fügen Sie benutzerdefinierten HTML-Code hinzu und positionieren Sie den Block mit CSS oder der Wrapper-Container-Option.

In diesem Artikel erfahren Sie, wie Sie:

* Ein HTML-Element hinzufügen
* HTML-Code bearbeiten
* Ihr HTML-Element positionieren

## Ein HTML-Element hinzufügen

1. Klicken Sie in der linken Seitenleiste auf **Element hinzufügen**.
   * Klicken Sie auf das Symbol **+**, wenn Sie das Menü **Design** ausgewählt haben.
2. Klicken Sie auf **Medien** > **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>

## HTML-Code bearbeiten

<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. Fügen Sie Ihren HTML-Code im Bereich **HTML-Inhalt** hinzu.
2. Klicken Sie auf das Vergrößerungssymbol in der oberen rechten Ecke des Code-Editors, um den Editor im Vollbildmodus zu öffnen.

Wenn Sie im Abschnitt **Benutzerdefinierter Code** benutzerdefinierten CSS- oder JS-Code hinzugefügt haben, können Sie diesen Code zu Ihrem HTML-Code hinzufügen.

Beispielsweise können Sie im Abschnitt **Benutzerdefinierter Code** den folgenden benutzerdefinierten CSS-Code hinzufügen:

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

Wenden Sie dann diese Klasse auf ein Element in Ihrem HTML-Code an (hier das Tag `<h1>`):

`<h1 class="demo">Mein Titel</h1>`

Der rechte Vorschaubereich wird aktualisiert.

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

## Ihr HTML-Element positionieren

Ihr HTML-Code ist standardmäßig nicht in Ihrem Widget positioniert. Sie können ihn jedoch beliebig positionieren, indem Sie CSS-Positionierungseigenschaften wie margin und padding verwenden.

Aktivieren Sie **Wrapper-Container aktivieren**, um Ihren HTML-Block wie jedes andere Element im rechten Vorschaubereich zu positionieren.

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