How to create a contextual header effect in WooThemes Canvas

One of the limitations in Canvas is that you can only set one header background image for the whole site. This severely limits the design, look and feel of Canvas sites.

In this free 7-step video tutorial we show how to create a contextual header, where the header background images are inspired by individual page content – producing a nice design effect for your visitors.

Enjoy and let us know if you have any questions in the comments below!

Step 1 – Introduction

Step 2 – Creating a default full width background header

Step 3 – Create the transparent logo

Step 4 – Creating the primary navigation

Step 5 – Centering the logo and menu with the center logo and menu Canvas Extension

[box type=”tick”]You can purchase the Center Menu and Logo Canvas Extension from the PootlePress Store for $8[/box]

Step 6 – Preparing images using Flickr.com/search

Step 7 – Using the Replace Header Image per Page Canvas Extension


Comments

8 responses to “How to create a contextual header effect in WooThemes Canvas”

  1. info@learningguitarnow.com Avatar
    info@learningguitarnow.com

    Looks really cool! I’ll be picking this up soon.

    1. Thanks for the positive comment John!

  2. kevin slowther Avatar
    kevin slowther

    Looks great so I bought it
    Will let you know how I get in!

    1. Great Kevin – show us the results!!

  3. Great post – you may have found a new customer. I have a question regarding Step 6 and the Flckr.com/search. Do you have any insight regarding what type of credit you need to give on your website for using someone’s image under the creative commons/commercial use license?

    1. Great point Rob. Here is the answer: http://wiki.creativecommons.org/Best_practices_for_attribution

      You have to give credit in some way. I would either put this directly on the image (somewhere discreet in small type). Or maybe even in the alt tag.

  4. Great stuff .. cant wait to apply this to our next project

    1. Jamie Marsland Avatar
      Jamie Marsland

      Great tks Mahmud,

      please share the link once you’ve finished πŸ™‚

      Jamie

Leave a Reply

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