How to create a contextual header effect in WooThemes Canvas

How to create a contextual header effect in WooThemes Canvas 2

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

Leave a Comment

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