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 de los sitios web, los pies de página, las barras laterales, los logotipos u otros componentes. Los desarrolladores establecen qué componentes deben ser globales utilizando parciales globales o haciendo módulos globales. Cuando se edita un componente global, se ofrece una experiencia de edición diferente para los editores de contenido que facilita la edición del contenido global y la vista preliminar 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 nuestro artículo de la base de conocimientos sobre cómo utilizar el contenido global en varias plantillas.

Editor global de contenidos

Cuándo debo utilizar el contenido global y dónde

El contenido global se utiliza mejor en las áreas de un sitio web donde mostraras información consistente en varias páginas. Un buen ejemplo de ello es el encabezado y el pie de página de tu sitio web. Otro ejemplo de contenido global puedes encontrarlo en la parte superior de esta página. El encabezado del sitio de los desarrolladores utiliza contenido global para crear el encabezado superior que se ve ilustrado a continuación.

Encabezado global del sitio de desarrolladores de HubSpot

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

Los parciales globales son piezas de contenido HTML & HubL que pueden reutilizarse en todo tu 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 una o varias piezas de contenido 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.

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.

Creación de una plantilla parcial de contenido global utilizando herramientas de desarrollo local

Puedes crear una nueva Plantilla Parcial Global utilizando el comando create y utilizando global-partial como tipo de plantilla como se ilustra a continuación.

hs create template <partial-file-name>

Se te pedirá que elijas un tipo de plantilla. Elige "global partial".

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.

Agregar áreas de arrastrar y soltar a los parciales de contenido global

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.  

Incluir tu contenido parcial global en tu plantilla existente

Para agregar tu parcial global en una de tus plantillas existentes, utiliza la etiqueta HubL global_partial mientras haces referencia a la ruta de tu parcial. A continuación un ejemplo de nuestra plantilla 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>

No utilices global_partial dentro de <head> de una plantilla. Hacerlo provocaría un HTML no válido y podría causar efectos secundarios.

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.

Crear un módulo global

Los módulos globales pueden ser creados como cualquier otro módulo utilizando tus herramientas CLI. La principal diferencia entre señalar un módulo como módulo global o estándar es la marca global en los módulos en el archivo meta.json (consulta la línea 5 en los ejemplos de código a continuación).

Módulo global

// 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 }

Módulo no global

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

La creación de un módulo utilizando el comando hs create module <name> <dest> y el establecimiento de esta marca a true en el archivo meta.json le permitirá al sistema saber que el módulo es un módulo global. Para empezar a utilizar los módulos, dirígete a nuestra página de descripción de módulos. También puedes crear módulos globales a través del Administrador de diseño. Para obtener más información sobre la creación de módulos (tanto globales como personalizados), consulta nuestro artículo de la base de conocimientos sobre creación y edición de módulos.


¿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.