Tuesday, June 10, 2014

Techie Tuesdays: Widget Hierarchy & Consistency


If you've just started out blogging or haven't had the opportunity to get a customized-designed site, there's a few things you can do to to give your site a professional look and feel; one of them is aligning your widgets and giving them a clear hierarchy. For blogger, you would be making these adjustments in "Layout," and in WordPress, you will be making the adjustments in "Appearances" < "Widgets". 

Organization: 
When people come to your site, the first thing they will see is your header and your most recent post. The sidebar/widget area provides supporting information. What are those two or three pieces of information that you would like your users to see upon first visiting your site? Most bloggers include specific information about them and their blogs brand: profile picture which links to their about page, social sharing icons if they aren't in the navigation bar, subscribing by email, or categories. As users scroll down your site, they can see the archive of recent posts, affiliations, ads, shop-able widgets, etc. With both Blogger and WordPress, you can reorganize your widgets by dragging and dropping in both platforms. 

Alignment:
Once you've defined your widget hierarchy, it is important to consistently align your widgets. Regardless of the size of the widgets, they give a uniform look to your site. You can do this by entering alignment tags before and after the widget content. 
Three types of alignment tags you can use are left, right, and center, but to write them in code. You are going to write them as <div>. 

If I wanted to center all of the content within the widgets of my site, before the content I would enter the following:

<div style="text-align: center"> 
INSERT  WIDGET CONTENT: Links, Images, etc. 
</div>

If you wanted to align left, just change the "center" to "left".

**With some widgets like the search, archive, facebook, and twitter, you can't align these, but you can make sure that they are the full-width of your sidebar. If they are the full-width, it will help with the overall look of your sidebar. 

Do you have tech or design questions you would like answered? "Techie Tuesdays" is a weekly series written by Lindsay Humes of White Oak Creative and The Garden Apt. In order to make this series as beneficial to Midwest Bloggers, you can email your specific questions to Lindsay at lindsay@wocreative.com and she will answer them in her weekly series.


2 comments:

  1. Simple code tricks are HUGE for bloggers with objective but minimal design experience. I would love to see a post about effective tips/ways to organize your blog like: creating pages & menus, de-cluttering, or managing copy-image ratio & style in code. Keep them coming Lindsay!

    ReplyDelete
  2. Thanks, Michelle! I will definitely make sure I cover those topics in the upcoming weeks!

    ReplyDelete