HomeDesigning › Design grid

Design grid

Grid

Design grid information:

  • The content area is 1000px wide
    That means that unless a page is set to full width in the Page Properties the main column as well as the left and right sidebars (if any) will always be 1000px wide.
     
  • In addition to the main column, a page may also have sidebars
    Depending on how you set up the main navigation in the Design settings, a page may display navigation on the left sidebar. You may also set content blocks to appear on the left or right sidebars. Their widths will always be as follows:
     
    • Left sidebar: 190px + 14px gutter
    • Right sidebar: 290px + 14px gutter
       
  • The main column width will adjust automatically
    The main column width will vary according to the presence of sidebars:
     
    Sidebar? Main column width
    None 1000px
    Left only 796px
    Right only 696px
    Both 506px

     
  • You can also change the left/right sidebars width
    By default, they are 20% and 30% of the page width. You can reverse that ratio through a setting in Design > Layout > Advanced layout settings. In that case:
    • Left sidebar: 290px + 14px gutter
    • Right sidebar: 190px + 14px gutter
       
  • The left, main and right columns can have internal padding
    For instance, if you find that the lines are too long on the main column the system lets you specify a right margin so that they become more legible. You can enter margins for the Home page and for all the others (globally) in the Design settings.  
Top of page