Resumen de plantillas

Las plantillas definen el diseño de tus páginas, correos electrónicos y temas de HubSpot. Una plantilla se compone de módulos y parciales, y puede hacer referencia a otros materiales como hojas de estilo y archivos JavaScript. Las plantillas pueden ser creadas usando la CLI de HubSpot o en el administrador de diseño de HubSpot. Para los creadores de contenido, la plantilla es lo primero que seleccionarán al crear una página o un correo electrónico.

A continuación, aprende a crear una plantilla, los diferentes tipos de plantillas y lo que se incluye en ellas.

Puedes crear una plantilla tanto en HubSpot como utilizando la CLI.

• Para crear una plantilla utilizando la CLI, ejecuta el siguiente comando:

• Utilizando las teclas de flecha, desplázate hasta el tipo de plantilla que quieras crear y luego pulsa intro.  

La plantilla se creará entonces localmente. Cuando quieras que la plantilla esté disponible para su uso en tu cuenta de HubSpot, sube la plantilla a tu cuenta. También puedes utilizar el comando watch para cargar automáticamente todos los archivos nuevos y las ediciones de los archivos existentes en el directorio de trabajo actual y los directorios secundarios.

Después de actualizar una plantilla, puedes obtener una vista previa para asegurarte de que se vea y actúe como esperas. Hay algunas formas en que HubSpot puede obtener una vista previa de una plantilla, como:

• Vista previa de una plantilla en el administrador de diseño: mejor para verificaciones visuales rápidas o cuando se necesita una vista previa de una publicación/anuncio/plantilla combinada del blog.
• Crear un nuevo activo a partir de una plantilla: lo mejor para probar el editor de arrastrar y soltar y la experiencia de creación de contenido.

Vista previa con el administrador de diseño

Una vista previa de las plantillas usando el administrador de diseño puede ser especialmente útil para verificaciones visuales rápidas. El generador de vista previa de plantillas también te permite configurar opciones de presentación, como las dimensiones de viewport.

Para obtener una vista previa de una plantilla en el administrador de diseño:

• En tu cuenta de HubSpot, navega a Marketing > Archivos y plantillas > Herramientas de diseño.
• Con el explorador de archivos de la barra lateral izquierda, haz clic en la plantilla de la que deseas una vista previa.
• En la parte superior derecha, haz clic en Vista preliminar. 
  • Selecciona Vista preliminar en directo con opciones de presentación para obtener una vista preliminar de la plantilla con opciones para probar la capacidad de respuesta y la configuración del dominio, como las hojas de estilo. Esta opción muestra la página dentro de un iframe. Esto también le permite seleccionar entre blogs y la publicación del blog o la vista de listado para las plantillas de blog.
  • Selecciona Vista previa sin opciones de visualización para obtener una vista preliminar de la plantilla sin opciones adicionales.

Vista preliminar con una nueva página

Al cambiar las áreas de arrastrar y soltar, los valores de los parámetros predeterminados en los módulos u otros cambios significativos, es mejor crear una página web, un blog, una publicación de blog o un correo electrónico utilizando la plantilla. A continuación, puedes probar diferentes valores de los campos de los módulos y probar cómo será tu plantilla en el mundo real y optimizarla para obtener la mejor experiencia del creador de contenido. Puedes publicar estos materiales o dejarlos en borrador para fines de prueba.

Además, puedes usar la preparación de contenido o una cuenta de entorno de pruebas de desarrollador para crear y ver activos sin afectar una cuenta de producción.

Las plantillas pueden utilizarse para diferentes tipos de contenido, como páginas web y publicaciones de blog. En las plantillas codificadas, se designa el tipo de plantilla agregando una anotación en la parte superior del archivo.

A continuación, conoce los diferentes tipos de plantillas y las anotaciones que puedes utilizar para designar cada tipo.

Las plantillas de página son el tipo de plantilla más abierto. Pueden servir como cualquier tipo de página web o página de destino. Los diseños de página no están precargados con ningún componente. Las plantillas de páginas codificadas vienen precargadas con un marcador escaso que incluye las etiquetas HubL sugeridas para la metainformación, el título y los includes de encabezado y pie de página necesarios. Algunos ejemplos de páginas que suelen utilizar una plantilla de página son, entre otros, los siguientes

• Página de inicio
• Acerca de nosotros
• Contacto

Las plantillas de correo electrónico son utilizadas por la herramienta de correo electrónico. Tienen el conjunto de requisitos más estricto, ya que tienen que ser vistos en muchos clientes de correo electrónico diferentes y ajustarse a las mejores prácticas para garantizar una correcta capacidad de entrega. Tanto las plantillas de correo electrónico de HTML + HubL como las del administrador de diseño de arrastrar y soltar vienen preconfiguradas con componentes básicos en el momento de la creación. Las plantillas con este templateType solo son visibles para la selección de plantillas al crear un correo electrónico.

Para cumplir con la normativa CAN-SPAM , las plantillas de correo electrónico tienen un conjunto de variables obligatorias que deben incluirse.

Las plantillas de correo electrónico también tienen una funcionalidad incorporada a inline-css agregada a los elementos <style> con un nombre de clase especial o atributo de datos. Inlining CSS en los correos electrónicos es un método utilizado para obtener una mejor compatibilidad con los clientes de correo electrónico. Afortunadamente, la mayoría de los clientes de correo electrónico más populares admiten ahora el css incrustado, que sin embargo no es representativo de sus destinatarios específicos. Usa el buen juicio para hacer lo que es correcto para tus destinatarios.

Más información sobre la creación de plantillas de correo electrónico.

Las plantillas parciales son archivos que pueden incluirse en otros archivos codificados. A diferencia de los parciales globales, los parciales se pueden editar individualmente sin afectar otras instancias del parcial. 

Más información sobre parciales.

Más información sobre los parciales globales y el contenido global.

Al crear un blog, las plantillas de blog tienen una estructura similar a las plantillas de páginaestándar. La diferencia crucial es que pueden seleccionarse en la configuración de contenido como plantillas de blog, mientras que las plantillas de página no pueden. Las plantillas creadas con blog_listing, blog_post, o blog, templateType no aparecen cuando un usuario está creando una página web, en la pantalla de selección de plantillas. Las plantillas de blog tienen en realidad dos formas, las páginas de listado del blog y las páginas de detalle de las publicaciones del blog. 

La plantilla del listado del blog es la plantilla que los usuarios verán cuando naveguen a la URL del blog. Normalmente esta plantilla se utiliza para listar resúmenes, títulos e imágenes destacadas de todas las publicaciones del blog, además suele mostrar la paginación para llegar a las publicaciones más antiguas.

La plantilla de la publicación del blog, es la plantilla que los usuarios verán cuando vean una publicación individual en el blog. Estas plantillas suelen mostrar el contenido completo de la publicación.

Una sola plantilla de blog puede encargarse del diseño de las páginas de anuncios y de las páginas detalladas, pero lo más habitual es que se separen en plantillas distintas. Las plantillas combinadas se mostrarán en la configuración del blog como seleccionables tanto para las opciones de los anuncios como para las publicaciones de blog. Si estás creando una plantilla que está destinada a ser utilizada solo para posts o anuncios, debes utilizar blog_post o blog_listing.

Las plantillas de las páginas del sistema están marcadas internamente para su propósito específico. En la configuración de contenido de tu cuenta, puedes seleccionar estas plantillas para su propósito específico en la pestaña del sistema.

Las páginas de error pueden establecerse en la Configuración de contenido como páginas 404 o 500. Ambas plantillas utilizan el mismo templateType. Las plantillas creadas con este templateType no aparecen cuando un usuario está creando una página web, en la pantalla de selección de plantillas.

La página de preferencias de suscripción a correos Enumera todos los tipos de suscripción disponibles que un usuario puede aceptar o cancelar. Requerido para contener la etiqueta HubL {% email_subscriptions "email_subscriptions"  %}. Consulta la plantilla de preferencias de suscripción en el cms-theme-boilerplate.

Una plantilla del sistema para páginas de cancelación de suscripción a correos electrónicos. Requerido para contener la etiqueta HubL {% email_simple_subscription "email_simple_subscription" %}. Consulta la plantilla de cancelación de suscripción de la copia de seguridad del correo electrónico en el cms-theme-boilerplate.

Una plantilla del sistema para páginas de preferencias de confirmación de cancelación de suscripción a correos electrónicos Aquí es donde se envía a los usuarios cuando van a la URL generada por la variable {{ unsubscribe_link_all }}.   Consulta la plantilla de confirmación de suscripción en el cms-theme-boilerplate.

Las plantillas de solicitud de contraseña proporcionan una página de marca que los creadores de contenido pueden mostrar para requerir una contraseña antes de que un visitante pueda ver el contenido real de la página. Las plantillas de solicitud de contraseña se configuran a través de Configuración de contenido. Cómo hacer que una página en HubSpot esté protegida por contraseña. Consulta la solicitud de la página protegida por contraseña en la plantilla.

Una plantilla del sistema para la funcionalidad de listado de búsqueda del sitio CMS integrada. Consulta la plantilla de la página de resultados de búsqueda en la plantilla.

Las cuentas de HubSpot con la funcionalidad de membresías (solo CMS Hub Enterprise) pueden crear páginas en tus sitios a las que solo pueden acceder los usuarios que forman parte de listas específicas en el CRM. Esto permite a los visitantes del sitio tener cuentas con credenciales de acceso. Estas plantillas te permiten controlar la apariencia de estas páginas.

Esta es la página de inicio de sesión que se muestra cuando un usuario intenta acceder a un contenido cuyo acceso está controlado a través de la funcionalidad de membresías. Comúnmente contiene el módulo {% member_login "member_login" %}. Consulta el ejemplo de la plantilla de inicio de sesión de los miembros en la plantilla.

Esta es la página de registro de usuarios que permite crear una cuenta para ver el contenido al que pueden acceder los usuarios de esta lista. Comúnmente contiene la etiqueta HubL {% member_register "member_register" %}. Consulta el ejemplo de plantilla de registro de miembros en la plantilla.

Esta es la página de restablecimiento de la contraseña. Los usuarios proporcionan su nueva contraseña en esta página. Comúnmente contiene la etiqueta HubL {% password_reset "password_reset" %}. Consulta el ejemplo de plantilla de restablecimiento de la contraseña de membresía en la plantilla.

Esta es la página de solicitud de restablecimiento de contraseña. Mostrar un formulario para solicitar un correo electrónico de restablecimiento de contraseña. Comúnmente contiene la etiqueta HubL {% password_reset_request "password_reset_request" %}. Consulta el ejemplo de plantilla de solicitud de restablecimiento de la contraseña de afiliación en la plantilla.

Hay ciertos archivos JavaScript y CSS que se adjuntan a las plantillas del CMS. Algunos archivos se incluyen automáticamente y no se pueden eliminar, mientras que otros se pueden incluir opcionalmente. Para saber más sobre el orden en que las hojas de estilo se adjuntan al contenido del CMS, consulta este artículo.

jQuery se incluye opcionalmente en la etiqueta head de las plantillas de HubSpot. Si se incluye, se renderiza como parte de la variable standard_header_includes HubL.

En Ajustes > Sitio web > Páginas puedes cambiar la versión de jQuery a 1.11.x, a la versión 1.7.1,o desactivarla por completo. También puedes optar por incluir un script de migración de jQuery para la compatibilidad con navegadores antiguos. Puedes mover jQuery al pie de página para mejorar el rendimiento de la página, pero mover jQuery puede romper JavaScript dependiendo de él. Se recomienda probar esto antes de moverlo agregando ?hsMoveJQueryToFooter=True al final de las URL de la página de tu sitio web.

Si bien jQuery se incluyó históricamente por opción predeterminada, actualmente CMS Hub no requiere jQuery. La mayoría de las funcionalidades de jQuery ahora tienen equivalentes modernos de javascript de vainilla, y se recomienda usarlos en su lugar. Si necesitas usar jQuery, te recomendamos que deshabilites la versión predeterminada en la configuración y uses la última versión cargada arriba de la etiqueta </body>.

Para probar si la eliminación de jQuery en tu sitio romperá algo, agrega ?hsNoJQuery=true al final de la URL mientras ves varias páginas de tu sitio, especialmente aquellas con mucha interactividad.

Anteriormente conocido como required_base.css, este archivo es responsable de diseñar la cuadrícula receptiva de HubSpot. Este archivo se incluye automáticamente en cualquier plantilla de arrastrar y soltar, pero no se incluye por opción predeterminada en las plantillas codificadas personalizadas. Para los desarrolladores que utilicen las etiquetas dnd_area en plantillas HTML + HubL codificadas, no es necesario cargar el archivo layout.css, pero se incluye una versión del mismo en la plantilla del tema CMS para facilitar su puesta en marcha rápidamente.

Además de la rejilla responsiva CSS, el archivo incluye algunas clases que pueden utilizarse para mostrar y ocultar elementos en diferentes ventanas. Para obtener más información,  ve el archivo directamente.

• Áreas de arrastrar y soltar
• Plantillas de secciones
• Cómo usar componentes web en plantillas y módulos
• Crear encabezados, pies de página y más utilizando contenido global