En muchas ocasiones nos vemos en la necesidad de destacar algún Widget de la barra lateral de nuestro blog o web. En este post vamos a ver cómo podemos destacar un widget de la web al hacer que dicho widget de WordPress quede fijo, flotante o sticky en la barra lateral cuando hacemos scroll en la página.

En un post anterior vimos cómo diseñar un widget a medida con el Divi builder. En este post vamos a complementar ese anterior, haciendo que ese widget quede fijo cuando se hace scroll sobre la página.

 

 

Para que el widget quede fijo o flotante vamos a usar un plugin gratuito Q2W3 Fixed Widget

 

 

 

suscripción 10€/mes cursos joaquin barberá horizonweb

VER CURSOS

 

1.- Plugin Q2W3 Fixed Widget para hacer flotante o fijo un widget en WordPress

 

Q2W3 Fixed Widget es un plugin gratuito que nos va a añadir un checkbox a todos los widgets que tengamos añadidos.

El checkbox tendrán el texto: “Fixed Widget (widget fijo)”, y si lo seleccionamos haremos que ese widget en concreto se haga fijo o flotante. Es decir, que cuando hagamos scroll el widget quedará fijo y por tanto siempre será visible.

Las opciones de configuración del plugin las tenemos en: “Apariencia > Opciones de Fixed Widget (widget fijo)”. Estas opciones de configuración nos van a permitir principalmente:

 

i.- Desactivar esta funcionalidad en dispositivos móviles: los widgets del sidebar, cuando se muestran en dispositivos móviles, aparecen al final del contenido de la página. Es decir, no se muestran en el lateral de la página como sucede cuando se visualizan en un monitor de ordenador (Escritorio). Por este motivo, no tiene ningún sentido que un widget quede fijo o flotante cuando se está mostrando en un dispositivo móvil.

El plugin permite establecer un ancho o alto mínimo de pantalla, a partir del cual el widget ya no quedaría flotante.

Otra opción es hacer que los widgets no se muestren en dispositivos móviles. Para eso necesitaríamos otro plugin gratuito que te explico en este post: Cómo no mostrar widgets de WordPress en móviles

 

ii.- Margen superior e inferior: el header de cada sitio web tiene una altura diferente. Esto podría provocar que parte del widget fijo no se visualizara. Por este motivo podremos establecer un margen superior, que deber ser la altura del header que tengamos en nuestra web más un poquito.

 

parte de widget flotante ocultro detrás del header o cabecera

Vemos que parte del widget flotante queda oculto detrás del header de la web

 

En este post puedes ver diferentes diseños de header de una web wordpress: Diseños header WordPress

 

iii.- Stop ID (Identificador límite): Cuando llegamos al final del scroll en una página, la web muestra el footer. En este caso no nos interesa que el widget quede flotante, ya que si quedara superpuesto con el footer, no se vería bien y quedaría cutre. Es decir, que el widget ha de quedar fijo o flotante mientras hacemos scroll, hasta que llegamos al final del scroll donde el widget debe desfijarse y quedar por encima del footer.

Para esto el plugin nos permite añadir el identificador a partir del cual el widget ya no debe quedar flotante.

Esto puede cambiar en función de la plantilla que estemos utilizando. En el caso de la plantilla Divi, que es la que utilizo y recomiendo, el id es main-footer

 

cómo evitar que el widget fijo quede por delante del footer

Widget flotante que queda superpuesto sobre el footer

 

DESCUENTOS DIVI 20%

 

 

2.- Configuración del plugin Q2W3 Fixed Widget para poner un widget flotante

 

Una vez instalado el plugin en WordPress, procederemos a activarlo.

IR AL PLUGIN Q2W3 Fixed Widget

 

A continuación, accederemos a la pantalla de configuración a través del panel de administración: “Apariencia > Opciones de Fixed Widget (widget fijo)”.

 

i.- Margen superior: esta opción la veíamos en el apartado 1 ii. En mi caso he establecido un margen superior de 95 px. Tu tendrás que ir probando hasta encontrar la medida exacta que te interesa dejar entre la parte superior del widget fijo y la parte superior del navegador, que debe coincidir con tu altura de header.

ii.- Margen inferior: en mi caso no he establecido ningún margen inferior. He utilizado el apartado siguiente para que el widget no quede sobre el footer cuando se completa la acción de scroll. Este apartado lo he dejado vacío.

iii.- Stop ID: esto lo veíamos en el apartado 1 iii. Como decía, aquí podremos el identificador a partir del cual el widget ya no debe quedar flotante y así evitar que aparezca super puesto con el footer cuando hagamos scroll hasta el final del recorrido.

En el caso de la plantilla Divi yo he utilizado el identificador: main-footer, pero dependiendo de la plantilla que estés utilizando esto podría cambiar.

iv.- Intervalo de refresco: intervalo de refresco utilizado solo para compatibilidad con navegadores antiguos. Aquí he dejado el valor recomendado en la configuración del plugin, que es 1500 milisegundos

v.- Disable width: la explicación de esta opción la vimos en el apartado 1 i. Pondremos la dimensión de anchura de pantalla límite a partir de la cual el widget ya no será flotante. Yo he puesto 700 px. Es decir, que cuando la interfaz tenga una anchura menor de 700 px el widget ya no será flotante o fijo.

vi.- Disable Height: esta opción es similar a la anterior, pero establece un límite en altura. Yo no lo he utilizado.

 

configurar widget para fijar o hacer flotante los widgets de wordpress

Opciones de configuración del plugin para hacer que el widget quede flotnate o fijo

 

vii.- Auto fix widget ID: he dejado esta opción marcada como se recomienda en la configuración del plugin para permitir la reparación automática del identificador del widget.

 

 

3.- Cómo establecer que un widget permanezca fijo o flotante

 

Una vez realizada la configuración para el correcto funcionamiento del widget flotante o fijo, ahora nos queda establecer que widget debe quedar fijo o flotante.

Para ello iremos a la página de gestión de Widgets: “Apariencia > widgets”.

Desplegaremos el widget que queramos hacer fijo o flotante y marcaremos el checkbox con la etiqueta: “Fixed Widget (widget fijo)”.

 

cómo hacer widget wordpress fijo

Hacer widget WordPress flotante, fijo o pegajoso (sticky)

 

A continuación, haremos clic en “Guardar” y listo.

 

 

Compártelo ya!!