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.

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.

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 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 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 las páginas del sistema están marcadas internamente para su propósito específico. En Configuración de contenido, puedes seleccionar estas plantillas para tu 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. Se requiere que contenga 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. Debe contener la etiqueta {% email_simple_subscription "email_simple_subscription" %} HubL. 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 (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. Normalmente 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. Normalmente 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. Normalmente 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. Normalmente 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.

Siempre debes comprobar tu trabajo después de actualizar las plantillas para asegurarte de que tienen el aspecto y el funcionamiento que pretende. El Administrador de diseño de HubSpot ofrece una herramienta para previsualizar módulos y plantillas. Para previsualizar una plantilla abre la plantilla en el administrador de diseño, en la barra superior haz clic en "Vista preliminar".

Para la mayoría de las plantillas, la vista preliminar mostrará el estado predeterminado de la plantilla; el mismo estado que verías si crearas una Página de sitio web desde la plantilla pero no la editaras. Hay dos modos de vista preliminar para las plantillas "Vista preliminar en directo con opciones de presentación" y "Vista preliminar en directo sin opciones de presentación". 

La vista preliminar en directo con opciones de presentación muestra la página dentro de un iframe, lo que le proporciona algunas herramientas que puedes utilizar para probar la capacidad de respuesta y ver cómo las hojas de estilo del dominio pueden afectar tu plantilla.

Las plantillas de blog son únicas porque se necesita un listado de blogs y publicaciones de blog para tener realmente una idea de cómo funciona la plantilla. La vista preliminar del blog te permite elegir un blog existente para rellenar la vista preliminar con tu contenido. Desde ahí puedes elegir ver el listado o la página detallada de esa plantilla de blog.

La previsualización de las plantillas mediante el previsualizador de plantillas puede ser buena para realizar pequeños ajustes visuales. 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 utilizar la preparación de contenido, una vista preliminar del borrador o tu cuenta de entorno de pruebas de desarrollador para ver la página sin preocuparte de que la página esté en vivo para que el mundo la encuentre y la vea.

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 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. Mover jQuery puede romper el javascript que depende de él. Para probar tu sitio, agrega ?hsMoveJQueryToFooter=True al final de tu URL mientras ves las páginas más importantes de tu sitio web, para asegurarte de que nada se rompe.

Históricamente, jQuery se incluía por opción predeterminada porque la funcionalidad de HubSpot lo requería anteriormente. CMS Hub no requiere jQuery. La mayor parte de la funcionalidad de jQuery tiene ahora equivalentes modernos de vanilla javascript, y animamos a utilizarlos. 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.

Layout.css (antes conocido como required_base.css) es el archivo responsable de dar estilo a la cuadrícula responsiva de HubSpot. Este archivo siempre se incluye automáticamente en cualquier plantilla de arrastrar y soltar. No se incluye por opción predeterminada en las plantillas codificadas a medida. 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. Puedes ver el archivo, aquí.