The focus of Grid Mode is the layout of your site in blocks and theconfiguration of the blocks’ behavior—basically, your site’sfunctionality.To open Grid Mode, do one of these things:
- Click Grid in the Visual Editor header.
- In the WordPress admin panel, click Headway in the header, and then click Visual Editor. (You can also click Grid in the Visual Editor submenu.)
Here’s a diagram of Grid Mode.
Working in Grid Mode consists of a few main activities:
- Selecting a layout in the layout selector to edit
- Drawing and arranging blocks in the grid (discussed further below)
- Configuring your blocks in the options panel
The grid, which is located in the viewport in Grid Mode, provides a visual way of laying out your website. It’s like a canvas that you draw your website on.
Note: Be sure that the correct layout displays the “Currently Editing” label in the layoutselector. If you find yourself editing the wrong layout, discard your changes by clicking Edit next to the layout you want to work on. Then click OK
when you’re warned that you have unsaved changes. If you saved changes before realizing you had the wrong layout open, you will either need to reverse each change manually or reset the entire layout.
Your design and content are represented in an abstract way on the grid,resembling a wireframe. Layouts consist of wrappers and blocks. As you create your layouts,don’t try configuring the grid and arranging blocks in the exact places where you want them to appear on your live website. Wrappers need to be stacked in the right order, and blocks should be in the general place you want them and line up with each other.
When you start editing an empty layout, it has a single wrapper, the large white square in the viewport. Wrappers are containers for blocks. If you are designing a somewhat basic website visually, you probably need only the one wrapper.
- Create a wrapper by clicking one of the add options at the top or bottom of the viewport.
- Move a wrapper by clicking the gray handle to the right of the wrapper and dragging up or down.
- Delete a wrapper by right-clicking on the cog button (or in an open space in the wrapper) and clicking Delete Wrapper.
Blocks represent types of content that will be displayed in a particular place in your layout.
- Create a block
by clicking and dragging in a wrapper. Blocks can’t be drawn on top of each other. For information about adding blocks using cloning, presets,or layout templates, see Grid Wizard.
- Move a block by clicking inside it and dragging it to the new position. See Mass Block Selection for another option for moving blocks.
- Delete a block by right-clicking the block and then clicking Delete Block.
For more information about blocks, see Blocks and Block Types.
Columns and Gutters
One of the first things you notice about the grid may be the vertical gray and white stripes. The gray stripes are columns, and the white spaces between them are gutters.Columns define the space available for blocks. Gutters create margins between blocks arranged next to each other. Blocks span both columns and gutters. The purpose of columns is to help you line up blocks and to control their size and placement within wrappers. For pixel-specific placement of blocks, use small adjustments to the nudging attributes inDesign Mode (see Using Margins, Padding, and Nudging).Each wrapper has its own column and gutter settings, but defaults can be set in the options panel (see “Grid Options” later in this article).
While in Grid Mode, change overall grid settings at any time by clicking the Setup tab in the options panel.
The grid options consist of default column count, default column width, and default gutter width for new wrappers. Use the sliders to widen or narrow the columns and gutters. The narrower the gutters, the closer to each other that blocks can be.
Left and right margins for blocks cannot be changed in Design Mode.Change the space between blocks by adjusting the gutter width or moving the sides of the blocks in the grid.
The overall grid or wrapper width is the combined width of the columns and gutters.
Responsive Grid Options
- Enable Responsive Grid (this is enabled by default in new installs as of version 3.8.2)
Toggling this option on allows the display of the site to change based on the device and available display space, such as stacking blocks and displaying horizontal menus as drop-downs. If this option is off, the website will appear the same across devices and screen resolutions.
- Disable Margin Wrapper for Smartphones.
Toggle this option on to remove the left and right margin value of auto when the site is viewed on a smartphone or small tablet. Instead, the margin is set to zero to avoid creating a vertical scrollbar. This option works only if the responsive grid option is enabled.
- Responsive Video Resizing.
If this option is enabled, embedded videos resize for small screens.Otherwise, videos may be cut off by the edge of the wrapper. This option works only if the responsive grid option is enabled.