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”
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 Reply