Documentation › Visual Editor Overview

Visual Editor Overview

The Visual Editor is the core feature of Headway. It gives you the tools to make the design of your WordPress website match your vision. As you make changes, Headway writes the HTML and CSS for you.

To open the Visual Editor, go to your WordPress admin panel and click Visual Editor in the Headway menu.

Modes: Two Sides of the Visual Editor

The Visual Editor is made up of two major parts: Grid Mode and Design Mode. Grid Mode provides a basic representation of your site so you can focus on the arrangement of its parts and configuring its functionality. Font families, colors, and so on are the domain of Design Mode.

Grid Mode

In Grid Mode, click and drag blocks to arrange them, and click and drag their boundaries to resize them. When you activate Headway Base, a default preset is used for the Blog Index layout.

Select a block type for each new block. The block type defines the block’s function, such as displaying a type of WordPress content.

Other articles provide more detail about the layout selector and the options panel.

Grid Mode doesn’t fully reflect your site’s styles. To view your site’s visual presentation, either click View Site in the menu bar, or switch to Design Mode.

Design Mode

In Design Mode, select the object you want to style one of two ways:

  • In the element tree of the Design Editor, locate and click an element or block.
  • In the viewport, move the mouse pointer over the object (be sure that the blue outline and tooltip indicate the object you want). Right-click the object with your mouse, and select the type of editing you want to do. Styles can be edited for a block across your website or for specific instances of blocks, such as on a particular page, so be sure to select the right option in the right-click menu.

See Targeting Elements for Styling: Levels of Customization for more information about selecting elements and blocks in Design Mode.

Once you have selected a block, set styles in the Design Editor. The effects of your changes are displayed immediately in the viewport.

If you are comfortable working with CSS code directly, the Live CSS Editor is available to you. To open it, click the Live CSS Editor button in the menu bar.

This article was last updated for Headway version 3.8.2.

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