Crear una plantilla codificada personalizada

Los desarrolladores pueden crear blogs, páginas web, landing pages y plantillas de correo electrónico desde cero utilizando HTML + HubL. También puedes clonar un diseño de plantilla de arrastrar y soltar en HTML, y luego personalizarlo en como plantilla codificada.

Obtenga más información sobre el diseño de recursos personalizados en nuestra documentación para desarrolladores. 

Antes de comenzar

Antes de empezar a trabajar con esta función, asegúrate de comprender bien qué pasos hay que dar de antemano, así como las limitaciones de la función y las posibles consecuencias de su uso.

Requisitos a tener en cuenta

• Compruebe que dispone de los permisos de herramientas de diseño para crear y editar plantillas en el administrador de diseño.
• Se recomienda tener también Contenido global y ajustes de tema y Ajustes de sitio web si necesita editar recursos web globales y ajustes de blog/sitio web.

Comprender las limitaciones y consideraciones

• Se requiere una suscripción a Marketing Hub Pro o Enterprise para crear plantillas de email. Las cuentas de Content Hubs pueden crear correos electrónicos utilizando el editor de correo electrónico de arrastrar y soltar.
• Las plantillas codificadas a medida pueden utilizar muchas variables predefinidas. Algunas de estas variables son necesarias para crear correos electrónicos y páginas, mientras que otras son opcionales. Obtenga más información sobre cómo añadir variables de correo electrónico, sitio web y landing page de HubL. 

Crear un nuevo Archivo HTML + HubL

• En tu cuenta de HubSpot, dirígete a Contenido > Administrador de diseño.
• En la parte superior de la columna izquierda, haga clic en el menú Archivo y seleccione Nuevo archivo.

• En el cuadro de diálogo Nuevo archivo , haga clic en el menú desplegable ¿Qué desea crear hoy? y seleccione HTML + HubL; a continuación, haga clic en Siguiente. 

• En el cuadro de diálogo Configure su nueva plantilla HTML + HUBL , introduzca los datos de su nuevo archivo:
  • Seleccione una opción para ¿Qué está construyendo?
    • Plantilla: define el diseño y la estructura del contenido que se mostrará en las páginas del sitio web, las landing pages, las entradas del blog o el correo electrónico. 
    • Plantilla Parcial: es código reutilizable o un fragmento de código que puede incluirse en otras múltiples plantillas. 
  • Haga clic en el menú desplegable Tipo de plantilla y seleccione un tipo para la plantilla codificada personalizada (página, entrada de blog/lista, correo electrónico o página del sistema). Más información sobre los tipos de plantilla.
  • En el campo Nombre de archivo , introduzca un nombre de archivo.
  • Para actualizar la ubicación del archivo, haga clic en Cambiar en la sección Ubicación del archivo y seleccione una carpeta.
• Haz clic en Crear.

Añade HTML + HubL a tu plantilla

Una vez que haya configurado su nuevo archivo, se le dirigirá al editor de código para que añada su código personalizado y previsualice cómo aparecerá en una página activa.

Añadir HTML + HubL

• Introducir el HTML de la plantilla. Obtenga más información sobre cómo añadir archivos CSS y JavaScript a su plantilla codificada personalizada. 
• Para mostrar cómo se renderizará tu HubL, haz clic para activar el interruptor Mostrar salida. Se abrirá un panel a la derecha con la vista previa renderizada.

Añadir HubL necesario

Las plantillas codificadas personalizadas requieren variables HubL específicas para funcionar. Si falta alguna de estas variables necesarias, aparecerá un mensaje de error cuando intentes publicar la plantilla. 

• Las plantillas de página y blog requieren las siguientes variables:
  • {{standard_footer_includes}}
  • {{standard_header_includes}}
• Las plantillas de correo electrónico requieren las siguientes variables para cumplir con CAN-SPAM. 
  • {{unsubscribe_link}} o (incluye al menos una) {{unsubscribe_link_all}}
  • {{unsubscribe_anchor}}
  • {{site_settings.company_name}}
  • {{site_settings.company_street_address_1}}
  • {{site_settings.company_city}}{{site_settings.company_state}}
  • {{site_settings.company_zip}}

Clonar una plantilla a HTML

Además de crear plantillas desde cero, también puedes clonar plantillas de arrastrar y soltar para blogs, páginas web y landing pages en HTML.

• Para crear una versión codificada de una plantilla existente:
  • En tu cuenta de HubSpot, dirígete a Contenido > Administrador de diseño.

• • En la barra lateral izquierda, abre la plantilla que quieras clonar.
  • Haga clic en el menú desplegable Acciones y seleccione Clonar a HTML. El archivo HTML se creará en la misma carpeta que el archivo original.

Vista previa y publicación de la plantilla

Una vez creada la plantilla, puede obtener una vista previa de cómo aparecerá en una página activa y, a continuación, publicarla.

• En la parte superior derecha, haz clic en Vista previa.
• Si selecciona Vista previa en vivo con opciones de visualización, puede previsualizar su plantilla tal y como aparece en otros dispositivos seleccionando el ajuste preestablecido Viewport.
• Si selecciona Vista previa sin opciones de visualización, sólo podrá obtener una vista previa de cómo aparecerá su plantilla en los navegadores.
• Cuando termine de editar, haga clic en Publicar cambios en la parte superior derecha.

• Si hay algún error de código, aparecerá un mensaje de error. Revise más información sobre estos errores en la consola de errores debajo del editor de código:
  • En el mensaje de error de la parte superior de la página, haga clic en consola de errores para abrir la consola situada debajo del editor de código. 
  • Alternativamente, navegue hasta la parte inferior del editor de código y haga clic en Mostrar detalles.