5 Easy Ways to Beautify Your Divi Sidebar

Welcome to Day 69 of our Divi 100 Marathon. Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series!

When designing a website, the sidebar can sometimes be a little neglected. It’s easy to get carried away putting together a knock-out blog landing page and forget to remove the standard widgets and style them to match the rest of your site. Remember, even if your prefer the look of a full width post, the standard sidebar will still appear on archive pages.

Your sidebar is a great way to help your users navigate your blog area. You can use widgets to help them find the posts that will most appeal to them, as well as utilizing it for external advertising or internal marketing like newsletter sign-ups.

The Divi sidebar module also allows you to place an unlimited amount of custom sidebars on your layout pages. I particularly like using custom sidebars as part of the blog landing area. Here is a great example.

In this post, I’m going to share five of my favorite ways to spice up your sidebar. Before we get started, I’m going to be focusing on the standard sidebar, which you can edit, like all widget areas, via Appearance > Widgets in the WordPress Admin’s menu.

1. Use the Elegant Themes Advertisement Widget

Although Divi doesn’t come with an image uploader widget, the ET Advertisement Widget is your secret weapon when it comes to adding images to your sidebar. You can of course add images using the standard WordPress text widget and writing the HTML to create an image link, but this ET widget makes it easy for you. You still need to pre-upload the image you want to add and copy the url from the media library, but you don’t need to know how to write the HTML code. You can add as many images as you wish, under just one heading (see below). You can also add additional titles and alt tags.

2. Style the Widget Titles

The widget titles in the standard sidebar will inherit the style of your H4 tags but if you want to customize them further, you can target them using the class .widgettitle. Using that class in the Divi Theme Options box, you can then change the font, size, color, alignment and padding.

You can find the Custom CSS box at the bottom of the Divi Theme Options > General tab.

For example:

.widgettitle {
text-align:center;
font-size:18px;
padding-bottom: 20px;
}

One of my favorite styling tricks is to add a bottom border to the widget title, using the border-bottom property. Have a look at this example which has a nice editorial feel.

You can achieve this effect by adding the following code snippet to your .widgettitle class.

.widgettitle {
    border-bottom: solid 2px #000000;
    margin-bottom: 25px;
}

3. Adjust the Margin Between Widgets

If you’d like to reduce the space between your widgets, or alternatively give them a little breathing room, you can adjust the bottom margin percentage. It’s quite hard to find by inspecting the code, so here’s a handy shortcut.

.et_pb_sidebar .et_pb_widget {
margin-bottom: 14% !important;
}

4. Use a Custom Menu to Display Categories

The standard WordPress categories widget gets the job done when you want to display categories in your sidebar but it’s tricky to style. It doesn’t allow you to display the categories in the order you want or to pick and choose which ones appear. This is annoying when you accidentally leave a post as uncategorized.

Instead, I like to use the Custom Menu Widget to display categories and it’s much easier to style.

First, create a new custom menu in the Appearance > Menus area. Then add your chosen categories and save the menu. There is no need to assign it to an area.

You can then select that menu, Appearance > Widgets, using the Custom Menu widget.

If you’d like to really give your custom menu some style, you can add a background color and padding, as well as styling the font properties, as I have done below.

In the example above, I targeted the custom menu links, using the following code:

.et_pb_widget ul li {
background-color: #f9f9f9;
padding: 10px;
}

5. Use a Widget Generator to Add Dynamic Social Media Content

Lots of bloggers love to add an Instagram feed to their sidebar. It’s a great way to keep your sidebar looking fresh and encourage visitors to follow you on social media. You can embed the code from Instagram manually in the text widget (see this great post about it on the ET blog) or add a free plugin like Alpine Photo Tile for Instagram. However, I don’t like to add plugins when I don’t have to and embedded code feeds are harder to style.

Instead, there is a new breed of widget generators that allow you to generate responsive code and style it easily before adding to your text widget (or code module if you want to add it to a builder layout).

My favorite is Lightwidget.

To use it, you’ll need to register and then log into Instagram online so that you can grant permission for the widget generator to access your account. Then choose your preferred number of columns and rows, preview your widget and grab the code.

Note: If you’d like to use the widget on a site with an SSL certificate (ie. which has https: in the url prefix), you’ll need to upgrade to the pro version.

Wrapping Up

I hope you enjoy spicing up your Divi sidebar. The above tips deliver small improvements which add up to a big impact. The devil is in the details!

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

Featured image background image via Martina Vaculikova / shutterstock.com

Divi 100 Day 69

The Countdown To Divi 3.0

This post is part of our Divi 100 marathon. Follow along as we post free Divi resources for 100 days in a row! This 100-day countdown will end with the game-changing release of Divi 3.0, including our brand new visual editor built from the ground up using React. Divi 3.0 will change the way you build websites with the Divi Builder forever!
Let the countdown begin.

Learn More About Divi 3.0