Ir a contenido principal
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í.
Design Manager

Crear una plantilla codificada personalizada

Última actualización: septiembre 21, 2021

Requisitos

Marketing Hub Professional, Enterprise
CMS Hub Starter, Professional, Enterprise
Marketing Hub Básico (versión anterior)

Los diseñadores pueden crear plantillas de sitios web, páginas de diseño y blogs desde cero utilizando HTML.  Las cuentas de Marketing Hub Pro y Enterprise también pueden crear plantillas de correo electrónico codificadas y personalizadas. También es posible clonar un diseño de plantilla de HubSpot a HTML y personalizarlo como una plantilla codificada.

Este artículo incluye información sobre cómo crear y resolver problemas con las plantillas codificadas personalizadas, además de qué HubL se requiere 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.

Nota: una plantilla codificada personalizada no será responsiva por opción predeterminada. 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.
  • En la barra lateral izquierda, crea un nuevo archivo haciendo clic en Archivo > Nuevo archivo. Es posible que debas hacer clic en la carpeta de ícono folder para ampliar el buscador.
  • En el cuadro de diálogo, haz clic en el menú desplegable ¿Qué te gustaría construir hoy? y selecciona HTML y HUBL.
design-manager-html-hubl
  • Haz clic en Siguiente.
  • Introduce los detalles de tu nuevo archivo:
    • Eige Plantilla o Plantilla parcial. Una plantilla parcial es una plantilla que puede ser utilizada dentro de otras plantillas.
    • En el menú desplegable, selecciona el tipo de plantilla que estás codificando (página, blog o correo electrónico).
    • Dale un nombre a tu archivo.
    • Para actualizar la ubicación del archivo, en la sección Ubicación del archivo, haz clic en Cambiar y selecciona la carpeta para agregar el 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.


    design-manager-show-output
  • En la parte superior derecha, haz clic en Vista previa para ver cómo aparecerá y funcionará tu plantilla en el editor de contenidos. Esta vista preliminar se sincroniza con el editor y se actualizará automáticamente mientras trabajas.
  • En la parte superior derecha, haz clic en Publicar cambios
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-console

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 e iconos.

Agregar las etiquetas HubL requeridas

Verás un mensaje de error si a tu código le falta alguna etiqueta HubL obligatoria y estabas intentando publicar tu archivo.

Las plantillas de sitios web, páginas de diseño y blogs requieren las siguientes etiquetas:

  • {{standard_footer_includes}}
  • {{standard_header_includes}}
Las plantillas de correo electrónico requieren las siguientes etiquetas para cumplir con la ley CAN-SPAM. Estas se pueden agregar de dos maneras:
  • Incluye este token que extrae la sección CAN-SPAM de la cancelación de suscripción: {{unsubscribe_section}}. Luego, agrega estos tokens individualmente: 
    • {{site_settings.company_street_address_1}}
    • {{site_settings.company_city}}
    • {{site_settings.company_state}}
    • {{site_settings.company_zip}}
    • Con este método, no tendrás la capacidad de formatear el lenguaje ni el estilo del texto y los enlaces.

  • Usa estos tokens individualmente.:
    • {{site_settings.company_name}}
    • {{unsubscribe_link}} o {{unsubscribe_link_all}} (incluir al menos una)
    • {{unsubscribe_anchor}}
    • {{site_settings.company_name}}
    • {{site_settings.company_street_address_1}}
    • {{site_settings.company_city}}{{site_settings.company_state}}
    • {{site_settings.company_zip}}
    • Usar los tokens de forma individual te otorgará 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

Además de crear una plantilla desde cero, también puedes clonar una de las plantillas de HubSpot en HTML. La clonación de una plantilla en HTML te permite acceder al contenido HTML de la plantilla. 

Para crear una versión codificada de una plantilla existente:

  • En tu cuenta de HubSpot, dirígete a Marketing > Archivos y plantillas > Herramientas de diseño.
  • Haz clic en Acciones > Clonar para HTML en el buscador. El archivo HTML se creará en la misma carpeta que el archivo original. Su nombre de archivo coincidirá con el nombre de la plantilla original con copia adjunta a ella.
design-manager-clone-to-html