Headway is a WordPress theme Framework with a Drag and Drop Builder, allowing you to structure webpage layouts and create designs without coding.
Grant Griffiths and Clay Griffiths – father and son – founded Headway Themes in 2009. Version 3.0 of the Headway Framework was released November last year.
Installing Headway is no different from installing a WordPress theme. When activated, you will notice that Headway has added a Headway 3.2 panel to the WordPress menu – just above the Appearance module.
The menu of this Headway panel contains five links:
- Getting Started
- Visual Editor
The Getting Started Guide serves two links and a big button on top of those. The links convey you to respectively the Headway support forum and Headway codex. Clicking the [Ready to jump right in? Enter the Visual Editor] button starts a quick tour of the Visual Editor.
The next menu option launches the Visual Editor, the workshop where it all happens. We will examine the Visual Editor extensively in a few minutes.
The Extend link is a shortcut to the Headway store where you can purchase additional child themes and blocks. The themes range from $29 to $59, and the block from (from $10 – $25. You can consider a block as Headway specific page element or widget incorporating a specific functionality.
Some blocks come packed with the framework, like for example the header and the navigation block. Additional blocks are available for purchase from the Headway store. An example of such a block is the Facebook Block supplying Facebook Comments, and Facebook Like Boxes.
The Options page includes five horizontal tabs. The General section lets you upload your favicon, enter your feed URL, and set the Default Admin Page for the Headway Panel. You can choose from Getting Started (default with new installations), Visual Editor, and Options.
Within the Search Engine Optimization section, you have the ability to format the title and meta description for each individual page template. The Content nofollow Links check box lets you add a nofollow tag to links of comment authors.
Alternatively, you can activate the Advanced SEO Options allowing you to enable additional tags like noindex, nofollow, noarchive, nosnippit, noODP, and noYDIR – also for each individual template.
The Visual Editor settings comprehend boxes for disabling the tooltips in the Visual Editor, and syntax highlighting when using the Live CSS Editor.
Advanced, the last tab lets you tweak several settings concerning Caching, Admin, and Debugging.
The Tools page includes three horizontal tabs. The first one – System Info – presents a brief but detailed report of the WordPress environment. You can think of version numbers of the Headway Framework, WordPress, PHP, MySQL, and the theme and active plugins.
The Maintenance tab serves a [Repair Blocks] buttons and the Reset tab a [Reset Headway] button.
Headway Post and Page Extensions
The Headway Framework extends the New/Edit Page and the New/Edit Post screen with several custom meta boxes.
With the Headway Alternate Title box you can enter a shorter page title for the navigation menu and the <title> tag; while a longer and more descriptive Page Title itself will be used in the actual page content. This option is only available for pages.
The Headway Featured Image Positions lets you select your preferred position of the Featured Image for individual posts and pages with a radio button – your options are left or right.
The Headway Search Engine Optimization (SEO) options include:
- Search Engine Result Preview box
- Custom Title
- Custom Description
- enable noindex, nofollow, noarchive, nosnippit, noODP, and noYDIR
- 301 Permanent Redirect
The Search Engine Result Preview displays the details just like the search engines will present these to their users. The 301 Permanent Redirect field comes in handy when you have moved a post or page to a new location.
The last custom option is the Headway Display box. Here you can enter a Custom CSS Class for the page or post in case you want to add any custom CSS for that entry.
The Headway Visual Editor
The Visual Editor is the center of gravity of the Headway Framework. The screen consists of four components:
- Menu Bar
- Layout Selector
- Bottom Panel
- Editor Window
At the left side of the Menu Bar we see:
- HT icon – which is a shortcut to the members area on the Headway site
- Grid – switches to the Grid Mode in which you can create the layout of a page template
- Manage – starts the Manage Mode, which allows you to add and change the settings of the components you will be adding to the grid like blocks, and the header image
- Design – launches the Design Mode supports you while adding styling – colors, backgrounds, fonts, etc. – to the blocks added in the Manage Mode
At the right of the Menu Bar we have:
- Help – serves a link to the Headway Support Forum
- Admin Dashboard – opens the WP Dashboard in a new browser window
- View Site – opens the website’s front-end in a new browser tab
- Currently Editing – displays the layout we are working on
- Save – the [Save] button that turn green after every adjustment
At the left side of the Visual Editor screen, we see the Layout Selector. The Layout Selector lists the available page layouts. Before you can customize a layout, you have to select it here first.
Having done that, you simply click the [Edit] button, at the right of the layout. You can create layouts from scratch, clone a layout, and edit existing layouts of course.
The Layout Selector distinguishes parent and child layouts. Unless customized, a child layout inherits the settings from the parent. By default, all pages inherit the layout of the blog index – again, unless a layout has been customized. The right arrow at the left of a layout indicates available child layouts.
The Bottom Panel looks like an ordinary menu bar, but really hides the configuration settings and styling option pages and blocks. These settings slide up when necessary. The top of the Bottom Panel acts like a menu bar. The only option available in every mode is the Slider Button, which serves links to start the Grid Wizard, to clear the cache, and to launch the Getting Started Tour
Other options in the menu bar of the Bottom Panel are context sensitive. The Setup is available in Grid and Manage Mode, and allows you to set the margins and paddings of the wrapper, while the Editor button is only available in Design Mode. You will also see shortcuts to recently edited blocks in the top of the Bottom Panel.
The Editor Window displays the selected page layout and allows you to drag-and-drop the page elements, and set your preferred values for these elements. Although the Windows shows a warning stating that what you see may not be correct, I found it a near WYSIWYG editor. Please note that you have to push the [Save] button prior to reviewing any changes on the front-end of the website.
Modes of the Visual Editor
The Visual Editor of the Headway Framework has three modes: Grid, Manage and Design. Although there is a kind of a logical order when starting a project, you can switch back and forth while working on a project.
The Grid Mode
When you start a new project with the Grid Mode, the Grid Wizard helps you visually setting a default layout for your pages by presenting five preset layouts to choose from: with a left or a right sidebar, two right sidebars, a sidebar at each side of the content area, or no sidebar at all.
In addition, the Grid Wizard allows you to clone an existing page, or start with a completely empty grid. You can change the width and height of a column simply by dragging its borders inside or out.
Besides allowing you to define the page layouts, the Grid Mode allows lets you patch together your layouts from blocks. Blocks are page elements.
Headway distinguishes the following eight block types:
- Widget Area
- Custom Code
Each block displays four icons. The most left icon shows the ID number – each block gets its own unique ID#. Clicking the Settings button at right, opens the Bottom Panel where you can enter the desired values of the block concerned. The most right button deletes the block.
You can drag blocks around and drop them anywhere on the page. In addition, you can also instantly change the type of a block. You can for replace a widget area block with a media block, so that you can embed a video or upload an image.
Adding a block is really simple. The default layout for example does not contain a widgetized footer area. Adding one goes like this:
- draw a rectangle with the mouse cursor – in this case below the footer credits block
- as soon as you release the mouse button, the Select a Block Type pop-ups – automatically
- select the Widget Area block type
- rearrange your blocks when necessary – in this case I have to swap the credits area with the widgetized footer area
- click the [Save] button
That is it! Now you are ready to add in your widgets – the Block ID# corresponds with the widget area on WordPress’ Widgets (Appearance >> Widgets) screen.
In order to review the results of any changes, you need to save them first by hitting the [Save] button in the upper right corner of the screen – which is hard to neglect since the button turn greens after the first minor adjustment and will stay green until you push it to store these changes.
The Manage Mode
The Manage Mode allows you to tweak the settings of individual blocks. Basically you can do the same in Grid Mode.
The advantage of the Manage Mode is that you cannot alter the layout of your pages. After all, once you are happy with the layouts, it would be a shame when you change them by mistake.
In Manage Mode, the Layout Editor only displays customized layouts – other pages inherit their settings from their parent.
The Live CSS Editor is available in the Manage Mode as well as in the Design Mode from the Options Panel – the Settings icon on the top bar of the Bottom Panel. The Live CSS Editor allows you to enter any custom CSS code and watch the results immediately. The CSS code entered is saved in the
The Design Mode
The default appearance of a Headway site is quite minimal. Fortunately adding your own styling is easy and done in Design Mode. It is probably the part of the Visual Editor you will be using the most.
You can add backgrounds, borders, set dimensions, select colors, fonts, etc. All this can be done in a point-and-click dialog – without adding any code. Let us examine the Design Mode screen shot above.
At the most left column, you can select either Structure or Blocks. Choosing Structure allows you to customize the styling of the Body (background color and or image), and the Wrapper – the container that keeps all blocks together.
When you select Blocks instead of Structure, you can personalize any of the eight block types we have met earlier. Select the Content block type and you will be offered all the elements within that block, like the Title and the Body Text.
Clicking the desired element will display all styling options available for that block element. For the Title, you can select the font family, font size, styling, color, line height, etc. The entire styling can be defined by point-and-click. All options are presented with a drop-down menu or color picker and you can review the changes instantly.
Another approach in customizing the styling is with the Headway Inspector, which can be enable/disabled with the green button in the top bar of the Bottom Panel.
When the Inspector is enabled, you simply select a block or a block element by clicking it. Click the post title and the Editor will jump directly to the Title element within the Content block.
The Inspector comes in handy for people new to web design and still unknown to the CSS naming conventions. In addition, the Inspector offers a nice short cut to the styling options of an element for newbies and veterans alike.
Headway Themes offers a true drag-and-drap theme builder.
You can build a website and style it without coding. And not just blogs, but business websites, online portfolios and magazines too.
Headway is a very user-friendly framework, even for non-coders. First you structure page layouts, and add blocks to those layouts. Simply by drag-and-drop.
After that, you add your custom design to your layouts. Again a matter of point-and-click. No coding required! You do not even have to touch any CSS.Headway is available with three plans:
- $59 Headway Personal
- $99 Headway Business
- $199 Headway Developer
The Personal Plan allows you to use Headway on one site. Next to the Headway framework (Headway Base), you also get the Whiteboard starter template.
Headway Business includes Headway Base, the Whiteboard template, and one official Headway template of your choice. In addition, the Business plan entitles you to use Headway on three sites.
With Headway Developer you get Headway Base, all official Headway templates, and the Community Builder.
Official templates are Headway templates created by Headway Themes itself, so excluding the Community templates. The Community templates are created by Headway specialized developers and design agencies.
All three plans include one year of support and updates. After the first years can renew your license with another year. Renewals are only 50% of the initial price.
Visit Headway Themes