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