¿Cómo arreglar la barra lateral de Divi? (barra lateral fija)

Actualizado el 30/10/2020 | Publicado el 10/06/2018 | 5 comentarios

La barra lateral de un sitio web debe ser relevante. Entonces, ¿cómo se arregla la barra lateral de Divi? Si su barra lateral contiene muchos widgets, es posible que sus visitantes ya se hayan olvidado del que está en la primera posición, ¿verdad? Por no mencionar que si el contenido de su artículo es muy largo, la barra lateral también puede estar vacía cuando su lector llegue al final del artículo.

Así es como se comporta la barra lateral de forma natural, no es fija y sube con el contenido del artículo:

Para evitar que la barra lateral termine antes del final del contenido principal, algunos temas ofrecen la opción de tener una barra lateral fija. Esto significa que cuando el usuario se desplaza por la página, su barra lateral permanece posicionada en la parte superior, justo debajo de la cabecera del sitio y sólo revelará el final de su contenido al final del artículo.

Divi no permite esto de forma nativa. ¡Encaminado! Una nueva opción de Divi (lanzada en agosto de 2020) le permite adjuntar cualquier módulo al desplazamiento. Es muy fácil, sólo hay que marcar una pequeña casilla. Esta opción se llama Opción Divi Sticky.

Si quieres conseguir el mismo resultado, es necesario Javascript... Como no se le da a todo el mundo, te propongo una solución más fácil en este artículo... Hay varias maneras de hacer que su barra lateral sea fija.

Anuncio: este artículo contiene enlaces de afiliación que reconocerá fácilmente. Los enlaces clásicos están en púrpura y los enlaces patrocinados están en rosa.

1 - ¿Qué es una "barra lateral"?

La barra lateral es la barra lateral que suele estar en el lado derecho de la parte del blog/artículo de su sitio de WordPress. Puede estar en el lado izquierdo dependiendo de las opciones de su tema.

Qu'est-ce qu'une sidebar WordPress
La clásica barra lateral de Divi

La barra lateral muestra los widgets que puedes gestionar desde la pestaña Apariencia > Widgets. Hay muchos widgets y esta lista puede crecer dependiendo de las extensiones que utilices...

¿Sabías que puedes probar Divi gratis? Ir a esta página y haz clic en "PRUEBA GRATUITA

2 - ¿Qué poner en una barra lateral?

Hubo un tiempo en el que se podía encontrar de todo en una barra lateral: un calendario, una convocatoria de boletines, una suscripción al blog, una barra de búsqueda, una inserción en la página de Facebook, un muro de Twitter, etc. Sin embargo, esto no es prudente. Una barra lateral no es un cajón de sastre y debe ser sobria y eficaz.

Evita los módulos de la página de Facebook o de la cuenta de Instagram: ¿realmente crees que vas a convertir cientos de lectores en seguidores con eso? No lo creo, pero es sólo mi opinión personal.

Por el contrario, creo que distrae a tus visitantes y hace que abandonen tu sitio: ¿es eso lo que quieres? Por no hablar de que puede ralentizar su sitio considerablemente. Así que mantén la sencillez y utiliza tu barra lateral con prudencia.

Por mi parte, imagino que la barra lateral es un lugar promocional y estratégico, utilízala más bien para convertir a tus lectores en algo más: suscriptores, clientes, etc.

Por no hablar de que todos los widgets inútiles pueden causar daño a su sitio, especialmente en términos de rendimiento (velocidad del sitio).

Lea también: ¿Cómo mejorar el rendimiento de su sitio de WordPress con Divi?

3 - ¿Cómo arreglar la barra lateral de Divi simplemente?

Para arreglar la barra lateral de Divi tendrás que hacer... qué, entre 1 y 5 clics dependiendo de la alternativa que elijas. En ambos casos, es pan comido.

3.1 - Alternativa 1: Utilizar la opción "Sticky Position" de Divi

Esta opción está disponible en el Visual Builder desde agosto de 2020. En el siguiente vídeo, Nich Roach -el fundador de Elegant Themes- le hace una demostración que lo dice todo:

Esta opción de visualización permite de forma nativa fijar elementos de su Diseño de Divi para desplazarse. Puede colocar los elementos en la parte inferior de la página o en la parte superior.

Por lo tanto, esta opción es perfecta para fijar el módulo de la barra lateral de su diseño Divi:

Sticky Option Divi
Arreglar la barra lateral de Divi para que se desplace

Tomemos el ejemplo de esta captura de pantalla... Se trata de un plantilla de artículos creada con el tema constructor pero también funciona si no se utiliza el Constructor de temas Divi La opción "Posición fija" funciona tanto en el Constructor Visual como en el Constructor de Temas.

Para arreglar la barra lateral del blog, simplemente abre la configuración del módulo y luego ve a la pestaña Avanzado > Efectos de desplazamiento y establece " Posición pegajosa" en " Pegar a la parte superior". Eso es todo, su barra lateral se fija en la parte superior de la página y luego se desliza cuando el lector llega al final de la página.

3.2 - Alternativa 2: Utilizar la extensión "Q2W3 Fixed Widget

Si no utiliza el Theme Builder o el Visual Builder para escribir las entradas de su blog, tendrá que utilizar una extensión que añada la funcionalidad de la barra lateral fija.

La ampliación Q2W3 Widget fijo le permite hacer esto.

Q2W3 Fixed Widget
Utiliza el Widget Fijo Q2W3 para fijar tu barra lateral al scroll

Ve a la pestaña Extensiones > Añadir para instalarlo y activarlo y luego a la pestaña Apariencia > Opciones de widgets fijos para establecer algunas opciones allí.

paramétrage du plugin Q2W3 Fixed Widget
Q2W3 Ajustes fijos del widget

En este panel de control, no tendrás que hacer mucho, excepto establecer un margen exterior "arriba" y "abajo".

réglages du plugin Q2W3 Fixed Widget
Definir un margen de seguridad para que la barra lateral permanezca visible

En mis pruebas, noté que se necesitaban 100px para la parte superior y 250px para la parte inferior si el sitio utiliza widgets de pie de página o 100px para la parte superior y 100px para la parte inferior si el sitio no utiliza widgets de pie de página. Estos son los ajustes que han funcionado mejor, pero puede ser diferente para usted, así que siéntase libre de probar.

Por último, ve a la pestaña Apariencia > Widget, abre todos tus widgets y marca la casilla " Widget fijo". Esta casilla debe estar marcada para todos sus widgets.

fixer la sidebar de Divi

Ya está, todo debería estar perfecto ahora. Has instalado el plugin Q2W3 Fixed Widget y debería haber arreglado la barra lateral de Divi. Ahora sólo tienes que comprobar el renderizado del front-end...

4 - En conclusión: ¡una barra lateral fija en un abrir y cerrar de ojos!

¿Qué te parece? Hacer que la barra lateral sea fija cuando el usuario se desplaza hacia abajo en la página es una buena manera de hacer visibles algunos widgets que pueden desaparecer rápidamente cuando el contenido del artículo es demasiado largo.

Y sobre todo, ¡es tan fácil!

Comment fixer la sidebar de Divi
Cómo arreglar la barra lateral de Divi - ¡Dilo en Pinterest!

1.098 palabras

4

A ti también te debería gustar:

Product Carousel pour Divi et WooCommerce

Carrusel de productos para Divi y WooCommerce

Si estás buscando una forma de desplazarte por los productos de tu tienda WooCommerce en un elegante carrusel, la extensión "Product Carousel" puede ayudarte. Es rápido y fácil de usar, y los resultados están a la altura de las expectativas.

Popups for Divi : un plugin gratuit très malin !

Popups para Divi: ¡un plugin inteligente y gratuito!

Los plugins gratuitos para Divi son bastante raros, pero "Popups for Divi" es bastante efectivo y fácil de usar. Este plugin convierte cualquier sección de Divi en una ventana emergente. Te explico cómo usarlo.

5 Commentaires

  1. Thierry Moizan

    Ce qui est dommage c’est que cela ne fonctionne pas avecle module sidebar de DIVI…

  2. Lycia

    Bonjour Thierry !
    J’avoue ne pas avoir pensé à cette option. Je n’ai pas testé cette extension avec le module Sidebar, seulement avec la Sidebar normale de WordPress. Apparement vous avez testé et ça ne fonctionne pas ? En effet, c’est dommage…

  3. Jessica

    C’est génial, merci pour le partage de cette astuce !

  4. Alacante

    Salut, ok ça fonctionne avec l’extension Q2W3 Fixed Widget mais est-ce responsive? Car lorsque je bloque le widget à un certain niveau de la page, sur la version mobile, mon widget pop sur le texte.. Y a t-il une option que je n’aurais pas vu? Merci en tout cas pour l’info, c’est top!! ^^

  5. Lycia Diaz

    Salut Alacante. Je ne pense pas que tu puisses définir une valeur différente pour les mobiles, à vérifier dans les paramètres.

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pínchalo en Pinterest

Acciones
Comparte esto