Fixed widget sidebar in Divi

divi template

Have you ever thought about how useful a fixed sidebar that moves as users view your pages could be? You could use it to encourage them to visit your social networks, display a subscription form, a series of images that link to other sites of yours, ads, whatever.

Well, today I bring you a trick to create in Divi a new fixed sidebar, that moves with the user navigation, floating on the left side of the content, where you can add the widgets you want.

You only have to add a couple of codes…

Essential functions

Open the functions.php file of the Divi child theme and add the following at the end:

/* New fixed widget area for Divi */ // Create new fixed widget area function myprefix_widget_area() { register_sidebar(array( 'name' => 'Fixed sidebar', 'id' => 'myprefix-widget-area', 'before_widget' => '<div id="%1$s" class="myprefix_widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="widgettitle">', 'after_title' => '</h4>', )); } add_action('widgets_init', 'myprefix_widget_area'); // Load jQuery function myprefix_load_jquery() { wp_enqueue_script('jquery'); } add_action('wp_enqueue_scripts', 'myprefix_load_jquery'); // Add the new area to footer function myprefix_add_floating_sidebar() { ?> <div id="myprefix-widget-area-wrap"><?php dynamic_sidebar('myprefix-widget-area'); ?></div> <script> jQuery("#et-main-area").prepend(jQuery("#myprefix-widget-area-wrap")); </script> <?php } add_action('wp_footer', 'myprefix_add_floating_sidebar');
Code language: PHP (php)

A little CSS styling

Then add the following CSS styles to the Custom CSS box of the Divi options or in the Additional CSS section of the theme customizer, wherever you prefer:

/* Fixed widget sidebar styles Divi */ @media only screen and ( min-width: 981px ) { #myprefix-widget-area-wrap { z-index:1000; display:block !important; float:left; position:fixed; background-color:white; margin-top:2px; } .myprefix_widget { padding:16px; } } @media only screen and ( max-width: 980px ) { #myprefix-widget-area-wrap { display:none; } }
Code language: CSS (css)

Here is a screenshot of where you can put it:

Of course, you can tweak the CSS if necessary.


That’s it! With this you have all the necessary machinery.

You will now find a new widget area where you can add the widgets you want, as you normally would.

And, once you save the changes your added widgets will be displayed in your fixed sidebar, which will move with the users’ navigation, always showing there at hand what you have added.

How useful was this post?

Click on a smiley to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!

Leave a Comment

Your email address will not be published.

Scroll to Top
Skip to content