Headway Themes Review

Headway is a drag and drop theme builder for WordPress. The tool allows you to use a visual editor to build your own layouts and themes for your own WordPress site, or export them for use on another WordPress site. As well as handling the layout, Headway also has a design editor for customising the styling of the site by changing the fonts, colours, borders, and many other visual elements.

All of the above can be done using a WYSIWYG editor, meaning that you never need enter or edit any code to create your WordPress theme. However, for those that do want to edit the underlying CSS, this can easily be done using the Live CSS editor.

Headway Drag and Drop

Headway 3.6 Review

Headway is one of the more established WordPress site builders in an increasingly crowded marketplace. While it’s almost become the de facto WordPress site builder, thanks to the new products that have recently been released its dominance can no longer be taken for granted. With Headway 3.6 released at the start of 2014, which is advertised as being the biggest update since version 3 (which was released back in 2011), it’s a good time to (re-)evaluate this tool and see how it performs today and what new features have been added.

Important Features

Headway 3.6 has seen a number of new additions added to the feature set. Here are some of the best new and previously existing features of this WordPress site builder:

Visual and Design Editors

Creating with Headway is a two-step process. The first step is to build your layout using the Visual Editor, before switching to the Design Editor to customise the styling of the content, such as the fonts and colours. For the 2014 Headway 3.6 version, the design editor has been given an overhaul, making it much more user friendly.

Headway New Design Editor

The visual editor is also expected to be updated in a forthcoming release due soon.

Blocks

One of the most popular features of Headway is the block system. These are the different elements that can be added to your layout, such as the content block, widget block, social block, or many other options. There are some new additions for the latest version which we will get to later.

Layout Selector

With Headway it is easy to create multiple layouts for use on the same project. These can include layouts for pages, posts and archives, or just additional layouts for use on one single post such as a landing page template. This feature works using inheritance from other layouts so you are not always starting from scratch with a new layout, unless you want to.

Headway Templates

Headway templates are an alternative the skins and child theme system that was used in previous versions. These templates give you an alternative to starting from a blank canvas and can allow you to pick a template and then customise it to better meet your needs. New templates will be released on an on-going basis, providing more options for users.

Headway New Templates

The templates also allow you to export the layout and the style definitions you’ve built for use on another website with Headway installed. These are essentially themes that can be used on another site, providing they are also using Headway.

Using Headway templates is a great way to transport your designs, or create a starting point to work from when beginning a new project, as opposed to starting from scratch each time. If you are a website designer then this feature can save you a considerable amount of time if you find your creations are making use of a similar set of features.

You can also purchase Headway templates that have been designed by others for use on your site. There is a small number that can be purchased from the official store.

Installation

As Headway is essentially a theme, albeit one that allows you to design your own theme, it is installed just like a regular WordPress theme (Appearance > Themes > Upload). Once it’s been uploaded, activate Headway and you can begin using the editor.  It’s important to note that Headway doesn’t allow you to edit existing themes. It’s a standalone theme builder and not for customising other themes.

Getting Started

When it comes to using Headway, as well as other website builder tools, it’s recommended to have some existing content on your site. If you aren’t using this tool an existing site, then it’s a good idea to create some content, such as a page, a few blog posts, and then adding some text and images, as well as setting up at least one menu, before designing your layout. This all makes it easier to get a better sense of how your design will look on your site when it’s gone live.

If you are planning to use Headway on an existing site that is already getting visitors then it’s a good idea to either create a development area or use a plugin like Theme Test Drive. This is because when you save your changes, they will go live and become visible to your site visitors, and by using a plugin or development environment it will allow you to build your new design without disrupting the user experience of your site.

Using Headway

Once you’ve activated Headway, you can get a good orientation by using the Visual Editor Wizard. This wizard covers the main features of the tool and provides a good overview in order to help you get started. When using the Visual Editor of Headway you begin by selecting one of the preset layouts using the Grid Wizard, or by using an empty grid. Alternatively you can import a one of the included layouts, or one that you have created previously.

Headway Grid Wizard

While the grid options might look a little bit limiting, once you’ve selected the grid layout of your choice, you can then begin customising it to suit your needs.

The visual editor of Headway really is a visual editor. The different blocks on the page can all be moved around easily using the mouse, in true drag and drop fashion. All the different blocks are clearly labelled so you can tell if it’s a content, widget, or footer area, without having to click on them.

As well as being able to easily drag the different sections around the screen to change their position, their sizes can also be changed just as easily simply by dragging their edges to either expand of contract them. A great feature of Headway is that it will automatically adjust the height of the blocks when the site is viewed so that they fit the content contained within them.

Headway Grid Resize

If while dragging the elements around the screen any of them overlap, which isn’t allowed, a message will be displayed to let you know this has occurred and that it needs to be rectified. The offending elements will be highlighted red so that you can quickly identify them and move them to a better position.

Headway Grid Overlap

When it comes to adding new content areas to the screen, Headway really excels and allows you to simply draw the new area onto the screen. This is done in the same way you would draw a shape in something like Paint; just click the mouse, hold the button down and drag. This makes a Headway a drag and draw theme builder.

Headway Drag and Draw

After drawing the area, the ‘select block type’ dialogue menu is displayed, allowing you to choose from the available options. There are some new blocks for version 3.6, with the list of options now consisting of:

  • Header
  • Footer
  • Image
  • Navigation
  • Slider
  • Listings (categories, tags, authors, etc.)
  • Breadcrumbs
  • Embed
  • Social
  • Content
  • Custom Code
  • Widget
  • Text

Headway has included pretty much everything you want to add to your site as a content block. If there is a page element you require that isn’t included, you can either use the custom code block type, or add it as a widget via a plugin.

Headway Social Block

When it comes to the blocks, they all have lots of options and settings for configuring them. Most of them can be accessed via visual menus, without the need to edit and code, or entering any data.

Headway Block Store

You can also extend the functionality of Headway by downloading blocks from the store.

The Design Editor

Once you’ve finished building the layout of your site, it’s time to switch to the design editor. Of course you can switch between the two editors at any point, but it’s a good idea to create at least the first draft of your layout with the visual editor first before switching to the design editor.

Like the visual editor, the design editor includes a helpful wizard to get you started as quickly as possible. This covers the different ways of working in this view including how to make a selection and then edit it.  Unlike the visual editor, the design screen displays the content of your site, rather than just the grid layout. This is handy as you can get a better sense of how your end product will look while you work.

Headway Design Editor

The design editor works in a similar way to the visual editor; to edit any of the page elements, simply click on them to select them or right-click on them to bring up the context sensitive menu.

Headway Context Menu

When you do choose to edit an instance, a menu is displayed on the right hand side of the screen. From here you can change the styling of an element, such as the font, the colour, link behaviours, and much more. The options are all handled via dropdown menus or colour pickers so there is never any need to edit code.

Improved Design Interface

There are a lot of options to play with and those on a bigger screen will find the user experience much more positive than those with limited space to work with. The new version of the design editor sees the controls added to the side of the screen in a vertical panel, as opposed to the previously used horizontal panel. This makes it much easier to use with version 3.6 than with previous versions of Headway.

When working with the controls, there are lots of other little touches that have been added to make the experience more user-friendly. For example when choosing a font, you can easily preview the different options, before making your final decision. Little things like this make it easier to experiment and try different things without having to worry about undoing steps or previewing your design in a new window.

Headway Fonts

Custom CSS

If at any point you want to add your own CSS, you can do so via the Live CSS editor. Any custom CSS entered here will be displayed instantly on the screen, giving you another effective way of creating your design alongside the menus and options.

If you want to add your own CSS to a particular style or class, simply click on the edit icon displayed next to each class to open the Live CSS editor and then enter your own CSS. However, there doesn’t seem to be a way to edit the existing CSS using the editor, only the option to add your own custom CSS.

Multiple Layouts

When starting out with Headway, you will begin by editing the blog index page for your site, which is the homepage (depending on your WordPress settings). Once you’ve finished work on the blog index, you can then switch to the other options such as single posts, single pages, product pages, and the archive pages, using the layout selector.

However, this isn’t necessary if you are happy to let your homepage or blog index settings cascade down to the other pages on your site. But for those that want to create different designs and layouts, such as when single posts are viewed, it’s easy to do with Headway. This also makes it great for designing landing pages which can have a completely different layout to your regular pages, such as no sidebar or header menu.

Publishing your Design

When you are finished creating your theme, it’s simply a case of hitting the save button and your new design will go live on your site.  If you want to export your designs you can do so, however they can only be used on another site using Headway, as opposed to creating a standalone theme.

Support

There is a lot of online documentation available for Headway. This includes articles and tutorials, as well as video tutorials to help you get started and understand the more advanced features. There is also a members’ only support forum where you can post questions. You can read the support policy here.

Pricing

There are three different pricing plans for getting access to Headway:

  • Personal $59 (support and updates for 1 site)
  • Business $99 (support and updates for 3 sites)
  • Developer $199 (support and updates for unlimited sites)

There are a few other differences between the plans which can be viewed here.

Conclusion

Headway is a really impressive site builder for WordPress. If you really want control over how your site will look, but don’t want or need to code the project yourself then Headway is a great choice. The interface for creating the layouts is really well implemented and is very easy to pick up. The drag and drop interface works very well and being able to draw new content areas onto the canvas is a nice touch.

While you can use a template to base your design on, and then make the required changes to it as needed, if you are starting from scratch it will probably take you a long time to create something of a high quality. While this is to be expected when designing a theme, it’s worth pointing out for anyone looking for a quick solution for building a custom theme. If you want a highly configurable WordPress theme that allows you to create personalised designs rather than building something from scratch then a theme like X might be a better choice.

But if you want full control over how your designs look, with the ability to use a visual editor, and don’t mind putting in the necessary effort to get the design you want, then you can’t go wrong with Headway.

Get Headway

Joe Fylan
Joe has been using WordPress for many years, building many different types of websites along the way. Joe now enjoys working as a freelance content writer and is available for hire.
Disclosure: Some of the links in this post are affiliate links, meaning that if you click on one of the links and purchase an item, we may receive a commission. All opinions however are our own and we do not accept payments for positive reviews.

12 comments

  1. Great review! I am looking for framework/theme builder that has a grid type drag and drop like this. Do you know of any others? Or maybe this is just the best?

    -Scott

  2. Hi Joe,
    Thank you for your information. I am interested in trying to use Headway. But could you tell me if this theme is SEO friendly and easily getting responsive for mobile and tablets. I saw some done theme’s like Spark, but it doesn’t seem responsive. And I wonder if the several blocks doesn’t have any effect on the site speed?

    1. Hi Femke,

      Yes the theme is SEO friendly but you can also use an SEO plugin such as WordPress SEO by Yoast for even more SEO-related features.

      It is responsive too but this is customisable by the user, so it’s optional and might not be enabled on all sites you see made with Headway.

      The more complex your site is, the greater chance its features will have an impact on site speed. This is something you will have to test and experiment with when building your design.

      Good luck,

      Joe

  3. I am new to building websites. I know of HTML but not how to write or for that matter understand this. Just how easy is the headway theme. I want to build a website for my Astronomy club. Not a blog site.

    1. Hi Ian,

      Yes you can certainly design the appearance and layout of your website (within the constraints of WordPress) using Headway without the need to edit or view any HTML.

      WordPress and Headway are both well suited to creating a more traditional website rather than a blog.

      Hope this helps.

      Joe

  4. I have an older 2010 wordpress site which my designer has taken care of. She is retiring and am at a loss at taking care of it myself. It is in need of a total overhaul and upgrade. Does your site need to be upgraded to where you need to place most of your theme changes into a childs theme and then upgrade the original theme? Can I take my header and background and place it on your theme ? I think your sites will be the best fit for me but really need to find a designer to help.

    Thanks for any info you can give me

    Haley

    1. Hi Haley,

      If you update the core WordPress software it shouldn’t overwrite anything.

      However if you are updating the theme on your site to a new version then it will overwrite any customisations you have made to it unless they were made to a child theme or through the theme control panel settings.

      If you switch to this theme – Headway – you will be starting with a new design on your website as Headway isn’t a tool for editing existing themes, but is instead a tool for creating your own theme designs.

      If you need more advice feel free to email me.

      Thanks

      Joe

  5. I use Headway for a couple of year. It offers great drag and drop features. I really hope there are more templates for sale. It is very hard to build a beautiful site without a designer mind.

  6. I am presently considering between Genesis, Headway, and Ultimatum. I think I will choose Ultimatum although Headway seems faster, lighter, and more user friendly. The reason is because Ultimatum license is lifetime, while Headway’s license needs annual renewal, and their developer license is much more expensive than all the others to begin with.

  7. Dear WP User
    Having been using Headway since just before v3 came out (and having evaluated and researched the others), I can tell you the extra cost is worth it … especially if you are building many sites. The Headway team and the Headway Community are very helpful … perhaps more important than the actual cost.

  8. I’m about to setup a medicinal plants database site, I have some experience developing wordpress sites but my (php) coding skills are weak.
    Do you think the Headway theme would be suitable for this project – and for me? Also I’m interested in using the Toolset plugin for Cred forms and Types does this plugin play well with Headway?
    Are there any other themes you’d recommend for this type of site.
    Thanks
    David

Leave a Reply


Your email address will not be published. Required fields are marked *