Saltar al contenido

Cómo hacer un menú fijo en WordPress

Cómo hacer un menú fijo en WordPress

La navegación del sitio es uno de esos elementos esenciales de UX que dan forma a la forma en que los visitantes se sienten acerca de su sitio web. Los usuarios de la web de hoy en día no tienen absolutamente ninguna intención de perder el tiempo en un sitio web que no ofrece el contenido deseado de forma rápida y sin esfuerzo por parte del usuario. El menú de navegación es tradicionalmente el primer lugar al que los visitantes acuden para orientarse.. Si el menú no está diseñado correctamente y si la navegación no se ejecuta de la manera más fluida y rápida posible, los visitantes comienzan a salir y el sitio web comienza a sufrir una muerte lenta y dolorosa en Internet.

Un menú pegajoso constituye una parte importante de la navegación del sitio, ya que se “pega” a los usuarios mientras se desplazan, en lugar de permanecer en la parte superior de la página, asegurándose de que la navegación nunca esté fuera de su alcance. Es por eso que decidimos profundizar en el concepto, analizar los beneficios y desventajas de esta función y mostrarle cómo configurarla utilizando uno de los plugins de WordPress disponibles.

Por otro lado, si no desea utilizar un plugin de WordPress, debe saber que la mayoría de nuestros temas premium de WordPress vienen con la funcionalidad de menú fijo. Puede configurarlo para que aparezca en su sitio o en páginas individuales, pero llegaremos a eso en un momento.

En primer lugar, expliquemos qué es un menú fijo y cómo funciona. En la mayoría de los sitios web, la navegación principal se encuentra en el encabezado, que es la parte superior de la página. Normalmente, los elementos de la página desaparecen (se mueven hacia arriba) a medida que el usuario se desplaza hacia abajo. Un menú fijo es un menú que permanece (“se pega”) en la parte superior de la pantalla mientras los usuarios se desplazan por la página.. De esa manera, si el usuario quiere llegar a algo en el menú mientras se encuentra en la mitad de la página, no tiene que desplazarse hacia arriba para encontrar la navegación, ya que estará allí, en la parte superior de la ventana gráfica.

La “adherencia” generalmente se aplica a todo el encabezado, no solo el menú. Implica otros elementos de encabezado, como botones sociales, logotipo, la barra de búsqueda, etc.

Pros y contras de Sticky Menu

No parece haber un consenso general entre los diseñadores de UX sobre si los menús fijos son buenos o malos para los sitios web, ya que existen fuertes desventajas y ventajas significativas, así que veamos cuáles son.

Pros:


  • Navegación mejor y más rápida
    : Según un estudio, los menús adhesivos son hasta un 22% más rápidos de navegar. Y la importancia de una navegación rápida para básicamente todo, desde la retención de usuarios hasta las tasas de conversión, es un hecho claro y bien conocido.

  • Preferencia de usuario
    : La gente simplemente prefiere sitios con encabezados y menús fijos. Puede que no sepan cómo se llaman o que ni siquiera los noten en el nivel consciente, pero de todos modos los prefieren.

  • Mayor retención, menor tasa de rebote
    : Nuevamente, una mejor navegación significa satisfacción del usuario, lo que significa que los visitantes no abandonarán el sitio de inmediato y, en cambio, se quedarán (juego de palabras) y navegarán por sus páginas.

  • Identidad de la marca
    : Al asegurarse de que el logotipo de su encabezado permanezca en la ventana gráfica todo el tiempo, está construyendo una identidad de marca y aumentando el conocimiento de la marca entre sus visitantes.

Contras:


  • Limitaciones de diseño
    : Los menús fijos pueden imponer ciertas limitaciones de diseño y compromisos que algunos diseñadores simplemente no están dispuestos a hacer.

  • Distracción e intrusión
    : A veces, un menú pegajoso realmente puede interponerse en su camino, especialmente en páginas con mucho contenido visual, o si es demasiado alto o ancho para permitir un acceso completo al contenido.

  • Problemas móviles
    : Aunque este ya no es un problema tan común, los menús pegajosos a veces no funcionan bien en dispositivos móviles.

¿Su sitio necesita un menú fijo?

Decimos “Sí” para todos los casos siguientes:

  • Si su sitio usa scroll infinito o tiene páginas muy largas.
  • Si publica mucho contenido.
  • Si desea que los usuarios se registren.
  • Si la funcionalidad de búsqueda es importante para su sitio.
  • Si su sitio es una tienda en línea.
  • Si tiene páginas importantes además de la página de inicio que se visitan con frecuencia.

Creación de un menú fijo con temas de Qode

Como mencionamos anteriormente, para agregar un menú fijo a su sitio web, utilizará la funcionalidad incorporada del tema o instalará un plugin de WordPress.

Si ha comprado un tema de Qode Interactive, no necesitará un plugin; la mayoría de nuestros temas vienen con esta funcionalidad lista para usar.

En cuanto a habilitarlo y configurarlo, si desea tener un menú fijo en todo su sitio (en todas las páginas), vaya a la configuración general del tema (estos están marcados por el nombre del tema o autor del tema, seguido del palabra “Opciones”) y haga clic en Encabezamiento.

Crear un menú pegajoso con temas de Qode

Aquí encontrará las opciones para el menú fijo. Tenga en cuenta que las opciones pueden variar, según el tema.

Opciones para el menú fijo

Después de seleccionar “Adhesivo” en el menú desplegable, se abrirá un conjunto de opciones de personalización.

Conjunto de opciones de personalización

Nuevamente, la configuración puede variar según el tema.

La configuración puede variar según el tema

También puede configurar el menú fijo solo para una o más páginas individuales, y no para todo su sitio web. Esto se hace en las opciones de la página individual. Simplemente vaya a la página para la que le gustaría configurarlo y configure el Comportamiento del encabezado de acuerdo con sus preferencias.

Configure el menú fijo solo para una o más páginas individuales

Cómo agregar un menú fijo usando un plugin

Si su tema no viene con la funcionalidad de menú fijo, y no es un desarrollador y / o no sabe cómo usar CSS para agregar un encabezado fijo, entonces su mejor opción es usar un plugin.

Para este propósito, recomendamos usar Mi menú fijo: menú fijo en el desplazamiento, encabezado fijo para cualquier tema, que, como su nombre indica, puede funcionar con cualquier tema, lo que le permite agregar fácilmente un encabezado fijo e incluso una barra de bienvenida. El plugin no requiere conocimientos de codificación o CSS, es liviano y compatible con todos los principales constructores y editores de WordPress, incluidos Gutenberg y WPBakery. Se basa en una clase de elemento (“Clase adhesiva” o ID) que esencialmente especifica qué parte de su sitio desea convertir en permanente.

Este plugin le permite crear un encabezado adhesivo en el desplazamiento hacia arriba y hacia abajo, agregar efectos (atenuar o deslizar), cambiar la opacidad y el color de fondo, y también decidir cuándo y en qué páginas desea que aparezca su menú adhesivo. La versión gratuita debería funcionar para la mayoría de los usuarios, mientras que la versión pro le permite cambiar el estilo CSS, así como deshabilitar la función en el desplazamiento o en ciertas páginas. Finalmente, este plugin de WordPress viene con soporte en varios idiomas y es compatible con los principales creadores de páginas.

Complemento My Sticky Menu

Después de instalar y activar el plugin, vaya a Configuración> myStickymenu.

Configuración de My Sticky Menu

Lo primero que debe establecer es qué menú desea mostrar como fijo. Puede elegir cualquiera de los menús que tenga en su tema.

Qué menú desea que se muestre como fijo

En cuanto a la configuración, lo primero que se le pedirá que haga es configurar el Índice z fijo. El índice z define el orden de pila del encabezado, es decir, si se mostrará delante o detrás de otros elementos de la página. Un elemento con un orden de pila mayor siempre se muestra delante de todos los elementos con un orden de pila menor. Dado que probablemente desee que su encabezado fijo esté siempre visible, le sugerimos que ingrese un número más alto en este campo.

A continuación, decida si desea que su menú fijo mostrar en pantallas móviles o no. En general, es una buena idea deshabilitarlo en un dispositivo móvil, ya que lo más probable es que ocupe demasiada pantalla y expulse el contenido.

La siguiente opción, Hacer visible en Scroll en la página de inicio, te permite configurar después de cuántos píxeles desea que aparezca su menú fijo en tu página de inicio. También puede configurar el Tiempo de transición pegajoso a continuación.

Opciones de plugins

El plugin también permite cierta personalización del diseño. Puede establecer el color de fondo adhesivo, la opacidad y elegir el efecto de transición. Aquí también puede definir una configuración general (para todas las páginas de su sitio, no su página de inicio) que determina después de cuántos píxeles desea que aparezca el menú.

Personalización del diseño

Hay opciones adicionales disponibles con la versión pro del plugin. Pero si todo lo que necesita es un menú fijo básico, la versión gratuita debería funcionar bien.

Pensamientos finales

Si cree que agregar un menú fijo mejoraría la navegación de su sitio y la experiencia del usuario, le decimos: ¡adelante! A menos que su sitio esté bien empaquetado, probablemente será una gran adición y un factor de usabilidad importante. Ya sea que su tema ya tenga la funcionalidad requerida o elija ir con el plugin, estamos seguros de que creará un menú pegajoso que se adapte a sus páginas como un guante.