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 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.
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.
The visual editor is also expected to be updated in a forthcoming release due soon.
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.
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 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.
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.
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.
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.
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.
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.
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.
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.
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:
- Listings (categories, tags, authors, etc.)
- Custom Code
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.