# ¿Cómo utilizar HBook con DesignModo?

Una vez que haya creado su plantilla de email con DesignModo, puede seguir estos pasos para incluir variables de HBook y añadir el contenido en **HBook > Emails.**

> [!INFO]
> Es posible añadir imágenes directamente desde la Biblioteca de medios de WordPress utilizando la **opción de URL**. Puede consultar este artículo para hacerlo: [¿Cómo puedo encontrar la URL de una imagen en mi biblioteca de medios de WordPress?](../../../explora-nuestra-base-de-conocimientos-por-tema/guias-practicas/como-puedo-encontrar-la-url-de-una-imagen-en-mi-biblioteca-de-medios-de-wordpress.md)

![email-builder-postcards-1.png](./attachments/email-builder-postcards-1.png)

1. Siempre que desee añadir variables de HBook, deberá añadir un elemento **Texto**.

> [!INFO]
> Puede consultar la lista completa de variables en esta sección de nuestra documentación: [Lista de variables](https://maestrel.atlassian.net/wiki/spaces/ESHB/pages/45482695/Lista+de+variables)

![email-builder-postcards-2.png](./attachments/email-builder-postcards-2.png)

2. En el elemento **Texto** añadido, introduzca las variables de HBook que desee utilizar.

![email-builder-postcards-3.png](./attachments/email-builder-postcards-3.png)

3. Haga clic en **Export**, y a continuación haga clic en **Copy Email Code**

![email-builder-postcards-4.png](./attachments/email-builder-postcards-4.png)

4. Si ha añadido imágenes, la opción **Host images/fonts online** se activará automáticamente. Puede desactivar las otras dos opciones y, a continuación, hacer clic en **Copy Email Code**

> [!INFO]
> Si ha añadido mucho contenido a su plantilla de email, tal vez le interese activar la opción **Minify exported code** para optimizarlo y mejorar su rendimiento.

![email-builder-postcards-5.png](./attachments/email-builder-postcards-5.png)

5. En **HBook > Emails,** en la sección de “mensajes”, seleccione el formato **HTML** y pegue el código HTML de DesignModo.