Documentation › The Basics of Customizing a Layout

The Basics of Customizing a Layout

When you first install Headway, the entire site inherits its layout from the Blog Index layout, which uses a simple preset. If you want to make a type of page have a different layout, even if it’s to add only one block, you customize those layouts. (See also Before You Start Using the Visual Editor.)

These steps assume you are customizing a layout other than Blog Index. If you want to customize Blog Index and don’t want to start from the default preset, click Grid Wizard in the Tools menu, and start with step 3 below.

  1. In the WordPress admin panel, click Visual Editor in the Headway menu. The editor opens in Grid Mode to the Blog Index layout. Note: You may want to open the Visual Editor in a new window—it opens in the same window by default.
  2. In the layout selector, mouse over the layout you want to customize, and click the Edit button. The Grid Wizard opens.
  3. To customize the layout from scratch, click Use Empty Grid. Otherwise, select a layout to clone, a preset to start from, or a layout template to assign. Note: If this layout will look much like other layouts, it is recommended that you not start from an empty grid. Instead, you may want to clone another layout.
  4. For each wrapper you want to add:
    1. Click the plus icon to the left of the grid.
    2. Click the handle to the right of the wrapper and drag to change the wrapper’s order.
    3. Configure the wrapper’s columns and gutters using the options panel.
  5. For each block you want to add:
    1. Click and drag across the grid to form a square or rectangle.
    2. Click a block type in the options panel.
    3. Configure the block using the options panel.
  6. Resize blocks by clicking a border and dragging it to a new position. Move blocks by clicking and dragging them.
  7. Click Save.
  8. When you’re ready to apply styles to your blocks and content, click Design in the header.
  9. In the Design Editor’s element tree, click an element to style. If needed, click a child element. Alternately, right-click an element in the viewport, and select an editing option.
  10. Click a property group in the design editor to expand it, and then select or type a value for individual properties. As you change values, the page in the viewport is updated so you get real-time feedback about your selections.
  11. When you are finished, click Save.

Note: The process of customizing a shared layout you have created is the same as customizing a regular layout. See Using Shared Layouts.

This article was last updated for Headway version 3.8.3.

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