Headway Theme Framework Review & Guide!

Headway Themes

I was among the first to purchase the Headway framework on its initial release in 2009 and although I have never written my review I have been using the framework regularly for both my own websites, and those of my clients ever since.

On its initial release it was undoubtedly the most advanced theme (as i did not think in terms of frameworks back then) I had ever seen but perhaps due to the complicated framework it was buggy, and could make the finished product (your website) exceptionally slow loading – it was awesome but still needed to advance a lot further before I would be comfortable using it regularly.

Headway-Theme-ImageSince this time the headway team have rebuilt the whole framework from the ground up on no fewer than three occasions, and have added hundreds if not thousands of updates to each and every rebuild. The framework is now solid, fast loading, and a lot more user friendly than it has ever been with the previous updates.

Unlike other frameworks the headway team continually update the framework which is the main reason that the framework is one of the most expensive to use regularly. When I initially purchased the framework it was a lifetime licence, but when purchasing it today (or anytime in the previous 4 years) you are required to manage your licence yearly.

Many have complained about this cost, but I believe that it has made the framework what it is today. The team could never have committed the man hours required to create a framework with the capabilities that it currently has without ensuring that it paid for itself, and what they have created is arguably the most amazing software ever created for WordPress bar WordPress itself.

Perhaps I should start with a warning, this framework is not for everybody! If you are unable to code the framework is for you, even if you can code the framework is likely for you – however if you are expecting pre-designed elements that you just fit into place then you must be aware that the design of every element is bare bones (though each element is easily designed using the framework without code), you will have to have a little bit of a designers eye to get the fantastic designs you are looking for.

Check out the Headway Framework

What Exactly is The Headway Theme Framework

In its most basic terms Headway is an application for WordPress that enables you to build your own WordPress theme without having to code it from scratch, it is a drag & drop theme but with unparalleled options.

The Framework is built around two particular design fazes, firstly the wire framing of the website structure itself, followed by the design of each element contained within the wire framed module. Headway name these fazes (and views) the “grid editor” where the wire framing happens, and the “design editor” where the element design takes place. You can easily jump back & forth between the two views and edit each view as you continue down the design process.

The Grid Editor

The grid editor is where you plan the structure of your website, it is likely if you are building something more complicated than an out and out blog that you will have to design each page template separately, though there are a few tools that allow you to speed up this process.

Grid Wizard 

If you have yet to create a website structure the Headway Framework will automatically prompt you with the Grid Wizard, this is essentially a quick start tool that will enable you to pre-populate your design with elements that are essential to almost any website. You can decide to use one of the options available, or can simply click the “Use Empty Grid” link to the left of the “Next” button to start a layout from scratch.

Image: 1

Headway Grid Wizard Image

Wrapper Options

Once you have selected a pre-defined layout, or decided to start from an empty grid you can then decide how many website wrappers you will use, now if you are not familiar with wrappers I will show you an image below that I hope explains it in a little more detail.

The image shows a website that I plan to create with a fixed content area, but with a fluid header & footer (ie they stretch the width of any computer monitor).

Many websites only use one wrapper, but you can use as many as you want with Headway – in addition you can easily alter the margins between the wrappers – see image 3

Image: 2

Headway Wrapper Options Image

Image: 3

Wrapper Margins Image

Block Options

Block in headway are as you might suspect the elements of the page, by simply dragging your cursor along the wrapper I can draw a block and select what element I wish that to be (see image 4). Here I will create a header.

Image: 4

Headway header block Image

Double click image 5 for a better view of your block options.

Image: 5 

Headway Block Options ImageOf course as you wire frame your website you will continue this process until you have all the blocks in place that will create your page. Each block has different options that will help you with the process, but unfortunately I do not have the time to cover all these here, lets instead move onto the design grid.

Check out the Headway Framework

The Design Editor

Once you have created at least one block within the Grid Editor you can move on to begin styling that block as well as your wrapper as a whole. Lets style the header element, and the header wrapper as in our example.

Firstly select the element that you wish to style by simply right clicking on it and selecting “edit instance” as in image 6.

Image: 6

Design-editor-block

Image: 7

Design Editor Options

Once you have selected the element you wish to style you can easily style the element using the block styling elements.

In this case I am styling an unnamed wrapper for all layouts that contain this specific instance.

As you can see you can style the background, the boarders, add box shadow, alter the corner radius’s, change fonts, add margins, nudge elements, or add padding.

Each one of the above named elements once clicked on offers numerous options.

The fonts for example will provide you with the options to; change font family (which includes using Google fonts), change font size, font color, line height, font styling, text alignment. capitalization, letter spacing, text underline, as well as alter text shadow (whether it be horizontal offset, vertical offset, blur, or shadow color)

As you can see there are a lot of options, in fact you can do almost anything that you would ever want to do using CSS, except without having to use CSS.

Unfortunately I do not have the time to cover each element in detail, but this is a very powerful tool.

In addition I should point out that you can select individual elements within the element (in our case the header) to style. For instance I can style the title, or tag line individually by simply selecting it then using the above block editing options to style it.

Check out the Headway Framework

Other Features

Import Export Block Settings – Easily Transfer settings from block to block using the import/export functionality.

Mirror Blocks – Set multiple blocks to use the settings from another block. Any changes made will be mirrored to the other blocks.

Shared Layouts – Save time by using Shared Layouts. Shared Layouts can be assigned to any specific post, page, category.

Templates – Easily create & download templates that you have created to be used on future websites, or even sell your templates to others than own Headway.

Extend – Many 3rd party creators offer advanced blocks & templates for sale.

Snapshots – With Headway’s snapshots, you can roll back to a previous snapshot you saved or was automatically saved.

Why-You-Will-Love-Headway-Content

Conclusion

Whether you are a professional designer or just someone that loves messing around with WordPress you will be absolutely amazed at what the Headway Framework can achieve with a little inspiration.

This framework can take someone from WordPress beginner to someone that can design websites for clients, in a very short space of time.  But, you must first become familiar with the software.

I have been using Headway for a number of years, and it is only now that I feel confident in recommending the tool to my readers as one of the must have WordPress themes.

It actually confuses me as to why StudioPress has overtaken Headway as the must have framework when Headway can do so much more for those that cannot write code. Not that Genesis is a bad framework, its just a lot harder to use for those without coding experience.

I would honestly give this theme 10/10.

Check out the Headway Framework

Prices start at $59.00

Disclosure of Material Connection: Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission. Regardless, I only recommend products or services I use personally and believe will add value to my readers. I am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255: “Guides Concerning the Use of Endorsements and Testimonials in Advertising.”