Hay acciones que conviene mantener siempre visibles mientras alguien navega por una web. Puede ser abrir WhatsApp, llamar por teléfono, consultar el carrito, entrar a una red social o ir a una sección concreta. Para eso podemos utilizar botones flotantes en WordPress. Estos permanecen en una posición fija aunque el usuario siga bajando por la página, de modo que no tiene que volver al menú ni buscar el enlace cada vez que quiera usarlo.
El tipo de botón dependerá mucho de la web. En una página de servicios puede servir para pedir información o reservar una cita. En una tienda quizá tenga más sentido mostrar el carrito, el soporte o un acceso rápido a las promociones. También podemos agrupar varios accesos dentro de un único botón que se despliega al tocarlo.
Ahora bien, conviene no pasarse. Si colocamos demasiados iconos flotando en la pantalla, pueden terminar tapando textos, botones o partes importantes del diseño. En móvil esto se nota todavía más, porque el espacio disponible es menor. Por eso, antes de añadirlos, merece la pena pensar qué acción queremos facilitar de verdad. A veces basta con un solo botón bien ubicado y fácil de reconocer.
WordPress no trae una opción general para crearlos en todos los temas. Algunos constructores visuales sí permiten fijar elementos en pantalla, aunque otra solución bastante cómoda es usar un plugin preparado para ello. Según la herramienta que elijamos, podremos cambiar el icono, la posición, el tamaño, los efectos o las páginas donde aparecerá. También es posible mostrar un botón en ordenador y otro diferente en móvil, o ocultarlo en ciertos dispositivos.
En esta guía veremos qué son los botones flotantes en WordPress, en qué situaciones pueden ser útiles y qué plugins nos permiten añadirlos sin preparar toda la estructura con código. La idea es mejorar el acceso a ciertas acciones sin que el botón termine molestando durante la navegación.
Tabla de contenidos
El menú flotante queda fijo en una zona de la pantalla mientras seguimos bajando por la página. Podemos encontrarlo en un lateral, en una esquina o junto al borde inferior, separado del menú que normalmente aparece en la cabecera.
En ese espacio podemos colocar varios accesos rápidos. Uno puede abrir WhatsApp, otro iniciar una llamada, enviar un correo o llevarnos a una sección concreta de la web. También sirve para mostrar enlaces a redes sociales sin tener que incluirlos dentro del contenido.
La forma de mostrarlo también puede variar. En algunos casos veremos un único botón fijo. En otros, aparecerá un icono principal que, al pulsarlo, despliega varias opciones. Esta última forma viene bien cuando queremos ofrecer distintos métodos de contacto sin llenar la pantalla de iconos.
Podemos utilizar un menú flotante para:
- Mantener a mano una acción importante mientras el usuario navega.
- Permitir que nos contacten sin tener que volver a la cabecera.
- Llevar al visitante rápidamente hacia una sección concreta.
- Mostrar las redes sociales sin mezclarlas con el contenido de la página.
- Facilitar el recorrido por páginas que tienen bastante extensión.
- Dar visibilidad a una promoción, un formulario o una llamada a la acción.
- Añadir accesos rápidos al carrito, la cuenta del cliente o el soporte de una tienda online.
La idea es que estos botones sirvan como un atajo. Si están bien colocados, pueden facilitar bastante la navegación sin llamar más la atención de la necesaria.
En una web de servicios, por ejemplo, podemos dejar visible un botón para pedir presupuesto. Así el visitante no tiene que buscar la página de contacto cada vez que quiera escribirnos. En una tienda online, ese acceso podría llevar al carrito, al soporte o a la cuenta del cliente. También puede servir para volver arriba cuando la página es muy larga.
Eso sí, conviene no recargar la pantalla. Si el botón ocupa demasiado, se mueve todo el tiempo o aparece junto a otros elementos similares, puede terminar tapando textos, imágenes o botones importantes. En móvil este problema suele notarse todavía más.
La ubicación también merece una prueba. La esquina inferior derecha es una de las zonas más utilizadas, pero allí pueden coincidir el aviso de cookies, el chat de soporte o algún control del navegador. Después de configurarlo, lo mejor es revisar varias páginas y distintos tamaños de pantalla.
Al final, los botones flotantes en WordPress funcionan como atajos que siguen disponibles mientras navegamos. Bien colocados, pueden facilitar una acción concreta; mal ajustados, pueden convertirse en una molestia. Por eso merece la pena cuidar tanto su función como el espacio que ocupan.
En Divi también podemos dejar una barra lateral visible mientras bajamos por la página. Ahí podemos colocar un formulario, una imagen, varios enlaces, widgets o algún botón que queramos tener siempre a mano.
No hace falta instalar otro plugin para conseguirlo, aunque sí tendremos que añadir algo de código y ajustar unos estilos. Si quieres ver todos los pasos, puedes seguir esta guía sobre cómo crear una barra lateral fija en widgets de Divi
Plugin Buttonizer Smart Floating / Sticky Buttons
Buttonizer nos permite añadir botones flotantes en WordPress y reunir varias acciones dentro de un mismo menú. Puede venir bien cuando queremos dejar siempre a mano accesos como WhatsApp, una llamada, el correo, las redes sociales o una página concreta de la web.
Todo se configura desde un editor visual. Desde ahí podemos mover los botones, cambiar su aspecto y decidir qué ocurrirá al pulsarlos. También es posible mostrar unas opciones en móvil y otras distintas en ordenador, algo útil cuando no queremos ofrecer exactamente los mismos accesos en todos los dispositivos.
Podemos crear un solo botón o preparar un pequeño menú que se despliegue al hacer clic. Dentro de él caben acciones muy distintas: abrir una conversación de WhatsApp, iniciar una llamada, enviar un correo, mostrar un mapa, descargar un archivo o dirigir al usuario hacia cualquier URL.
Para instalar este plugin lo hacemos desde nuestro buscador de plugin o bien de forma manual, podemos seguir la guía de instalar plugins en WordPress, en cualquiera de los casos cuando ya lo tengamos instalado vamos a ver un botón en nuestro panel de administración que corresponde a este plugin,
Como podemos ver tenemos varias opciones en las que hacer clic para iniciar el proceso de edición de los botones, al hacer clic en cualquiera de estos dos se nos va a mostrar una nueva página con todos los ajustes generales del botón; sin embargo, si es el primer botón que creamos se nos mostrara unas plantillas de las que podemos elegir la que más nos guste y se adapte a nuestro sitio.
De esta lista, una vez elijamos el diseño que nos parece mejor, vamos a poder elegir la funcionalidad de los botones, para esto vamos a hacer clic en el botón de edición respectivo.
En cualquiera de los casos, ya sea que agreguemos un nuevo elemento o editemos uno existente, vamos a tener presente siempre el mismo panel con 3 submenús, general, estilos y avanzado. De manera general, la pestaña de avanzado no es algo que vamos a tomar mucho en cuenta, ya que en la versión gratuita solo nos permite asignarle un ID personalizando o una clase personalizada. Sí estamos en la versión de pago, nos permitirá programar los horarios de aparición de la opción, así como las páginas en las que se mostrara.
Con respecto a la opción de estilos, tendremos disponible la posibilidad de modificar el botón en WordPress, tanto en color de fondo, color de texto, radio de los bordes, icono, color del icono y más, solo tendremos que acceder a esta sección y ver las opciones que nos permiten modificar, toda esta sección es accesible sin tener la versión de pago del mismo.
Por último, y no menos importante, tenemos la sección general, donde vamos a poder seleccionar de entre una lista lo que queremos hacer con este botón, es decir, cuál va a ser su función, en la que tenemos:
- Agregar URL
- Enlace a una página existente
- Link a WhatsApp
- Widget de WhatsApp
- Compartir esta página en (redes sociales o email)
- Imprimir página
- Google maps
- Enlaces a redes sociales
Entre otras opciones más que vale la pena ver a detalle, una vez estemos agregando nuestros elementos rápidos, también contamos con ajustes generales de cada sección, así como posicionamiento de los iconos por si no necesitamos que estén ubicados donde vienen por defecto, un plugin bastante completo que recomendamos en caso de que necesitemos algo más estilizado.
Plugin Simple Floating Menu
Simple Floating Menu sirve para dejar varios accesos visibles mientras el usuario recorre la página. Podemos usarlo para enlazar una red social, abrir un formulario, llevar a otra página o saltar a una sección concreta del contenido.
El menú puede colocarse en distintos puntos de la pantalla, así que no estamos obligados a dejarlo siempre en la misma esquina. Conviene probar varias posiciones y elegir la que no se cruce con el aviso de cookies, el chat o los botones del propio diseño.
Podemos añadir los elementos que necesitemos y asignar un icono diferente a cada uno. El plugin incluye bastantes opciones, aunque también permite cambiar detalles como el tamaño, la forma, los colores y el texto que aparece al pasar sobre cada botón.
Los enlaces pueden llevar tanto a zonas de la propia web como a páginas externas. También acepta enlaces ancla, algo útil para mover al visitante hasta un apartado concreto sin salir de la página. En cada botón elegimos si el destino se abrirá allí mismo o en otra pestaña.
Si necesitamos repetir la configuración en otra web, podemos exportarla e importarla después. Así no tenemos que volver a preparar el menú desde cero.
Float Menu permite dejar un grupo de accesos visible mientras el usuario recorre la página. Podemos usarlo para mostrar WhatsApp, redes sociales, un formulario, la página de contacto o cualquier enlace que queramos mantener siempre a mano.
El menú puede colocarse en vertical, a uno de los lados de la pantalla, o convertirse en una barra horizontal fija en la parte superior o inferior. También podemos ajustar la distancia respecto a los bordes para evitar que se cruce con otros elementos de la web.
No estamos limitados a un solo menú. Es posible crear varios y preparar cada uno con una configuración distinta. Esto puede servirnos, por ejemplo, si queremos mostrar unos accesos en ciertas páginas y utilizar otra disposición en secciones diferentes.
En cuanto al diseño, podemos cambiar los colores, la forma, el tamaño de los botones y la separación entre ellos. Para los iconos utiliza la biblioteca de Font Awesome, donde encontramos opciones para representar llamadas, mensajes, redes sociales y otras acciones habituales.
También podemos controlar en qué tamaños de pantalla se verá. El plugin permite ocultar el menú en móviles o en pantallas grandes y ajustar el punto exacto a partir del cual queremos cambiar su visibilidad.
Cada botón puede dirigir a una URL, una red social o una sección concreta mediante un enlace ancla. Mientras preparamos todo, el modo de prueba nos deja mostrar el menú solo a los administradores, sin que los visitantes lo vean antes de que esté terminado.
Float Menu funciona con temas y editores como Divi, Elementor o Gutenberg. Su versión Pro añade opciones más completas, entre ellas submenús, reglas de visibilidad, programación, desplazamiento suave, seguimiento con Google Analytics y apertura de ventanas emergentes.
Floating Button sirve para dejar un acceso fijo en la pantalla mientras el usuario navega. Puede funcionar como un botón sencillo, un pequeño menú o una zona rápida de contacto. Desde ese botón podemos abrir varios accesos. Por ejemplo, una llamada, un correo, una página concreta, el inicio de sesión o el registro de usuarios. También es posible desplegar las opciones hacia un lado o hacia arriba, según cómo encaje mejor en el diseño.
El aspecto se puede ajustar bastante. Hay formas circulares, cuadradas, rectangulares y con bordes redondeados. Para los iconos utiliza Font Awesome, así que tenemos muchas alternativas para representar cada acción.
También podemos cambiar colores, añadir efectos al pasar el cursor y mostrar una pequeña etiqueta que explique para qué sirve cada botón. Esto viene bien cuando el icono, por sí solo, podría no ser del todo claro.
Otra posibilidad es mostrar unas opciones en móvil y otras en ordenador. Por ejemplo, podemos dejar visible el botón de llamada solo en teléfonos y ocultarlo en pantallas grandes. El plugin también admite shortcodes, de modo que podemos colocarlo en una página concreta en lugar de mostrarlo en toda la web. Y si necesitamos repetir la configuración en otro sitio, podemos exportarla e importarla.
La versión Pro añade más controles, como botones sin límite, reglas según la página o el rol del usuario, soporte multidioma y condiciones más precisas para decidir dónde se muestra cada acceso.
Conclusión
Los botones flotantes en WordPress pueden venir muy bien cuando hay una acción que queremos dejar siempre a mano. Puede ser abrir WhatsApp, llamar, entrar al carrito, ir al formulario de contacto o saltar a una zona concreta de la página.
No todos los plugins hacen lo mismo. Algunos están pensados para mostrar un único botón y poco más. Otros permiten montar menús completos, añadir varias acciones, crear submenús o decidir en qué páginas y dispositivos aparecerán.
Por eso, antes de instalar uno, conviene pensar qué necesitamos de verdad. Si solo queremos mostrar un botón de WhatsApp, probablemente no haga falta utilizar una herramienta llena de opciones que nunca vamos a tocar.
Buttonizer ofrece bastante margen para personalizar el comportamiento y el diseño. Simple Floating Menu va más al grano y permite preparar un menú fijo con iconos. Float Menu da más juego con la posición y con los diseños verticales u horizontales. Floating Button, en cambio, puede encajar mejor cuando queremos reunir varias acciones dentro de un mismo botón.
Si ya trabajamos con Divi, también podemos preparar una barra lateral o un elemento fijo dentro de la propia plantilla. Así evitamos añadir otro plugin, aunque tendremos que cuidar mejor los estilos y comprobar cómo se comporta en cada tamaño de pantalla.
La parte más importante no es cuántos botones podemos añadir, sino cuántos hacen falta. En móvil, dos o tres elementos flotantes pueden terminar tapando contenido, chocando con el aviso de cookies o colocándose encima de un chat.
Lo mejor es dejar solo el acceso que realmente ayude al visitante. Si el botón se entiende rápido, está bien ubicado y no molesta al navegar, cumplirá su función sin llamar más la atención de la necesaria.
¿Te ha resultado útil este artículo?
Equipo de soporte WordPress y WooCommerce en Webempresa.
