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

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.

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:

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.

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

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

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.

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!