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

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…

screencapture-127-0-0-1-pootlependence-1435936930570

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


[box] #logo {
width: 60px;
}

#nav-container {
display: none;
}
[/box]

Step 1 – The header


[box] .headline {
text-align: center;
margin-right: 60px;
}
[/box]

Step 2 – Full width post image


[box] img.thumbnail {
padding: 0;
border: none;
}
[/box]

Step 3 – Post title on the image


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

Step 4 – Post content in a central column


[box] .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;
}
[/box]

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

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

    1. Thanks Reuben, pootle page builder has been submitted to WordPress.org, so any day now!!

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

    1. ;) – glad someone thinks I’m funny Adam! Cheers…

  3. Excellent tutorial, Nick!

    Thanks for taking the time to post this.

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

    1. Me too. I love this design. Thanks Vincent. Post the results!

  4. 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;
    }

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

  5. 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?

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

Leave a Reply

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