How to Modify the Home Page Grid Layout for Headway

Posted OnMar 19, 2015     CategoryThemes     CommentsNo comment

In this section of the guide to the Headway Themes, we will focus on modifying the grid layout for the home page of your new website!

Step 1) Login to the WordPress Dashboard.

Modifying the Height & Width of the Home Page Elements

Step 2) From the top toolbar, navigate to Headway -> Visual Editor -> Grid.

km-headway-design-01ab

For this example, the Header area will be resized.

Step 3) Hover over any border line of the Header area to display a black pop-up box which displays the current width and height of the header area. The mouse pointer will change to display arrows on both the top/bottom (for height) and left/right (for width).

Step 4) Drag the mouse up/down or left/right to reduce/expand the Header area’s height or width.

km-home-01a

Step 5) Release the mouse once you are satisfied with the size.

For this example, the Header height was reduced as shown below.

km-home-02a

Step 6) Click the Save button to save the changes.

km-home-03a

Repeat the above steps to reduce/expand additional areas of your home page layout.
For example, body layout, sidebar layout, footer layout.

Taking a Snapshot

It is always a good idea to take a Snapshot of your design along the way. If needed, you can always revert back to a previous Snapshot.

Step 7) From the top toolbar, click Snapshots to display the Snapshots pop-up window.

Step 8) Click the Save Snapshot button.

km-home-04ab

Step 9) From the Snapshots pop-up window, enter a name for your Snapshot (optional).

Step 10) Click the OK button to save the Snapshot.

km-home-05a

Step 11) Once this process has completed, click the X button to close the window.

km-home-10a

Reverting to a Previous Snapshot

Step 12) From the top toolbar, click the circle icon located to the left of Snapshot to display the Snapshots pop-up window.

km-home-11a

Step 13) Hover over the appropriate Snapshot.

Step 14) Click the Rollback button to begin the Rollback process.

km-home-12a

Step 15) Once this process has completed, click the X button to close the window.

km-home-10a

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

The next step of the guide will focus on How to Configure the Headway Grid Layout.

 


Leave a Reply

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

Send this to friend