Like our Landing Page? Here’s how to do the header.

Scott of Lehigh Valley Orthodontist asked me last week (sorry it took me a week to get back to you!) how we  did the header on our landing page as seen below:

So here’s how we did it, and here is how you can do it for your WordPress Landing Page Powered site too.

How to Mimic our Header:

1. Obviously you need WordPress Landing Page to get started.  So make sure you have a copy and it’s installed on your site and ready to go.

Background info:

The header is an image that is actually a background image called in by CSS.  The actual CSS declaration for my home page looks like this:

.longsalespage div#page {
background: url(http://wordpresslandingpage.com/wp-content/uploads/2010/02/landingpagetop.jpg) no-repeat;
}

2. To make this work for your site, you’ll want to edit a few things.  First you’ll want to replace that ‘.longsalespage’ with whatever landing page you want this header to show up on.  So it may be ‘bluelandingpage’ or ‘greylandingpage’ or whatever.

3. Now you want to change the image so it has your website’s name and tagline on it instead of mine.  You can use my header graphic as a template.  To download that template, just click here and then right click on the image and ‘Save As…’

4. Open up that image template in photoshop and make it look the way you want with your header and tagline, etc.  Try to keep it the same size.

5. Now save and upload your modified header image to your wordpress site.  And then flop out the URL where your image is with where my image is in the CSS declaration from above.  So you’ll be changing:

background: url(http://wordpresslandingpage.com/wp-content/uploads/2010/02/landingpagetop.jpg) no-repeat;

to

background: url(YOURURLHERE) no-repeat;

It’s really just plug-n-play.

6. Now grab your CSS declaration and plug it into your CSS file.  The image should now show on whatever landing page you changed .longsalespage to, whether that be bluelandingpage’ or ‘greylandingpage’ or whatever.  If it doesn’t work, make sure your image URL is right, you’ve emptied your cache and refreshed the page, and that you have all of the correct punctuation in the CSS.

Now go out and enjoy your new headers!

Best, Brad