Barra lateral flotante de WordPress: ¡haz que funcione en 3 minutos!

La barra lateral en los sitios de WordPress se destaca en la parte superior de su sitio web.

Con cada vez más contenido de formato largo, las propiedades inmobiliarias principales en los sitios web no están en la parte superior. Está mucho más abajo en la página.

Para aumentar realmente sus métricas, ya sea monetarias, suscripciones de correo electrónico, clics en ofertas de afiliados o cualquier objetivo que tenga, las barras laterales flotantes (o fijas) de WordPress mantienen su propiedad inmobiliaria principal en la pantalla.



Siempre que sea en una computadora de escritorio, tableta o PC, eso es.

Afortunadamente, agregar una barra lateral flotante a su sitio de WordPress es muy simple. Todo lo que necesita para hacerlo es un simple complemento de WordPress.

¡Sigue leyendo para saber cuál es!

 

¿Cómo obtener una barra lateral flotante en su sitio web de WordPress?

La instalación del 'Widget fijo Q2W3' gratuito agrega la funcionalidad de la barra lateral flotante a la mayoría de los temas de WP con barras laterales izquierda, derecha o doble. La configuración es extremadamente simple y sus barras laterales adhesivas se configuran en minutos, ya sea en una computadora de escritorio o incluso en dispositivos móviles.

 

Instalación, activación y configuración del complemento de barra lateral fija Q2W3

Haga clic en 'Complementos' y escriba 'Q2W3' (sin comillas) en la barra de búsqueda en la parte superior derecha de su pantalla, luego presione enter.

El primer resultado suele ser el correcto.

Q2W3 Widget fijo para WordPress por Thomas Maier y Max Bond.

  Búsqueda de complementos Q2W3

Presione 'Instalar ahora', luego haga clic en 'Activar'.

Aparecerá en su página de complementos activos. Si no es redirigido a esa página automáticamente, haga clic en el enlace de complementos en la barra de navegación izquierda.

Haga clic en Configuración.

Estas son configuraciones globales, lo que significa que afectan a todos los widgets flotantes en su barra lateral. No puede configurarlos en un nivel individual.

El propósito es agregar un poco de CSS para controlar la distancia desde la parte superior e inferior de su sitio, o deshabilitarlos por completo en los dispositivos móviles.

Si no cambia estos, puede encontrar que su barra lateral flotante se superpone con su área de pie de página.

Los campos 'Margen superior' y 'Margen inferior' es donde aumenta el espacio entre la barra lateral, el encabezado (margen superior) y el pie de página (margen inferior).

Estos serán diferentes según el tamaño de su logotipo, encabezado y pie de página.

El elemento Stop ID es similar al margen inferior, solo que en lugar de continuar flotando hasta llegar al pie de página, puede configurar el elemento HTML de su página como el lugar para detener el desplazamiento.

Esto es útil si quizás tiene una página de ventas de formato largo que termina con un formulario de contacto grande o un área de envío que se usa para la generación de clientes potenciales o una oferta de CPA.

Para encontrar la ID para poner aquí, use la herramienta de inspección de su navegador. La mayoría de los navegadores tienen la opción 'inspeccionar' en el menú contextual.

Para encontrar el elemento ID, haga clic derecho en su navegador y seleccione la opción 'inspeccionar'.

Esto abrirá una vista de pantalla dividida con su sitio en un lado, los elementos de estilo HTML en el otro.

En la captura de pantalla anterior, puede ver que el elemento resaltado a la izquierda es el área del widget 'después de la entrada'. A la derecha, el área resaltada muestra que el ID es 'custom_HTML-7'.

Para evitar que la barra lateral flotante se desplace tan pronto como se cargue ese elemento, esa es la ID que debe colocarse en el campo ID de detención en la configuración general.

Donde quiera que el widget deje de desplazarse, resalte el área en su sitio, haga clic con el botón derecho, seleccione inspeccionar y busque la ID, luego coloque esa información en el campo ID de parada para Q2W3.

El intervalo de actualización está establecido en 1500 milisegundos de forma predeterminada y está bien dejarlo así. Los únicos otros dos campos para cambiar son 'Deshabilitar ancho' y 'Deshabilitar alto'.

Estos solo deshabilitarán la función de desplazamiento en el móvil SI establece los valores. El complemento responde, pero en dispositivos móviles, los widgets se apilan debajo de su contenido en lugar de mostrarse en la barra lateral.

Para una mejor experiencia de usuario, deshabilítelos para pantallas más pequeñas.

  • Para deshabilitar en dispositivos móviles, configure esto para deshabilitar alrededor de 500 px. La mayoría de los teléfonos inteligentes tienen un ancho máximo de 414 píxeles.
  • Para deshabilitar también en tabletas más pequeñas, configure el ancho de deshabilitación en alrededor de 750 px.
  • Las tabletas más grandes pueden administrar un ancho de pantalla de alrededor de 990 px.
  • Las computadoras portátiles y de escritorio tienen tamaños de pantalla en la región de 1440 px y superiores.

El resto de la configuración global de compatibilidad está ahí para la resolución de problemas.

Una vez que haya establecido la configuración global, configure qué widgets desea que sean fijos en su barra lateral.

Cuando regrese a sus widgets ahora, cada uno tendrá un botón que puede marcar para convertirlo en un 'widget fijo', lo que significa que flotará en su barra lateral hasta que alcance los parámetros que estableció en la configuración global.

Sin la barra lateral flotante, cuando los usuarios llegan al final de la página, no hay nada más que un espacio en blanco.

Con los widgets fijos en su posición, el contenido de la barra lateral permanece visible. Puede ver en la imagen a continuación que la sección de páginas (establecida como un widget fijo) está flotando hacia abajo en la barra lateral hasta la parte inferior de la página, pero no tan lejos como para llegar a la sección de pie de página.

Para evitar que el desplazamiento se ejecute en el pie de página, el 'Margen inferior' debe establecerse para este tema en 430 px.

Sin configurar eso en la configuración global, continuaría desplazándose provocando una superposición con el contenido en el pie de página.

Este relleno está bien en el escritorio, pero en pantallas más pequeñas, como Q2W3 es un complemento receptivo, la barra lateral cae debajo del contenido.

Para evitar la superposición en el desplazamiento móvil, debe usar la funcionalidad Detener ID para detener el desplazamiento de la barra lateral tan pronto como el elemento de ID más bajo de la página se cargue en la pantalla.

El mismo problema de superposición ocurre si corrige la posición de los widgets sobre los widgets que no están fijos en su posición.

Todos sus widgets fijos deben colocarse debajo de aquellos que no están configurados para flotar. En este caso, la sección de páginas debe moverse a la parte inferior de la barra lateral principal.

¿Puedo hacer un botón flotante en la barra lateral?

Si todo lo que desea es un botón flotante en lugar de una barra lateral flotante, hay un complemento llamado Botón de acción flotante que puede ser más adecuado.

Se puede hacer con el complemento Q2W3 Fixed Widget. Inserte un widget de imagen, elija una imagen de su galería de medios y use el campo 'enlace a:' para crear un hipervínculo.

El protocolo tel hace que se pueda hacer clic en los números de teléfono. Otros códigos que puede usar para reemplazar el protocolo tel son 'callto' para llamadas de Skype, 'wa.me' para una llamada de Whatsapp, 'sms' para hacer clic en los botones de texto y 'mailto' para los botones de correo electrónico que inician un aplicación de correo electrónico cuando se hace clic (o se toca en los teléfonos inteligentes).

 

¿Se puede hacer dinámica una barra lateral flotante?

El Q2W3 es útil para las barras laterales flotantes de WordPress, pero (actualmente) no admite contenido dinámico, lo que significa que, cuando fija los widgets en su posición, se aplican en todo el sitio.

Es compatible con el complemento Opciones de widgets que le permite controlar qué widgets se muestran por página, categoría y/o publicación.

Combine esos dos complementos y puede hacer que sus barras laterales sean dinámicas, receptivas y pegajosas. Esos dos complementos son una pila poderosa para aumentar la participación del usuario y aumentar sus conversiones.