La navegación es una faceta esencial de un buen sitio web de WordPress con un gran diseño. Por ello, vale la pena tomarse un tiempo para pensar en cómo los visitantes de tu sitio interactúan con tus páginas a través de la navegación. Una forma de hacerlo es utilizando una cabecera adhesiva.
En este caso, la sección de la cabecera de tu sitio se mantiene en la parte superior de la pantalla cuando el usuario se desplaza. Esto proporciona múltiples beneficios, pero uno de los principales puntos positivos es que tus elementos de navegación permanecen a la vista del usuario, independientemente de dónde se encuentre en la página. Sólo por esta razón, una cabecera adhesiva es un elemento de interfaz de usuario (UI) bienvenido.
En este tutorial, vamos a mostrarte ¿cómo crear una cabecera adhesiva en WordPress? Va a cubrir muchos aspectos, como ejemplos en la web, plugins de WordPress que pueden ayudarte y una guía sobre ¿cómo desarrollar tu propia cabecera adhesiva? Sin embargo, primero vamos a hablar de lo que es una cabecera adhesiva con más detalle.
¿Qué es una cabecera adhesiva?
La parte de la cabecera de tu sitio es algo así como el mostrador de información de tu sitio. Va a ser algo que la mayoría de los usuarios verán en primer lugar, y siempre será un lugar en el que mirarán para encontrar algunas piezas clave de información, y realizar ciertas acciones:
- Por ejemplo, tu logotipo o el nombre del sitio estarán aquí, lo que sirve de punto de partida para tus usuarios. En la mayoría de los casos, podrán volver a la página de inicio haciendo clic en el logotipo.
- Si tienes cuentas de usuario en tu sitio, la cabecera suele ofrecer un enlace para acceder a esas páginas de cuenta y perfil.
- Aquí puede haber una funcionalidad de búsqueda, especialmente si tienes un sitio grande con mucho contenido en diferentes áreas.
- Por supuesto, la navegación de tu sitio también es una parte integral de la cabecera.
En general, tu cabecera es un punto de contacto para los usuarios. Verás que a menudo es la «barra» de los patrones de lectura en forma de F, por lo que llama la atención de tus usuarios a nivel intuitivo.
Es probable que ya sepas lo que es una cabecera adhesíva, incluso en un sentido intuitivo. Es cuando la sección de la cabecera de tu sitio se «pega» a la parte superior de la pantalla mientras te desplazas. A diferencia de una cabecera estática, que permanece en su sitio y desaparece cuando te desplazas, la cabecera adhesiva es un elemento siempre visible.
Aunque el enfoque típico para una cabecera adhesiva es fijar una versión estática de la misma en la parte superior de la pantalla, hay algunas formas diferentes de hacerla más usable, eficiente en la pantalla y dinámica. A continuación, veremos algunos ejemplos del mundo real.
Ejemplos de cabeceras adhesivas en la web
Encontrarás cabeceras adhesivas por toda la web, y es una buena idea comprobar algunas para ver el alcance de lo que puedes conseguir. Uno de los ejemplos más básicos es el de Hammerhead. Este sitio utiliza un «menú desplegable» y una cabecera adhesiva, y es sencillo: Se compromete a mantenerse en la parte superior de la página en su diseño estático:
Otra implementación sencilla es la de Kin. Utiliza la típica cabecera adhesiva, pero esta vez con unos cuantos elementos de diseño geniales.
Verás que el contraste cambia en función de la parte de la web por la que te desplaces, y también hay unos bonitos efectos de transición:
No podemos terminar esta sección sin mencionar la cabecera adhesiva de Kinsta. También mantiene las cosas sencillas en lo que respecta a los elementos de la cabecera, pero incluye un bonito toque de usabilidad que ofrece valor al visitante:
Esta vez, verás que la cabecera desaparece cuando te desplaces por la página. Sin embargo, volverá a aparecer cuando te desplaces de nuevo hacia arriba – puedes referirte a él como un «encabezado parcialmente persistente»
La premisa aquí es que desplazarse hacia abajo significa que estás invirtiendo tu tiempo en la propia página, por lo que probablemente no necesitarás la navegación, las páginas de inicio de sesión o dirigirte a otra parte. Sin embargo, en el momento en que te desplazas hacia arriba, es más probable que quieras dirigirte a otra página del sitio. En este caso, la cabecera adhesiva aparecerá para salvar el día.
Son estos pequeños toques de experiencia de usuario (UX) los que hacen que los visitantes quieran volver al sitio. Para tus propios diseños de cabecera adhesiva, deberás tener en cuenta lo que puedes hacer para crear una UX y una UI que se centren en las necesidades del visitante.
¿Por qué deberías utilizar una cabecera adhesiva para tu sitio web?
Muchos sitios utilizan cabeceras adhesivas, y hay muchas buenas razones para ello. Pueden ser partes cruciales de la experiencia general de tu sitio y tienen mucha influencia en tu UX y UI.
Dado que los elementos que incluirás en una cabecera son aquellos a los que el usuario siempre querrá acceder, tiene sentido tenerlos siempre a la vista. Esto es especialmente cierto para los dispositivos y formatos de pantalla más pequeños.
Aunque pueda parecer contradictorio tener una cabecera «siempre activa» cuando el espacio de la ventana gráfica es escaso, se trata de un pequeño sacrificio. El verdadero beneficio es dar al usuario móvil menos razones para desplazarse, algo necesario en los dispositivos más pequeños. Si puedes proporcionar la navegación de tu sitio sin necesidad de desplazarse, el usuario podrá moverse por tu sitio con mayor facilidad.
Ventajas e inconvenientes de las cabeceras adhesivas
Hemos cubierto algunos de los puntos positivos de las cabeceras adhesivas, así que vamos a resumirlos rápidamente:
- Puedes ofrecer una navegación a la que el usuario pueda acceder siempre, lo que ayuda a preservar el patrón de lectura natural de tu sitio.
- Puedes adaptar la cabecera a diferentes necesidades, como contrastes, esquemas de color o incluso la intención del usuario.
- Existe la oportunidad de ofrecer valor al usuario, tanto para el escritorio como para las pantallas más pequeñas.
Sin embargo, una cabecera adhesiva no es la panacea para aumentar la UX, y hay algunos inconvenientes en su uso:
- Esto lo cubrimos brevemente, pero para pantallas de todos los tamaños, tendrás que asignar espacio a tu cabecera.
- Una cabecera adhesiva restará naturalmente importancia al resto de tu contenido, porque sus propios elementos desviarán la mirada del cuerpo de la página.
- Hay más trabajo de desarrollo en una buena cabecera adhesiva porque tienes que implementarla, asegurarte de que funciona en diferentes navegadores y comprobar que no haya errores en las pantallas más pequeñas.
Sin embargo, si piensas en tus elecciones de diseño, en las necesidades de los usuarios y en los objetivos del sitio, puedes mitigar o eliminar todos estos inconvenientes, mientras mantienes los puntos buenos. Una forma de hacerlo es mediante los plugins de WordPress.
3 plugins para ayudarte a crear cabeceras adhesivas
En las próximas secciones, mostraremos algunos de los principales plugins de cabeceras adhesivas para WordPress. Más adelante, hablaremos de si este tipo de solución es adecuada para ti. En cualquier caso, un plugin puede ayudarte a implementar la funcionalidad sin necesidad de código, lo cual es valioso si tu tema no lo incluye.
Además, puedes aprovechar la experiencia de diseño y desarrollo de un experto a través del plugin. Los desarrolladores tomarán algunas de las decisiones técnicas más importantes por ti, y lo envolverán en una interfaz de usuario intuitiva y fácil de usar.
1. Menú adhesivo y cabecera adhesiva
El plugin Sticky Menu & Sticky Header de Webfactory es una buena primera opción, debido a su gran cantidad de funciones, su útil flexibilidad y su precio asequible.
La atracción aquí es que puedes hacer que cualquier elemento de tu sitio se pegue a la pantalla. Esto puede ser útil de muchas maneras, pero significa que implementar una cabecera adhesiva es un juego de niños.
El plugin también viene con una serie de potentes opciones que te ayudarán a implementar una cabecera adhesiva:
- Puedes establecer el nivel deseado de posicionamiento «superior». Esto significa que puedes añadir espacio al área por encima de la cabecera para que se ajuste a tus objetivos de diseño.
- También hay otras opciones de posicionamiento, como utilizar la propiedad CSS z-index para diseñar tu sitio «de adelante hacia atrás»
- Puedes habilitar la cabecera adhesiva sólo en las páginas que selecciones, lo que puede resultar útil si tienes páginas de aterrizaje u otros contenidos inadecuados.
Sticky Menu & Sticky Header también incluye un modo de depuración, para ayudarte a arreglar cualquier elemento «no adhesivo». El modo dinámico también te ayudará a solucionar los problemas de los diseños responsivos.
La mejor noticia es que Sticky Menu & Sticky Header se puede descargar y utilizar gratuitamente. Es más, hay una versión premium que elimina más conocimientos técnicos que necesitas.
Con la versión gratuita del plugin, necesitarás conocer el selector del elemento para especificarlo en las opciones. Sin embargo, la versión premium (49-199$ al año) ofrece un selector de elementos visual para evitar esto.
2. Opciones de Twenty Twenty-One
Aunque no recomendaríamos un tema por defecto de WordPress para la mayoría de los sitios centrados en el cliente, tienen suficiente en la bolsa para los blogs y tipos de sitios similares.
Twenty Twenty-One es uno de los temas por defecto más destacados en nuestra opinión, pero carece de la funcionalidad de cabecera adhesiva. Si quieres añadir esta función, el plugin Options for Twenty Twenty-One podría conseguir lo que necesitas.
Esta edición del plugin es una de tantas. Cada tema por defecto reciente tiene una versión, pero todavía no hay una para Twenty Twenty-Two. En cualquier caso, la funcionalidad principal del plugin ofrece un montón de extras:
- Hay una herramienta de edición completa del sitio (FSE), lista para su despliegue completo.
- Puedes cambiar el tamaño de la fuente del cuerpo, eliminar los subrayados de los hipervínculos y otras personalizaciones sencillas.
- Puedes trabajar con los anchos máximos de los contenedores y elementos, sin necesidad de código.
Hay muchas otras opciones para tu navegación, contenido, pie de página y cabecera. Para esta última, puedes ocultarla de la vista, hacerla de ancho completo, añadir una imagen y un color de fondo, y muchas otras alteraciones.
Aunque el plugin principal es gratuito, necesitas una actualización premium (25-50$) para acceder a las opciones de la cabecera adhesiva. Esto te permite ajustar la configuración de las cabeceras para móviles y para ordenadores de sobremesa desde el personalizador de WordPress:
Dado el nombre, no deberías esperar que este plugin funcione con otro tema que no sea Twenty Twenty-One (o el «sabor» que elijas). Sin embargo, si utilizas este tema por defecto y no quieres codificar, será ideal para ayudarte a añadir una cabecera adhesiva a tu sitio.
3. Barra de notificaciones flotante, menú adhesivo al desplazarse y cabecera adhesiva para cualquier tema – myStickymenu
Este es un plugin que pone las cartas sobre la mesa. El plugin myStickymenu de Premio ofrece casi todo lo que querrás incluir en tu propia cabecera adhesiva, y contiene una gran cantidad de funcionalidades.
Tiene un número asombroso de opiniones positivas en el Directorio de plugins de WordPress: 799 opiniones de cinco estrellas con una media de 4,9. Parte de esto se debe al amplio conjunto de funciones que tiene a su disposición:
- Ofrece flexibilidad de uso. Por ejemplo, puedes crear una barra de bienvenida, así como un menú adhesivo y una cabecera.
- El plugin se adapta a la capacidad de respuesta de tu sitio. Esto significa que no necesitarás implementar más funcionalidades mediante código.
- De hecho, el plugin no necesita que sepas codificar para poder utilizarlo al máximo.
- El plugin myStickymenu es compatible con varios de los principales plugins constructores de páginas, como Elementor, Beaver Builder, el editor de bloques nativo, el constructor Divi y muchos más.
También tienes una serie de opciones de personalización para hacer que tu cabecera adhesiva funcione como tú quieras. Por ejemplo, puedes elegir hacer una cabecera parcialmente persistente, cambiar aspectos sencillos como los colores de fondo, las opciones de tipografía y mucho más.
Además, debido a las diferentes formas en que puedes presentar tu cabecera adhesiva (como las opciones de menú y barra de bienvenida), puedes elegir cómo se muestran, y dónde, en tu sitio.
Aunque la versión gratuita de myStickymenu podría ser suficiente para tus necesidades, también hay una versión premium (25-99 $ al año) que ofrece más formas de desactivar tu cabecera adhesiva en función de determinadas condiciones, temporizadores de cuenta atrás, la posibilidad de añadir varias barras de bienvenida y algunas opciones más de personalización.
¿Cómo crear una cabecera adhesiva en WordPress?
En el resto de este tutorial, vamos a mostrarte cómo crear una cabecera adhesiva en WordPress. Hay un par de enfoques que puedes tomar aquí, y cubriremos ambos. Sin embargo, nuestro primer paso te ayudará a tomar esa decisión.
A partir de ahí, trabajarás en tu propia cabecera adhesiva utilizando el método que prefieras, y luego aplicarás algunos de nuestros consejos para que la tuya sea más eficiente y utilizable en el futuro.
1. Decide ¿cómo vas a crear tu cabecera adhesiva?
Una de las razones por las que WordPress es tan flexible para todo tipo de usuarios se debe a su ecosistema de plugins y a su extensibilidad de código abierto. Por ello, puedes elegir una solución estándar o crear la tuya propia
Tu primera tarea es decidir si quieres utilizar un plugin o profundizar en el código para implementar tu cabecera adhesiva. Vamos a desglosar las dos soluciones:
- Plugins. Este va a ser un método aprobado por WordPress, especialmente si no tienes conocimientos técnicos a mano. Te ofrecerá flexibilidad, pero estarás a merced de lo que el desarrollador considere importante, y de su capacidad de codificación.
- Codificación. Si tienes una visión clara en mente, puede que quieras codificar una cabecera adhesiva para tu sitio. Por supuesto, necesitarás conocimientos técnicos para llevarlo a cabo (principalmente CSS), pero los resultados serán exactamente los que deseas. Sin embargo, tendrás más mantenimiento potencial que llevar a cabo, y su éxito dependerá de tus propias habilidades para codificar.
Diríamos que para la mayoría de los usuarios de WordPress, un plugin será la solución ideal para crear una cabecera adhesiva. Va a funcionar bien con la plataforma y es más fácil de solucionar si tienes problemas. Sin embargo, en futuros pasos, cubriremos una solución de codificación así como la opción del plugin.
2. Elige si vas a modificar tu tema actual o a seleccionar uno dedicado
El siguiente aspecto que deberás tener en cuenta es si modificas tu tema actual o eliges uno que ya tenga la funcionalidad de cabecera adhesiva dentro de su conjunto de características. Esto va a ser importante si tu tema no tiene la funcionalidad para manejar una cabecera adhesiva.
Muchos temas y plugins de construcción de páginas incluyen una opción de cabecera adhesiva, por sus ventajas y para ofrecerte flexibilidad de diseño. Verás que algunos de los temas y plugins más grandes y de uso general lo ofrecen de serie, como Elementor, Astra, Divi, Avada y muchos otros.
Para tomar esta decisión, deberás tener en cuenta algunas cosas sobre tu tema y sitio actuales:
- ¿Tu sitio tiene ya el aspecto que deseas, o necesita una actualización?
- ¿Es tu tema actual fácil de personalizar bajo el capó? La documentación del desarrollador debería decírtelo.
- ¿Quieres una implementación de cabecera preferida compleja o una más sencilla?
Según las respuestas que des aquí, elegirás uno u otro. Si necesitas un nuevo tema, puedes elegir uno que ofrezca la implementación de cabeceras adhesivas. Sin embargo, si quieres quedarte con tu tema actual, y éste aún no tiene la funcionalidad de cabecera adhesiva, deberás arremangarte y seguir uno de los siguientes subpasos.
2a. Utilizar un plugin con un tema específico
Si no tienes experiencia en desarrollo, te recomendamos que elijas un plugin para añadir la funcionalidad de cabecera adhesiva a tu sitio. Hay demasiadas variables que debes considerar, construir y mantener. Por el contrario, un plugin ya tendrá una base de código que hace un guiño a estos elementos, por lo que ofrecerá una opción casi ideal para la mayoría de las circunstancias.
Para esta parte del tutorial, vamos a utilizar el plugin myStickymenu, ya que éste ofrece un conjunto de funciones completo y rico para la mayoría de los casos de uso. Sin embargo, el uso general será el mismo para la mayoría de los plugins que utilizarás.
Una vez que instales y actives tu plugin, tendrás que dirigirte a las opciones del tema. Para algunos plugins, esto será dentro del Personalizador de WordPress; para otros, un panel de administración dedicado. En este caso, utilizarás un panel de administración personalizado en myStickymenu > Dashboard dentro de WordPress:
Sin embargo, la pantalla por defecto muestra la configuración de la barra de bienvenida, que para este tutorial, no queremos. Por lo tanto, haz clic en el botón de alternancia para desactivar la barra, y haz clic en la pantalla de configuración del menú adhesivo:
Aunque hay muchas opciones aquí, sólo necesitas el panel de Clase Adhesiva. Una vez que actives la cabecera adhesiva, introduce la etiqueta HTML correspondiente a tu cabecera en el campo correspondiente que coincide con el menú desplegable Otra clase o ID:
Una vez que guardes los cambios, esto se aplicará a tu sitio. A partir de ahí, puedes investigar algunas de las funcionalidades de estilo. Por ejemplo, puedes establecer un efecto de transición de desvanecimiento o deslizamiento, establecer el índice z, trabajar con opacidades, colores y tiempos de transición, junto con toda una serie de otras opciones.
2b. Escribe el código para crear tu cabecera adhesiva
Casi no hace falta decir que esta sección es para los que tienen experiencia en desarrollo. Más adelante verás que el código en sí es tan sencillo que resulta difícil de creer. Sin embargo, dado el trabajo adicional, el mantenimiento y la conservación general para crear una cabecera adhesiva personalizada, necesitarás recurrir también a otros aspectos de tu experiencia.
Sin embargo, antes de empezar, necesitarás lo siguiente:
- Un editor de código decente, aunque en este caso (y dependiendo de la implementación) podrías utilizar un editor de texto predeterminado del sistema operativo (SO).
- Necesitarás acceso a los archivos de tu sitio, de los que deberías hacer una copia de seguridad y luego descargarlos en un entorno de desarrollo local de WordPress.
Conviene repetir que no debes trabajar en los archivos de tu sitio en vivo. En su lugar, trabaja en un entorno de staging o en una configuración local, y luego sube los archivos a tu servidor activo después de probar las cosas.
También querrás usar un tema secundario para esto, ya que estás haciendo cambios personalizados en tu tema padre. Esto te ayuda a organizar tu código y a asegurarte de que cualquier cambio (literalmente) se mantiene si el tema recibe una actualización.
Implementación de una cabecera adhesiva mediante código: Encontrar las etiquetas de cabecera correctas
Con todo esto en mente, puedes empezar. El primer trabajo es descubrir las etiquetas HTML adecuadas para tu navegación. El resultado aquí dependerá del tema que utilices, aunque la etiqueta de cabecera es una apuesta segura para la mayoría de los casos. La mejor manera de averiguarlo es utilizar las herramientas de desarrollo de tu navegador y seleccionar la cabecera:
Es probable que descubras que no es tan sencillo como una etiqueta, así que te sugerimos que eches un vistazo a la documentación de tu tema (o que hables directamente con el desarrollador) para averiguar las etiquetas que necesitas si tienes problemas.
Implementación de una cabecera adhesiva mediante código: Trabajando con tus hojas de estilo
A continuación, debes crear o abrir un archivo style.css dentro del directorio de tu tema secundario. Esto añadirá tu CSS al de la instalación principal, y donde se repitan las etiquetas, lo anulará.
Dentro de este archivo, añade los metadatos típicos que necesitas para registrar el tema secundario:
A continuación, querrás añadir código para habilitar tu cabecera adhesiva. Esto requerirá algún conocimiento de la herencia CSS, y dependiendo del tema que utilices, podría ser una experiencia exasperante.
Por ejemplo, el tema Twenty Twenty-Two utiliza dos etiquetas de cabecera, y puede ser difícil encontrar la mezcla correcta de CSS para que tu código funcione en el elemento correcto. Esto ocurre incluso con el diálogo de clase de plantilla dentro del Editor de bloques (si utilizas la funcionalidad FSE):
En cualquier caso, el código que necesitas será el mismo:
Akhil Arjun ofrece una solución de dos líneas para esto:
header {
position: sticky; top: 0;
}
Sin embargo, también puedes considerar el uso de la propiedad position: fixed, que utiliza unas pocas líneas más de código:
header {
position: fixed;
z-index: 99;
right: 0;
left: 0;
}
Esto utiliza z-index para llevar la cabecera a la parte delantera de la pila, y luego un atributo fijo para hacer que permanezca en la parte superior de la pantalla.
Ten en cuenta que puede que tengas que añadir una nueva clase aquí, para aplicar el encabezado fijo. En cualquier caso, esto debería implementar los huesos de tu cabecera adhesiva. Una vez que tengas esto claro, querrás seguir trabajando en el diseño para que funcione con el resto de tu sitio.
Consejos para que tus cabeceras adhesivas sean más eficaces
Una vez que tengas un método para crear una cabecera adhesiva, querrás averiguar cómo puedes perfeccionarla. Hay muchas maneras de mejorar el diseño básico y asegurarse de que sirve a las necesidades de los visitantes de tu sitio.
Una buena analogía para tu propia cabecera adhesiva es asegurarte de que es como un buen árbitro deportivo. La mayor parte del tiempo, no sabrás que están ahí. Sin embargo, cuando un jugador o entrenador los necesite, harán una llamada y se harán presentes.
Tu cabecera adhesiva debe hacer lo mismo: permanecer en la sombra, o fuera de la mente, hasta que el usuario la necesite. Puedes conseguirlo con unas cuantas reglas generales que (como siempre) puedes elegir romper si el diseño lo requiere:
- Mantenlo compacto. El espacio en la pantalla va a ser muy importante, así que procura que la cabecera sea pequeña. Podrías implementar una solución en la que tu cabecera se escalara de forma dinámica, en función de la zona del sitio en la que aparezca.
- Utiliza cabeceras y menús ocultos en pantallas pequeñas. Por extensión, podrías optar por ocultar un menú, como en el ejemplo anterior de Hammerhead. Esto ayuda a mantener la cabecera compacta, y enlaza con el siguiente punto.
- Asegúrate de no introducir distracciones. Cuanto mayor sea el número de elementos en pantalla, más competirán por la atención. Si la cabecera pegajosa no necesita mostrar un elemento, elimínalo: el contenido del cuerpo lo agradecerá, al igual que tus métricas.
- Ofrece contraste. Este es un truco del libro de jugadas de las llamadas a la acción (CTA). Si utilizas el contraste para la cabecera adhesiva en su conjunto, y para sus elementos individuales, puedes atraer la mirada hacia donde la necesitas, o empujarla hacia otra parte.
En general, tu cabecera adhesiva sólo hará lo que necesites, y no más. A veces tendrás que mantener las cosas al mínimo, otras veces lo llenarás de enlaces, logotipos y formularios de inscripción. En cualquier caso, si tienes en cuenta la UX y la UI, siempre tomarás una decisión centrada en el usuario.
Resumen
La usabilidad y la UX de tu sitio web son tan importantes que deberían ser lo primero, lo segundo y lo tercero en lo que te fijes cuando lo diseñes y construyas. La navegación de tu sitio es sólo un aspecto de ello, pero tienes que averiguar la mejor manera de hacer que un usuario se mueva por tu sitio sin complicaciones. Una cabecera adhesiva es una buena manera de conseguirlo.
Si fijas la cabecera en la parte superior de la pantalla, el usuario tendrá siempre a mano los elementos de navegación. Esto es especialmente útil en los dispositivos que requieren desplazamiento para moverse por el contenido del cuerpo, pero ofrece ventajas independientemente del factor de forma. Si eres usuario de WordPress, puedes elegir un plugin o un código para implementar una cabecera adhesiva. Sin embargo, es posible que veas la funcionalidad en tu tema favorito, en cuyo caso, podrías utilizarlo y restarle flexibilidad.
¿Crees que una cabecera adhesiva es un elemento esencial de UX y UI de un sitio web, y si no lo es, cuál es? ¡Háznoslo saber en la sección de comentarios más abajo!
Deja una respuesta