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!

Spread the word!

5 Responses

  1. Hi, there!
    We did quite some thinking how to use this additional space around the 940 px with the Headway Grid and still be sure the website will be easy to browse for most of the visitors.
    What we found helpful are some statistics about the screen resolutions of the displays accessing the internet today. Here is the link to have a look at this info: http://www.w3schools.com/browsers/browsers_display.asp
     
    Then , we just have to add manually some more media queries when the website needs to fall back to 940px or 1040px , which is still 13% of the displays used today. 
     
    Headway Grid is helping us a lot when deciding on the basics of the design and it is really easy to just add some more media query conditions to make the website looking perfect for almost 100% of the web.
     
    Today, many clients already request that their redesigned website should make the most of use of the naturally visible screen area.
    Cheers

  2. Curtman40 says:

    Very informative post thanks for sharing, looks like a great tool.

  3. JacquesFrydman says:

    i cant find the gris option!

  4. MPR Studio says:

    Headway is awesome! I would love to see a feature that resets settings on individual blocks. I had some issues with my navigation, and since I did not know how to reset those settings easily, I just reset all of Headway. Good thing it is so easy to set up a site from scratch.

    • Clay Griffiths says:

      The easiest way to reset the settings on individual blocks is to delete the block and add a new one in the place of the old block :-)

Leave a reply

Current ye@r *

Headway Newsletter

Get the latest updates from our blog directly in your inbox! Are you ready to learn the latest from Headway Themes?

Copyright © 2014 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress