Cómo codificar plantillas de páginas HTML y de correos electrónicos

Última actualización: December 29, 2016

Si bien el uso del Creador de plantillas les dará más flexibilidad a tus creadores de contenido en términos de la estructuración del contenido y les ahorrará a los diseñadores tener que escribir cientos de líneas de HTML, el Administador de diseño de HubSpot también les permite a los diseñadores construir plantillas de HTML desde cero. Después de codificar tu plantilla desde cero, debes agregar etiquetas de HubL (Lenguaje de marcado de HubSpot) para crear módulos editables que se puedan personalizar a través del editor de contenido de HubSpot.  
Es importante señalar que la codificación de los sitios HTML o mensajes de correo electrónico desde cero no garantiza automáticamente que la plantilla será responsiva.

Instrucciones

Sigue estas instrucciones para crear la plantilla de una página o de un correo electrónico de HTML.

Navegar hasta Administrador de diseño

Navegar hacia Contenido > Administrador de diseño.

Navegar hasta Administrador de diseño

Crear un nuevo archivo codificado

Seleecionar Carpeta de Archivos codificados y hacer clic en Nuevo archivo codificado.

Nuevo archivo codificado

Elegir el tipo de archivo codificado

Tu selección no solo determina en qué carpeta maestra se guardará el archivo, sino que también los requisitos del código HubL para ese tipo de archivo.

Editor de código

Nombrar y guardar el archivo

Introducir el nombre de un archivocon una extensión  .html y presionar Guardar.

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

Codificar tu plantilla

A continuación necesitarás escribir el HTML para tu plantilla de página o correo electrónico. El editor de código de HubSpot genera sangrías automáticamente, resalta la sintaxis de tu HTML y cierra las etiquetas por ti. Estas son tan solo algunas de las características del IDE avanzado (entorno de desarrollo integrado) que hacen que codificar con HubSpot sea tan fácil de usar para los diseñadores.

Publicar la plantilla

Hacer clic en Publicar cambios para publicar la plantilla o archivo de HTML.

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

Se te preguntará si deseas o no que la plantilla esté disponible para que la seleccionen los creadores de contenido. Desmarcar Que esta plantilla esté disponible para nuevo contenido te permite guardar un archivo de HTML sin las etiquetas de plantilla obligatorias de HubSpot, pero tampoco va a estar disponible como opción para los creadores de contenido. Un ejemplo de este sería una sección global que incluirías en otro archivo de plantilla. 

Confirmar la actualización

Agregar las etiquetas HubL requeridas

Una vez que tengas escrito tu HTML estructural, si intentaras publicar tu plantilla de HTML codificada, verías un mensaje de error indicando que a tu código le faltan las etiquetas HubL obligatorias. Las etiquetas HubL conectan tu código a la configuración y al editor de contenido de HubSpot. Puedes aprender más sobre las variables de plantillas obligatorias y sobre las etiquetas de módulos HubL aquí.

Clonar para archivar

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 clonar una plantilla al archivo, seleccionar Acciones > Clonar para archivar. En el paso siguiente nombrar el archivo con una extensión .html ..

Una vez más, el Creador de plantillas de HubSpot les ahorrará tiempo tanto a los diseñadores como a los profesionales del marketing, por lo tanto se recomienda el uso de plantillas de estilo creadas con el Creador de plantillas, en vez de trabajar desde cero. Las secciones previas de esta guía repasan cómo estructurar y estilizar tus plantillas.

Artículo anterior:

Certificación Inbound Marketing

Artículo siguiente: