A future version of Headway will include the ability to create a fluid header and footer more easily without any custom code, but until then, this tutorial should suit. Let’s get on the same page about what we’re talking about: A fluid header and footer, as it’s often defined, really refer to anything where the header and/or footer area appear to fill the entire screen – no matter the width – while the page and header content (logos, phone numbers, etc) actually stay centered on the page. This is different than a strong trend in web design now called responsive design. You can see examples of fluid header and footer on this site, and at BBC News, WordPress.org, and WPTuts+.

Fluid Header

This part is the simplest – and doesn’t require any custom CSS at all.

1. Create a background image. You can do this in simple, free online image editors – like pixlr.com, for example. The image should be as small as possible, since we’ll just repeat it across the screen. For example, it might be a solid blue line that is 100px tall and just 3 px wide. Like this one. 
2. Upload the background.  If you wanted this as the background for the top of the site – to create the look of a fluid header – then upload it to Design Mode on the BODY element as a background, and tile it horizontally using the options in the Options Panel.

If you only want a fluid header, you can stop here. If you want a fluid footer, then you can go one step further. Right now, this one does require a little custom CSS (and, again, we will be improving this in the future)

Fluid Fooder

3. Create your footer background. Maybe this one’s black! With a gradient overlay! Mix it up a little, have fun! Anyway, same principle as before – small, and repeatable! Like this one!
4. Upload to the Media Library in WordPress. Keep the link to the file handy, we’ll need it in a moment.
5. Add the CSS.  Go to the VIsual Editor in Manage or Design mode to access the Live CSS (members only) editor.

Code:

body.custom #whitewrap {
background-image: url(http://yourdomain.com/wp-content/uploads/1/12/footerbg.jpg);
background-repeat: repeat-x;
background-position: bottom left;
}

What does this do?

It adds a background to another full-screen element in Headway – the “Whitewrap” – which comes directly after the body and covers 100% of the screen. By using this, we can appear to have two background images (or one image that has a “fluid” center that grows with the content on the page). We’ve set the backgound to appear on the bottom left of the page, and to repeat across (x) the screen.

This post is actually a series of posts that are designed to help you get the process down to building a site with Headway Themes. Each post will walk you through about 10 minutes of video filled with everything you need to get a site up and running. Each video only takes on specific parts of the whole site design so that you are working on pieces for 10 minutes at a time.

Getting Started

Before you get started you need to get WordPress installed. There’s several ways to get it installed but we recommend these as the best. Once you’ve got WordPress installed, you need to get Headway installed. If you haven’t purchased Headway Themes, make sure you go check out our pricing page and choose the option that best works for you.

And if you need help installing Headway, we’ve got you covered for that as well.

Once you have got WordPress and Headway running you are ready to check out this steps.

Step 1

This first step is all about laying down the foundation to the site. We’re going to move fast through this, so feel free to pause the video as you are going through it. If you have questions about the video, please make sure to leave a comment on the blog post and we’ll try to help you out.

Part 1 of Building a Site in 5 Easy Steps

Step 2

The second step is sort of a continuation to step 1. Here we’re going to take a look at adding more to our foundation.

Part 2 of Building a Site in 5 Easy Steps

Step 3

In this video we’re going to take a look at borders and fonts of other areas to help really make the design start to come together.

Part 3 of Building a Site in 5 Easy Steps

Step 4

In this video we’re going to take a look at working with the post meta and finding an icon for the comments post meta area.

Part 4 of Building a Site in 5 Easy Steps

Step 5

In this video we’re going to take a look at working with the post thumbnails and getting those into a place we’re satisfied with.

Part 5 of Building a Site in 5 Easy Steps

Your Next Steps

When you’ve completed each step, you should have a working site that you could use. Of course we only covered one page. There’s definitely some refinements you can now make on your own to handle the inside pages of the site. But the design should mostly be there. If you have questions, please let us know!

In this video we take a look at finishing the design with our thumbnails. If you didn’t do the homework before the previous video, make sure that you take a few minutes and add a couple of thumbnails to your posts, so you have something to work with when you work through this video. I ran just a little longer, closer to 15 minutes in this video, but it was just to finish up. Hope you guys enjoy!

How to Build a site in 10 Minute Series

• Part 1 – Backgrounds and Layouts
• Part 2 – Header and Footer background
• Part 3 - Borders, fonts, and more
• Part 4 – Post Meta, Icon Finder

If you have watched the first 3 parts of this series, you can see part 1, part 2, and part 3 with these links. Definitely go back and check those out if you haven’t been following along, or if you need a little bit of a refresher.

I’m going to finish this up with a part 5. We could likely go on, but there’s other great tutorials that I want to get out. There will definitely be things in the design that you could add to (take a look at the widget areas for one!), outside of this tutorial series. This certainly has been a fun tutorial series to do! I’ll leave the wrap-up for part 5 tomorrow.

Before watching this video, make sure you take some time to watch part 1 and part 2 for the first time or as refreshers if you need to.

In this video we take a look at adding borders via CSS to the entry title and post meta area. We also take a look at tidying up the continue reading button so that it looks closer to what Six Revisions has, except we’re going to place it on the right hand side of the content instead of the left. This video is just under 10 minutes (9:30ish) since I’ve been going over my 10 minute timeframe in the past videos.

Part 4 will be up later today, so make sure you stick around the Headway blog for the next installment of How to Build a Site in 10 Minutes.

So it’s with a bit of vicious glee I present blog myths that need to just die in a fire, already.

Blogging is Dying

I think this one gets trotted out at least once if not twice a year now as some new social media service appears. Facebook was going to kill blogging. Twitter was going to kill blogging. If they haven’t yet, I’m sure someone will hold forth that Pinterest will kill blogging.

Blogging isn’t going away. It’s like the Borg in Star Trek: it assimilates everything in its path and just keeps going relentlessly. Only, except for the being evil part.

Now, for huge corporations, blogging has declined. But for online small business, blogging (and social media) is stronger than ever. In part I believe this is because some people would rather use Facebook or Pinterest instead of creating a blog. They’re not running a business and may not even particularly feel a strong need to express themselves—they just want to stay in touch with family & friends and share with them. That means a little less noise on the blogging front so your signal can get through.

Blogging is firmly entrenched in the online ecosystem. Some of the most powerful and visited sites in the world are blogs. Blogging… dead? It is to laugh.

You Need to Have Keywords in Your Domain Name

This is a tricky one, because as of now you can still benefit greatly from having keywords in your domain name. But it would be false to say you need to have keywords in your domain name. Google’s war against spammers and SEO hucksters rages on. As the blending of search and social continues, branding will become more important than ever.

Exact keyword match domain names just sound spammy, anymore. Nobody believes there are real people or a real business there. But a brand name communicates humanity and that is a very important signal.

Which is good, because nearly all the exact match keyword domain names for anything imaginable have already been taken.

You Should Have a Blogroll

There are several good reasons why blogrolls need to die in a fire:

• They can get out of hand, taking up a huge amount of vertical sidebar space and making your site look ungainly.
• They can mess up your SEO pretty badly.
• You have to play favorites and be exclusive, rather than inclusive, for your blogroll to hold any value, but then you risk offending those who didn’t make the cut.

You Should Blog Every Day

Ah, yes, the old “quantity vs. quality” debate. Let me get this out of the way: Quality takes quantity out into the back alley and does very bad things to it with a crowbar. It’s true that frequent publishing has many benefits, however if the content is crap, you don’t get those benefits. About the only way to be prolific and profitable is to have a team of people publishing around the clock. Between myself and A.J., we can come up at least one if not two good posts a day here on the Headway blog.

So take into account how much time you have and how often you can create something that actually resonates with people, and figure out your posting schedule from there. Some tips that really help:

• Create an editorial calendar for your blog. By determining topics in advance you dramatically shorten writing times because your subconscious has already been writing the post while you were doing other things.
• Batch-write your posts. If you can set aside a block of time to write two or three posts instead of just one, you’ll gain efficiency and productivity by not having to switch gears. You can get in the flow and get more done.
• Write every day. Notice I didn’t say publish every day… I said write every day. Why? Discipline, for one thing. Your writing will improve immensely. And if you combine this with the other two tips, you will be able to post quality posts more frequently.
• Create a system to follow. Check out my post on the life cycle of a blog post to see how you can create a good workflow for yourself.

Blogs are for Amateurs/Not to be Taken Seriously

Have you ever heard the word blogger used derisively?

I have, plenty of times. Usually its hurled about by people whose professions are being transformed into something scary and unrecognizable to them by the internet, such as journalists. The line between blogging and journalism is a moving target. Sometimes bloggers are treated like journalists and sometimes they’re not, and we’re not sure who’s more happy or offended about it!

But seeing as how some of the most visited sites on the web are those of the major blog services, and many news organizations’ websites are using blog software and incorporating “bloggy” elements into their designs such as comments, we can definitely let this myth die in a fire.

Only Five? Surely There are More

Surely there are! But five is enough for one post. Each myth has a decent amount of explanation and you only have so much free time.

But if you can think of any other blogging myths that need to just die in a fire, already, post ‘em in the comments below and I’ll incorporate them into another post. Or maybe you want to defend your blogroll or your keyword-rich domain name? Please, be my guest! We love to discuss in the comments.

Today we’re going to look at part 2, which ended up going a little bit over my 10 minute mark to 12 minutes (so I cut off the ending ), but we’re talking gradients, the little refinements, and some cool CSS3 techniques to do it. To get help with CSS Gradients, we can use this tool that’s free and works great for both Webkit and Firefox browsers. If you’re using Chrome like me and want to download the Pendule tool I use to bring up a color pick, make sure to get the extension here.

Part 1 in the Building a Site in 10 minutes series, can be watched here. See you tomorrow for part 3!

This formula is based on how people get to what they consider valuable content on the web. This only happens one of two ways:

• They find it in a search - In order to be found in search, the words of your content has to match up with words people type into that search box on Google. And it has to do it better than everyone else who is trying to attract the same people you are.
• They click on a link sent to them by someone else – Some kind of referring agent (their browser’s home page or friends in social media or by email are several examples) sends a link to a member of your audience. It doesn’t matter whether the link was created automatically or manually.

That’s it.

There is no other way for anyone to reach your blog.

In all the blather out there on the web about “how to get more traffic,” you will find that most folks focus on tactics and tools: use this software, this service. Post at certain times of day or during the week. Measure certain things.

All of which fails to address something deeper: the strategy that leads you to use certain tools and tactics.

The 3-P Formula: People, Problem, Product

I’ve been using this formula successfully with my own blog consulting clients for years, now. Often it’s the one thing that really gets everything to “click” inside the client’s mind and brings them the understanding they never had before. Let’s go over each part of the formula so you too can use it.

The First P: People

The first P in the formula is people. What kind of people are we talking about here? The people you’re trying to reach with your content:

• Who are they?
• Where do they live?
• How educated are they?
• How old are they?
• What is their relationship status?
• Where/how do they work?
• How do they learn?
• How much do they earn?
• How do they think?
• What social media networks do they use?
• How technologically savvy are they?
• What devices and technologies do they use?

Some of this what you might call good ol’ demographics. Some of it is what you would call “technographics.” Knowing this stuff matter. For example, if your ideal customer is older and using a desktop he chose with the help of his son and he is married and approaching retirement, you’ll design your site a certain way in Headway and create content in a specific way that’s best for him.

But if your ideal customer is a middle-aged stay-at/work from home mother  with an iPad, iPhone and laptop, then you’d do things differently.

You can’t talk meaningfully to anyone unless you know exactly who you’re talking to. You can’t talk to everyone: your message will not get even get through. What can you say to everyone that would matter to them? What are the things which everyone searches for on Google or shares with friends?

Damn little, that’s what.

One example of seeing this put to good use is Robb Sutton. His site states it is for entrepreneurs and fathers. This automatically excludes a great many people: women and men who have no children and of course people who do not identify themselves as entrepreneurs. Is this bad? Not a chance: Robb has dramatically increased his chances of reaching the people he wishes to serve. That’s not a bad thing at all. It’s a great thing.

So the first P is People, and now you know why.

Notice how this has absolutely nothing to do at all with you? Nothing to do with who you are, what you’re selling or what skills you have. People don’t care about you. They care about what they want. They care about what you can do for them, but even that won’t happen until they know you really understand them. And understanding begins with knowing who they are as people.

Let’s move on to the second P.

The Second P: Problem

Problem is the problem a person has which causes them to either deliberately search for something or be interested in something when it’s sent their way by a well-meaning friend. This problem could be something acute, such as a funny bump he just found on his skin, or it could be diffuse, such as being pushed around by a bank’s bureaucratic labyrinth time and time again.

People and problem are so interconnected it’s hard to separate them. Indeed, “problem” here is really the second part of the sentence “People who have X problem.”

This is where the topic of your blog really connects with folks… or doesn’t. If you’re blogging about tax help, for example, the location of your customer matters a great deal, as taxes are different all over the world. You’ll write or create content differently for older or younger people. Different things will appeal to high-net-worth clients as compared to middle class recently unemployed people.

In fact, let’s take the same problem and look at it as faced by two different people: recovering from and managing unemployment. Sure, there are some tips and services that would be important to anyone who suddenly finds himself unemployed.

But you’d do things differently if you were targeting the well-to-do who suddenly find themselves ejected from senior management positions as compared to recent college grads who can’t even get employment in the first place and has tens of thousands of student loan debt hanging over their heads.

So… what—specifically—is/are the problem(s) that you help your specific people with?

Again, this is not about what you do. Nobody cares if you’re an accountant. Can you help a middle-aged “empty nester” woman from the United States figure out her self-employed taxes? She’s worried she’s screwing it all up and missing out on deductions or will trigger an audit. That’s what someone—a very specific someone—would care about.

Now that we see what the Problem component is and how it’s tied in with the People component, let’s move on to the third part of the 3-P Formula.

The Third P: Product

So, now you know who you’re talking to and you know what problems you solve for them.

How are you going to solve them? What will they buy from you to solve their problem?

This is of course is strongly related to people and problem: different people use different kinds of tools to learn and execute tasks in life. Some prefer to watch video or read text. Some want to see examples while others learn by doing. Some have a Kindle while others wait for the DVDs or printed books to arrive in the mail. Some want a mentor while others want a servant.

What will you create to sell or give to the people you serve to help with their problem?

That is your product.

The Big Mistake People Make

The big mistake people make in all this is that they start with a product first and then try to figure out how to get as many people as possible to buy it. They don’t take into account that nobody wants it or that it doesn’t appeal to anyone. Notice how Product comes last in the formula. That’s because without People and Problem, you really have no product.

Putting it all Together in Headway

Ah, you knew there had to be a connection to Headway in there somewhere, didn’t you? Of course! Here are some blog and content tips you can use to implement the 3-P formula in your blog:

• Address the 3 P’s right on your home page. In fact, hit them right between the eyes with it. Create a separate home page and use Content blocks and Media blocks to really let the right people know they’ve found their new best friend online. Use custom code blocks create contact forms, sign-up forms, or place buy button code.
• Organize your blog categories around the way your people think of the Problem(s). Instead of using normal category archive pages, create separate pages in WordPress and then use Content blocks to filter by category. See how WorkLife Nation (a consulting client of mine) does this to create much nicer-looking high-SEO-value pages.
• Go beyond the norm and incorporate highly-relevant links into your navigation bar. Use WordPress’s menu system (Headway 2.x link, Headway 3 link) along with Headway’s Navigation blocks to create amazing high-value links in your main navigation your ideal customer will want to click on.

Over to You

Any ways you can think of to make the 3 P’s happen on your site? Share them in the comments! Have any questions? Ask away in the comments!

In this video, we’re showing you how to install LiveFyre, a popular comment system plugin, that we use here on our own blog. It’s quite simple to install, and the video is under 2 minutes, so you shouldn’t have any problems getting it installed and working on your next blog!

Hope you guys enjoy!