Headway Themes – A Working Example: Part 3

Posted OnApr 2, 2015     CategoryThemes     CommentsNo comment

In this Working Example, we will create a grid a Single Page layout, including a content area and sidebar (widget area), and then add some styles to it.

Step 1) Login to the WordPress Dashboard.

Design a Page Layout

Step 2) Navigate to Headway -> Visual Editor -> Grid.
Step 3) From the top toolbar, click the down arrow to the right of Currently Editing Home Page.
Step 4) Mouse over Single and click the Edit button to display the Grid Wizard.

Checkpoint 1

km-headway-work-70a

Step 5) Click Clone Existing Layout.
Step 6) From the Choose a Layout to Clone dropdown list, select Front Page.
Step 6) Click the Clone Layout button.

Modifying Content Area

Step 5) Right mouse click over the Content area and select Switch Block Type.
Step 6) Click Content to add this block.
Step 7) Resize this block to about 2/3 of the original size.
Step 8) Right mouse click over the block you just added and select Duplicate Block from the pop-up menu.
Step 9) Resize this block to 1/3 of the original size.
Step 10) Right mouse click over the Content area and select Set Block Alias.
Step 11) Enter About Template in the textbox.
Step 12) Click the OK button to confirm the selection.
Step 13) Click the Save button on the top toolbar to save any changes.

Checkpoint 2

km-headway-work-71a

Switch Block Type for Content Area

Step 14) Right mouse click over the Content area and select Switch Block Type.
Step 15) Select Content.
Step 16) When prompted to over-write existing, click the OK button to confirm.
Step 17) Navigate through the Content Block tabs to tweak the Content Block.

Switch Block Type for Sidebar

Step 17) Right mouse click over the Sidebar area and select Switch Block Type.
Step 18) Select Widget Area.
Step 19) When prompted to over-write existing, click the OK button to confirm.
Step 20) Click the Save button on the top toolbar to save any changes.

Add Widgets to Sidebar

Step 21) Right mouse click over the Sidebar area and select Open Block Options.
Step 22) Click the Default Widgets tab.
Step 23) Add Widgets as needed.
Step 24) Click the + button to add additional Widgets.

Checkpoint 3

km-headway-work-76a

Step 25) Click the Save button on the top toolbar to save any changes.
Step 26) Click the View Site button on the top toolbar to to view the changes.

Checkpoint 4

km-headway-work-77a

Modify Font & Font Size for the Content & Widget Blocks

You will notice that the Font on the Navigation Bar needs to be changed to match what was done on the Home Page.

Step 27) Click the Paint Brush icon on the top toolbar.
Step 28) Click the Left arrow on the right to display the Design Layout.
Step 29) Expand the Block area.
Step 30) Hover over the Navigation text and click on Edit Element Only on this Layout.
Step 31) Change the Font to Arial.
Step 32) Change the Font Size to 16px.
Step 33) Click the Save button on the top toolbar to save any changes.
Step 34) Click the View Site button on the top toolbar to to view the changes.

Repeat the above process to change the font style and font size for the Content and Widget areas to suit your needs

Checkpoint 5

km-headway-work-78a

The next step of the guide will focus on Headway – Finishing Up.

 


Leave a Reply

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

Send this to friend