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

24 Comments / By /
Video tutorial: How to create a beautiful hero concept in WooThemes Canvas 2
[hr]
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.

Enjoy!

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

I'm Jamie Marsland the founder of Pootlepress. I've trained over 5000 people on WordPress in the past 10 years, including running WordPress and SEO courses for the Guardian Digital Masterclass series. Our WordPress plugins are used by 60,000 customers worldwide. You can also find me on YouTube where I have over 14,500 subscribers and on Twitter. 

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

  1. Jenny Beaumont

    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!
    -jennyb

    Reply
    1. Jamie Marsland

      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.

      Jamie

      Reply
  3. Goran

    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?

    Goran

    Reply
    1. Jamie Marsland

      Hi Goran,

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

      jamie

      Reply
  4. Graham Porter

    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?

    Reply
  6. HEATHER

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

    Reply
    1. Jamie Marsland

      Hi Chris,

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

      Jamie

      Reply
  8. keith whalen

    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.

    Reply
  9. Scott

    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.

    Reply
  12. Mogens

    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?

    Reply
  13. Margaret

    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.

    Thanks,

    Margaret

    Reply
  14. Rita Best

    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

    Reply
  15. Ceci Dadisman

    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!

    Reply

Leave a Comment

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

Scroll to Top