The Design Editor is the panel on the right side of Design Mode. Show and hide the editor by clicking the toggle bar along its left edge or pressing the Tab key.
The Design Editor contains an element tree. Elements with a plus icon (+) have child elements that can be customized. Click the plus or minus icons to expand and collapse sections of the tree. As you move your mouse pointer over elements, options appear for editing properties:
- Clicking the element’s name: changes to properties apply to all layouts (the regular element). Styling options open below the element tree.
- Clicking the pencil icon: changes to properties apply to the currently selected layout. Styling options open below the element tree.
- Clicking the code icon: the Live CSS Editor opens to that element.
By default, the tree shows elements and child elements that have at least one customization, but not states and instances. Several filters are located above the element tree. Show Styles.
Adds any properties you have customized for an element to the tree in collapsible sections beneath the element. Click the value to open that property beneath the tree and edit it. When you mouse over a property, a trash can icon appears. Click the trash can to set the property to remove your customization and set the property to inherit. Show Unstyled Elements. Adds unstyled elements to the tree. If you’re designing a site from scratch, you’ll want to switch on this filter. Show States.
Shows the “States” drop-down box under the elements that have states, such as Menu Item. This button replaces the button on each element. Show Instances.
Similar to the Show States button, this one shows the “Instances”
drop-down box under elements with instances when they’re expanded.
Property Groups and Properties
When you select an element to style, the property groups appear in the Design Editor beneath the element tree. Click an icon to expand the group and see the available properties.
When you’re editing an element, make sure the text above the property groups correctly indicates what you’re editing. If you edit the regular element instead of just for the layout, for example, you’ll see different results than you want.
As you customize properties, you’ll see the following types of input.
A dropdown appears if a specific list of values is defined for a property or a certain range of values is considered reasonable. An example of a dropdown containing a reasonable range is the Line Height property in the Fonts property group. Really, you could specify any positive integer for line height, but the dropdown maxes out at 300% because anything larger than that is likely going to create needless amounts of white space and make multiple lines harder to read.
A numeric input field appears when the property takes a pixel value. Depending on the property, numeric fields can appear individually or in sets of two or four. Sets of two or four fields include a chain link icon. Click the icon if you want the value you enter in one field to be copied to the rest.
For the Color property in a property group, click the swatch to open the color picker. Note the following about using the picker:
- Use the slider along the right side of the color window to change the colors displayed in the window.
- Use the slider along the bottom of the color window to change transparency.
- You can enter values manually for RGB, hue (H), saturation (S), brightness (B), opacity (A), or even the hexadecimal value for the color (#).
- To save a color as a swatch (essentially a favorite), click the add icon . Swatches are saved in a row along the bottom of the picker.
Click the Choose
button, and then use the standard WordPress image selector to pick an image from your computer, a URL, or your site’s media library. To remove an image you’ve selected, click the X next to the file’s name, and then click OK.