Nota: Este contenido se tradujo a través de un software y es posible que no haya sido revisado. La versión en inglés se considera, por tanto, la versión oficial y es posible que haya sido actualizada. Para acceder a la versión en inglés, haz clic aquí.
CMS-General

Crear una plantilla codificada personalizada en HubSpot

Última actualización: November 21, 2018

Requisitos

Marketing Hub
marketing-basic-pro-enterprise
Professional, Enterprise
Básico
HubSpot CMS

Mientras tu generador de plantillas ofrece más flexibilidad a tus creadores de contenido en términos de estructurar contenido y evitar que los diseñadores tengan que escribir HTML, tu herramienta de administrador de diseño también permite a los diseñadores crear plantillas con HTML desde.  

Este artículo describe cómo codificar plantillas personalizadas en HubSpot y qué variables incluir en plantillas de correo electrónico personalizadas. Si no eres un diseñador de plantillas de codificación que se sienta cómodo codificando plantillas desde cero, usa una de las plantillas preparadas en tu cuenta de HubSpot o echa un vistazo al mercado de plantillas para comprar plantillas preestablecidas previamente.

Ten en cuenta: los sitios HTML de codificación o los correos desde cero no garantizan automáticamente que tu plantilla sea responsiva

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 Acciones > Nuevo archivo (puedes hacer clic en el ícono de carpeta de la carpeta para expandir el buscador).

En el cuadro de diálogo, haz clic en HTML & HUBL.

Editor de códigos

Introduce los detalles de tu nuevo archivo:

  • ¿Qué estás creando? Eige Plantilla o Plantilla parcial
  • Tipo de plantilla: Selecciona el tipo de plantilla que estás codificando (página, blog o correo electrónico).
  • Nombre del archivo: Dale un nombre a tu archivo.
  • Haz clic en Crear.

Luego, escribe el HTML para tu página o plantilla de correo electrónico. El editor de códigos de HubSpot complementos automáticamente, resalta tu sintaxis HTML y cierra tus etiquetas para ti. 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.

error-consola

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 indica que 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. Descubre las variables de plantilla requeridas y las etiquetas de módulo HubL.

Para las plantillas de correo electrónico, incluye el correo electrónico obligatorio y las fichas CAN-SPAM. Echa un vistazo a la documentación de HubL para obtener más información sobre las fichas CAN-SPAM.

Las fichas de CAN-SPAM requeridas se pueden incluir de las siguientes dos formas:

1. Incluir una ficha que se vea en la sección de cancelación de suscripción CAN-SPAM: "". 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 lo que lucirá "":

Debes agregar los siguientes tokens individualmente:

25 1st St.
Cambridge
MA
02141

2. Incluye el enlace de cancelación de suscripción individual obligatorio y las fichas de direcciones siguientes:
HubSpot
o (incluir al menos una)
HubSpot
25 1st St.
Cambridge
MA
02141

Usar los tokens de forma individual te permitirá la flexibilidad para agregar texto en torno a los tokens 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, haz clic en Acciones > Clonar para HTML en el editor de diseño. El archivo HTML se abrirá en una nueva pestaña del administrador de diseño. Su nombre coincidirá con el nombre de la plantilla original concopia adjunta a ella.

Captura de pantalla de un artículo de ayuda de HubSpot