How to create a blog design like WooThemes and Medium.com using WooThemes Canvas

Jul 3, 2015

—

in Canvas by WooThemes, Canvas Extensions, Video Tutorials, WordPress

We want to join with our friends across the atlantic to celebrate Independence Day this weekend, so here is a new tutorial inspired by our ‘special relationship’ 😉

Blog posts with full width thumbnail images with titles on top…

It seems that this design concept is very popular at the moment, with many blogs adopting an impactful full width image, with the blog title directly on top and a centred column of text (see the first intro video for more examples from WooThemes and Medium.com)

We wanted to see if we could do this easily in Canvas using our Canvas Extensions. We’re quite pleased with the results and hope you will be too.

We’d love to hear your comments and questions below.

Introduction

#logo {
width: 60px;
}

#nav-container {
display: none;
}

Step 1 – The header

.headline {
text-align: center;
margin-right: 60px;
}

Step 2 – Full width post image

img.thumbnail {
padding: 0;
border: none;
}

Step 3 – Post title on the image

.post .title, .title, .post-meta {
margin-top: -350px;
margin-bottom: 350px;
text-align: center;
}

Step 4 – Post content in a central column

.entry {
width: 600px;
margin-left: auto;
margin-right: auto;
}

#post-author {
width: 600px;
margin-left: auto;
margin-right: auto;
text-align: left;
}

#comments {
width: 600px;
margin-left: auto;
margin-right: auto;
}

#respond {
width: 600px;
margin-left: auto;
margin-right: auto;
}

Comments

10 responses to “How to create a blog design like WooThemes and Medium.com using WooThemes Canvas”

Reuben

July 3, 2015

Very cool tutorial! I’ll be using that look on one of my sites coming up. Also can’t wait for the Pootle Page Builder

Reply
1. Nick Burne
  
  July 3, 2015
  
  Thanks Reuben, pootle page builder has been submitted to WordPress.org, so any day now!!
  
  Reply
adam mclane

July 3, 2015

Thanks for the tutorial. And your banter about Fourth of July at the beginning was funny.

Reply
1. Nick Burne
  
  July 3, 2015
  
  😉 – glad someone thinks I’m funny Adam! Cheers…
  
  Reply
Vincent Polisi

July 3, 2015

Excellent tutorial, Nick!

Thanks for taking the time to post this.

I can’t wait to get it implemented. Love the clean uncluttered look.

Reply
1. Nick Burne
  
  July 3, 2015
  
  Me too. I love this design. Thanks Vincent. Post the results!
  
  Reply
Livia

July 5, 2015

Thank you for your tutorial! Is there a way to apply your tutorial to create a home page?
For example: could I simply replace “post” with “page” in the following code?

.post .title, .title, .post-meta {
margin-top: -350px;
margin-bottom: 350px;
text-align: center;
}

Reply
1. Nick Burne
  
  July 7, 2015
  
  Hi Livia, the tutorial is aimed at creating for the blog on your site (every post). But I’m sure with some customizations doing it on the homepage would be relatively straight forward. It would be different to what I have done though as a lot of the options I used where in the Canvas settings for posts.
  
  Reply
Charlie

July 6, 2015

This looks great, but I’m curious: what does the homepage look like? Is there an example site with this installed so we can check out what it looks like live?

Reply
1. Nick Burne
  
  July 7, 2015
  
  Hi Charlie, I didn’t touch the homepage in this tutorial. All I did was leave it pulling through the latest posts. So you can have the homepage exactly how you want it!
  
  Reply