Headway Themes – A Working Example: Part 1

Posted OnMar 31, 2015     CategoryThemes     CommentsNo comment

In this Working Example, we’ll start setting up the theme as if it were a real site, selecting a Grid layout for the Home Page and building out from there.

Step 1) Login to the WordPress Dashboard.

Selecting a Grid Layout

Step 2) Navigate to Headway -> Visual Editor -> Grid.
Step 3) Click the down arrow to the right of Currently Editing Front Page.
Step 4) Click the Reset button to clear any existing design.
Step 5) Click the OK button to confirm you want to clear out everything and start fresh.
Step 6) From the Grid Wizard pop-up, select Presets.
Step 7) Click the Preset with no Sidebars.
Step 8) Click the Next button.
Step 9) On the Grid Wizard -> Mirror pop-up window, no blocks were selected to Mirror.
Step 10) Click the Finish button.

Checkpoint 1

km-headway-work-01aa

Change Layout to Fluid

Step 11) Right mouse click over the new Wrapper and select Change Wrapper to Fluid from the pop-up menu.

Checkpoint 2

km-headway-work-03a

Step 12) Click the Save button on the top toolbar to save any changes.

Move Wrappers

Step 13) Drag, move and resize the Wrappers as shown below:

Checkpoint 3

km-headway-work-62s

Step 14) Right mouse click over the Header and select Set Block Alias.
Step 15) Enter Main Header and Menu in the textbox.
Step 16) Click the OK button to confirm the selection.
Step 17) Click the Save button on the top toolbar to save any changes.

Add Header Image

Step 18) Right mouse click over the Header area and select Open Block Options.
Step 19) From the General tab, upload a new Header image.

Modify Navigation Bar Wrapper

Step 20) Click the Paint Brush on the top toolbar.
Step 21) Click the Left arrow on the right to display the Visual Editor options.

Checkpoint 4

km-headway-work-63s

Step 22) If necessary, change the background color to White.
Step 23) Change the Font Size to 16px.
Step 24) Make any other adjustments as needed to customize.
Step 25) Click the Save button on the top toolbar to save any changes.

The next step of the guide will focus on Headway – A Working Example Part 2.

 


Leave a Reply

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

Send this to friend