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
ÍNDICE WIDGET FIJO O FLOTANTE
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.
Vemos que parte del widget flotante queda oculto detrás del header de la web
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
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.
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)”.
Hacer widget WordPress flotante, fijo o pegajoso (sticky)
A continuación, haremos clic en “Guardar” y listo.
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
Hola Joaquin
Muchas gracias por el artículo.
En mi caso, usando el theme DIVI, no me reconoce el id main-footer y el widget continúa hasta el fondo haciendo caso omiso de parar en el footer.
He hecho varias pruebas y nada. Si se te ocurre alguna solución, te lo agradezco enormemente.
Muchas gracias
Saludos!!
Buenas.
Pues es bastante raro, porque yo lo tengo precisamente hecho con Divi, y actualmente lo tengo puesto en la barra lateral del blog y me funciona perfectamente.
Me gustaría también invitarte a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso diseñador web Freelance, Cursos sobre Divi, Curso Woocommerce, Curso como crear una tienda online de éxito, Astra Pro, Elementor, Curso sobre idexación web y alta en google, Flatsome, Cursos sobre SEO, sobre Mailchimp, blog WordPress, etc. etc.
Buenas, lo he probado funciona bien el sistema y es rápido, el único problema que encuentro es si la barra lateral es de bastante contenido lo que sobrepase el tamaño de Alto de la pantalla no se va poder leer sino hasta llegar al final.
Existe alguna forma de que se haga scroll solo cuando se llegue al último elemento de la barra lateral y a partir de ahí empiece a bajar?
Gracias!
Buenas.
No sé a que te refieres. Aunque haya muchos elementos en la barra lateral, conforme vas haciendo scroll vas viendo el resto de elementos. No hace falta llegar al final de la página. Me gustaría también invitarte, si es posible, a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso sobre como ser Diseñador web freelance, Cursos sobre Divi, Astra Pro, Elementor, Flatsome, Cursos sobre Woocommerce, Cursos sobre SEO, sobre Mailchimp, Prestashop, blog WordPress, etc. etc.