Barra lateral flotante de WordPress: ¡comienza y funciona en 3 minutos!

Las barras laterales de los sitios de WordPress son prominentes en la parte superior de su sitio web.

A medida que más y más contenido se vuelve duradero, el contenido principal del sitio no está en la parte superior. Esto está en la parte inferior de la página.

Para aumentar realmente sus métricas, ya sea moneda, selección de correo electrónico, CTR de oferta de afiliado o cualquier objetivo que tenga, una barra lateral de WordPress flotante (o fija) mantendrá su espacio en la pantalla principal.

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

Afortunadamente, agregar una barra lateral flotante a su sitio de WordPress es fácil. Todo lo que necesitas es un simple complemento de WordPress.

¡Sigue leyendo para saber cuál es!

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

La instalación del "Widget fijo Q2W3" gratuito agrega la funcionalidad de barra lateral flotante a la mayoría de los temas de barra lateral izquierda, derecha o doble de WP. La configuración es fácil y su barra lateral adhesiva se ajusta en minutos, ya sea en una computadora de escritorio o en un dispositivo móvil.

Instalar, activar y ajustar el accesorio de barra lateral fija Q2W3

Haga clic en "Complementos" y escriba "Q2W3" (sin las comillas) en la barra de búsqueda en la esquina superior derecha de la pantalla y presione Entrar.

El primer resultado suele ser correcto.

Q2W3 Widgets de WordPress fijados por Thomas Mayer y Max Bond.

Haga clic en Instalar ahora y luego en Activar.

Aparecerá en la página con complementos activos. Si no se le redirige automáticamente a esta página, haga clic en el enlace 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 la barra lateral. No puede establecerlos en un nivel individual.

La intención es agregar un poco de CSS para controlar la distancia desde la parte superior e inferior del sitio, o deshabilitarlos por completo en los dispositivos móviles.

Si no los cambia, encontrará que la barra lateral flotante se superpone al área del encabezado.

Los campos Campo superior e Campo inferior son donde aumenta la distancia entre la barra lateral, el encabezado (campo superior) y el pie de página (campo inferior).

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

El elemento Stop ID es similar al campo inferior, excepto que no continúa flotando hasta que llega al pie de página. Puede configurar el elemento HTML de la página para que sea el punto donde se detiene el desplazamiento.

Esto es útil si tiene una página de ventas larga con un formulario de contacto grande o un área de ofertas para generar clientes potenciales o un CPA.

Para encontrar la identificación para ingresar aquí, use la herramienta de verificación de su navegador. La mayoría de los navegadores tienen una opción "Comprobar" en el menú contextual.

Para encontrar el ID del elemento, haga clic con el botón derecho en el navegador y seleccione la opción Verificar.

Esto abrirá una vista de pantalla dividida con su sitio web en un lado y 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 iniciar sesión". A la derecha, el área resaltada muestra el identificador "custom_HTML-7".

Para dejar de desplazarse por la barra lateral flotante tan pronto como se cargue el elemento, este es el identificador que debe colocarse en el campo ID de parada en la configuración general.

Donde desea que el widget deje de desplazarse, resalte el área del sitio, haga clic con el botón derecho, seleccione Verificar, luego busque la ID y coloque esta información en el campo ID de parada en Q2W3.

El intervalo de actualización está configurado en 1500 ms de forma predeterminada, por lo que está bien. Los únicos otros dos campos para cambiar son Anchura deshabilitada y Altura deshabilitada.

Deshabilitarán el desplazamiento solo en dispositivos móviles si establece estos valores. El complemento responde, pero en los dispositivos móviles, los widgets se organizan debajo de su contenido en lugar de aparecer en la barra lateral.

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

• Para desactivar un dispositivo móvil, configúrelo para desactivar 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 las tabletas más pequeñas, configure el ancho de desactivación en aproximadamente 750 píxeles.
• Las tabletas más grandes pueden controlar un ancho de pantalla de aproximadamente 990 píxeles.
• Las computadoras portátiles y de escritorio tienen tamaños de pantalla de 1440 píxeles y más.

La configuración de compatibilidad global restante se puede utilizar para solucionar problemas.

Después de establecer la configuración global, configure los widgets para permanecer en la barra lateral.

Cuando regrese a sus widgets, cada uno tiene un botón que puede marcar para convertirlo en un "widget anclado", lo que significa que flotará en su barra lateral mientras llega a usted Parámetros establecidos en la configuración global.

No hay una barra lateral flotante y cuando el usuario llega al final de la página, no hay nada más que un espacio en blanco.

El contenido de la barra lateral sigue estando visible después de que el widget se fije en su lugar. Puede ver en la imagen a continuación que la sección de la página (establecida como un widget fijo) flota hacia abajo desde la barra lateral hasta el final de la página, pero no se ha desplazado a la sección en el pie de página.

Para dejar de desplazarse hasta el pie de página, el campo inferior de este tema debe establecerse en 430 px.

Si no se establece en la configuración global, continuará desplazándose, lo que se superpondrá con el contenido del pie de página.

Este revestimiento es bueno 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 que el desplazamiento móvil se superponga, debe usar la función de identificación de parada para dejar de desplazarse por la barra lateral tan pronto como se cargue en la pantalla el elemento más bajo de la ID de la página.

El mismo problema de superposición ocurre si ajusta la posición del widget sobre el widget no fijo.

Todos sus dispositivos fijos deben colocarse debajo de los dispositivos que no están configurados para flotar. En este caso, la sección de la página se debe mover a la parte inferior de la barra de la página 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 apropiado.

Esto se puede hacer usando el widget fijo Q2W3. Inserte el widget de imagen, seleccione una imagen de la biblioteca de medios y use el campo "Enlace a:" para crear un hipervínculo.

El protocolo de teléfono hace que se pueda hacer clic en los números de teléfono. Otros códigos que puede usar para reemplazar el protocolo de cable son "callto", "wa.me" para llamadas de Skype "para llamadas de Whatsapp", sms "para hacer clic en un botón de texto y" mailto "para hacer clic (o tocar un teléfono inteligente) en el botón de correo electrónico que inicia la aplicación de correo electrónico.

¿Se pueden hacer dinámicas las bandas laterales flotantes?

Q2W3 es conveniente para las barras laterales flotantes en WordPress, pero (actualmente) no admite contenido dinámico, lo que significa que cuando arregla los widgets en su lugar, se aplican en todo el sitio.

Es compatible con el complemento Opciones de widgets y te permite controlar qué gadgets aparecen en una página, categoría y/o publicación.

Al combinar estos dos complementos, puede hacer que su barra lateral sea dinámica, receptiva y pegajosa. Estos dos complementos son una pila poderosa que puede aumentar la participación del usuario y aumentar las conversiones.