Mejor plugin para añadir un botón o menú flotante en WordPress + Guía configuración

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):

• Menú de navegación flotante
• widget flotante de cualquier tipo
• Formularios de suscripción para newsletter
• Botones para compartir en redes sociales
• Botón flotante para contactar por chat

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

• En la parte superior de la página: menú o cabecera, cesta de clientes para una tienda;
• En la barra lateral: varias llamadas a la acción en los widgets;
•  En la parte inferior de la pantalla: como los botones de compartición social.

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.

Para reducir el elemento sólo si hay una barra de administración (si el usuario está conectado, por ejemplo), marque esta casilla :

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:

• en pantallas más pequeñas que x píxeles
• en pantallas de más de x píxeles.

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:

• La opción Z-index le permite superponer su elemento flotante sobre los elementos de su tema. Sólo especifique un valor (por ejemplo, 100, 1000 o más) si su elemento aparece debajo de otro;
• Elementos de empuje: elimina el elemento flotante cuando alcanza un cierto nivel de la página, normalmente el pie de página;
• Modo Legacy: en caso de que tenga que usar una versión antigua del plugin para hacerlo compatible con su tema. Así que si acabas de instalarlo, no lo toques;
• Modo Debug: para resolver problemas generados por una elección incorrecta de selectores.

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.

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:

• Barra dinámica de progreso de lectura para ubicarte dentro del artículo;
• Botón de suscripción al boletín para asegurarse de que no se pierda ninguno de nuestros fabulosos consejos de WordPress ?!

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).

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í:

• Una extensión que le permite flotar cualquier elemento de su sitio;
• Un plugin gratuito y probado;
• Una herramienta rápida para aprender a usar;
• … y educativo: pegar sólo un elemento evita la sobrecarga innecesaria de sus páginas.

Y para los puntos negativos:

• La posibilidad de fijar un solo elemento, precisamente! Por ejemplo, si su menú principal y su menú móvil no tienen el mismo ID/clase, tendrá que hacer una elección. Dicho esto, los desarrolladores especifican en sus FAQs que la próxima actualización importante del plugin debería extender esta función a varios elementos. Un caso que debe continuar, por lo tanto;
• El plugin requiere conocimientos de CSS para inspeccionar el código y encontrar el selector correcto para el elemento pegajoso;
• No es posible personalizarla sin añadir CSS a su hoja de estilo: si, por ejemplo, su encabezado es transparente en un visual oscuro, no será necesariamente visible en una página de fondo blanco;
• Un plugin no traducido al francés (pero aún accesible).

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.