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

Give Your Sidebar a Facelift! 4 Ways to Keep Your Blog's Sidebar Clean + Simple. We're talking Sidebars all month long at DesignYourOwnBlog.com. Come clean yours up today!

Give Your Sidebar a Facelift! 4 Ways to Keep Your Blog's Sidebar Clean + Simple. We're talking Sidebars all month long at DesignYourOwnBlog.com. Come clean yours up today!

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.

Sidebar Month!

The month of May 2015 is all about sidebars and we’re working on them together in the Facebook community. See the other posts on this topic:

How to Create a Killer Blog Sidebar Profile Bio + Photo that keeps new readers wanting to stick around.
How to Really Organize and Prioritize Your Blog’s Sidebar (revised)

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. Learn more about keeping your blog's sidebar clean and easy to read on DesignYourOwnBlog.com

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

Try to Keep Everything the Same Width (or appearing the same width) in Your Sidebars. Learn more about keeping your blog's sidebar clean and easy to read on DesignYourOwnBlog.com

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*.

Use titles and/or borders to give clear visual separation to your sidebar items. Learn more about making attractive sidebars over at DesignYourOwnBlog.com!

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!

Use borders and/or backgrounds to give clear visual separation to your sidebar items. Learn more about making attractive sidebars over at DesignYourOwnBlog.com!

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!!

Turn your blog from ugly to lovely with this fabulous self-paced course in an eBook. Get Blog Beautiful: 50 Tips + Fixes to Make Your Blog Glow now!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.

Hey friend, want free DIY design stuff?

I've got an entire library of FREE goods just for you! Join the 7000+ others and get instant access now!

Powered by ConvertKit
Marianne signature for DesignYourOwnBlog.com

19 Comments

  • Natalie says:

    What a great post! All of this is absolutely right!!
    Natalie recently posted…Weekend Update | Mother’s DayMy Profile

  • These are great tips! It’s funny that you shared a snapshot of my sidebar b/c it’s on the list of things to clean up. LOL! I do like my boxes behind the images, though – just need to clear out the clutter and move more important information to the top. Love this challenge Marianne – it’s the kick in the pants I needed to just get it done!
    Kirsten – Sweet Tea & Saving Grace recently posted…Learning to Be a Cozy MinimalistMy Profile

    • Marianne says:

      Haha that’s great Kirsten! I think your sidebar is pretty clean as is, but I understand the need to update and improve! So glad you like the challenge!

  • Toyin says:

    I think theses tips are spot on! I recently went through my sidebar to make sure each section had a clear purpose and added titles to each widget or section of the sidebar.
    Toyin recently posted…Wine Pleated SkirtMy Profile

    • Marianne says:

      Yay Toyin, I love it! I hadn’t seen your most recent changes and I really like what you’ve done. Great job on creating a beautiful easy to read sidebar and thanks so much for including a DYOB FB badge, you rock girl!

  • Marianne, what a great post. I’ll have to place a border or some type of separation between my sidebar widgets – I don’t think I have that breathing room. Thanks
    Kristine Manley recently posted…17 Ways to Raise Your Child’s Reading LevelMy Profile

    • Marianne says:

      Hi Kristine, glad you found it helpful. It looks like you’ve already gone and added some borders and breathing room and it looks great!

  • Stephanie says:

    Very useful post, Marianne. I think my sidebar is slightly too narrow (it’s 280 wide) but I need to first see how I can increase the whole width of the blog. I have asked the theme creators to help me but things didn’t align right so I need to work more on this.

    Love the tip of putting a smaller image on a solid background to fake it.

    Really useful post, thanks a lot
    Stephanie recently posted…The Fish hotel, costwolds, new openingMy Profile

    • Marianne says:

      Hi Stephanie! It’s quite easy to change the widths in your CSS. First be sure you have a custom style sheet as you don’t want to alter the theme’s style sheet (usually called style.css)

      Add this:
      #pagewrap {
      padding: 10px 0;
      }

      that will remove the 49px padding you have on the sides.

      Then add
      #sidebar {
      width: 300px;
      }

      That’s a quick fix for widening your sidebar and the overall theme. Your theme is responsive though so on a tablet, the sidebar will automatically shrink in width until it gets kicked down below the content on a smaller screen.

      Play around with it and see what you think. So far you don’t have anything that’s too wide in your sidebar right now so it’s not a big deal, unless you’re planning to add other things.

  • Hi Marianne! Thanks so much for doing this! Wondering if you have any tips on making my site load faster? And any tips on making things pop more – like on my sidebar? Thank you!
    Emily @ Words I Wheel By recently posted…Meet the Jeans with a Secret Identity – Sweatpants from ABL DenimMy Profile

    • Marianne says:

      Hi Emily! I somehow missed this comment so I’m sorry for the late reply. If I were you, I’d consider adding images to your popular posts in the sidebar. Maybe showing less of them, but having them stand out more with an image with the title overlaid onto it? Have you seen byregina.com’s sidebar? Chloe does it too (that’s her commenting below) That’s what I’m thinking. Let me know what you think!

  • Chloe says:

    I know I’m a little late to the game, but I FINALLY got a chance to update my sidebar! These tips are awesome, Marianne!

    • Marianne says:

      It’s never too late Chloe! And I think you’ve done a great job on your sidebar. It’s very clean and i love the images for your posts too.

  • I love how thorough this post is. Not only did you explain it well with your words, but you also gave awesome visuals. I also really like the fact that you made sure to mention the paddings and margins. It’s so easy to forget that but every pixel makes a difference! Thanks Marianne!
    Sarah Camille recently posted…Comment on 5 Traps That Kill A Brand’s Uniqueness by Sarah Camille AnarnaMy Profile

  • Poupinadia says:

    MERCI,je découvre l’article et je pense qu’il faut que je m’y mette, sur la largeur notammt, de même que sur les intitulés. Je m’excuse mais je suis une bloggueuse francophone…😊

Leave a Reply

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

CommentLuv badge