Design Mode’s focus is the visual style of your website—colors, fonts, backgrounds, and so on. Layouts and blocks need to be in place inGrid Mode before you can style them in Design Mode.As you use Design Mode to select values for the various properties of blocks and other elements in the Design Editor, Headway converts these settings into CSS classes and rules on your live website. As a result, if you’re not an expert with CSS, you can rest easy knowing that Headway is taking care of it. For those whoare comfortable with working in CSS directly for advanced and targeted styling, Design Mode has the Live CSS Editor.As you make changes to styles, their effects appear in the viewport so you get immediate feedback.To open Design Mode, do one of these things:
- Click the paintbrush icon in the Visual Editor menu bar.
- In the WordPress admin panel, mouse over Headway in the header to open the menu. Then go to Visual Editor and click Design in the submenu.
Here’s a diagram of Design Mode.
Working in Design Mode involves these basic activities (they’re discussed in more detail below):
- Choosing a layout in the layout selector to style (only layouts customized in Grid Mode can be edited)
- Selecting an element or block in the Design Editor or in the viewport
- Setting style properties for the element
Selecting a Layout
Click the layout selector in the menu bar. Mouse over the layout you want to style, and then clickEdit. The viewport displays a live version of the layout you selected.Layouts must be customized in Grid Mode in order to be styled in Design Mode.
Selecting an Element or Block
You can select an element or block to style for 1) all layouts, 2) a specific layout, or 3) an instance:
the element or block of a certain type on a specific layout. Select an element or block in either the options panel or the viewport. For more information about editing for all layouts, a specific layout, or an instance, see Targeting Elements for Styling: Levels of Customization.The options panel contains these types of elements that you can define styles for:
- Structural elements. These elements appear under the “Structure” section of the element tree in the Design Editor. They have no child elements.
- Blocks and block child elements.
These elements appear under the “Blocks” section of the element tree.Any child elements for a block appear below the block when you click it.
- Text and other defaults.
These elements appear under the “Global Styling” section of the element tree. They correspond to general HTML elements and block elements, and they can be overridden by style settings for specific blocks or block types.
Setting Style Attributes
Styles available fora selected element appear below the element tree in the Design Editor.When you first begin designing, nearly all elements have the default setting of inherit.You’ll see different controls, depending on the type of value or sets of values a property takes. See Design Editor for more information. The illustration below provides examples using the “Site Title” element.
A blue bullet appears in the Design Editor next to an element that has been customized and next to property groups with customizations.
Configuring Block Options in Design Mode
- Right-click the block you want to configure.
- Click Open Block Options.
- Set your options in the options panel.