How to Setup the Headway Themes Grid Layout

Posted OnMar 20, 2015     CategoryThemes     CommentsNo comment

In this section of the guide to the Headway Themes, we will focus on configuring the setup of the grid layout.

Step 1) Login to the WordPress Dashboard.

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

km-headway-design-01ab

Step 3) Click the Setup button, the up arrow or CTRL+P to expand the Setup area.

km-headway-setup-10a

Setup – Grid

The content in the grid above will not reflect how your site actually looks. The content inside the blocks is to give you a general reference while you wireframe and build the layout to your site. The settings below are global and are not customized on a per-layout basis.

Step 4) Complete the fields for the Grid area as shown below:

A. Default Column Count The Column Count is the number of columns in the grid. This is represented by the grey regions of the grid. This will not affect wrappers that are already created. It only affects wrappers that are created after this setting is changed.

Enter a new value in the Column Count textbox, drag the blue circle, or click the up/down arrows to accomplish the same task.

For this example, no change was made.

B. Global Column Width The Column Width is the amount of space inside of each column. This is represented by the grey regions on the grid.

Enter a new value in the Column Count textbox, drag the blue circle, or click the up/down arrows to accomplish the same task.

For this example, no change was made.

C. Global Gutter Width The Gutter Width is the amount of space between each column. This is the space between each of the grey regions on the grid.

Enter a new value in the Gutter Width textbox, drag the blue circle, or click the up/down arrows to accomplish the same task.

For this example, the Gutter Width was changed to 15 from 20.

D. Global Grid Width This is the width of the new site. By default this value is set at at width of 825 px. For this template, this field is read-only and can not be changed.

km-headway-setup-11a

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

If the fields were completed as outlined above, they will display as follows:

km-headway-setup-12a

Setup – Responsive Grid

The Headway Responsive Grid allows the powerful grid in Headway Base to be custom-tailored depending on the device that the visitor is viewing the site from. Some sites may benefit from having the responsive grid enabled while other will not. As the designer of the website, it is up to you to decide. The responsive grid can be enabled or disabled at any time.

For this example, no changes were made.

km-headway-setup-13a

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

Step 7) Click the down arrow or CTRL+P to hide the Setup area.

The next step of the guide will focus on how to How to Add a Wrapper to the Headway Grid Layout.

 


Leave a Reply

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

Send this to friend