4 Ways to Give Your Blog’s Sidebar an Instant Facelift

Want to give that droopy-looking sidebar of yours an instant facelift?

Here are four ways you can quickly and easily improve the look of your sidebar and make it easier for your visitors to read.

It’s important that we have clear delineation between items in the sidebar as this makes it easier for visitors to decipher what’s important and what isn’t. Here are four ways to create clear visual separation between your widgets and gadgets:

1. Keep Sidebars Clutter Free

We discussed this already in last week’s article, but it’s worth repeating it again. We don’t want to overload our sidebars with too much stuff or else the important things get lost.

Keeping only important things in our sidebars that align with our blogging goals helps users easily find what’s important.

If you need a little help figuring out what to keep in your sidebar and what to get rid of, check out that post now and download the free worksheet to find out what you need to prioritize and call attention to.

2. Avoid Sidebars that are too Narrow

In order for things to appear uncluttered, they need breathing room (aka white space). If your sidebar is too narrow or you have two skinny sidebars next to each other, you’re cramming things in and causing clutter again.

The Honey and Fitz sidebar and Sweden with Love sidebar have ample padding on each side of the sidebar and between widgets.

Nice, clean sidebars have plenty of padding between it and the content column, plenty of space between it and the website’s border (if there is one) and plenty of padding between items.

A good width for a sidebar is at least 300px wide with 10-20px of padding on each side because that allows the right amount of room for most ads and widgets/gadgets.

3. Try to Keep Everything the Same Width

Left: I added a light blue background to the top ad which wasn’t quite 300px wide like the rest of my sidebar items.
Right: Kirsten at Sweet Tea & Saving Grace has solid blocks behind all her sidebar items to give the illusion that everything is the same width.

Sidebars look really neat and orderly when the items within it are the same width or at least appear to be the same width.

What do you do if your sidebar items are 300px wide and you’ve got a small image that’s less? Fake it by centering it over a light-colored solid background. Or if your items are half the width of the sidebar, line them up side by side by floating one left and the other right.

4. Use Visuals to Clearly Separate Items

If you’re cramming as many widgets or gadgets into your sidebar without clear visual separation, people will miss most of what you have in there.

Visitors want to know where your bio ends and where your favorite books begin; where your ads end and where your category links begin.

Take a step back and look at your sidebar objectively. Is there clear delineation between elements? Is it obvious (to a new visitor) what each item is and why it’s there?

Here are a few things you can do to make sure your sidebar items are clearly labeled and separated:

Use clear titles above widgets to identify them

Don’t make people think, make it painfully obvious for them to know what’s what! Headings should be designed so that they stand out from the content below it.

Use larger fonts and/or perhaps your accent font. Try a different color. Try underlining or using a ribbon or banner or solid color block background. Experiment! Look here for some downloadable images to try.

Use a bottom border

Add some sort of separator like a bottom border (solid, dotted or dashed) or a divider image between each widget. Search for “borders” on Creative Market*.

1. Pretty Little Grub shows how easy it is to create sidebar widget titles using text over a solid background with consistent widths.
2. Call Me Sassafras also uses simple sidebar titles with a fun little arrow pointing down to each one.
3. Careful Cents uses a pretty accent font to create sidebar titles.
4. Paper & Honey uses both titles and bottom borders to clearly separate her sidebar items.
5. Don’t Mess with Mama has sidebar titles with a fun twist.

Use borders and/or backgrounds

Using a border around each widget that is the same width all the way down goes a long way towards making your sidebar items look neat and orderly. Or if you prefer, a solid colored background behind each item works well too. These can all be the same color or you can use different colors from your brand’s color palette. I personally prefer lightly colored backgrounds so that they give a subtle look to each item, but it all depends on your branding. Play around with different ideas.

Leave a little breathing room between each widget/gadget

Try to resist crowding your widgets/gadgets together. White space between them goes a long way!

1. Crafts by Courtney uses a clean thin border around each sidebar item.
2. Blog Made Vibrant uses a cute graphic of X’s as a divider image between items.
3. Jenny Purr keeps her sidebar looking flawless by giving her items a consistent width and plenty of breathing room.
4. The Beauty Department’s sidebar is a beautiful example of keeping consistent widths using background blocks.

Your Challenge

So there you have it: four ways to keep your sidebar looking clean and neat all the way down. Your challenge this week is to play around with these ideas and clean up your sidebar if it’s looking messy. It would be super cool if you took a screenshot of the way it is now, then took another one after you’ve cleaned it up. Then share it with us in the Facebook community, we’d love to see!!

Want more tips like these? Then you’ll LOVE Blog Beautiful: 50 Tips + Fixes to Make Your Blog Glow, where you’ll find 49 more tips like these WITH solutions on how to fix them on your own blog!

Check it out here. You can also subscribe to get emails each Tuesday about our monthly theme posts and get free worksheets when applicable.

I’d love to hear if you’ve seen other great ideas on how to make sidebars look pretty. Share in the comments below!

Know someone who could use a sidebar facelift? Share this post with them! Use a handy button below.