It is already two years ago that I wrote a review about Headway Themes. Back then I used version 3.2 of the Headway Theme.
Several new version have been released since, and I must say that I like how Headway keeps improving itself with every new release.
The current Headway version is 3.7, and the enhancements justify a new review. Following the same procedure like two years ago might become a little boring.
Walking through all the features of Headway while working on a actual project might be a lot more interesting and fun, though. Do not you think so?
The project at hand is the wilwebs.org website. The current design is based on the StudioPress Agency theme with some customizations – like the homepage.
What I want to change is the coloring of the site’s header and footer. Instead of the default black and white of the Agency theme, I want to reintroduce the brown from the initial website. That version was built with Headway 3.2, by the way.
With Headway, you start creating the layout and design of the blog index. This blog template offers the foundation for all the other page templates; single posts, pages, portfolio page, home page, etc.
To prevent that this post becomes way too long and overwhelming, I have cut the description of the project’s work flow in three parts.
This first part will focus on the layout. Part two will cover the design of the blog index. And last but not least, we will concentrate on the homepage.
As said, this post is mostly dedicated to creating a layout from scratch. However, we will take off with a short introduction of the Headway Theme.
It is okay when some terms are not quite clear immediately. Everything will become obvious during the execution of the project.
Headway Visual Editor
The Visual Editor is Headway’s core where you actually create your theme. It comprises two parts, or modes in Headway lingo:
- Grid
- Design
When you launch the Visual Editor, you arrive in the Grid Mode.
The first thing to do in Grid Mode is setting up the grid. This grid determines how width your website is going to be. We get back to this in the Grid Setup below.
All website components (header, navigation, content area, sidebar and footer) are contained by a wrapper. A wrapper keeps those components together.
Websites have usually more, but at least one wrapper. That is why Headway creates the first wrapper for you. You can add additional wrappers anytime when needed.
A benefit of having more than one wrapper, is that every wrapper can have its own layout and styling. Think of design elements like the background color or the background image.
The steps to create a website layout with Headway are:
- setup the grid
- create wrappers
- add blocks to the wrappers
A block contains a specific site element like logo, navigation, content, etc.
Once you have completed (partially) your layout in Grid Mode, you are ready to add styling. The styling is done in Design Mode, with the Design Editor.
Okay, that was a brief outline of the Headway Theme. Are you ready? Here we go.
Creating the Headway Layout
The first time you enter the Grid Mode, you are welcomed by a wizard making you acquainted with the available options.
At the end of the tour, you have to choose a default layout for your web pages as shown above. You can choose from:
- right sidebar
- left sidebar
- two right sidebars
- a right and a left sidebar
- no sidebar at all
There are two more options available, however: Import/Export (layouts) and start with an empty grid.
When you have an existing Headway Layout, you can import that to get a head start with your project.
I want to start with a blank canvas, so I opt for the Empty Grid.
Grid Setup
Whatever your choice, your next step is setting up the grid. Your tools for this purpose are Default Column Count, Global Column Width, and Global Gutter Width. You set you values for these parameters with the blue slider.
The maximum numbers of grid columns (Default Column Count) is 24.
This number of columns together with the Global Column Width (the gray regions in the grid) and the Global Gutter Width (the white space between the gray columns), determines the width of the website.
As you can see in the image above, for wilwebs.org we have set a website width of 1128px (Global Grid Width).
You can always change this grid later by clicking the blue [Setup] button. You can even define a different grid for different wrappers.
Another option of the Grid Setup is enabling the Responsive Grid, so that the grid will adjust to the screen dimensions of the visitor’s device. Enabling the Responsive Grid is a matter of clicking a check box.
Okay, the grid is set.
Create Wrappers
The current wilwebs.org website has three wrappers:
- the brown header
- the content & sidebar
- the white footer
The header and footer are fluid. These two wrappers stretch over the full width of the screen. This is called a fluid or stretched layout.
Our initial grid above has only one wrapper, hence we have to add another two. Let us keep the existing wrapper for the content and sidebar and add one above and one below the existing wrapper.
How do we achieve that? Simply click the upper gray button with the plus sign to add the header wrapper, and click the lower gray button – just above the blue Setup button to add the footer wrapper.
Freshly created wrappers have a fixed (also known as a boxed) design, just like the initial wrapper. How doe we make a fixed wrapper fluid? When you hover over a wrapper, you will notice a gear icon at the right side of the wrapper.
Right clicking that gear icon, pops up a context menu. The second option reads “Change Wrapper to Fluid”. Or “Change Wrapper to Fixed” when the wrapper is fluid. It is that easy.
Header and Navigation
Now that our wrappers are set, we are ready to add blocks, the components of our website.
Creating a block is a matter of drawing a rectangle with you mouse: place the cursor, hold the left button of your mouse and draw.
As soon as you lift your finger from the mouse button, the Select Block Type screen appears:
Every block has its own the default settings. You can either accept these, or customize them to your liking.
At the left side of the header wrapper, I add a Header for the logo. Uploading an logo image is also possible of course, but in this case I prefer a text logo. And click a check box to hide the tagline. The header is done.
Headway allows you to add an alias and a custom css class to every block. This can come in handy when you want to add styling your blocks. My picks for the alias as well as the custom class for the logo are ww-logo.
Besides a logo, we also need a navigation in the header. So we draw another box with the mouse, and this time we choose to add a Navigation block.
When you want, you can enable navigation search, and even customize the default placeholder (Type to search, then press enter) for the Search box.
Other options of the Navigation Block let you hide or customize the home link, and set the alignment (left, right, center). Here, I prefer to float the navigation right.
As soon as you have a navigation block, you can turn to the WordPress backend, visit Appearance >> Menus >> Manage Locations and assign a menu to the navigation location that you have just created. Reload the Layout Editor and you will see your menu.
Here is our Header Wrapper with the Header Block at the left side, and the Navigation Block at the right side:
Ready to move to the next wrapper.
Content and Sidebar
The second wrapper is intended for the content area and the sidebar.
For this project, I like to start with the sidebar since I prefer a sidebar of 360 pixels, proving enough room for a 40 px padding.
So, I draw a box with a width of 360 px and a height of 220 px. The dimensions of the rectangle appear in an overlay while you create it. The same overlay will appear when you hover over an existing block.
Now that the desired sidebar width has been reserved, I draw a box for the content area that will occupy the remaining space.
As you probably expected, the Content Block offers the most options. You can display the full content of posts, just the excerpts, or no content at all.
You can also set any number of Featured Posts. Featured Posts are displayed in full on index pages (or until the Read More tag), while the remaining posts only show the excerpt.
Enabling a Pinterest-like column layout is also only a matter of clicking a check box and entering the desired numbers of columns for your content area.
And that is not all. You can customize the Read More text, hide titles, customize meta and date format, tweak comment links, and set your preferred position and dimensions for the Featured Images. All without coding.
Here is our content and sidebar wrapper:
The Footer
The bottom wrapper is going to display the footer. After drawing a rectangle for the footer block, the Select Block Type screen appears again.
Headway comes with a special Footer Block. However, I like to have a little more control over the contents and presentation of the footer, so instead of the Footer Block, I opt for a Custom Code Block.
As the name implies, the Custom Code Block allows you to enter any code. Here above, you see the code for the wilwebs.org footer.
Wrapping the Wrappers
Time to step back and have a look at the product of our work as seen in the Layout Editor:
And this is how it looks at the front-end of the website with the default Headway styling:
Yes, we are not quite there yet. However, you can already recognize the structure, the desired layout as defined when we started the project.
Before proceeding, it is a good idea to export the template in its current state.
Go to WordPress >> Headway >> Templates and click the [Export Current Template] button. It is a little hard to see because of the overlay, but it is definitely there.
Fill in the relevant fields of the Export Template form. Headway composes a file name with these fields. The Template Image will appear in the Templates screen when you import the template in this or another Headway installation.
Hit the [Export Template] button and your work is saved as a Headway Template in JSON format.
As you have seen, creating the layout of a website is simply a matter of drag-and-drop with Headway. No coding needed.
In the seconds part of this series, we are going to add styling to the layout. Part two will be published in cause of next week, after the holiday weekend. Happy Thanksgiving.
Headway Plans
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.
Leave a Reply