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 empezar

Antes de comenzar a trabajar con esta característica, asegúrate de que comprendes perfectamente qué pasos hay que dar con antelación, así como las limitaciones de la función y las posibles consecuencias de utilizarla.

Comprender los requisitos

• 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 agregar variables de correo electrónico, sitio web y landing page de HubL requeridas. 

Crear un nuevo Archivo HTML + HubL

1. En tu cuenta de HubSpot, dirígete a Contenido > Administrador de diseño.
2. En la parte superior del buscador, haga clic en el menú desplegable Archivo y seleccione Nuevo archivo.

3. En el cuadro de diálogo, haz clic en el menú desplegable ¿Qué te gustaría construir hoy? y selecciona HTML + HubL.

4. En el campo ¿Qué está construyendo? , seleccione una opción:
   • 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. 
5. 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.
6. Introducir un nombre de archivo en el campo Nombre de archivo .
7. Para actualizar la ubicación del archivo, haga clic en Cambiar en la sección Ubicación del archivo y seleccione una carpeta.
8. Cuando hayas terminado, 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

1. Introducir el HTML de la plantilla. Más información sobre cómo añadir archivos CSS y JavaScript a plantillas codificadas personalizadas. 
2. Para ver cómo se renderizará el HTML + HubL, activa el interruptor Mostrar salida en la parte superior izquierda. Se abrirá un panel a la derecha con la vista previa renderizada.

Añadir HTML requerido + HubL

Las plantillas codificadas a medida requieren variables HTML o HubL específicas para funcionar. Si falta alguna de estas variables obligatorias, puede aparecer un mensaje de error al intentar publicar la plantilla. 

• Las plantillas de página y blog requieren las siguientes variables:

<!-- Enter above the closing </header> tag -->
{{ standard_header_includes }}

<!-- Enter above the closing </body> tag -->
{{ standard_footer_includes }}

• Las plantillas de correo electrónico requieren las siguientes variables para cumplir con CAN-SPAM:

<!-- Enter variables above the closing </body> tag -->
{{ site_settings.company_name }}
{{ site_settings.company_street_address_1 }}
{{ site_settings.company_city }}
{{ site_settings.company_state }}
{{ site_settings.company_zip }}
{{ site_settings.company_country }}

<!-- Choose one unsubscribe variable -->
{{ unsubscribe_link }}
{{ unsubscribe_link_all }}

• Las plantillas de correo electrónico requieren el siguiente código para mostrar el texto de vista previa en determinados clientes de correo electrónico:

<!-- Preview text (text which appears right after subject in certain email clients) -->

<div id="preview_text" style="display:none!important">{% text "preview_text" label="Preview Text <span class=help-text>This will be used as the preview text that displays in some email clients</span>", value="", no_wrapper=True %}
</div>

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.

1. En tu cuenta de HubSpot, dirígete a Contenido > Administrador de diseño.
2. En el buscador, haga clic en el nombre de la plantilla que desea clonar.
3. 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, puedes obtener una vista previa de cómo aparecerá en una página activa y, a continuación, publicarla.

1. En tu cuenta de HubSpot, dirígete a Contenido > Administrador de diseño.
2. En el buscador, haga clic en el nombre de la plantilla que desee previsualizar o publicar.
3. En la parte superior derecha, haz clic en el menú desplegable Vista previa y selecciona una opción:
   • 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.
4. Cuando haya terminado, haga clic en Publicar cambios.
5. 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. 
  • Como alternativa, desplácese a la parte inferior izquierda del editor de código y haga clic en Mostrar detalles.