Documentation › Design Editor

Design Editor

The Design Editor is where you will add the styles – background colors or images, font sizes and colors, etc – for your website.  The all-new inspector can select any element on a layout, even elements that come from non-Headway plugins like Gravity Forms or WooCommerce.  This gives you unbelievable control over the styling of your website, without code!

 

Access Design Editor

Click on the paintbrush on the right hand side of the Visual Editor. See Figure 1.

hw-design-editor
Figure 1

 

Select an element to style

hw4-design-tabs
Figure 2

There are several ways to select an element.    See Figure 2.

  1. Using the Inspector
  2. Using the Navigator tab
  3. Using the Styles tab

 

Using the Inspector

hw4-design-editor
Figure 3

Hover over an element.  Left click to select that element only as opposed to all similar elements (such as all types of this element within any content block).

Right click to bring up a context menu where you can also select that element only but also have more options.  When an element is selected, it will be outlined in blue and the design panel editor tab will be populated.  See Figure 3 to the right.

Using Navigator Tab

hw4-design-navigator
Figure 4

The Navigator tab contains a tree of all of the elements on this layout. See Figure 4. Clicking on an element will result in selecting that particular element instance (as opposed to a global selection).

Once selected, the element is highlighted in blue and will be available to style in the Editor tab.  Those elements that have styles applied to them will be highlighted in blue.

Above the tree is a group called “Global Elements” where you can select elements like all blocks, all paragraphs, etc.

Even elements that are hidden from view will be accessible in the Navigator tab.  Examples include: blocks/wrappers hidden at different breakpoints or an off-canvas menu that is only visible at certain breakpoints.

Using the Styles tab

hw4-de-styles
Figure 5

The styles tab shows a list of each style contained in the Live CSS Editor in order. See Figure 5 to the right. You can, of course, re-order them if you’d like. Clicking on an element in the Styles tab will open that element up for styling in the Editor tab.

You will see an icon to the left of a rule/element in the Styles tab as depicted in Figure 5.  Typically you will see a blue brackets icon to the left.  However, other icons you can see:

  • A lime green “at” (@) icon which symbolizes a media query.
  • A purple “at” (@) icon which symbolizes a CSS animation.

You cannot yet write media queries or CSS animations with the design editor so to see these, it will come from built-in CSS for different features or your own custom CSS.

Other

hw4-de-other-rules
Figure 6

When you have an element selected, under the title or name of the element you are editing, you will see “other rules targeting this element”. See Figure 6.  This is a way for you to select a different level of customization as it shows you all current styling rules that are being applied to this element.

Levels of Customization

Left clicking on an element using the inspector or in the Navigator tab or using the Inspector and selecting Edit this Element  which all select the specific element only (instead of all elements of the same type).  Headway 3 users: this is the same as selecting “edit this instance”.

hw4-de-context
Figure 6

Right clicking will bring up a right context menu to give you more options. See Figure 6.

  • Edit This Element – Same as left clicking an element.  Selects that element for that block only.
  • Edit Elements Like This – Selects all similar elements in that block type or otherwise.
  • Edit All  – Will select that element/tag globally.
  • States – style states of element (e.g. Active, Hover)
  • Parents – Easily access a parent element/tag of the element you have currently selected.
  • Open Block Options – Block options are accessible when using design editor as well as layout editor

 

Sync between Design Editor and Live CSS Editor

The changes you make in the Design Editor get added to the Live CSS Editor.  If you were to make a change to an element directly in the Live CSS Editor and then try to edit that element in the Design Editor, the previously made change would be visible in the Design Editor.  They are synced!

hw4-live-css
Figure 8

You can access the Live CSS Editor by clicking the icon next to the tabs that looks like a less than sign and a greater than sign, also known as “angle brackets“.  See Figure 8 to the right.   You will see this angle brackets throughout Headway to signify the ability to enter code (e.g. in the Text Block TinyMCE editor, the custom code block).

Styling an element

Within the Editor tab you have many different available options.  First and foremost you see the name or description of the element you are editing followed by blue brackets.  If you click the brackets, you will see the css rule you will be targeting.  See Figure 9.

hw4-de-elementpng
Figure 9

 

 

hw-de-brackets
Figure 10

Here’s an example of what you will see if you click on the blue brackets {} next to element title. Figure 10:1

You can then select that text and copy and paste it into the Live CSS Editor, if needed.  Figure 10:2

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