Add a "Sticky" Widget Area in Divi Theme

Written by Dan Mossop

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?

A sticky widget area gives you a place 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; 
}

Streamline Your Divi Workflow!

Simplify your image module creation with the Divi Copy and Paste plugin. Effortlessly copy images and paste them straight into Divi, bypassing the WordPress image uploader to save you time and hassle.

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

48 Comments

  1. Just what I was looking for. Never tried DIVI booster though but there is only one way forward. And it is forward :-)

    Reply
    • I hope it does what you need, David, but give me a shout if you need any help getting it to work. Cheers!

      Reply
  2. Hi Dan, I've been using Divi Booster for a couple of years. Is there a way just to show the sticky widget on the home page only? Thank you.

    Reply
    • Hi Janice, you should be able to do it with this CSS:

      body:not(.home) #wtfdivi012-widget-area-wrap { 
          display: none !important; 
      }
      

      You can add it, for instance, to the "Divi > Theme Options > General > Custom CSS" box or the style.css file in a child theme. Hope it helps!

      Reply
      • It worked! Thank you so much, Dan.

        Reply
        • You're welcome, Janice!

          Reply
  3. Hi Dan. First, let me say thanks for Divi Booster. Been using it for a number of years.

    I've added an image (logo png) to the Sticky Widget. I'd like to be able to control the space around the image. It seems to be "fixed". Is there any additional CSS I can add to trim off the white space around the image? Thanks!

    Reply
    • Hey Steve, you should be able to remove the padding around that and any other image widgets with this:

      .wtfdivi012_widget.widget_media_image { padding: 0 !important; }
      

      If you'd like to remove the padding on all widgets regardless of type (i.e. non-image widgets) you can do:

      .wtfdivi012_widget { padding: 0 !important; }
      

      I hope that helps!

      Reply
      • Thanks Dan. It worked on three sides, but not the bottom. I'm still getting a little white on the bottom. I've reloaded a new logo to the exact dimensions (300 x 173) but it still shows the white. Thanks for your help.

        Reply
        • Hey Steve, it looks like that bit of white is a result of the line-height on the image. Adding this to the previous CSS should get rid of it:

          .wtfdivi012_widget.widget_media_image { line-height: 0 !important; }
          

          Let me know if that doesn't do the trick.

          Reply
          • Dan, you're a genius. Thanks!! Keep up the great work.

          • You're welcome, Steve!

  4. Am a long time user of Divi Booster – is a great ittle assest.

    Can you tell me how to display the sticky widget only on Project Post Types?

    Thanks

    Reply
    • Hi Dave, you should be able to do it by hiding the sticky widget on any page that isn't a Project Post Type, using this CSS:

      body:not(.single-project) #wtfdivi012-widget-area-wrap { 
          display: none !important; 
      }
      

      You can add this code to Divi at "Divi > Theme Options > General > Custom CSS", or in the style.css file of a child theme.

      Note that this code hides, but doesn't actually remove the sticky widget from other pages. Hope it helps!

      Reply
  5. Sorry! Found the answer in a comment below… Thank you!

    Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.

We may earn a commission when you visit links on our website.