How to Customize Sidebar in Divi

By Divi Dude

If you’re like me and are using the sidebar for your blog posts, then you probably would like to add a little more style to the sidebar using Divi.  The generic, out-of-the-box look that comes with WordPress just doesn’t always cut it.

Customizing the sidebar titles and the rest of the sidebar components is easy with a little bit of custom CSS.

Step 1: Use Inspect tool to View Sidebar

The first thing we do is Inspect a title to see what class Divi has assigned to it.  And by doing this, we can see it is the class .et_pb_widget and for the titles it is .et_pb_widget .widgettitle.

If you’re not sure how to inspect an item, it’s really simple.  Use your mouse cursor to hover over the item you want to inspect and then click on the right mouse button and choose Inspect (or Inspect Element if using Edge).

Step 2: Open Stylesheet to add Custom CSS

Next, we want to open our custom CSS style sheet.  We can do that either via the Theme Options panel, the Theme Customizer panel, or in your child theme via the Appearance > Editor menu link in the WordPress dashboard (see this article on how to add your own child theme to Divi).

Step 3: Add Sidebar Class to Stylesheet

Using your preferred method from step 2, type in:

    .et_pb_widget .widgettitle { 

    .et_pb_widget { 

Note, we use the /* */ for commenting purposes only.  I find it helpful to include a little note before my custom CSS so I know what it does.

Now that we’ve added the class that we found in step 1, we are ready to start adding our own custom style to the sidebar.  We’ll start with titles in the next step.

Note: The above is not an ad for Divi Booster, it’s a sample of the custom sidebar title we are making.

Step 4: Add CSS To Create Custom Sidebar Title

Here’s where we can really change the look of the titles.I want to create titles that are in green boxes, with white text, caps and a border. Like what you see in the photo.

.et_pb_widget .widgettitle {    
    background: #32952d;    
    padding: 8px 8px;    
    color: #fff;   
    font-size: 14px;    
    font-weight: 600;    
    line-height: 1;    
    letter-spacing: 1.2px;   
    text-transform: uppercase;    
    text-align: center;    
    border: solid 1px #000;

If all this code confuses you, you might want to get a book on CSS so you have a handy reference for the future.  

Other things you can try, include rounding the borders. Add this code to the CSS (it will go between the {} brackets).

Border-radius: 25px;

Step 5: Customize the Sidebar Widgets

Now that we have the sidebar titles customized, let’s look at the area underneath them.

Since we are on a plain white background, I think it would look nice to offset the sidebar info a bit. So let’s create a box below it that is light grey.

Earlier we used the Inspect Tool to find the class, which if you recall from step one is:


.et_pb_widget { 

Now let’s figure out how we want it to look.  We want to set our display to block, our background to a darker color to set it apart from the white background, so let’s do a grey. We need to set our width so it takes up the entire block.  We want to add a little bit of border curvature to it, so we’ll change the radius of the border.  We want to add a touch of a drop shadow to the box, so it pops off the screen a bit.  We need to set padding to give it a little bit of distance.  And finally, we need to hide anything extra.  Taking all that into account, we do this:


.et_pb_widget {
       display: block;
    background: #ccc;
    width: 100%;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    padding-bottom: 15px;
    overflow: hidden;

Step 6: Customize the Sidebar Bullets

Now let’s look to see how we can customize any bulleted lists we have in our sidebar. If we look at the bulleted list with the Inspect Tool to find the class, we see it is:

.et_pb_widget li { 

I want to keep the same colors we used in the above section where just customized the widget area, so we don’t need to change any of that info. I want to add some lines underneath each bullet, and make sure I set the line height so it’s easier to read.

.et_pb_widget li {    
    border-bottom: 1px solid rgba(0,0,0,.1);
    margin: 0;
    padding: 15px 20px;
    font-size: 12px;
    line-height: 1.3em;

It is going to take the current et_pb_widget settings, so if you want to change any of those values within the bullet lists you will need to add them. For instance, in our example we changed the value of the padding.

We don’t want a border under the very last bulleted item, so we need to turn it off just for that last item.

.et_pb_widget li:last-child {
    border: 0;

You can play with the values of background, border-radius, box-shadow, and margin to get different looks. (see my YouTube tutorial on drop shadows if you are not familiar with them).

Step 7: Add Custom Styled Bullets

I like using a sideways triangle for my bullets. We can add them by using the EtModules font family (or you can use an font of your favorite fonts that have the bullet graphic you want). But since we are using Divi, I’ll just use the Divi fonts that comes with the WordPress theme. And because I’ve been using it for years, I know the font I want to use is the letter E. Here’s how I change the code to get a right pointing triangle font.

.et_pb_widget li a:before {
    float: left;
    content: "E";
    color: #f0ff23;
    font-family: 'ETmodules';

Again, if you want to know what exactly each of these CSS codes do, I highly recommend getting a good CSS book, something you can read even when you don’t have internet access available.

These are just some of the fun things you can do to customize your sidebar from what comes standard in Divi. And if you’re using another WordPress theme, then these should work for you. You will just need to change the class to what your theme uses (which you can find out what it is using the Inspect Tool).

And if you are using another WordPress theme, then you ought to read my 10 Reasons Why I Use Divi. Perhaps it will change your life.

Cloudways Review for Best Divi Webhosting

Better Social Media

Instagram Training

Must Have Plugins

WP Theme FAQs

WP Rocket - WordPress Caching Plugin

Duplicator Pro: WordPress Backups Made Simple

Faster WordPress Hosting

Load WordPress Sites in as fast as 37ms!

Affordable Domain Registration

Get $1.00 off.

Big Discounts for Domains, Hosting, SSL and more

Legal Disclaimer

Affiliate marketer: Which means when you click a link and purchase an item, I may receive a commission.  Thank you for your support.

Favorite WordPress Theme

Divi WordPress Theme

Start Your Newsletter

MailerLite Email Marketing for Small Business


Constant Contact

For Your Inner Nerd

Rolecosplay Movie Costumes

More From Divi Dude

Delete Spam Comments in Bulk Without Plugin on Cloudways

Delete Spam Comments in Bulk Without Plugin on Cloudways

Sometimes you screw up and forget to turn off comments on your WordPress website, or forget to configure your Askimet, or do both, and then you end up with thousands of comments that are nothing but spam. We’re talking hundreds of pages worth of comments that need to…

Code Snippet Syntax Highlighter that Works with Divi – Review

Code Snippet Syntax Highlighter that Works with Divi – Review

This is one of those plugins that’s only going to appeal to a certain number of people. People like me who have a need to add syntax code to websites. But if you’re one of those people, then I recommend you get the plugin — Divi Code Snippet Module — from the creator of Divi Booster. I tried 3 or 4 plugins in WordPress, every one of them …

3 Easy Ways to Add Pinterest Board Pins to Divi Websites Without Plugins

3 Easy Ways to Add Pinterest Board Pins to Divi Websites Without Plugins

Here’s the dilemma. When I build websites, I build them primarily for a landscape screen. Most of my photos are optimized for landscape screens. My Facebook and Twitter graphics are for landscape screens. But Pinterest prefers portrait style graphics for its pin boards. See the problem? My website has graphics that are wider than they are long (landscape). Yet, Pinterest wants graphics that are taller than they are wide (portrait).

Join Our Awesome List

Join our mailing list to receive the latest news and updates from Divi Dude. We don't write often, but when we do, everything will more or less be spelled correctly (oh, and be interesting and fun and knowledge based).

Thanks Dude! You've successfully subscribed.

Pin It on Pinterest

Share This