How To Build A Beautiful Website With Headway Themes

How To Build A Beautiful Website With Headway Themes
Headway + Professional Graphic Design Equals Easy to Manage, Beautiful Websites

Headway + Professional Graphic Design Equals Easy to Manage, Beautiful Websites

Do you ever land on a website that is so clean and professional looking that you presume you could never develop something so high class? If you scan the landscape of the web, it’s clear that most small businesses, churches and people you find online are convinced that they have no option but to settle for cookie-cutter or third rate design. There are a lot of dreadful websites out there!

Headway is the left side of the brain that your right side yearns for.

I’m a graphic designer who is very comfortable functioning out of the right side of my brain. The creative juices flow continually, and thanks to Headway that flow isn’t dammed up on this side of the web. The juice floods right out of Photoshop and into the digital world.

You too can take advantage of the brilliance of Headway, whether you hire a professional graphic designer to supply your site with beauty, or if you are comfortable enough to do it yourself. You can have a custom, one-of-a-kind website online in no time.

Why I refuse to live without Headway

WordPress. The brilliance of WordPress only increases with time. This ubiquitous CMS will be with us for a long time, and it’s only getting better with age. Headway plays perfectly with WordPress and it makes the experience pretty awe inspiring.

  • It gives me a blank canvas. As a designer it’s important for me to have a lot of liberty to dream and then put that dream on paper, or in this case, on screen. A well designed website will have a healthy mix of a variety of elements including content, clear navigation and sharp, provoking and compelling graphics. Headway allows me to break out of the confines of a walled, pre-designed theme into most any creative direction I want to go.
  • A new site can be up and running overnight. Of course, the installation is a snap, and then all that remains is the fun part! Design takes some time, but if I have all of my slideshow, header and other images ready to go, integrating it into the Visual Editor is so fast and simple it really seems unfair to all of the other developers out there!
  • I don’t have to code. Ever. Remember, I function primarily with my right brain. The strange_css_code($is_beyond_my); {level}of ‘expertise’}. I’m a graphic designer that is able to confidently design amazing websites and I have a bunch of clients who couldn’t be happier. Does it help to know how to work with code? To pop it into certain places? Sure, and I can do that. But, with Headway you really don’t have to.
  • It’s easy for my clients to work with. After I complete a site for a client, they usually don’t mess with the design for a while—but, with Headway they could easily make updates without the need to re-hire me. The learning curve is near zero.
  • Support. The team at Headway is in love with their pet project—and it shows. Not only do they have a blast developing this game changing product, they enjoy interacting with their fans and clients. They have repeatedly been there to answer simple, seemingly unimportant questions—with speed.

Yes, you should consider hiring a graphic designer

A few professionally designed slides and a header along with a smartly laid out and integrated template will go a long way in taking your mediocre site into the expert ranks.

I have seen some amazing, graphically unified sites ruined by a client who chooses to drop a poorly designed image into their slideshow. A pixilated, stretched image (people actually do that in order to get it to fit into a predefined space!) that has an opposing color scheme in relation to the rest of the site brings tears to my eyes. Such beauty should not be violated with poor design elements.

I’m going to design a site in Headway with you in just about an hour!

Now, I am cheating just a little bit since I’m going to duplicate a site I already designed. But, the only difference in the process is that I already have all of my graphic design done. So, I’ll be installing WordPress, the Headway theme and some plugins from scratch. I’ll then work with the layout and add the design elements. Let’s get started!

Starting time: 5:40pm

In the control panel of my host, MediaTemple, I add a new WordPress application to the server.

capture-00002097

5:43pm: WordPress is installed

capture-00002098

 

5:44pm: FTP Headway and plugin files

Using Filezilla, I move the files from my laptop to the respective themes and plugins folder. I have a set of regularly used plugins that I use for new client sites, but for the sake of time, I’ll only add a few that I consider to be very important: backupbuddy, Reveal IDs and TinyMCE Advanced.

capture-00002099

 

5:52pm: Activate the Headway theme

capture-00002100

 

5:54pm: Getting started with Headway

There’s several very beneficial fields that you will want to fill including the favicon location, SEO and other options. But, since we are in a hurry, we’ll let that slide for now!

9-22-2011 7-42-15 PM

 

5:55pm: The Visual Editor

Your first time in the editor, you’ll be greeted with a setup wizard. All of the choices you make can be overridden later, so don’t worry too much about what you choose.

capture-00002101

 

5:57pm: The blank canvas

Here’s what you’ll see after the wizard is finished launching your new site (or something very similar depending on what options you chose in the wizard).

capture-00002102

 

5:59pm: Back to WordPress Admin

Since we don’t want the front page of our site to include blog posts, we need to make some changes in the WordPress Admin.

You will need to add two new pages: Home & Blog

 

capture-00002103

 

Under the Reading settings, you need to change your front page display setting. Choose “a static page” and then choose the appropriate pages.

capture-00002104

 

You will also need to change the Permalinks settings to “Day and name.”

capture-00002105

 

6:04pm: Back to the Visual Editor

Now, when we refresh the page, the blog posts will be gone and that leaf will be replaced by your home page.

capture-00002106

 

6:06pm Changing some layout settings

For this site, I’m going to choose to give it a width of 1200 and a vertical margin of 0.

capture-00002107

 

And I’ll give my leafs the following variables:

capture-00002108

 

6:10pm: Time to change the background.

capture-00002109

 

Here’s the resulting background image:

capture-00002110

 

6:12pm: Adding my header

capture-00002111

 

You’ll want to ignore the recommended image size. We are going to make the header span the width of the wrapper, of the website, which is 1200. I have my header saved and ready to upload, and here’s what happens after I publish the site:

capture-00002112

 

To remove the tagline, click on ‘Options’ under ‘Header’.

capture-00002113

 

6:16pm: Back to WordPress Admin to add my slides

capture-00002114

capture-00002115

 

Grab the image URLs so you can paste them in the image rotator in the Visual Editor.

capture-00002116

 

6:21pm: Insert the slideshow

First, you need to delete the leaf that contains the home page. Keep in mind that the home page in the WordPress Admin won’t be visible, so don’t attempt to add anything to it. But, as far as the Visual Editor is concerned… and your website in its completed form… this page is the home page, the first page people see when they enter your address.

capture-00002117

 

Now, add an image rotator from the ‘Leafs and Columns’ section under ‘add’.

capture-00002118

 

You will want to make sure you have your site setup with two columns, plus an extra bottom leaf container.

capture-00002119

 

Also, size your first column to 900, and your second to 260.

Now, click the pencil icon and we will add our slides using the URL’s from your media library.

capture-00002121

 

capture-00002122

 

Note, you can add in a hyperlink too if you’d like so people will go where you’d like when they click a slide. For this tutorial, we’ll leave them blank.

Now, hit ‘Publish Changes’ on the lower right of your screen.

Here’s what we have now!

capture-00002123

 

6:30pm: Lets add some widgets

capture-00002124

 

Now, it added the sidebar above my slideshow, but that’s not where I want it. No worries, we are working in Headway! Just click ‘Actions’ and then ‘Arrange Leafs’.

capture-00002125

 

Now, just drag the sidebar to the right column.

In your WordPress Admin, add some widgets and come back to the visual editor. Publish Changes and this is what we have:

capture-00002127

 

6:38pm: Lets add some images to the bottom (do you notice how clean, professional looking images makes all the difference?)

There’s a number of ways to do this, but I’m going to simply duplicate the process I used with my image rotator above. I’m going to add three more, in the bottom container. Then, I’ll add some new images in the WordPress Admin and enter those URLs into the image rotators. Note, these images won’t actually rotate. Each one will hold only one image.

I’m also going to add an HTML/PHP leaf, and put the embed code for a video in there. Note, you’ll need to resize your leafs to the width you want and then Publish Changes. Here’s what I got:

capture-00002128

 

Oops…I don’t want the title of my video leaf to say HTML/PHP, so I’ll click the pencil icon and remove the checkmark from the ‘show title’ option under the ‘Miscellaneous’ tab.

capture-00002129

 

6:46pm: We are almost done! Let’s change one more thing.

I don’t like the color of my navigation bar, so I’m going to change it using the ‘Element Selector’ under ‘Styles and Designs’. You can click most anywhere in the Visual Editor and change the variables! This is powerful! Change fonts, colors and more.

capture-00002130

capture-00002131

 

And here’s the new menu bar (after I changed the color for all of the navigation bar items):

capture-00002132

 

6:50pm: We are done with the design!

Of course, there’s more work to be done on interior pages, but your primary template elements and layout is done and it just took over an hour! Headway is that powerful!

You can compare this test site with the actual site I mirrored here:

Can it get any better?

Of course! Remember we’re working with both WordPress and Headway. You can add plugins, additional frameworks and more! For example, on the actual site at www.revivallab.com you’ll see a different menu system. I chose to go with mega menus instead of the built in menu system. I also have a calendar plugin on the right sidebar instead of recent posts and a Twitter feed.

Remember, Headway makes it EASY to setup a professional website, and all you have to add is sharp design and compelling content!

Sign Up Now for Free Updates and Exclusive Content:

Learn how to write killer content, get more traffic, make money, and more by entering your email below:

Written by John Burton

I'm a church planter, author, conference speaker and graphic/web designer based in the Detroit area. I use Headway and Wordpress for web and all of the standard Adobe tools for everything else. You can see my site at www.burtonsites.com.

Leave a Reply

Comments

  • Patti says:

    Thank you for this extremely helpful visual guide to setting up the image rotator in Headway and WordPress- I am still setting up my new (first) blog and was thrilled to be able to add the slideshow yesterday with your clear directions. This is just too much fun!

  • Paginas Web says:

    Hi, i dont actually like headway, but i like the way you describe each step, i have learn for example about a new plugin that i never used before, thanks for sharing

  • Madeline Yau says:

    OMG, I have been reading and going through a lot of blogs and tutorials this week on Headway. Yours has been the easiest to understand the process. I’m very new with WordPress and Headway, but I found a program I love. Not many people know about Headway I have asked others for help, so I doing it on my own. It’s been frustrating learning it, anyways thank you for the valuable information it’s very useful at this point.

  • Headway was my very very first theme I worked with alongside Thesis. Because I knew absolutely NOTHING NOTHING about websites except writing them, I never got the ease of Headway.

    I’m better now, but I only wish I had one iota of your expertise. At least I added a banner and created it all by myself in about 10 minutes!

    The only way to master, or attempt to master, any theme is to try, try and try harder. Failure creates success. Thanks for these excellent tutorials; I really appreciate it.

  • Marshall says:

    Headway is absolutely awesome! I know zero coding (except a couple html scripts) and am able to build sites with great features and dynamic content.

  • Jimmi says:

    John,

    I noticed that your current sites are now using the Catalyst theme.

    After this glowing review, why did you decide to change?

  • Andrew Tovey says:

    Hi
    Thanks for a great article. I’m considering using Headway but I have a major question that I can’t find an answer to. I need my site to operate as an event management site, with advanced functions. I’ve identified a plugin called Event Espresso that has all the functions I’m looking for. What I need to know is whether it’s likely to work with Headway. This may be too specific a question to answer so I guess a follow-up question (easier to address) is: How well does Headway cope with a variety of external plugins (in your experience)?
    Thanks,
    Andrew

  • Siegfried says:

    Excellent tutorial on Headway, I was looking for something like this for some time now and found it completely random :D

    best regards!

  • There are so many cool tools simplifying designer’s life, and this seems to belong to this category. Thanks for sharing!

  • Saga says:

    Hi, thanks for the Headway ,wordpress steps. It’s helpful. :-)