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

# Añadir un bloque HTML a su widget

> Inserte un elemento HTML en su widget, añada código HTML personalizado y posicione el bloque utilizando CSS o la opción de contenedor envolvente.

En este artículo, aprenderá a:

* Añadir un elemento HTML
* Editar código HTML
* Posicionar su elemento HTML

## Añadir un elemento HTML

1. Haga clic en **Añadir elemento** en la barra lateral izquierda.
   * Haga clic en el icono **+** si ha seleccionado el menú **Diseño**.
2. Haga clic en **Medios** > **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>

## Editar código 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. Añada su código HTML en la sección **Contenido HTML**.
2. Haga clic en el icono de ampliar en la esquina superior derecha del editor de código para abrir el editor en pantalla completa.

Si ha añadido CSS o JS personalizados en la sección **Código personalizado**, puede añadir este código a su código HTML.

Por ejemplo, en la sección **Código personalizado**, puede añadir el siguiente código CSS personalizado:

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

A continuación, aplique esta clase a un elemento en su código HTML (aquí, la etiqueta `<h1>`):

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

La zona de vista previa de la derecha se actualizará.

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

## Posicionar su elemento HTML

Su código HTML no se posiciona en su widget de forma predeterminada. Sin embargo, puede posicionarlo donde desee utilizando propiedades de posicionamiento CSS, como margin y padding.

Marque **Habilitar contenedor envolvente** para posicionar su bloque HTML en el área de vista previa derecha como cualquier otro elemento.

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