Since this is so long, the links to the sections are as follows:
This article is intended to give you an overview of the major differences between Headway 2 and Headway 3. For the tutorial, I am using Headway versions: 2.0.15 and 3.7.12. After the overview of changes and differences, I will go over converting a HW2 design to HW3.
If you are more of a visual learner, a screencast is coming regarding the HW2 to HW3 design portion.
First, let’s start with different terminology. In Headway 2 and 3 there is a Visual Editor. In Headway 2, both the building of the layouts and the styling or designing was done in the same “mode”. In Headway 3, there is a
Grid Mode and Design Mode.
Grid Mode: Settings and building your layout
Design Mode: styling and designing (fonts, colors, margins, padding, etc)
Layout Selector: the dropdown where you select which layout you want to edit (present in both modes).
Alias: Friendly name you can assign to wrappers and blocks in the options for the wrapper or block. This friendly name will be used in Grid and Design Mode as well as in the WordPress Menus & Widgets Area.
The next set of terms you should understand all pertain to
Inspector: the element selector and inspector from HW2 combined
Regular Element: Applies the changes globally to that element (but can be overridden)
Instance: Applies the changes to that particular instance (a specific layout-block-element combination and any other elements mirroring it)
Customize for Current Layout: Applies the changes to the specified element on that layout only (and any child layouts i.e. any layouts inheriting from it)
Overview of Major Changes/Benefits in Headway 3
The Visual Editor
Both HW2 and HW3 feature a Visual Editor. The major difference is that in Headway 2, the Visual Editor was comprised of one mode: you build and style your site in the same mode whereas in Headway 3, there are two modes (explained above).
The Layout Selector
The layout selector (present in both modes) in Headway 3 is much more intricate because you can select whichever layout you want including each and every post (although there are reasons not to customize each post separately). The layout selector is also on the left hand side of the screen in Headway 3 as opposed to the right hand side in Headway 2. Additionally, there is a search box to find exactly the layout you want to edit, which is super handy for large sites.
Headway 3 offers a feature called Snapshots for you to save your work whenever you want as well as saving snapshots automatically periodically.
Block vs Leaf
Headway 2 had Leafs and Headway 3 has Blocks. It’s the same idea but a different name. They are reusable and you can use multiple blocks of the same type on a layout. In Headway 2, you could choose between a fluid and fixed height for your leafs. In Headway 3, almost all blocks are fluid and you need CSS to change that.
In Headway 2, you can add leafs to a layout but you don’t have a ton of control over where one gets added, where you can move it and how you can resize it. In Headway 3, you draw blocks on the grid instead of clicking a button to add them (as in Headway 2 and leafs). You click a spot in the Grid, hold down your mouse button and drag the block to as wide as you’d like inside the wrapper (yes, multiple wrappers) and to the height you desire. You can precisely draw the the block size you want, within the parameters of the grid setup you chose (columns/gutter).
The height you draw a block on the grid will set the min-height for that block and remember, almost all blocks in Headway 3 are fluid – meaning they will expand to fit the content by default.
In Headway 2, you also had Leaf Templates. In Headway 3, you actually have two different options to get this same or similar functionality. You can use the Grid Wizard to export any layout you want to later import to any layout you want (even on a different Headway 3 installation) and you can still make changes. You also have the option of Shared Layouts which allows you to build one layout and apply it to anywhere you want.
In Headway 2, there was one wrapper and all leafs were inside that wrapper (container). In Headway 3, you can have multiple wrappers on any layout you wish AND you can have a different number of wrappers on each layout you want. It’s completely flexible.
Also, you have the ability to make your wrappers fluid. You can have a fluid wrapper with a fixed grid (meaning the wrapper will adjust to screen size but your blocks will stay fixed on the grid where you put them) or a fluid wrapper with a fluid grid so the wrapper and blocks are responsive to screen sizes. You can mix and match fluid and fixed wrappers.
For more information, please see this screencast about how to work with Wrappers.
With one click of a button (turning the responsive grid on), your site will have responsive features. As of version 3.8.2, the responsive grid is on by default for new installs. There are then more detailed responsive controls for wrappers and blocks to help you get the desired look you want.
Turn the responsive grid on in Grid Mode, under Setup.
Where Headway 2 had Styles and Skins, Headway 3 has Templates. If you export a Template, it will contain everything within the visual editor except the snapshots. It will export your layouts, your design and styles and the content of your Live CSS Editor. In the
Extend section of the Headway Website, you can purchase pre-made Templates as well. There is still an inspector in Headway 3 and it actually combines the features of the Headway 2 inspector tool plus the element call-out.
Did you know? Headway 3 has Google Font integration built right in. That’s right! You can select Google Fonts right from Design Mode without having to add any code. How cool is that?
There is also an Element tree on the right hand side of the screen for you to manually choose any element you want. You can style one content block one way and another content block another way. This is where the Instances and Customize for Current Layout come into play so make sure you understand that.
That is a lot of information, no? Once you’ve got a grasp on that, continue to the next section where I will discuss the features that did not make it into Headway 3 and compare the available leafs and blocks.
Overview of Major Headway 2 Features Not In Headway 3
There are some Headway 2 features that did not make it into Headway 3 for various reasons. So let’s go over them:
Precise Leaf Resize: You have to draw your blocks on the Visual Editor to the size you want them. There is no precise resize for you to quickly set the dimensions you want. Because you can draw the block to the size you want as long as they fit your grid setup, there’s no need for a precise resize.
Grid Wizard: Although there is a Grid Wizard in Headway 3, it’s not quite the same as Headway 2. You can still select to build your own layout or a preset but there no option to select any styling in the Grid Wizard.
Styles: There is not a styles feature in Headway 3 that is comparable to Headway 2 – that is, there are not built in color schemes or a way to save a color scheme in the visual editor for use later on the site or to export and import into another site.
Export/Import Options: There is not currently a complete Headway site export nor is there a way to export your SEO settings. (There is, however, a feature to export/import Templates, layouts, and block settings).
Easy Hooks: Sadly, this is not offered in Headway 3. However, there are options to get similar functionality. OpenHook is a free plugin that gives you access to most of the Headway hooks
Leafs and their Block Equivalents
Please keep in mind, I am only discussing the core Headway Blocks (meaning, the ones that come built-in to Headway). There may be a block in Extend that has the exact functionality that you want.
|Widget Ready Sidebar||Widget Area|
|Featured||You can use either the Content Block or the Listings Block but there is not a post rotator|
|Recent Posts/RSS||You can use either the Content Block or the Listings Block to list posts|
|There is no completely comparable block but there is a Social Block which lets you link to various Social Media profiles with ease|
|About||There is no completely comparable block but there is a Text Block where you can add text and images with a visual editor, a custom code block where you can add code yourself and an image block|
Additional Block Available in Headway 3
Headway 3 also has additional blocks that were not available as leafs in Headway 2.
|Header||Easily add an image that links to your homepage (typically a logo) or show your site title/tagline as text. You can have a different Header on each layout if you wanted to.|
|Navigation||The navigation block let’s you pick where you want to show your menu. You assign which menu goes with which navigation block in WP Menus area.|
|Breadcrumbs||Show breadcrumbs easily. You can have breadcrumbs on some layouts but not others.|
|Footer||Pretty much the same functionality as in the Footer area in HW2 but again, you can have different footers on different layouts and you don’t
have to use the footer block. Some people choose to use the Widget Block and put it horizontal for a widgetized footer.
|Embed||Embed a YouTube or Vimeo video or any other oEmbed service on a layout|
|Pinboard||Have your posts appear similar to Pinterest|
|Image||Add a single image anywhere you’d like|
|Search||Add a WordPress powered search form anywhere you’d like|
|Listings||Easily make a list of posts, pages, categories, tags, etc.|
|Social||Easily link to various social media profiles|
The Headway Options, including SEO, and the Tools are generally the same. However, much of the settings in Headway 2 under Configuration are contained within the block settings (specifically the content block settings). You can still specify a favicon in the Headway Options as well as a URL for your RSS feed.
You’re still here? Good. The final section will go over how we convert a Headway 2 design to Headway 3.
How to convert a Headway 2 design to Headway 3
Great, now that you know the terminology and the differences, let’s get started with converting a Headway 2 design to Headway 3. I’ll be posting screenshots as I go. Remember, if you are more of a visual learner, a screencast of this process will be posted soon.
To start, let’s see what the Headway 2 layout looks like:
So these are the steps I am going to take:
- Open the HW3 Visual Editor in Grid Mode.
- Draw my blocks to create the layout
- Change some block settings to get the desired result
- Open Design Mode and style to get desired result
Let’s get started, open the visual editor.
You should open up to a blank grid and one wrapper. Like this:
Your wrapper may be smaller. I resized mine. In Headway 2 there was only one wrapper but since Headway 3 has the ability for multiple wrappers, we are going to use multiple wrappers in this tutorial.
Now I’m going to click on the grid, hold down the left mouse button and draw a block on the grid. This is going to be the navigation block that is at the top of the HW2 design. Once I release the mouse button (after I get the block size I want), then I should see this screen below:
Click on the navigation button and the block will change to a navigation block. Now I’m going to make my navigation block smaller in height to more match the HW2 design. So to resize a block, grab the edge you want to resize by clicking and dragging on the edge you want and pulling upwards. Once you have the desired block height, let go.
Now you can resize wrappers the same way (the top and bottoms, anyway – the wrapper width is determined by the Setup settings and what type of wrapper you are using: fixed or fluid). Once you save your wrapper (and refresh), the bottom of the wrapper with automatically align with the bottom of the lowest block within that wrapper. You can resize it manually as well.
Once you resize your block and wrapper, you should see something like this:
Now remember from earlier that those pluses on the left hand side add wrappers when you click on them? Click on the bottom plus sign.
If you’re following along as I’m doing this tutorial, you’re probably realizing that building a site is Headway 3 is fun (and easy). And if you haven’t yet, you will!
Now we are doing to draw and select our Header Block. Since we are trying to replicate the HW2 design and HW3 does not have the RSS subscription option to appear right in the Header Block, I am going to draw two blocks. One for the Header Block and one for the RSS Subscription link.
You’ll notice I drew a Header Block and a Text Block. Now please read this import tip..
The tops of your blocks need to align to form clear rows for the grid renderer. If you want a block to be out of the top of the row when viewing the site, then you will need to use margins, padding, or positioning (in Headway 3, called nudging). Please see
this article for more information on lining your blocks up right.
We will come back and add our content in the text block after we’re done adding the rest of our blocks. Now let’s add another wrapper below the wrapper we just created. So again, click the bottom plus (+). After you add the wrapper, draw a block and choose content. Then draw a another block next to it and pick Widget Area.
If you’re worried about the space in between wrappers, don’t worry, we can adjust that and it is easy. We’ll do that at the end.
After you draw the content block and widget block, you should have something like this:
Remember: The height you draw your blocks sets the min-height to that amount so be careful about that. The majority of blocks are fluid: the block will expand to fill the content.
Now, we just have one more block to add to have the basic setup of of the HW2 design. We need to add a footer block below the content and widget area. To do that, we need to adjust the height of our last wrapper making it taller. Hover over the bottom edge of the wrapper and the cursor will change to a cursor that has two arrows: one pointing up and one pointing down, indicating that you now can resize the wrapper. Once you resize the wrapper, draw a block and pick Footer.
Next, if you haven’t already, click Save in the upper right. It should be a blue button. Please make sure you save on a regular basis. If you have unsaved changes and try to exit the window or tab the Visual Editor is in, you should see this window (unless for some reason the window is blocked from appearing by things such as a pop-up blocker):
If you see this warning, click on Stay on this Page, otherwise your changes will be lost.
A good rule of thumb is: save often.
Then, if we click on View Site now without doing anything else, this is what you should see. Don’t worry – we haven’t added any styling yet. We will!
Add widgets and assign menu
Now, we need to add the widgets to our widget area and also assign our menu to the navigation block.
You add widgets the same way you would for Headway 2 – in the WordPress » Appearance » Widgets screen.
You assign the menu to the navigation block the same way you do other themes – WP » Appearance » Menus.
For more on assigning menus, please see the screencast on this topic.
Now, when you view the site, you should see your assigned menu in the navigation block and the widgets added to the widget area.
Now we really have 4 things left to do in Grid Mode:
- Make our navigation block smaller in height
- Add our navigation search box
- Add our RSS feed link
- Adjust margins on the wrappers
Make our navigation block smaller in height
Click and drag the bottom of the navigation block upwards until you see the min height at 10px.
Adding navigation search field
In Grid Mode, open the block options of the navigation block by right clicking on the block and choosing Open Block Options
Then, click on the search button/tab and check the box next to Enable Navigation Search.
Once you view your site, you should see a search box in the navigation block. Once you’re set with that, now we need to add the RSS feed link in the text block.
Add RSS feed link to text block
Open the block options for the Text block by right clicking on the text block and choosing Open Block Options. Then in the bottom panel, you will see a pencil next to the word Content, click on that to open up the text block editor. Here we will add the link to the RSS feed. Click the link button (it looks like a chain link, get it?). Once you do that, select Insert Link.
Next a window will pop up with two fields: URL and Text. In the URL field, type the URL of your RSS feed. This is typically your domain name or site address with the word feed at the end. In the Text field, type the text you want to display for people to click on. Then hit insert.
The last thing we need to do is right align the link so it will be like the HW2 link. Put your cursor over the link in the Text Editor window and click then select the right align button to right align it and save.
The link should right align right inside the Text Editor window like this:
And now the last thing we need to do in Grid Mode is adjust the wrapper margins. To do that, hover over the top wrapper until you see the icons on the right. There is an up and down arrow and an icon in the middle. If you click and drag the up arrow, it will reduce/increase the top margin for the wrapper. If you click and drag the down arrow, it will reduce/increase the wrapper’s bottom margin. If you click the icon in the middle, you can re-arrange your wrappers so you are not stuck with wrappers in the order you added them. We are going to adjust the
Top Wrapper’s bottom margin to 0, the middle wrapper’s Top & Bottom Margin’s to 0 and the Bottom Wrapper’s Top Margin to 0.
The other way you can do this is to click the gear icon you see below the down arrow to open the wrapper options. Once there, you can either type in the box (erasing what is already there) or you can use the sliders. Either method you choose, once you are done, your grid should look like this:
Make sure you save and then hit view site to see the the wrappers touching either other with space above and below the whole grid. You will see some shadows between wrappers but don’t worry, we’ll remove that in design mode.
Now, it’s time to style our site like the HW2 site!
Click the icon to enter Design Mode and this is what you should see:
That tooltip on the right you can exit out of by clicking the X in the upper right hand corner of the tool-tip. We are going to start by styling our top wrapper.
Find the colors used in the HW2 Design
If you want to replicate the HW2 design and use the same colors, you’ll need to know what colors are used. I used Chrome’s developer tools (inspect element) to find the colors used and then I put them in a Mac app I use called Sip to have them at my fingertips. You should use whatever method suits you best.
Styling the Top Wrapper
First, use the inspector to select the wrapper. If you’ve selected the wrapper with the inspector, you should see something like this:
Right click on the wrapper (make sure you are selecting the wrapper, not the block within it). Once you do that, select “edit this instance”. Remember the difference between instance and regular element? If not, scroll up and review it.
Once you select “edit this instance” you should then see the following
Click on the background icon, then next to color, select customize. A box should appear with a color (in this case it will be white because wrappers are set to white globally). Click the white box.
A color selector window will pop up. Click the box next to the pound sign (#). That is where you enter the hex code of the color you want to use. In this case, I am using 990000 for dark red. The pound sign (#) is already included so do not input that into the box.
Go to Padding, click Customize for top and bottom padding and set the Top to 10px and the Bottom to 4px.
Next we are going to make some adjustments to the navigation block. So we need to select that by right clicking on it. Make sure, again, you are selecting the whole block and not an element within it. You will know because the tooltip tells you what you have selected. You should see this:
Once you’ve selected the navigation block, right click and choose “Edit Regular Element”. We are styling globally because we only have one navigation block (as opposed to styling the instances of wrappers because there are multiple).
Click on Borders. Hover next to each option in there until an X appears. Click all of the X’s. Once you are done, your borders area should look like this:
That will get rid of the borders above and below our navigation block. Next we need to change the color of the menu items. This time hover over a menu item, make sure you have the menu item selected by the inspector, then right click on it and choose “edit regular element”.
This time, click on Fonts. Click on the gray box next to the word Font Color to bring up the color inspector again. This time I’ll be using this color E07E7E.
Also scroll down to Letter Spacing and input 1px. Then change the Font Size to 12px.
Next we need to change the hover for the menu items to have an underline like the HW2 design and remove the gray on hover. So we go up to the Element tree, click on the plus (+) next to States underneath Menu Item and select Hover. Then click on Fonts, hover next to font color until the X appears, and click the X to remove that customization. Then scroll down to to Text Underline and change it to underline.
Next click on the selected state (above hover), click on Fonts and then click on the Black box and input the following color: FFE6E6. This changes the color when a menu item is the active/current page.
Finally, select the search input box, right click and choose “Edit Regular Element”. Click on Background, then in the color selector window, drag the transparency slider until the A says 60%.
Next, click on Borders and add 1px black border with about 35% transparency.
Then, click on Fonts, go to Font Color and select Black.
One last thing to customize, is the sub-menu and sub-menu items. In the Element Tree, click on Blocks, then the + next to Navigation, then select Sub Menu. Click on Background, click on the gray box, and then select the same red we used for the Wrapper background: 990000.
Styling the 2nd Wrapper
Next select the wrapper that has the Header block and text block in it, choose “edit this instance”. Click on Background, then click on Customize next to Color. In the color selector, input this color: 233038. That is the dark blue.
Next in the Header block, select the Site Title, right click and choose “Edit Regular Element”. Click Fonts, then next to Font Color, click on the Black box and input this color into the color selector: dedede.
Next, selector the tagline in the Header block, right click and choose “Edit Regular Element”. Click Fonts, then next to Font Color click on the the gray box and input this color into the color selector: 6b7880.
Next, select the Subscribe via RSS link, make sure you have the hyperlink selected, right click and choose “Edit Regular Element”. Click Fonts, then next to Font Color, click on Customize and input this color into the color selector: c4c4c4.
Styling the 3rd wrapper
Select a Post Title, right click on it and choose “Edit Regular Element”. Then click on Fonts, click the box next to Font Color and use the same red we used for the top wrapper: 990000. Next, click on Customize next to Capitalization and choose Uppercase.
Next, click on the plus (+) next to States in the Element Tree under Title, and select Hover.
Click on Fonts, then Customize next to Font Color. In the color selector window, enter this color: de2f2f. Next click on Customize next to Font Styling and select Bold.
Next select a Widget Title (not the Widget Title Inner), right click and choose “Edit Regular Element”. Click on Borders, and reset all of the options there like we did for the navigation block. Click on Fonts, scroll down to Font Styling and select Bold.
Removing the box shadow on all Wrappers
Next either scroll up in the Element Tree and select Wrapper (or select any wrapper with the inspector, right click and choose “Edit Regular Element”), then go to Box Shadow and reset everything there like we’ve done with the Borders on other elements.
Adjust the top & bottom padding for all Wrappers
With the same element selected (Wrapper), click on Padding and change the top and bottom padding from 15 to 10px.
Lastly, we need to select the right site fonts
The HW 2 design is using Arial for all fonts except Georgia for the Site Title, Post/Page Titles and Widget Titles. To fix this, we need to do the following:
In Global Styling, click on Text, then Fonts, click on the pencil next to Palatino. A window will come up where you can select Arial by hovering over the row Arial is in and then clicking the Green checkbox.
Next, select the Site Title again, right click and choose “Edit Regular Element”. Click on Fonts, next to Font Family, click on Customize. Then Click the pencil icon to bring up the font window and select Georgia.
Repeat this for the Post Titles and Widget Titles (selecting the Regular Element each time).
We are going to remove the 10px of default bottom margins that are applied to all blocks. Click on Global Styling, then Block. Find Margins and where it says 10px for the bottom margin, change that to 0 (Note: do not click the X to reset because that will not remove the 10px in this case. It has to be set to 0 to override the default 10px).
You will probably notice some slight differences, but it looks pretty good. This article and tutorial are very long and the tutorial especially is very detailed to help you make the transition from HW2 to HW3 with ease.
Please keep in mind, that the screencast assumes you’ve read the above article in full.
The following colors are used in this screencast:
990000 (Top wrapper + Post Titles)
e07e7e (Menu Items)
ffe6e6 (Menu Items – Selected)
233038 (2nd wrapper – Header and Text blocks)
d3d3d3 (Site Title)
6b7880 (Site tagline)
c4c4c4 (RSS link)