The Ultimate Divi Bundle - 5 Divi plugins. 1 great price.

Learn More

A “sticky” widget area lets you add widgets to your theme and have theme remain on display while the user scrolls down the page. Here’s how to add a “sticky” sidebar widget area to the Divi Theme.

What is a “Sticky” Widget Area?

If you take a look at a post such as this one by ytravel you’ll see a group of social media buttons on the left of the page. The buttons are initially located just below the header, but if you scroll down the page their position becomes fixed so that they stay on the screen at all times.

This is basically what a sticky widget area does. It gives you a place on the left-hand side of the page to put widgets that you want to stay in place on the screen as you scroll down. This is great for keeping social media icons on display, for example, though it has plenty of other uses to. For example, could include a bio, a newsletter signup, or details of a limited time offer.

How do I add a Sticky Widget Area to Divi?

First, we’ll register a new widget area called “Sticky Sidebar”, by adding the following to functions.php (ideally in a child theme):

// Create the new widget area
function myprefix_widget_area() {
  register_sidebar(array(
    'name' => 'Sticky 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');

I’ve also asked WordPress to make sure jQuery is available, which will simplify things for us later.

Now we want to add the sidebar into the theme. In order to do it without editing the Divi Theme directly, we’ll add it into the footer, and then move it into place at the start of the Divi main area. This can be done by adding the following into functions.php:

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');

With our sidebar in place we now need to style it to stay in place, staying on the screen at all times. Here’s the CSS to achieve it:

@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; }
}

A couple of things to note about this. First, I’ve used media queries to prevent the widget area from showing on smaller screens (less than 980px). Second, the widget area takes its size from the widgets it contains so if there are no widgets, the widget area will not display. Finally, #myprefix-widget-area-wrap is the id of the full area, while .myprefix_widget is a class which can be used to style individual widgets within the sticky widget area.

Notes on the Sticky Widget Area

Using the Sticky Widget Area with Divi Builder

There is no need to place the sticky widget area into a Divi sidebar module (and it won’t work). Instead the sidebar adds itself to the site directly without interacting with the pagebuilder. That’s why you can will see it shown on the homepage even though you didn’t explicitly add it there.

Moving the Widget Area around

If you want to move the widget area down 20px and to the right by 10px, for example, you can use the following CSS:

#myprefix-widget-area-wrap { 
  margin-top: 20px !important; 
  margin-left: 10px !important; 
}

Or if you are using Divi Booster to add the widget area:

#wtfdivi012-widget-area-wrap { 
  margin-top: 20px !important; 
  margin-left: 10px !important; 
}