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

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

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

  2. 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 Comment

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