In this article, we showed you three layouts that make a great blog design. Today, we’re going to help you decide which layout is right for you.  

There are four elements of a great blog design layout:

  • Navigation
  • Blog Feed
  • Blog Post
  • Homepage

Navigation

There are three areas a visitor can use to navigate through your site…

  • Header
  • Sidebar
  • Footer

And these must be intuitive – poor navigation design will destroy the user’s experience.

Header layout

The header contains top level pages and should be kept as clean as possible – include links to pages like… 

  • About
  • Contact
  • Store
  • Products or Services
  • Resources
  • Blog and/or Podcast (topics and categories in dropdown)
  • Start Here

The image below shows different header layouts…

  1. Left with primary navigation
  2. Left with primary navigation and secondary menu
  3. Centered with primary navigation
  4. Centered with primary navigation and secondary menu

header-navigation

When picking a header layout for your blog, there is no right or wrong choice. If you, however, have specific topic categories, we recommend using a layout that includes a “secondary” menu.

Sidebar layout

The sidebar enhances navigation and calls attention to important features of your blog. The sidebar should contain…

  • Recent posts
  • “Follow us on…” or social media buttons
  • E-mail or opt-in bribes
  • Search bar
  • Product features
  • Links to “Start Here” or “About” pages

The three images below show several options that you can include in your sidebar…

Sidebar layout 1:

  1. Search
  2. E-mail opt-in
  3. Recent Posts

sidebar-1

Sidebar layout 2:

  1. Search
  2. E-mail opt-in
  3. Follow Us social

sidebar-2

Sidebar layout 3:

  1. Search
  2. E-mail opt-in
  3. Recent Products

sidebar-3

In recent trends, the sidebar is completely removed from the design. I (Hannah) love this trend because it really cleans things up! Greg, however, isn’t a fan (he thinks it makes navigation a pain). Either or, it’s up to you – and completely depends on the needs of your blog design.

Footer layout

The footer area should “summarize” the navigation of your site, and include everything that was left out of the header – things like…

  • Links to pages that are in the top navigation
  • Additional pages such as…
    • Disclaimers
    • Legal mumbo jumbo
  • It’s also important to include links to other sites that belong to you…
  • And another CTA to sign up for your e-mail list or lead magnet

There are a lot of elements you can include in a footer. Below are options to help keep it simple and clean.

 

Footer layout 1:

  1. Custom Text widget for additional menu links
  2. E-mail opt-in to help grow your email list
  3. Recent Posts widget for quick access

footer-1

Footer layout 2:

  1. Custom Text widget for a company overview description or about bio
  2. E-mail opt-in to help grow your email list
  3. Custom Text widget for additional menu links

footer-2

Footer layout 3:

  1. Custom Text widget for additional menu links
  2. E-mail opt-in to help grow your email list
  3. Another Custom Text widget if you want to show more menu links

footer-3

Just like the sidebar, you’ll notice we show a subscribe option in the all the footer layouts. Yes, it’s that important.

Blog feed layout

Having a well-designed blog feed neatly organizes all your recent posts. Below are layout examples:

Blog feed layout 1: If you have featured images for all your posts and want to display a sidebar, this is a great blog feed layout.

Sidebar:

blog-image-sidebar

No sidebar:

blog-image-no-sidebar

Blog feed layout 2: If you don’t have featured images for all your posts, no worries. With this layout, the posts are displayed in a clean manner.

No featured image – with a sidebar:

blog-no-image-with-sidebar

No featured image – without a sidebar:

blog-no-image-no-sidebar

Blog post layout

In addition to your written content, there are a couple key items you can include in your post design.

Blog post layout options:

  1. Featured image
  2. Social share
  3. Rate post (great for feedback and engagement)
  4. Author bio
  5. Comments section

Sidebar:

blog-post-sidebar

No sidebar:

blog-post-no-sidebar

Homepage layout

The better your homepage is designed, the more likely people will be to “get” your brand, consume your content, and subscribe to your email list. You can approach this in several ways…

Homepage layout 1: Can display your posts categories with different modules and sidebar. This resembles a magazine layout.

  1. Featured posts slider
  2. Sidebar
  3. Two category posts
  4. Popular posts slider
  5. One category posts

home-sidebar

Homepage layout 2: Have a dynamic, eye-catching image, value proposition, and a clear call to action. Then, add posts category modules.

  1. Featured image with call to action
  2. Two category posts

home-no-sidebar

Homepage layout 3: Again, be sure to have a dynamic, eye-catching image, value proposition, a clear call to action and post category modules.

If you have products, lead magnets, or opt-in bribe(s) use this layout – you can feature those front and center! Then, add posts modules to reveal your blog categories for easy navigation.

  1. Featured image with call to action
  2. Products or lead magnets
  3. Featured posts slider
  4. Popular posts slider

home-products-no-sidebar

Remember, the home page is the front door to all your content. It must be easy to navigate and clearly convey the benefit of your site to the user.

The point?

Your blog is a direct reflection of you and/or your business. Having a well designed and professional looking website builds trust and increases your credibility – it will also help you make a great first impression!

What blog layout works best for you? Clicking the button below will take you to a questionnaire that will help you decide. Remember: we’re here to help. Feel free to contact us if you have any questions 🙂

button01

Decide your blog design layout