How to create a contextual header effect in WooThemes Canvas

contextual-header
[box type=”tick”]You can purchase the Replace Header Imager per Page Canvas Extension from the PootlePress Store for $10[/box]

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.

We thought this was a shame – and so did you guys – so we’ve created a new Canvas Extension – called ‘Replace Header Image per Page‘. Guess what it does? ; ) Now you can have different images for your header or full-width header on pages, posts and products (any custom post type really), giving you a lot more options.

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

[box type=”tick”]You can purchase the Replace Header Imager per Page Canvas Extension from the PootlePress Store for $10[/box]

 

 

8 thoughts on “How to create a contextual header effect in WooThemes Canvas

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

    1. Thanks for the positive comment John!

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