How to Use Grid Mode Headway Themes
Copyright 2012 Headway Themes.
How to Use Grid Mode - Headway Themes
1
2
Setting up the Grid
1.1
Open Grid Mode
4
1.2
Getting Familiar with Grid Mode
7
1.3
Grid Setup
13
1.4
Using the Grid Mode Preview
16
Blocks
2.1
Draw A Block
19
2.2
Configure the Block
21
2.3
Modify Blocks
23
Setting up the Grid
How to Use Grid Mode - Headway Themes - 3
Open Grid Mode
There are two ways to open the Visual Editor. Once you are logged into your WordPress site, and
Headway 3.0 has been installed and activated, you can use the Visual Editor menu from the
Admin Toolbar when viewing the main page of your site, or from the WordPress dashboard on the
left (under the Headway menu).
Log Into WordPress
The Visual Editor is only accessible to Administrators who are logged into WordPress.
How to Use Grid Mode - Headway Themes - 4
Open the Visual Editor from the WordPress Dashboard
On the left-hand menu of the WordPress Dashboard, you will see an item titled "Headway 3.0", or
"Headway". Expand this menu to see the "Visual Editor" link. Click that.
Go to Grid Mode
Once in the Visual Editor, use the Visual Editor Menu Bar to access grid mode. Just click on "Grid".
How to Use Grid Mode - Headway Themes - 5
Or, Open Grid Mode in the Visual Editor from the Admin Toolbar
When viewing your site, unless you've disabled it in your user preferences, you will see the
WordPress Admin Menu Toolbar. This Toolbar has two Headway items; Headway Visual Editor (a
drop-down) and Headway Admin. Hover over Headway -> Visual Editor and choose "Grid".
How to Use Grid Mode - Headway Themes - 6
Getting Familiar with Grid Mode
The Visual Editor has several areas with various options and menus. Here's a quick overview:
Grid Mode Panels/Menus
There are a lot of options here! Details are below, here's a quick reference:
1. Layout Selector
2. Options Panel
3. Mode Menu
4. Menu & Status Bar
How to Use Grid Mode - Headway Themes - 7
Layout Selector
1. The Layout Selector
The layout selector on the left-hand side determines which layout of your site you are editing. A
layout could be a page, a post, the blog index (your homepage, unless you set up a separate
How to Use Grid Mode - Headway Themes - 8
Homepage and Blog Index), an archive layout, or a template.
2. Editing a Layout
Hover over a layout name to reveal an "Edit" button - click to edit that specific layout. Don't forget
that you must create a layout for your homepage in order for visitors on your site to see anything!
Without blocks on the homepage, visitors to your main domain can't get anywhere else on your
site.
When a layout has been customized already, it will say "customized" next to the name. When
layouts below a parent item have been customized, a little open circle appears next to the parent
item.
3. Layout Hierarchy
The layout selector is set up with a hierarchy, and you can follow this hierarchy to see what layouts
certain pages and posts will display. The Blog Index serves as the parent for all layouts, so if
you don't have any layouts set up except the blog index, your entire site will use the Blog Index
layout. This is great for simple sites - just set up one layout and you're done! For more complicated
sites, this poses no problem, becuase as you customize other layouts (the Single Layout, or a
specific page) those will take precedence over the Blog Index.
For example: If you set up the Blog Index, then the Single layout (under which you see that there
are the children Page, Post, and then another level down speciifc pages and posts!), everything
under Single inherits Single, and everything else - Archives, 404 - inherits the Blog Index.
Exception to the rule: When you set up a separate homepage, the homepage exists separately
from the rest of the hierarchy! Blog Index still rules, but the homepage is sort of like a sovereign
nation. It does it's own thing, always.
4. Reverting a Layout
If you edited a layout and then changed your mind, once you are editing it, hover over the layout to
get a "Revert" button - this will push it back to the default and it'll inherit whatever layout it's
supposed to according to the layout hierarchy rules.
5. Pages vs. Templates
At the bottom of the Layout Selector is a Pages and Templates tab. The Pages tab shows all the
layouts for the "pages" of your site - not just WordPress Pages, but posts, archives, etc. Anything
on your WordPress site with a url!
The Templates tab is where you can add templates, which you can then apply to specific layouts
under Pages. This can make building a site easy when you know you'll be using a specific
How to Use Grid Mode - Headway Themes - 9
under Pages. This can make building a site easy when you know you'll be using a specific
template over and over again. Templates are all linked together - so editing a template will
effectively edit the blocks on ALL layouts with that template assigned.
The Grid
The grid itself is the portion in the middle of the page; this is where you'll create and modify the
blocks that make up your site.
It's important to remmeber several things about grid mode:
1. This is not what your site looks like live! This is a wireframing and layout tool - you'll create the
blocks, you'll configure them, you'll draw blcoks to an accurate width and a minimum height. Most
Blocks will expand if necessary to fit the content within them (exception: media blocks, navigation
blocks). However, your site isn't striped (that's the grid, it's a visual aid) and the colors and fonts
you see arne't going to be accurate here.
2. The content blocks in the Visual Editor won't always show the content you expect. There's a
notice about this in yellow, but I can't reiterate it enough - so don't panic if what you see in the
Visual Editor in that content block isn't what you expected on the page. It doesn't mean your
settings are wrong - to verify, just check out the front end of your site!
How to Use Grid Mode - Headway Themes - 10
Options Panel
The Options panel is persistent across modes, though the available options differ in each mode. In
Grid Mode, the Options panel provides a variety of functions:
1. The Tools Menu
This icon appears on the top left. This menu provides access to the Visual Editor tour, an option to
clear the Headway cache (Headway Support may direct you to do this if you're having issues with
the Visual Editor) and the Grid Wizard.
2. Setup
The setup tab is where you'll configure specific grid options - the grid column & gutter width,
wrapper margin & padding options, and Responsive Grid options.
3. Show Preview
This button toggles between Show Preview and Show Grid (more on that later)
4. Search
Use this to search for the option you're lookig for - if you search " margin", for example, options for
"Wrapper Top Margin", "Wrapper Bottom Margin" and "Disable margin on smartphones" appear
below the search box (which pops up when you click on the search icon). Click the options to go
right to the option in Grid Mode.
5. Minimize
If you don't need the options panel at the moment (for example, you need more space on-screen to
draw blocks) you can mimize the Options Panel. This toggles to a plus icon; click that to open it up
again.
How to Use Grid Mode - Headway Themes - 11
Mode Menu
This toolbar allows you to switch between Grid Mode, Manage Mode, and Design mode. Click the
Headway themes logo to go to the members dashboard.
Menu & Status Bar
This main menu gives you options to save, see the status (what page you're editing, whether a
page is being saved, if there are errors saving) as well as links to the Support Site (help), your
administrative dashboard (WordPress backend) and to view your site (opens in a new tab/window)
The save button ights up green hen there are changes to save, and flashes a bit & toggles to
"saving" when saving. If there is an error, you'll see it in red (rare).
How to Use Grid Mode - Headway Themes - 12
Grid Setup
The grid width is determined by the combined gutter, column and padding widths defined in the
Grid Mode in the Visual Editor. These configuration options can be found along the Options Panel
under Setup, top left.
Find the Setup Options
In grid mode, find the Options Panel and make sure you're on the Setup tab.
Configure the Grid Setup Options
Here you can configure the grid's column width, gutter width, and view the overall grid width based
on gutters/columns combined. You cannot enter in a grid width directly, nor can you alter the
number of columns/gutters. Use the sliders next to the column and gutter width to adjust. The
gutters can slide all the way down to 0px if you want!
You will see the changes immediately above in the gird; any blocks on the grid will be resized with
the grid. You will see that the columns are represented in the grid by gray stripes, and the gutters
show the white grid background.
How to Use Grid Mode - Headway Themes - 13
There are 24 columns, 23 gutters. This is the 960 grid system. Read more about that here if you're
techie otherwise the only thing you need to know is that this layout tool makes our Headway grid
possible and makes common layouts and site widths possible.
Configure the Wrapper Options
The wrapper options include options to modfy the top & bottom margins as well as the vertical and
horizontal padding.
Here's a quick definition if that doesn't make sense:
1. Margins are space that you give an element OUTSIDE of the element boundaries
2. Padding is space that you give an element INSIDE of the element boundaries.
So the wrapper horizontal padding adds to the overall wrapper width (your grid width, plus the
horizontal padding x 2, for the right & left sides).
Configure the Responsive Grid Options
"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. Please note: some sites may
benefit from having the responsive grid enabled while others will not. As the designer of the
How to Use Grid Mode - Headway Themes - 14
website, it is up to you to decide. The responsive grid can be enabled or disabled at any time."
The responsive grid is disabled by default. Enable it with a checkbox!
What Does it Do?
The responsive grid attempts to rearrange blocks (in order, top left to bottom right) in a vertical
fashion for smaller screens only. You can see the responsive grid in action by visiting your site on
a smartphone OR just by resizing your browser window. Certain blocks have new behaviors in
Responsive mode - the navigation block will rearrange it's items to eventually - at it's skinniest - be
lined up vertically, the header block will resize your logo, media blocks can optionally resize
videos (see option above!) and media blocks with images embedded will resize dynamically. Post
thumbnails will also resize appropriately, and the text on the site will remain at a readable size.
Extra Block Options
Once responsive grid is enabled, blocks will have an additional option to hide the block for any of
the following: iPad, iPhone or Smartphones
How to Use Grid Mode - Headway Themes - 15
Using the Grid Mode Preview
Grid Mode has a "Preview" Button that lets you see what your site would look like on the front end.
As of version 3.2.2, all changes must be saved in order to view your grid accurately in Preview
mode. (Hint: This is changing in the next version - you'll be able to use Preview mode with
unsaved changes!) Preview mode takes into account any styling (or the lack of styling!) you've
done in Design Mode, so if you see something you want changed relating to color, backgrounds,
borders, fonts, etc - go to Design Mode next to work on it!
Get ready!
In Grid Mode, Add, edit, and configure your blocks to your hearts content.
Show the Preview
Still in Grid Mode, Click on "Show Preview" on the top right of the Options Panel along the bottom
of the Visual Editor.
How to Use Grid Mode - Headway Themes - 16
Check out the preview, then turn off Preview to edit blocks again.
Once you're done previewing your site, click on "Show Grid" to make more edits. To style the
elements you see on the page, you'll need to go to Design Mode.
How to Use Grid Mode - Headway Themes - 17
Blocks
How to Use Grid Mode - Headway Themes - 18
Draw A Block
Drawing a block is as simple as pointing, clicking, dragging, and releasing the click. You choose
the block type, and you're on your way.
Draw a square or rectangle shape on the screen
In any blank area, position your mouse pointer to a place where you'd like the top left corner of a
block to begin. Click and hold while dragging your mouse to the right and down, creating a
dotted-line rectangle or sqaure shape. When the block is the size and shape you want, release. If
you release too early, don't worry, the block can be reshaped at any time.
Choose a Block Type
Upon releasing your mouse click, a menu of block types (the Block Menu!) will appear. Click to
choose a block type from the menu.
How to Use Grid Mode - Headway Themes - 19
Add-on Blocks
Add-on blocks are available through Headway Extend, and will appear under a "Custom Blocks"
option in the block menu. Add-on blocks are installed as plugins, or integrated as part of a
Headway Child Theme. You can also click on "Add More Blocks" to find the custom blocks
available on the Headway Marketplace.
How to Use Grid Mode - Headway Themes - 20
Configure the Block
Block Configuration options differ greatly depending upon the block type. See the Headway
Codex for more information. (http://codex.headwaythemes.com)
Hover Over the New Block
Hovering over a new block activates the Block Toolbar Menu. This menu has an options icon; click
it to open the Block Options in the Options Panel at the bottom of your screen.
Review and Configure the Block Options
Each block has different options. Widget areas have options to set the widgets to align
horiozontally instead of vertically; content blocks have options to change the content displayed;
media blocks have options to embed a video or add images as an image rotator. Expore the block
How to Use Grid Mode - Headway Themes - 21
options by clicking the links on the left-most column in the Options Panel. Note that the lighter gray
bar at the top of the Options Panel is a navigation - you can have multiple block options open at
one time. Click the block titles to edit the options for that block.
Close the Block Options and Save Your Progress
Click the (x) next to the Block Title in the lighter gray Options Panel navigation bar to close the
optoins. when you are done with block configuration, don't forget to click the green "Save" button at
the top right of the Visual Editor.
How to Use Grid Mode - Headway Themes - 22
Modify Blocks
Once you've created a block, you have the option to delete it, resize it, reconfigure it, or change the
block type entirely.
Resize the Block
In Grid Mode, hover over one of the block edges, click, hold & drag to resize the block. Your mouse
cursor will turn into a little arrow to indicate you're in the right place. You can resize a block at any
of the four edges or at the four corners.
Editt he Block Settings
Just hover over the block settings icon and click to reveal the block options in the Options Panel
along the bottom of the screen. You'll see the options you've already chosen, and you can change
them as much as you'd like. Just remember to save!
How to Use Grid Mode - Headway Themes - 23
Change the Block Type
If you've created one type of block but then need to swap it out with another block type - say, a
custom code block needs to be switched to a content blcok - you can do this. Click on the block
type icon on the top left - this icon differs from block to block, but always appears directly to the
right of the block ID (the number on the top left of the block when you hover over it)
This will bring up the block menu again. Once you click this, you have to choose a block from the
menu below, or click the icon again to close the block menu without making any changes.
Choosing a block type from the menu - even if it's the same as the type you've already got in place
- will erase the block settings and give you a fresh block. Don't worry - there's a pop-up menu to
confirm that's what you want to do, and to warn you that your settings will be lost.
How to Use Grid Mode - Headway Themes - 24
Delete a Block
Deleting a block is easy: Click on the "X" on the top right of the block when you hover over it, (the
Block Toolbar) and then confirm your decision to delete!
How to Use Grid Mode - Headway Themes - 25