Setting up the Grid

One of the first things you’ll do when you install Headway is set up the grid. Setting up the Headway grid basically means that you’re setting up the width of your site, and determining the horizontal space between blocks. Headway is set up on a columns system with 24 columns and “gutters” in between each column. The width settings of the gutters and columns make up the total width of your website.

Choosing a Site Width

Choosing the width of your site might be something you’ve labored over, or it might be a question you didn’t think about! Your site width is important to the rest of your site, though – it affects the available space for your layouts and also can mean the difference between a usable site and a site with display issues.

You’ll hear varying opinions from experts around the web,  but in general you’ll find that for desktops, a site should be visible at between 940px and 1040px.  This should keep your site fully visible on most laptops and desktop monitors. And, of course, for mobile phones, you can make use of Headway’s responsive grid to hide blocks that aren’t relevant while Headway automatically stacks blocks and rearranges blocks into a nice, mobile-friendly vertical column.

Editing the Grid Settings

This part is easy; in the Visual Editor, ensure you’re in Grid Mode and click on the Setup link on the top left of the Options Panel.

Use the sliders on the Grid tab to change the width of the columns and the gutters. The site width will edit automatically in the display box on the right.

That’s it! Your grid is ready to go; once you’ve saved your changes, you can view the site and see how it looks across a few devices. Just remember to add some blocks and content first!