How do I fix the Divi sidebar? (fixed sidebar)

Updated on 30/10/2020 | Published on 10/06/2018 | 5 comments

The sidebar of a website must be relevant. So how do you fix Divi's sidebar? If your sidebar contains many widgets, your visitors may have already forgotten about the one in the first position, right? Not to mention that if your article content is very long, the sidebar may also be empty when your reader reaches the end of the article.

Here is how the sidebar behaves naturally, it is not fixed and rises with the content of the article:

To avoid the sidebar ending before the end of the main content, some themes offer the option of having a fixed sidebar. This means that when the user scrolls down the page, your sidebar remains positioned at the top, just below the header of the site and will reveal the end of its content only when the end of the article is reached.

Divi does not allow this natively. Wrong! A new Divi option (released in August 2020) allows you to attach any module to the scroll! It's a breeze, just check a little box. This option is called Divi Sticky Option.

If you want to achieve the same result, Javascript is required... As it is not given to everyone, I propose a much easier solution in this article... There are several ways to make your sidebar fixed.

Announcement: this article contains affiliate links that you will easily recognise. The classic links are in purple and sponsored links are in pink.

1 - What is a "sidebar"?

The sidebar is the sidebar that is usually on the right side of the blog/article section of your WordPress site. It may be on the left side depending on your theme options.

Qu'est-ce qu'une sidebar WordPress
Divi's classic sidebar

The sidebar displays Widgets that you can manage from the Appearance > Widgets tab. There are many widgets and this list can be expanded depending on the extensions you use...

Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE

2 - What to put in a sidebar?

There was a time when you could find anything and everything in a sidebar: a calendar, a call for newsletters, a blog subscription, a search bar, a Facebook Page insert, a Twitter Wall etc. However, this is not wise. A sidebar is not a catch-all and must remain sober and effective.

Avoid Facebook Page or Instagram account modules: do you really believe that you will convert hundreds of readers into followers with this? I don't think so, but that's just my personal opinion.

On the contrary, I think it distracts your visitors and makes them leave your site: is that what you want? Not to mention that it can slow down your site considerably. So keep it simple and use your sidebar wisely.

For my part, I imagine that the sidebar is a promotional and strategic place, use it rather to convert your readers into something else: subscribers, customers, etc.

Not to mention that all the unnecessary widgets can cause harm to your site, especially in terms of performance (site speed).

Read also: how to improve the performance of your WordPress site with Divi?

3 - How to fix Divi's sidebar simply?

To fix the Divi sidebar you will have to do... what, between 1 and 5 clicks depending on which alternative you choose. In both cases, it's a piece of cake.

3.1 - Alternative 1: Use Divi's "Sticky Position" option

This option has been available within the Visual Builder since August 2020. In the following video, Nich Roach - the founder of Elegant Themes - gives you a demonstration that speaks volumes:

This display option allows natively to fixing elements of your Divi layout to scroll. You can set items at the bottom of the page or at the top of the page.

This option is therefore perfect for fixing the sidebar module of your Divi layout:

Sticky Option Divi
Fixing the Divi sidebar to scroll

Let's take the example of this screenshot... This is a article template created with the builder theme but it also works if you do not use the Divi Theme Builder The "Sticky Position" option works in both the Visual Builder and the Theme Builder.

To fix the blog's sidebar, simply open the module's settings and go to the Advanced > Scroll Effects tab and set "Sticky Position" to "Stick to top". That's it, your sidebar is fixed at the top of the page and then slides out when the reader reaches the end of the page.

3.2 - Alternative 2: Use the "Q2W3 Fixed Widget" extension

If you are not using the Theme Builder or Visual Builder to write your blog posts, then you will need to use an extension that adds the fixed sidebar functionality.

The extension Q2W3 Fixed Widget allows you to do this.

Q2W3 Fixed Widget
Use Q2W3 Fixed Widget to fix your sidebar to the scroll

Go to the Extensions > Add tab to install and activate it and then to the Appearance > Fixed Widget Options tab to set some options.

paramétrage du plugin Q2W3 Fixed Widget
Q2W3 Fixed Widget Settings

In this control panel, you will not have to do much except define an external "up" and "down" margin.

réglages du plugin Q2W3 Fixed Widget
Define a safety margin so that the sidebar remains visible

In my testing, I noticed that 100px for the top and 250px for the bottom were needed if the site uses footer widgets or 100px for the top and 100px for the bottom if the site does not use footer widgets. These are the settings that worked best but it may be different for you, so feel free to test.

Finally, go to the Appearance > Widget tab, open all your widgets and check the "Fixed Widget" box. This box must be checked for all your widgets.

fixer la sidebar de Divi

There, everything should be perfect now. You have installed the Q2W3 Fixed Widget plugin and it should have fixed the Divi sidebar. Now you just need to check the front-end rendering...

4 - In conclusion: a fixed sidebar in the blink of an eye!

What do you think? Making the sidebar fixed when the user scrolls down the page is a good way to make visible some widgets that can quickly disappear when the article content is too long.

And above all, it's so easy!

Comment fixer la sidebar de Divi
How to fix Divi's sidebar - Say it on Pinterest!

1,098 words

4

You might like it too:

DiviFlash : 31 modules supplémentaires pour Divi !

DiviFlash: 31 additional modules for Divi!

I have tested DiviFlash, a premium extension for adding new modules to the Divi Visual Builder. In this article, I present you its features. Don't miss the demo video!

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.

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.

Pin It on Pinterest

Shares
Share This