Te has dado cuenta que una vez que tus visitantes llegan a algunas páginas o entradas de tu blog, ya no tienen ninguna visibilidad sobre la oferta que estás ofreciendo o las secciones más importantes de tu menú de navegación ¿verdad?

Claro que sí, por eso estás aquí.

En este artículo te voy a mostrar el mejor plugin para poner un menú flotante en WordPress, que también te servirá para añadir botones, widgets o lo que quieras.

Qué es un menú flotante también conocido como sticky o pegajoso

Por si no lo sabes, una vez que un elemento se ha convertido en flotante, sticky, pegajoso o como lo quieras llamar, permanecerá fijo durante la navegación cuando el usuario baja o hace scroll por la página.

En otras palabras, incluso si el usuario se desplaza por una página larga, el menú o botón flotante se mantendrá siempre visible y listo para ser usado siempre.

El objetivo es atraer la atención sin distraer al usuario de la lectura. Menos intrusivo que un popup, un menú flotante en WordPress guía al lector hacia el objetivo de conversión que tengas marcado para tu web.

A continuación te enseño como llevar todo esto a la práctica así que ¡sigamos!

Cómo añadir un botón, widget o menú de navegación flotante (sticky o pegajoso) con plugins WordPress

El plugin Sticky Menu (or Anything!) on Scroll para WordPress podrás hacer que cualquier elemento de vuestra web sea flotante.

Libera tu creatividad, todo está permitido (o casi):

Lo único que tienes que hacer es elegir el elemento que te interesa modificar, y elegir la mejor ubicación:

Volviendo al plugin, fue creado por Mark Senff, desarrollador canadiense.

Está disponible para su descarga gratuita y actualmente cuenta con más de 90.000 instalaciones activas, con una calificación de 5 estrellas por parte de los usuarios de la comunidad WordPress que ya lo han probado.


sticky menu wordpress

Después de descargar y activar el plugin, ves a las opciones de configuración, ya sea desde la pestaña Plugins del panel de administración de WordPress o desde la pestaña Ajustes > Sticky Menu (or Anything!)

Vale, ¿y ahora qué?

Cómo hacer un botón, widget o menú flotante (pegajoso) en WordPress

Ahora, súbete las mangas: incluso si este plugin hace tu tarea mucho más fácil, todavía tienes que poner tus manos un poco en el código.

Coraje, te aseguro que tampoco será el mar para beber: para definir el elemento que quieres pegar, tienes que encontrar su ID o su clase.

Para examinar el código fuente de su tema y encontrar la clase CSS de su futuro elemento flotante, nada podría ser más fácil: utilice el inspector de código de su navegador.

Todo lo que tiene que hacer es mover el ratón sobre el elemento en cuestión y ¡listo! Como por arte de magia, se resaltan las líneas de código correspondientes. Todo lo que tienes que hacer es escribir la identificación.

Así que incluso sin encontrar el selector correcto sigue siendo simple y rápido, estamos de acuerdo en que esta manipulación es para los usuarios de WordPress que ya tienen un poco de experiencia y se sienten cómodos con el CSS.

Para ir más allá con CSS, te recomiendo CSS Express, su programa para aprender a personalizar la apariencia de cualquier sitio de WordPress. Haga clic aquí para obtener más información.

Deje un espacio libre en la parte superior de la página

Por defecto, el plugin Sticky Menu pega el elemento en la parte superior de la pantalla. Puede que prefiera dejar un poco de espacio, o incluso mantener el elemento flotante en el centro de la página: en este caso, indica el margen deseado en píxeles.
elemento menu y boton o widget flotante en wordpress
Para reducir el elemento sólo si hay una barra de administración (si el usuario está conectado, por ejemplo), marque esta casilla :
elemento menu y boton o widget flotante en wordpress

Personalización responsive

Para una mejor experiencia del usuario, puede personalizar los puntos de ruptura de la pantalla de su elemento y elegir borrar el elemento flotante:

elemento menu y boton o widget flotante en wordpress
Finalmente, recuerde guardar los ajustes antes de salir del tablero… A riesgo de tener que configurar todo de nuevo;).

Configuración avanzada

Para los más quisquillosos y/o ingeniosos, algunos ajustes avanzados le permiten ir más lejos en la configuración:
elemento menu y boton o widget flotante en wordpress

Sin embargo, si tiene más preguntas, hay una FAQ disponible directamente en el panel de control.

3 ejemplos de menús, botones y widgets flotantes bien pensados

Ahora está listo para adjuntar cualquier elemento a su sitio, pero se pregunta por dónde empezar? Aquí hay algunos ejemplos para inspirarte.

Widget flotante para suscribirse a newsletter

Para favorecer las conversiones en artículos de blog, un widget de barra lateral sigue flotando: el que le ofrece un sencillo formulario de suscripción para recibir el boletín.
elemento menu y boton o widget flotante en wordpress
Inteligente, ¿verdad?

Barra o menú flotante en cabecera

Si eres un adicto a los tweets, probablemente quieras estar atento a tus notificaciones mientras te desplazas por la línea de tiempo.

Twitter ha encontrado la solución integrando un encabezado fijo, más bien delgado y discreto, que puede ser notado u olvidado en cualquier momento.

También hemos optado por integrar un encabezado pegajoso que incluye:

Botones flotantes en WordPress para compartir en redes sociales

Para animar a los lectores a compartir artículos con un solo clic, la plataforma Medium France ha optado por añadir botones flotantes de intercambio social a la derecha (al igual que la Marmite, por cierto).
elemento menu y boton o widget flotante en wordpress

Después de probar muchas extensiones, Social Warfare nos pareció la solución más efectiva para esto.

La extensión Social Warfare, para crear sus botones de compartición Social Warfare Basic le permite hacer flotar los botones de compartición social, pero si esto no es posible con la solución que utiliza, Sticky Menu (o Anything!) en el scroll será muy útil.

Conclusión: ¿Tienes ya tu menú y botones flotantes para WordPress listos?

Bueno, admito que después de probar este plugin, mi opinión sigue siendo un poco confusa….

En el lado positivo, sí:

Y para los puntos negativos:

Con Sticky Menu, aún no tenemos la solución milagrosa para añadir elementos flotantes a nuestro sitio de WordPress.

Pero no te preocupes, no vamos a dejar que te pateen por la espalda

Si quieres arreglar un widget en tu página, la extensión Q2W3 Fixed Widget es una alternativa que merece la pena conocer.

Esta vez, puedes hacer flotar el widget sin tener que introducir el código para encontrar su clase CSS, puede tener una cierta ventaja dependiendo de tus proyectos.

En resumen, el Sticky Menu (o cualquier cosa) en el plugin Scroll!, aunque fácil de usar, no está pensado para principiantes «reales», sino para usuarios de WordPress ya acostumbrados a manejar clases CSS.

Para un mejor renderizado, también nos habrían gustado algunas opciones adicionales de personalización: jugar con el contraste o los colores, ofrecer una apariencia a un cierto nivel de la página, o simplemente poder integrar varios elementos flotantes diferentes.

Y tú, ¿qué opinas del uso de elementos flotantes en un sitio web? Después de leer este artículo, ¿quieres probar esta extensión? Si aún tienes dudas, o por el motivo que sea este plugin no es para ti, aquí te dejo un video muy interesante donde podrás ver opciones alternativas:

✅ PLUGIN BOTONES FIJOS (FLOTANTES) WORDPRESS ????⚪⚫????????

Video de Plugins Web – WordPress