Documentation › Terminology

Terminology

If you’re new to Headway, become familiar with these terms.

Visual Editor

The core feature of Headway, the Visual Editor gives website designers a visual way to develop WordPress sites. It is where you will add wrappers, blocks and style your website and see a visual representation of you site’s design.

hw4-ve

Grid

The “canvas” in the viewport in Grid Mode. The grid provides a way to arrange layouts for your site. Within each wrapper, the grid is defined by the number of columns and gutters.

Grid Settings Panel (below)

Adjust the global grid with by adjusting columns count and column and gutter width.  Also, access settings for the responsive grid.
hw4-grid-settings

The Responsive Grid is what enables your site to resize responsively.  You can adjust settings for it in that tab or turn it off completely (not recommended)

Layout Editorhw4-layout-editor

This is the tool that allows you to add wrappers and blocks and change options for each.

This editor will be active when you first enter the Visual Editor.  You can switch to the design editor by clicking the the button for the design editor and then switch back to the layout editor by clicking the Layout Editor button.

Design Editor

Allows you to style the elements on your site. Opens in panel on the right side of Design Mode. Use the Design Editor to select elements and blocks and apply styles to them using the inspector that is activated in the Design Editor.

hw4-de

Design Editor Panel

When the Design Editor is active, right side panel becomes the Design Editor Panel.  There are 3 tabs across the top: Editor, Navigator, Styles.  And a button to the far right that looks like < > which is the button for the Live CSS Editor

hw4-design-editor-panel

Editor Tab

Allows you to adjust the styles of an element you have selected with the inspector.  The changes you make in this tab are synced to the Live CSS Editor (and vice versa).

Navigator Tab

See a tree like structure/outline of the elements on the layout.  Click an element in the tree/outline to activate it for editing in the Editor tab.

Styles Tab

A clickable list of all of the styles you have applied to your site in the order they appear in the Live CSS Editor.  Clicking activates that element/selector for editing in the Editor tab

Live CSS Editor Button

Opens the Live CSS Editor that contains all of the styles for your site.  Changes made in Live CSS Editor will be synced to the Editor tab on the fly. Using this editor, you can add custom CSS classes or target specific blocks or elements with your own code. It’s recommended you use the Live CSS editor only if you are comfortable with working in CSS code.

Wrapper

A section of a layout that can contain one or more blocks. Each wrapper has its own settings for columns, gutters, and fluid or fixed width.

Add Wrapper Panel

The panel that opens when you click the plus (+) to access the blank and preset wrappers.  You click and drag a wrapper or wrapper preset onto the Grid.  The Add Wrapper Panel is only accessible in when the Layout Editor is active.

hw3-add-wrapper

Block

A section of a layout that serves a particular function, such as to display navigation, blog or page content, or widgets. Headway functionality depends largely on blocks.   You click and drag inside the grid of a wrapper to add a Block.

Block Options Panel

This is the panel that is on the right side of the Layout Editor where you can adjust block dimensions and options.  As needed, you can also click a button to float the panel so it is not docked into the panel on the right hand side.

he-bopanel

Alias

Used with Wrappers and blocks, it is a nice name you can give to each for easy identification in the Visual Editor.

Layout selector

Located in the top bar in the Visual Editor. Use the layout selector to specify the layout that you want to customize in either Grid Mode or Design Mode.

hw4-layout-selector

  Headway Template

A Headway template is a set of layout and style definitions that can be reused across websites. They include Live CSS code and shared layouts. One way to think of Headway templates is as themes that can be used interchangeably while still having Headway activated as the actual theme. (Headway templates should not be confused with child themes in WordPress.)

As you make changes to your design, the active Headway template is updated to include those changes. So a template can be a starting point for the design of your site. Or if it contains all the layout and design settings you want, you may want to leave it alone after installing and activating it.  You can have more than one Headway Template installed at any one time but only one can be active at one time.  Headway Templates apply site wide.

You access the Templates area inside WordPress.  Then inside the Headway admin area.  You can also access a link directly to the Templates administration page from inside the visual editor under Admin.

hw-templates

Headway Base

The basic Headway site template. Headway Base is very simple and clean so as not to bias your design.  It is the Template you will use if you do not add a blank one or install a pre-made or existing Template.

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