How to Put a Widget into Divi Module

Written by Dan Mossop

You can use the Divi Sidebar Module to add widgets to the Divi Builder. This lets you position them on the page as though they were Divi modules. here's how to do it.

  1. Go to "Appearance > Widgets" in your WordPress dashboard. There, create a new widget area using the box provided:

    Choose a name for your widget area (important – make sure there are no spaces in the name, as it doesn't seem to work otherwise). Click "Create" and refresh the page to see your new widget area. It should appear like so:

  2. Add your widget into this area, as you would the regular sidebar, by dragging across from the "Available Widgets" list on the left.
  3. Go to the edit screen for the page (or post) you wish to add the widget to. Refresh the page (saving any previous changes), so that Divi Builder can learn about the new widget area.
  4. At the appropriate place, add a new sidebar module. In the sidebar module's settings, select your Widget Area from the list:

  5. Apply any other settings you want. In particular, you may want to set "Use Border Separator" to "Yes" on the "Advanced Settings" tab. You may also want to change the admin label under "General Settings" so that your widget can be easily identified in the Divi Builder layout, like so:

  6. Finally, save the module settings and preview your page. You now should see your widget in the correct position on the page.

Boost Your Divi Site with WP Magic CTAs

Enhance your posts with the intelligent WP Magic CTAs plugin. This tool builds customized, targeted call-to-actions for each post on your site, driving higher engagement and conversions without effort. Perfect for enhancing the effectiveness of your WordPress blog posts and directing user action.

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, 

13 Comments

  1. This still didn't work for me.

    Reply
    • Hey Jason, sorry to hear putting the widget into the Divi Sidebar Module isn't working for you. If you could provide me with a little more detail on what happens during the process, I'd be happy to dig deeper into this. Are you seeing any error messages or anything unusual?

      Also, if you're able to share a link to the page where you're trying to place the widget, that'd be helpful for me to better understand what might be going wrong. Thanks!

      Reply
  2. Thanks a lot!!!!

    I paste the CSS into the global header and it worked.

    Reply
    • Great!

      Reply
  3. Late to the party, but what if we want a widget to fill a 1/2 or 1/3 column in the divi layout? Specifically, I'm trying to use an RSS feed widget, but it seems to default to a 1/4 space.

    Reply
    • Hi Elisa, try this CSS – it should set the widgets in the sidebar module to a width of 100%, causing them to fill the column (except for a bit of margin at either side).

      .et_pb_module.et_pb_widget_area .et_pb_widget { 
          width: 100% !important; 
      }
      

      Hopefully that gets you close to what you want – but let me know if there is anything that doesn't look the way you want it to. Thanks!

      Reply
      • @dan I too am looking for this option.
        Forgive my NUB question, but when you say, "try this CSS…" where exactly do I place that CSS?
        {ex: https://theshuttersquirrel.com/blog – I have the page divided into two columns and I want the right-column (from top to bottom) to have my "Blog Calendar", "divider bar", "Most Recent Posts", "divider bar", "Image Categories", "divider bar", "Tag Cloud".}
        Since, I only want this to apply to the Blog Home page and individual Blog Pages, do I use the "Custom CSS" on Divi >> Theme Options >>Custom CSS, or is there someplace else I should be placing it?

        Reply
        • Hi Eric, one option is to make the CSS stricter, so that it only applies to the blog home page (which in your case is a page with ID 25) and the individual blog posts, like so:

          body.page-id-25 .et_pb_module.et_pb_widget_area .et_pb_widget, 
          body.single-post .et_pb_module.et_pb_widget_area .et_pb_widget { 
              width: 100% !important; 
          }
          

          You could then add this in the "Divi > Theme Options > Custom CSS" box and it will only apply to the specified pages.

          Another option is to place the CSS code in a code module (surrounded by <style> and </style> tags). You can then include that code module somewhere on any page you want to apply the CSS.

          For what you're looking at doing, I'd consider looking into creating a post template using the new Divi 4.0 theme builder. You could create a template which, in the template body, includes your two columns – in the left you'd place a "Post Content" module and in the right column you'd place the sidebar module and the code module. In the template settings, set it to apply to individual blog posts. Now when you add posts as usual the content of your post (i.e. the Divi Builder layout you create) will fill the left column, and the sidebar will automatically be added on the right.

          Hope that makes sense!

          Reply
  4. Is there a way to do the reverse of this? Put a module (saved to your Divi library) into Widget/Widget Area?

    Reply
    • Hey Joshua, the only way I know of is using the Divi Widget Builder plugin. It adds a new widget that lets you select a Divi Builder layout from your library to display in your widget area / sidebar.

      Reply
  5. Hi, the Widget Area dropdown does not show newly created Widgets/Sidebars…

    Any thoughts?

    Thanks.

    Reply
    • Hey Rob, newly created widget areas won't show up in the dropdown until you reload the edit page. That is, save your post as a draft (or update the published post). Then reload the edit screen and go back into the sidebar – now the newly created widget areas should show up. Let me know if you still can't see them. Cheers!

      Reply
  6. This is an awesome hack. Thanks for sharing.

    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.

Latest From Divi Booster

How to Add the Post Status in Divi's Dynamic Content

Divi's Dynamic Content feature is great for enhancing your post/page templates with post-specific information. While Divi includes an option to show information such as the Post Created Date using Dynamic Content, there is no equivalent option for the Post Status....

Fix Divi Text Module "Regular" Font Weight Not Working

Are you encountering an issue where the font weights in Divi's Text Module don't seem to apply as expected? In particular, you might find that when you set the text module's body text font weight to "Regular", your font is actually assigned a weight of 500 instead of...

Make the Divi Gallery Module Swipeable

The Divi Gallery Module comes with a slider mode that lets you display images in a slider with clickable left/right arrows to scroll through the images. For mobile / touchscreen users, you can improve the user experience by allowing your user to swipe to navigate to...

How to Use Divi Dynamic Content in Woo Modules Product Selector

Divi's Dynamic Content is a powerful feature that lets you populate your Divi modules and theme builder templates with data pulled in various sources, such as custom fields. This allows for efficient organization and maintenance of your sites.Unfortunately, Divi's...

Random Divi Posts