Video tutorial: How to create a beautiful hero concept in WooThemes Canvas

Video tutorial: How to create a beautiful hero concept in WooThemes Canvas 2
Please share this tutorial:

[hr] ryeland sheep woothemes canvas website

On one of our recent WordPress Xpress days we were challenged by a really creative design concept (specifically how to create a header, navigation and main image all to look like one stunning hero area). Luckily we know a thing or two about Canvas, so we were able to create this stunning feature.

We also love sharing our knowledge with you all, so knocked up this additional Canvas video tutorial for it.

As usual please use the comments to let us know whether you liked this, whether you want more and any questions or suggestions you have.


Step 1 – Introduction

Step 2 – Sizing the elements

Step 3 – How to create your header and nav bar

Step 4 – How to create your slider

Step 5 – How to add the header and slider

Step 6 – How to upload a background image for your menu

Step 7 – How to reduce the slider gap

Step 8 – Header and Nav

Step 9 – How to create transparent menus

And here is the CSS you will need – click here to get the CSS

Let us know what you think in the comments below and show us any sites you have done using this tutorial.

For more tutorials, check out the PootlePress Academy.

About The Author

24 thoughts on “Video tutorial: How to create a beautiful hero concept in WooThemes Canvas”

  1. Hey, thanks for this. Have just started working with Canvas, and find styling certain things a bit tricky (am working with a child theme).

    Just wanted to point out that splicing that image into 3 bits would be way easier than cropping! No need to go back and forth and recalculate your cut marks – splices stay put and can be exported in one go.
    Also would love to see the moving demo of your slider. As sliders in my mind are meant to rotate – do you have this set up so just your text rotates? Because obviously with this layout you can only have one image for the whole site.

    thanks for sharing!

    1. Hi Jenny,

      Thanks for the feedback – yes you are right re splicing 🙂

      For this demo our slider doesn’t rotate (but it could) . You could achieve just the text rotating by using the same image in each slider.


  2. Thanks for a great tutorial! Maybe a stupid question but will the menu background image resize for adaptivity on mobile devices? I assume the header-image and the slider will resize?


    1. Hi Goran,

      Yes they will resize – but if it was me I would probably switch off the slider for a mobile phone 🙂


  3. Great little tutorial and the resulting page looks very nice. I was wondering however what would happen to this on a mobile or tablet screen?

  4. This tutorial couldn’t have come at a better time! A client wants something very similar to this and I was thinking I was going to have to stray from the beloved Canvas theme. Your tutorials are always easy to follow. Thank you.

    1. Hi Chris,

      Well if it was me i would switch off the slider for a mobile – i might even use a different header 🙂


  5. What (another) great video Jamie. Love that idea of the three areas flowing together. Now I need to find a site I can do this for.

  6. Hi Jamie, this is a great and quick tutorial for a fantastic look for Canvas. Do you if there is a way to get the menu background image to be full-width? I’m trying to recreate this Hero look in a full width layout.

  7. Hi. Great tutorial. But, before i’ll go on doing this on one of my customers sites. Please tell me if this works on full width canvas?

  8. Hi,

    I love your site and have had lots of help from it so far but my efforts with this hero concept are meeting little luck. I’m very much a beginner & am working in Instant WordPress at the moment. There are a few issues I’d like help with.

    1. I can’t get the first bit about taking a shot of the canvas screen. (I know how to take a screen shot but don’t know what to do with it once I get it.)

    2. The slider is either too big or too small for the screen. I’ve tried re-sizing it in Photoshop but don’t seem to be able to get it right.

    3. Although I’ve inserted your code for the menu into custom.css, the menu background appears much narrower than the header or slider.



  9. Hey Jamie, I’m have the same issue as Margaret. Especially numbers 2 & 3. Give the updates to Canvas I have been playing around with the full width option and the “hero” image with transparent background navigation. Not there yet. More tweaking required. Any thoughts to updating the video, or do you have any other resources you would consider sharing. Thanks in advance. rite

  10. Hello! I have a quick question about this. We use a newer dynamic image resizing script that allows us to take a 1600px wide image and make it work in something as wide as a 2000+ dpi high def screen. Will the code still work? Thanks!

Leave a Comment

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

Scroll to Top