Saltar al contenido

Cómo añadir un menú o un elemento flotante en WordPress

Cómo añadir un menú o un elemento flotante en WordPress
3 (60%) 2 vote[s]

2XwL66C

Eso es todo: has diseñado un gran sitio de WordPress.

Pero te das cuenta de que, desde tu página «Acerca de» o desde una entrada de blog, tus visitantes ya no tienen ninguna visibilidad sobre la oferta que estás ofreciendo en este momento.

¿Cómo destacar esta magnífica oferta y fomentar la conversión de sus visitantes?

La respuesta puede ser muy simple: ¡ponga un banner flotante (o «pegajoso» en inglés) en la barra lateral! Y por qué no aprovechar la oportunidad para hacer que su menú también flote, para que sea más fácil para sus visitantes navegar…

Concretamente, una vez que su elemento se ha convertido en flotante, permanecerá fijo durante la navegación. En otras palabras, incluso si se desplaza por una página larga, no hay riesgo de ahogamiento: el elemento pegajoso permanece flotando y accesible haciendo clic en cualquier momento. ¡Salvado! ¡Salvado!

El objetivo es atraer la atención sin distraer al usuario de la lectura. Menos intrusivo que un popup, un menú flotante guía al lector hacia su objetivo de conversión.

Echa un vistazo, por ejemplo, a cómo el Pot te propone suscribirte a su boletín de noticias justo arriba (estoy diciendo que no estoy diciendo nada 😉).

Para lograr esto en WordPress, se utilizará la extensión…..

Cómo añadir elementos o menú de navegación pegajoso / sticky al hacer Scroll

Amigos angloparlantes, lo habréis entendido, como su nombre indica tan bien, el plugin Sticky Menu os permite fijar en la pantalla cualquier elemento de vuestra web.

Sé creativo, todo está permitido (o casi): menú de navegación, widgets, suscripción a boletines, botón para compartir en redes sociales…. Entonces todo lo que tienes que hacer es elegir la mejor ubicación para tu elemento flotante:

  • 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;
  • o en la parte inferior de la pantalla: como los botones de compartición social.

Volvamos a nuestro plugin. Fue diseñado por Mark Senff, desarrollador canadiense. Está disponible para su descarga gratuita y actualmente cuenta con más de 80.000 instalaciones activas, con una calificación de 5 estrellas /5 por parte de la comunidad WordPress. Así que puedes descargarlo con los ojos cerrados.

Descargar Sticky Menu

Vale, ¿y ahora qué?

Después de descargar y activar el plugin, vaya a las opciones de configuración, ya sea desde la pestaña Extensiones de su tablero de WordPress o desde la pestaña Configuración > Menú Pegajoso (o Cualquier cosa!).

Cómo hacer un elemento flotante (pegajoso)

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 si 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, indique 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 esponsiva

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

Un widget opt-in flotante

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?

En cabecera flotante (cabecera pegajosa)

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:

  • una barra dinámica de progreso de lectura para ubicarte dentro del artículo;
  • un botón de suscripción al boletín para asegurarse de que no se pierda ninguno de nuestros fabulosos consejos de WordPress 😉!

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

Si quieres explorar la pregunta, también puedes leer el artículo muy completo de Nicolas sobre los botones para compartir que explica a lo largo, ancho y a través de sus intereses, pero también sus límites.

Después de probar muchas extensiones, Social Warfare nos pareció la solución más efectiva, y si estás interesado, te dejo echar un vistazo al video tutorial de Alex.

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

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 ser explorada.

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?