Cómo hacer la barra lateral fija en Divi

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

Actualizado en 03/06/24

1124 palabras

4 lectura de minutos
5 Comentarios

Este artículo contiene enlaces de afiliados reconocibles por el icono porcentaje (%) → Soy un enlace de afiliado

El barra lateral (o barra lateral) d'un site web doit être pertinente. ¿Cómo puedo arreglar la barra lateral de Divi entonces? Si votre sidebar contient de nombreux widgets, il est possible que vos visiteurs aient déjà oublié celui qui se trouve en première position n'est-ce pas ? Sans compter que si le contenu de votre article est très long, la sidebar peut également être vide lorsque votre lecteur arrive en fin d'article.

Voici comment se comporte la sidebar naturellement, elle n'est pas fixe et monte avec le contenu de l'article :

Pour éviter que la barre latérale se termine avant la fin du contenu principal certains thèmes proposent l'option d'avoir une barra lateral fija. C’est-à-dire que lorsque l'utilisateur Pergamino página, tu barra lateral permanece posicionada en la parte superior, justo debajo l'en-tête du site (header) y révèlera la fin de son contenu lorsqu'on arrive à la fin de l'article seulement.

Divi no permite que esto se haga de manera nativa. Faux ! Une nouvelle option de Divi (apparue en août 2020) permet de fixer n'importe quel module au scroll ! C'est un jeu d'enfant, il suffit de cocher une petite case. Cette option s'appelle Opción pegajosa Divi.

Si vous voulez parvenir au même résultat, du Javascript s'impose... Comme ce n'est pas donné à tout le monde, je vous propose une solution bien plus facile dans cet article... Hay entonces varias maneras de hacer su barra lateral fijo.

1 - Qu'est-ce qu'une "sidebar" ou "barre latérale" ?

Sidebar es la barra lateral que suele estar a la derecha de la parte blog/post de su sitio WordPress. Esto puede estar a la izquierda dependiendo de sus opciones de tema.

Qué es una barra lateral WordPress
La clásica barra lateral de Divi

El pantallas laterales Widgets que vous pourrez gérer depuis l'onglet Apariencia > Widgets. Il existe de nombreux widgets et cette liste pourra s'étoffer en fonction des extensions que vous utiliserez...

¿Sabes que puedes probar Divi gratis? Nos vemos en esta página y haga clic en "Pruébalo GRATIS"

2 - Que mettre dans une sidebar ?

Il fut un temps où l'on pouvait trouver tout et n'importe quoi dans une sidebar : un calendrier, un appel à newsletter, un abonnement au blog, une barre de recherche, un encart de Page Facebook, un Twitter Wall etc... Pourtant, cela n'est pas judicieux. Une sidebar n'est pas un fourre-tout et doit rester sobre et efficace.

Évitez les module de Page Facebook ou de compte Instagram : croyez-vous vraiment que vous allez convertir des centaines de lecteurs en followers grâce à cela ? Je ne crois pas, mais cela n'est que mon avis avis strictement personnel.

Al contrario, creo que distrae a tus visitantes y los anima a dejar su sitio: ¿es su deseo? Por no mencionar que esto puede reducir considerablemente su sitio. Así que quédate sobrio y utiliza tu barra lateral sabiamente.

Pour ma part, j'imagine que sidebar es un lugar promocional y estratégico, utilizarlo en su lugar para convertir a sus lectores en algo más: en suscriptores, clientes, etc.

Por no mencionarlo todo widgets innecesarios puede dañar su sitio, especialmente en términos de rendimiento (rapididad del sitio).

Lee también: cómo mejorar el rendimiento de su sitio de WordPress con Divi?

3 - Comment fixer la sidebar de Divi simplement ?

Para lograr arreglar la barra lateral de Divi vous allez devoir faire... quoi, entre 1 et 5 clics selon l'alternative que vous choisirez. Dans les deux cas, c'est un jeu d'enfant.

3.1 - Alternative n°1 : utiliser l'option "Sticky Position" de Divi

Esta opción está disponible en Visual Builder desde agosto de 2020. En el siguiente video, Nich Roach - le fondateur d'Elegant Themes - vous fait une démonstration qui en dit long :

Cette options d'affichage permet nativement de elementos de fijación de su Divi layout Scroll. Puede configurar los elementos en la parte inferior de la página o en la parte superior de la página.

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

Sticky Option Divi
Adjuntar la barra lateral Divi al desplazamiento

Prenons l'exemple de cette capture d'écran... Il s'agit d'un modèle d'article créé avec le thème builder mais cela fonctionne également si vous n'utilisez pas le Divi Theme Builder : l'option "Sticky Position" trabaja tanto en Visual Builder como en Theme Builder.

Para arreglar el blog barra lateral, il suffit ouvrir les paramètres du module puis de vous rendre à l'onglet Avanzadas √≥ Efectos de desplazamiento y posición "Sticky Position" on "Stick to top". C'est tout, voilà que votre sidebar est fixée en haut de page puis glisse lorsque le lecteur arrive en fin de page.

3.2 - Alternative n°2 : utiliser l'extension "Q2W3 Fixed Widget"

Si vous n'utilisez pas le Thème Builder ni le Visual Builder pour écrire vos articles de blog, vous devrez alors faire appel à une extension qui permet d'ajouter la funcionalidad de barra lateral fija.

La extensión Q2W3 Widget fijo te permite hacer eso.

Q2W3 Widget fijo
Use Q2W3 Fixed Widget para adjuntar la barra lateral al pergamino

Vaya a la pestaña Prórrogas Añadir pour l'installer et l'activer puis à l'onglet Apariencia > Opciones de Widget fijo para ajustar algunas opciones.

Q2W3 Ajustes del plugin de Widget fijo
Réglages de l'extension Q2W3 Fixed Widget

Dans ce panneau de configuration, vous n'aurez pas grand chose à faire à part définir une marge externe "vers le haut" et "vers le bas".

Q2W3 Ajustes del plugin de Widget fijo
Definir un margen de seguridad para que la barra lateral siga siendo visible

En mis pruebas, j'ai noté que 100px pour le haut et 250 px pour le bas étaient nécessaires si le site utilise des widgets en pied de page ou bien 100px pour le haut et 100 px pour le bas si le site n'utilise pas de widgets en pied de page. Ce sont les réglages qui convenaient le mieux mais cela pourra être différent pour vous, alors n'hésitez pas à faire des tests.

Por último, vaya a la pestaña Apariencia > Widget, abre todos tus widgets y revisa la caja "Fixed Widget". Esta caja debe ser revisada para todos tus widgets.

arreglar la barra lateral de Divi

Todo debe ser perfecto ahora. Usted ha instalado el plugin Q2W3 Widget fijo y este tuvo que arreglar la barra lateral de Divi. Il ne vous reste plus qu'à vérifier le rendu en front-end...

4 - En conclusion : une barre latérale fixe en un clin d'œil !

Qu'en dites-vous ? Rendre la barre latérale fixe lorsque l'utilisateur fait défiler la page est une bonne manière de rendre visible certains widgets qui peuvent rapidement disparaître lorsque le contenu de l'article est trop long.

Et surtout, c'est tellement facile !

Cómo arreglar la barra lateral Divi
Comment fixer la sidebar de Divi - Dites-le sur Pinterest !

Divi 5 training

Divi training via CPF

Obtener Divi

Entrenamiento Divi

Libro electrónico Divi

Consejos gratis

Cuestionario Divi

Entrenamiento en vivo

Descubre wpLingua, mi WordPress extensión para traducir sus sitios ¡Oye! También disponible en la pestaña Extensiones ≤ Añadir Backoffice.

Sus comentarios...

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.

Enviar comentario

Su dirección de correo electrónico no será publicada. Los campos obligatorios se indican con *