¿Cómo puedo hacer que el encabezado sea diferente en cada página de Squarespace?

10 de abril

Para que el encabezado sea diferente en cada página de Squarespace, puedes utilizar CSS personalizado y, si lo deseas, JavaScript o la inyección de código. A continuación te ofrecemos una guía paso a paso:

1. Identificar el ID de colección único de la página

Cada página de Squarespace tiene un identificador de colección único, que es esencial para aplicar estilos específicos a cada página.

Cómo encontrar el ID de la colección:

Abre la página en tu navegador.
Haz clic con el botón derecho en cualquier lugar de la página y selecciona «Inspeccionar » o «Ver código fuente de la página».
Busca una línea como esta:
<body id="collection-XXXXXX">
El valor colección-XXXXXX es el identificador único de esa página.

2. Escribir CSS específico para cada página

Puedes utilizar el ID de la colección para aplicar estilos personalizados únicamente a páginas concretas.

Ejemplo: Cambiar el fondo del encabezado de una página

/* Apply a solid header background on a specific page */ body#collection-XXXXXX header.Header { background-color: #000; /* Black background */ } /* Change navigation text color for that page */ body#collection-XXXXXX header.Header .header-nav-item a { color: #fff; /* White text */ }

3. Añade el código a Squarespace

Dependiendo de tu plan, puedes añadir el CSS en diferentes lugares.

Si tienes acceso al CSS de todo el sitio:

Ve a Diseño > CSS personalizado.
Pega el código.
Guardar.

Si tienes una inyección de código por página:

Ve a «Páginas», haz clic en el icono con forma de rueda dentada de la página en cuestión y abre la pestaña «Avanzado ».
Pega el código en el campo «Inyección de código en el encabezado de la página ».
Guardar.

4. Modificar el contenido del encabezado (logotipo, enlaces de navegación, botones)

Si quieres ir más allá del diseño y modificar el contenido del encabezado (como el logotipo o los elementos de navegación), necesitarás JavaScript o jQuery.

Ejemplo: Cambiar el logotipo de una página

<script> document.addEventListener('DOMContentLoaded', function() { if (document.body.id === 'collection-XXXXXX') { document.querySelector('.header-title-logo img').src = '/path-to-new-logo.png'; } }); </script>

5. Añadir u ocultar elementos de navegación en determinadas páginas

Puedes ocultar o mostrar los enlaces de navegación de páginas concretas.

Ejemplo: Ocultar enlaces de navegación específicos

/* Hide the third navigation link on a specific page */ body#collection-XXXXXX .header-nav-item:nth-child(3) { display: none; }

6. Eliminar por completo el encabezado de una página

Si quieres eliminar por completo el encabezado de una página concreta:

/* Hide the header on a specific page */ body#collection-XXXXXX header.Header { display: none; }

7. Personalización avanzada para sitios web multilingües

Si tienes una página web multilingüe, puedes configurar diferentes encabezados en función de los subdirectorios de la URL (como /es o /de).

Ejemplo:

<script> document.addEventListener('DOMContentLoaded', function() { const pathname = window.location.pathname; if (pathname.includes('/en')) { document.querySelector('.header-title-logo img').src = '/logo-en.png'; } else if (pathname.includes('/de')) { document.querySelector('.header-title-logo img').src = '/logo-de.png'; } }); </script>

8. Pruebas y depuración

Actualiza tu página web para comprobar que los cambios se han aplicado correctamente.
Utiliza la herramienta de inspección de tu navegador para comprobar si los estilos o scripts personalizados se aplican a los elementos correctos.

9. Herramientas para simplificar el proceso

Utiliza «Squarespace Collection/Block Identifier» (extensión de Chrome) para encontrar fácilmente los identificadores de las colecciones.
El modo de desarrollador de Squarespace (para usuarios avanzados) te permite tener un mayor control sobre el diseño y la estructura del encabezado de tu sitio web.

Combinando CSS y JavaScript (opcional), puedes personalizar por completo el encabezado de cada página en Squarespace. ¡Avísame si necesitas ayuda para implementar una personalización concreta!

Equipo de asistencia