> For the complete documentation index, see [llms.txt](https://academy.gopersonal.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://academy.gopersonal.ai/guia-de-usuario/broadcasts/nuevo-broadcast/email/editor-html.md).

# Editor HTML

El Editor HTML arma el cuerpo del email a partir del código, con control total sobre cada detalle. Es la opción indicada cuando ya se tiene un HTML hecho, cuando el diseño necesita algo que los bloques del [Editor Drag & Drop](/guia-de-usuario/broadcasts/nuevo-broadcast/email/editor-drag-and-drop.md) no cubren, o cuando se quiere preparar un template para que después lo complete un usuario de negocio sin tocar código.

Se abre desde el paso **Diseño** de la variante de email, tanto en broadcasts como en los [canales de un journey](/guia-de-usuario/journeys/editor-workflow/canales/email.md).

<figure><img src="https://1714366366-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuYUYzfG5fXW0akjkg1XQ%2Fuploads%2Fgit-blob-0b3741acd9e5d39def01ef97e5dd1de685e9771c%2Feditor-html.png?alt=media" alt=""><figcaption><p>Editor HTML en modo Diseño: vista previa a la izquierda y panel de variables a la derecha</p></figcaption></figure>

## Los dos modos

El editor tiene dos modos, que se cambian con el selector de arriba a la izquierda:

* **Diseño:** la vista previa del email a la izquierda y el panel de **Variables** a la derecha. Es el modo en el que trabaja el usuario de negocio: completa los valores de las variables y ve el resultado al instante, sin ver el código.
* **Avanzado:** suma la pestaña **HTML** con el editor de código. Es el modo en el que trabaja quien arma el template.

{% hint style="info" %}
El editor abre siempre en **Diseño**. Si el email está vacío, la vista previa se ve en blanco hasta que se pegue o se importe el HTML desde **Avanzado**.
{% endhint %}

## La ventana

### Barra de herramientas

| Control                               | Qué hace                                                                                |
| ------------------------------------- | --------------------------------------------------------------------------------------- |
| **Diseño** / **Avanzado**             | Cambia de modo.                                                                         |
| **Escritorio**, **Tablet**, **Móvil** | Cambia el ancho con el que se dibuja la vista previa. Solo aparecen en modo **Diseño**. |
| **+ Componente Email**                | Copia al portapapeles un componente del catálogo del proyecto para pegarlo en el HTML.  |
| **Pedir a Calvin**                    | Abre una tarea de Calvin con el contexto de esta variante de email.                     |
| **Importar HTML**                     | Carga un archivo `.html` o `.htm` y reemplaza con él el contenido del editor.           |

### Botones de la ventana

* **Guardar como Template:** guarda el diseño en el catálogo de templates para reutilizarlo en otros envíos.
* **Cancelar:** cierra sin aplicar los cambios.
* **Guardar:** aplica el diseño y deja la ventana abierta.
* **Confirmar:** aplica el diseño y cierra la ventana.

## Vista previa

La vista previa muestra el email tal como va a salir, con las variables ya reemplazadas por sus valores, y se actualiza sola a medida que se escribe en el código o se cambia un valor en el panel.

Los botones de **Escritorio**, **Tablet** y **Móvil** cambian el ancho del marco para revisar cómo responde el diseño.

## Editar el HTML

En modo **Avanzado**, la pestaña **HTML** abre el editor de código, con resaltado de sintaxis y autocompletado de etiquetas. Se puede pegar el HTML completo del email, incluyendo estilos en línea y `<style>`.

{% hint style="warning" %}
El HTML de un email no se comporta como el de una página web: conviene usar tablas para la estructura y estilos en línea, y evitar JavaScript, que los clientes de correo ignoran o bloquean.
{% endhint %}

### Importar HTML

**Importar HTML** abre el selector de archivos y carga un `.html` o `.htm` desde la computadora. El contenido del archivo reemplaza lo que haya en el editor y la vista previa se actualiza.

{% hint style="info" %}
Es una carga directa del archivo, tal cual está: no se convierte en bloques editables. Para convertir un HTML existente en filas y bloques, hay que usar la opción **Importar HTML** del [Editor Drag & Drop](/guia-de-usuario/broadcasts/nuevo-broadcast/email/editor-drag-and-drop.md#importar-html).
{% endhint %}

### Componentes de Email

El botón **+ Componente Email** lista los componentes del catálogo del proyecto. Al elegir uno, su HTML se copia al portapapeles: hay que ir al lugar del código donde se lo quiera insertar y pegarlo.

Es la forma de sumar bloques de recomendaciones al email sin escribirlos a mano.

{% content-ref url="/pages/uS1ew12aWVUvtElpyL3H" %}
[Listado de Componentes](/guia-de-usuario/catalogos/componentes-de-email/listado-de-componentes.md)
{% endcontent-ref %}

{% content-ref url="/pages/9n4DF2Zkk5Obw0hDxz7B" %}
[Recomendaciones en Email](/guia-de-usuario/catalogos/componentes-de-email/recomendaciones-en-email.md)
{% endcontent-ref %}

## Variables

El panel **Variables** es el que le permite a un usuario de negocio cambiar textos, imágenes, colores o la estrategia de recomendación sin tocar el código.

En el HTML las variables se escriben como `{{NOMBRE_VARIABLE}}` y quedan resaltadas en el editor. Al hacer click sobre una variable resaltada se abre su configuración; si todavía no existe, se ofrece crearla.

También se puede seleccionar un texto en el código y usar **Convertir en variable** para reemplazarlo por una variable nueva.

Desde el panel se crean las variables con **Nueva Variable** —nombre, tipo, tooltip, placeholder y grupo— y se organizan en grupos.

{% content-ref url="/pages/RnkNtxb6uhmU4BkXWU70" %}
[Variables](/guia-de-usuario/personalizaciones/experiencias/variantes/variables.md)
{% endcontent-ref %}

{% hint style="info" %}
Estas variables son las del template y las completa quien arma el email. No hay que confundirlas con las [variables dinámicas](/guia-de-usuario/journeys/editor-workflow/canales/variables-dinamicas.md), que se resuelven en el envío con los datos de cada destinatario.
{% endhint %}

## Pedir a Calvin

**Pedir a Calvin** abre el panel de tareas de Calvin con el contexto de la variante de email, para pedirle cambios o que arme el HTML. Requiere que el proyecto tenga una integración de Calvin configurada.

{% content-ref url="/pages/v4coqTxkjtaurH7h0H3x" %}
[Tareas de Calvin](/guia-de-usuario/tareas-de-calvin.md)
{% endcontent-ref %}

## Otras opciones de diseño

{% content-ref url="/pages/h85FeOrNV34Cgix32edB" %}
[Editor Drag & Drop](/guia-de-usuario/broadcasts/nuevo-broadcast/email/editor-drag-and-drop.md)
{% endcontent-ref %}

{% content-ref url="/pages/GhhLw6OnBttDEVdNvtFx" %}
[Templates](/guia-de-usuario/broadcasts/nuevo-broadcast/email/templates.md)
{% endcontent-ref %}