Última actualización: octubre 19, 2020
En tu herramienta de administrador de diseño, los diseñadores pueden crear plantillas con HTML desde cero. Para cuentas de Marketing Hub Pro y Enterprise, esto incluye plantillas de correo electrónico codificadas. También es posible clonar un diseño de plantilla de HubSpot a HTML y personalizarlo como una plantilla codificada.
Este artículo incluye cómo crear y resolver problemas con las plantillas codificadas personalizadas, además de lo que se requiere HubL en tus plantillas. Si no estás cómodo trabajando con el código, usa una de las plantillas preparadas en tu cuenta de HubSpot o consulta el mercado de plantillas para comprar plantillas preestablecidas.
Ten en cuenta: una plantilla codificada personalizada no será responsiva por defecto. Trabaja con un diseñador profesional para asegurarte de que tu plantilla sea adaptable para distintos tamaños de pantalla.
Crear un nuevo HTML & HUBL
- En tu cuenta de HubSpot, dirígete a Marketing > Archivos y plantillas > Herramientas de diseño.
- Crear un nuevo archivo haciendo clic en Archivo > Nuevo archivo. Es posible que debas hacer clic en la carpeta de ícono para ampliar el buscador.
- En el cuadro de diálogo, haz clic en HTML & HUBL.
- Introduce los detalles de tu nuevo archivo:
- Eige Plantilla o Plantilla parcial.
- Selecciona el tipo de plantilla que estás codificando (página, blog o correo electrónico).
- Dale un nombre a tu archivo.
- Haz clic en Crear.
- Escribe el HTML para tu página o plantilla de correo electrónico.
- Para ver la vista preliminar de tu HubL, haz clic para activar el interruptor Mostrar salida. Un panel se abrirá del lado derecho con la vista preliminar.
- Los errores en tu código se marcarán en un mensaje de error cuando intentas publicar los cambios. La consola de error en la parte inferior del editor de códigos mostrará el error o los detalles de advertencia, además de sugerencias sobre cómo puedes solucionar estos errores y advertencias.
Para obtener recursos adicionales en el diseño personalizado, puedes consultar la documentación de diseñador de HubSpot. Hay documentación adicional sobre opciones de módulo codificado, como etiquetas de filtro y iconos.
Cuando hayas terminado, haz clic en Publicar cambios para publicar la plantilla o archivo HTML.
Agregar las etiquetas HubL requeridas
Una vez que hayas escrito tu HTML estructural, verás un mensaje de error que si tu código no es obligatorio para las etiquetas HubL si intentas publicar tu archivo. Las etiquetas HubL conectan tu código a la configuración y al editor de contenido de HubSpot.
Para las plantillas de correo electrónico, incluye el correo electrónico obligatorio y las fichas CAN-SPAM. Estas fichas se pueden agregar de dos maneras.
1. Incluye una ficha que extrae la sección CAN-SPAM de la cancelación de suscripción: {{unsubscribe_section}}. Cuando se utiliza esta ficha, no tendrás la capacidad de formatear el lenguaje ni el estilo del texto y los enlaces. Este es un ejemplo de cómo luciría {{unsubscribe_section}}:
Debes agregar las siguientes fichas individualmente:
{{site_settings.company_street_address_1}}
{{site_settings.company_city}}
{{site_settings.company_state}}
{{site_settings.company_zip}}
Usar las fichas de forma individual te permitirá la flexibilidad para agregar texto en torno a las fichas y los enlaces y los formatos de formato en el estilo y el idioma deseados.
Clonar en HTML
Una alternativa para codificar desde cero es clonar una de las plantillas de HubSpot para archivar. Clonar una plantilla te da acceso al HTML/HubL de una plantilla y es un buen modo de realizar ingeniería inversa a una plantilla de HubSpot que hayas construido.
Para crear una versión codificada de una plantilla existente:
- {{ local.navDesignManager }}
- Haz clic en Acciones > Clonar para HTML en el buscador. El archivo HTML se abrirá en una nueva pestaña del administrador de diseño. Su nombre de archivo coincidirá con el nombre de la plantilla original con copia adjunta a ella.
