Contenido global

Last updated:

El contenido global es el contenido que se comparte en todas las partes de un sitio web. Ejemplos comunes son los encabezados, los pies de página y las barras laterales de los sitios web. Como desarrollador, especificarás qué componentes deben ser globales mediante el uso de parciales globales o haciendo que los módulos sean globales. HubSpot ofrece una experiencia de edición diferente a los editores de contenido que facilita la edición del contenido global y la visualización previa de los cambios en todas las páginas antes de su publicación. Para obtener más información sobre cómo editar tu contenido global, consulta cómo utilizar el contenido global en varias plantillas en la base de conocimientos de HubSpot.

Editor global de contenidos

Resumen

El contenido global es más eficaz para mostrar la misma información en varias páginas. Por ejemplo, el encabezado y el pie de página de tu sitio web, como el encabezado de la parte superior de esta página.

hubspot-developers-header

A continuación algunos ejemplos adicionales de áreas en las que puedes utilizar el contenido global:

  • Navegación secundaria para las diferentes secciones de tu sitio web
  • Pies de página de derechos de autor (o pies de página secundarios)
  • Barras laterales de publicaciones del blog (para mostrar las publicaciones recientes, listados de autores y más)

Debido a que el contenido global se utiliza en múltiples lugares a lo largo de un sitio web, es aún más crucial diseñar y construir tus parciales y módulos globales para la accesibilidad.

Parciales globales vs. módulos globales

Como desarrollador, puedes crear parciales globales y módulos globales, con algunas diferencias clave entre ellos:

  • Los parciales globales son un tipo de plantilla creada con HTML y HubL que se puede reutilizar en todo el sitio web. Los tipos de parciales más comunes son los encabezados, las barras laterales y los pies de página.
  • Los módulos globales son módulos que se componen de uno o varios contenidos que se pueden utilizar en varias páginas de tu sitio. Algunos tipos comunes de módulos globales pueden ser elementos como formularios de suscripción al blog, elementos de navegación secundaria y llamadas a la acción.
Debes evitar incluir módulos globales dentro de los parciales globales, ya que ello puede crear una experiencia negativa en la edición de contenido.

Todos los módulos y campos dentro de tus parciales globales y módulos globales son fácilmente editables dentro del editor de contenido global.

Parciales globales

Crea un parcial global

Un parcial global es un tipo de plantilla que puedes crear localmente a través de la CLI de HubSpot utilizando el comando create, como se muestra a continuación.

hs create template <partial-file-name>

Cuando se te pida que elijas un tipo de plantilla, selecciona global parcial.

Esto creará tu plantilla en el directorio deseado con las siguientes anotaciones de plantilla incluidas en el archivo HTML.

<!-- templateType: global_partial label: Page Header -->

Para ver un ejemplo de un contenido parcial global, consulta nuestra plantilla en GitHub.

Añade áreas de arrastrar y soltar a los parciales globales

Puedes habilitar las capacidades de arrastrar y soltar contenido dentro de tus parciales globales agregando en las etiquetas dnd_area de forma similar a la habilitación en las plantillas de página. Consulta nuestra documentación sobre el área de arrastrar y soltar para más información.  

Incluye un parcial global en tu plantilla actual

Para agregar un parcial global en una de tus plantillas existentes, utiliza la etiqueta HubL global_partial mientras haces referencia a la ruta del parcial. A continuación, verás un ejemplo de la plantilla del CMS que utiliza esta etiqueta.

{% global_partial path="../partials/header.html" %}

Cuando se emiten parciales globales, contienen una envoltura <div> alrededor del parcial global. Esto lo utiliza el editor de la página para identificar que la pieza de contenido es un parcial global.

<div data-global-resource-path="cms-theme-boilerplate/templates/partials/header.html"> <!-- Your header.html code is output here --> </div>

Nota: no utilices global_partial dentro del <head> de una plantilla. Hacerlo produciría un HTML no válido.

En la mayoría de las situaciones en las que deseas utilizar un parcial global en el encabezado, puede tener más sentido utilizar un módulo global en su lugar con un {%require_head%} para insertar código personalizado en el encabezado y seguir proporcionando campos de módulo.

Módulos globales

Puedes crear módulos globales al igual que cualquier otro módulo usando la CLI ejecutando el comando hs create, como se muestra a continuación.

hs create module <module_name>

Un módulo global se diferencia por el indicador global en el archivo meta.json del módulo.

// meta.json file { "css_assets": [], "external_js": [], "global": true, "help_text": "", "host_template_types": ["PAGE"], "js_assets": [], "other_assets": [], "smart_type": "NOT_SMART", "tags": [], "is_available_for_new_content": false }

También puedes crear módulos globales en HubSpot utilizando el administrador de diseño.

Más información sobre cómo trabajar con módulos en los siguientes recursos relacionados:

¿Te resultó útil este artículo?
Con este formulario puedes enviar tu opinión sobre nuestros documentos para desarrolladores. Si tienes comentarios sobre el producto de HubSpot, puedes enviarlos al Foro de ideas.