[Tutorial] Cómo hacer que el encabezado de Squarespace sea fijo o «pegajoso»
¿Te has dado cuenta alguna vez de que hay dos tipos de páginas web en el mundo?
Hay un tipo que mantiene la barra de navegación en la parte superior de la página, de modo que, al desplazarse hacia abajo, esta desaparece.
Si quieres hacer clic en su logotipo, navegar por su menú o interactuar de cualquier otra forma con la navegación, tienes que volver a desplazarte hacia arriba. Es posible que incluyan un botón de «volver al inicio» en algún lugar de la pantalla para facilitar la tarea, o quizá no.
Este estilo de página web presenta un par de ventajas.
En primer lugar, permite disponer de más espacio en pantalla para el resto de la página web. Hoy en día, la mayoría de los ordenadores tienen pantallas panorámicas, lo que significa que hay mucho espacio en horizontal (que muchas páginas web no aprovechan) y no tanto en vertical. Cada fila de píxeles supone un espacio adicional que puede hacer que una página web resulte más atractiva en la parte visible de la pantalla.
Además, es más fácil. Una barra de navegación estática es el comportamiento predeterminado de una página web, y hay que implementar código personalizado para que la barra de navegación permanezca en la parte superior de la pantalla mientras el usuario se desplaza hacia abajo.
El otro tipo de página web, como es lógico, hace que su barra de navegación sea «fija» y la mantiene en la parte superior de la ventana de visualización. A medida que el usuario se desplaza hacia abajo, la barra de navegación se separa de la parte superior de la página y sigue al usuario a medida que este se desplaza.
Antiguamente, esto se conseguía utilizando iFrames y otras peculiaridades del diseño web. Hoy en día, se puede hacer con scripts y CSS. Es mucho más fácil y mejor tanto para los usuarios como para los motores de búsqueda. Sin embargo, requiere implementar ese código personalizado.
Por el lado positivo, este tipo de diseño web ofrece a los usuarios un fácil acceso a la navegación en todo momento. Si tienes enlaces esenciales ahí arriba, como la página de la tienda o una llamada a la acción para una oferta o algo similar, resulta muy útil que estén visibles en pantalla en todo momento. Esto mejora las ventas, el tiempo de permanencia en la web, las visitas a las páginas y la experiencia del usuario. Cuanto más difícil hagas que sea navegar por tu web, peor será su rendimiento.
Por otro lado, pueden reducir el espacio disponible en pantalla para el resto del contenido, sobre todo si son demasiado grandes.
Estas barras de navegación más grandes son la razón por la que los diseñadores suelen reducirlas a un tamaño menor cuando el usuario se desplaza por la página; los enlaces siguen ahí, pero no ocupan tanto espacio.
Si has llegado a esta página, supongo que has decidido que el segundo método es el más adecuado para ti.
Quieres que la barra de navegación permanezca visible en todo momento; quieres que se mantenga fija en la parte superior de la ventana de visualización, independientemente de la posición del usuario en la página, y quieres implementar este código personalizado.
¡Así es como se hace!
Inyección de código en Squarespace 7.0
Los que usáis Squarespace 7.1 probablemente os estéis riendo ahora mismo, y no pasa nada. En un momento me ocuparé de vosotros. Pero primero, hablemos de la versión 7.0.
En Squarespace 7.0 hay una gran variedad de familias de plantillas. Cada una de estas familias de plantillas funciona de forma diferente y única. Las distintas versiones hacen que dar instrucciones para cualquier página web concreta resulte complicado, ya que hay que saber qué familia de plantillas se está utilizando, buscar las instrucciones específicas para esa plantilla y aplicarlas.
Te voy a dar dos opciones. La primera es un fragmento de código que solo tienes que copiar y pegar. Este códigosolo funciona con la familia de plantillas Brine, así que si utilizas otra plantilla que no sea Brine (o si utilizas Brine pero la has personalizado con clases de página diferentes), no funcionará.
Ese código es el siguiente:
.Header {
position: fixed!important;
z-index: 1000;
width: 100%;
}
@media screen and (min-width: 641px) {
.Index section:first-child:not(.Index-gallery), .Main--page, .Intro, .Main {
padding-top: 81px;
}
.Intro + .Main {
padding-top: 0px;
}
}Copia este código tal cual, desde «.Header» hasta el «}» final. A continuación, inicia sesión en tu panel de control de Squarespace. En el panel de control, haz clic en el menú «Inicio» y, a continuación, en «Diseño».
Debería haber una opción llamada «CSS personalizado»; haz clic en ella para abrir la ventana del editor de CSS.
Solo tienes que pegar el código en esa ventana, guardarlo y tu página web debería tener ahora un banner fijo y flotante para la navegación en la parte superior.
Ten en cuenta que debes pegar esto al principio si tienes algún otro CSS personalizado. Si tienes algún código que modifique específicamente la barra de navegación, podría producirse un conflicto, por lo que quizá tengas que hablar directamente con un desarrollador para averiguar cómo conciliar ambos.
Ahora bien, ¿qué es este código y para qué sirve? Voy a explicarte a grandes rasgos cómo se ha creado para que puedas reproducirlo en otras familias de plantillas.
Aquí tienes una versión comentada del código:
.Header {
/*This is the class your header is contained in.*/
position: fixed !important;
/*This code sets the "fixed" attribute, forcing the header to stay at the top, and flags it as important so other directives do not overwrite it./*
z-index: 1000;
/*This ensures that the floating header is on top of all other page elements with a lower z-index value.*/
width: 100%;
/*This ensures that the header takes up the full width of the screen.*/}
/*The following code adds extra padding to the header so it isn’t cut off, and then removes that extra padding from non-header elements that share the same class.*/
@media screen and (min-width: 641px) {
.Index section:first-child:not(.Index-gallery), .Main--page, .Intro, .Main {
/*This additional code applies the header tweaks to pages other than your main homepage.*/
padding-top: 81px;
}
.Intro + .Main {
padding-top: 0px;
}
}No te preocupes si te resulta un poco confuso. A continuación te explico cómo puedes implementarlo por tu cuenta. Si no quieres meterte directamente con el código, no dudes en saltarte esta sección.
Just copy and paste the code above, tweak the values as necessary, and call it good. If you're using a non-Brine template, you can likely find similar code for your template (search for "<Template> Fixed Header CSS"), and you should be good to go. Alternatively, contact a developer to figure it out for you.
Paso 1:Determina la clase del encabezado. Haz clic con el botón derecho del ratón en el encabezado de tu página web, selecciona «Inspeccionar elemento» y busca la clase.
Normalmente será algo como «.header» o «.Header». ¡Presta atención a las mayúsculas!
Paso 2:Establece el atributo «fixed». Al igual que en el ejemplo anterior, debes establecer el atributo «position: fixed !important;» para el encabezado. Este código lo establece como fijo, pero es probable que haga que quede oculto detrás de otros contenidos.
Paso 3:Establece el atributo «Z-index». Imagina el «Z-index» como hojas de papel. Cada elemento de tu sitio web es una hoja de papel colocada en una página. Cuando las cambias de sitio, deben estar unas encima de otras; de lo contrario, no podrán deslizarse unas sobre otras. Un «Z-index» más alto significa que está más cerca de la parte superior. Establecer un Z-index de 1000 es probablemente excesivo, pero garantiza que nada más quede encima, a menos que especifiques un Z-index aún mayor en otro lugar. Además, te da mucho margen para superponer otros elementos más adelante si te adentras en el código personalizado y las capas. Aunque eso queda fuera del alcance de este artículo.
Paso 4:Establece un ancho adecuado. En Brine, el encabezado predeterminado ocupa el 100 % de la pantalla, por lo que en el código anterior hemos establecido el 100 %. Si quieres que tenga un ancho diferente, introduce aquí otro porcentaje.
Paso 5:Verás que ahora el encabezado oculta los X píxeles superiores de tu contenido.
Este problema de espaciado se debe a que el encabezado y el contenido comienzan en la parte superior de la página. Los encabezados fijos pueden provocar cierta superposición y problemas de espaciado. Puedes solucionarlo añadiendo un margen interior. Vuelve a la herramienta «Inspeccionar elemento» y selecciona el encabezado.
Puedes navegar por el inspector de elementos para ver cuál es su altura en píxeles. Ese es el valor que debes establecer como relleno.
Ten en cuenta que el relleno no se añade al encabezado, sino al contenido que hay debajo de este para desplazarlo hacia abajo. Debes identificar la clase del contenido principal, que es «.Index» en el código de ejemplo (y en Brine) anterior.
Tendrás que identificar la clase de esta página principal para cada tipo de página (Página, Entrada de blog, Acerca de, etc.) y añadirlas a las clases a las que se les aplica el relleno. De eso se tratan las secciones «.Main--page», «.Intro» y «.Main». Es posible que otras plantillas tengan clases diferentes para los estilos de sus páginas. Una vez más, puedes encontrarlas inspeccionando los elementos de tu página.
Paso 6:Corregir el relleno excesivo.
Quizá hayas notado que, al añadir el relleno al contenido, este se aplicó a cada sección del contenido, y no solo al contenido en su conjunto. Para eliminar el relleno sobrante, debes añadir el código a la primera sección, pero no a las secciones secundarias. Por suerte, se trata de un elemento básico de CSS, no de un elemento específico de la plantilla.
Solo tienes que añadir «section:first-child:not» al atributo, tal y como se muestra en el código de ejemplo anterior.
Una vez que lo tengas todo configurado, ¡ya está! No ha sidotan difícil, ¿verdad? Bueno, sí que lo ha sido si no estás familiarizado con CSS o con el desarrollo web en general. Así que, si quieres ver un tutorial en vídeo, puedesechar un vistazo a esta página. En esa página también hay otra alternativa que hace que tu cabecera sea transparente, pero es mucho más complicada y requiere añadir código JavaScript, así que no voy a entrar en detalles aquí.
Cabeceras fijas en Squarespace 7.1
Lo bueno de Squarespace 7.1 es que todas las plantillas funcionan con el mismo código base.
Las diferentes plantillas base tienen el mismo código, con elementos adicionales que se añaden y se eliminan en fragmentos modulares.
Por eso puedes cambiar de cualquier plantilla 7.1 a otrasin tener que volver a crear tu página web. Lo único que tienes que hacer es añadir y eliminar elementos para adaptarla.
Esto significa que, independientemente de la plantilla que tengas en la versión 7.1, las instrucciones para añadir un encabezado fijo son las mismas. Es incluso más fácil que todo lo anterior, ya queno necesitas código personalizado.
De hecho, Squarespace ha añadido la opción de utilizar un encabezado fijo como configuración predeterminada que puedes seleccionar.
Paso 1:Inicia sesión en tu cuenta de Squarespace. Asegúrate de que estás en la cuenta correcta si gestionas más de una. Una vez que tengas tu página web abierta, haz clic en el botón «Editar» que hay en la esquina.
Paso 2:Edita el encabezado de la página web. Pasa el ratón por encima de la barra superior del encabezado de tu página web y haz clic en el botón «Editar encabezado» que aparece.
Aquí tienes muchas opciones diferentes para editar tu encabezado, como modificar el relleno, el espaciado y la posición. No dudes en ajustarlas tanto como quieras.
Paso 3:Configura el encabezado como fijo. Para ello, haz clic en la pestaña «Estilo» del editor del encabezado. Un poco más abajo en el menú, verás «Posición fija» como botón de activación/desactivación. Actívalo.
Paso 4: Eligeun estilo.
Aquí hay dos opciones diferentes: «Básica» y «Desplazamiento hacia atrás». «Básica» significa que el encabezado permanece fijo en la parte superior de la página en todo momento. Si el usuario se desplaza hacia abajo, sigue ahí. Si se desplaza hacia arriba, sigue ahí. Este es el comportamiento predeterminado.
La función «Desplazamiento hacia atrás» es un poco más complicada. Cuando el usuario se desplaza hacia abajo en tu página, el encabezado se mantiene en la parte superior. Sin embargo, si decide desplazarse hacia arriba, el encabezado volverá a aparecer en cuanto la ventana de visualización se desplace hacia arriba.
Para algunas personas, esta es una opción que ofrece «lo mejor de ambos mundos». Da más espacio al contenido de la página, pero hace que el encabezado sea más accesible para quien lo necesite, sin tener que desplazarse de nuevo hasta la parte superior.
La única salvedad es que no hay forma de saber cómo funcionará la navegación sin que el usuario lo descubra por sí mismo.
Paso 5: Guarda y sal.
Haz clic en los botones «Hecho» y «Guardar» situados en la esquina superior para guardar los cambios. Una vez que los hayas guardado, ¡ya estás listo!
¿A que ha sido mucho más fácil que el método de la versión 7.0?
