Element properties

Select anything on the page and its properties open in the panel.

Design

A selection takes the panel over under what the element is, a Button, a Heading, a Text, and the way back deselects it. Under the head stand the links to its views: Design, this one, then its layers and its HTML. The menu is the element's styles as blocks: the element itself on top, then every style it gets from the site. Each block edits one thing, and says how many elements it reaches.

Every property has the right control for the job, such as a size field, color picker, or list of options.

Blocks

The first block is the selected element, and a change there stays with it. The blocks below are the styles it uses. A change in one of them reaches every element with that style, and the number by its name says how many.

Every block ends with two buttons. The bubble opens its comments. The cross removes that class or id from the element, and on the element's own block it deletes the element.

Add property

Every block ends with a row for a new property. Start typing in the block you want to change, and the properties that match show up right under it. Press Enter to take the first one, or choose another.

A property goes where you typed it, and nowhere else.

Comments

The element's block always ends with its comments, and the bubble on any block opens them. Write what should change in your own words. The people in the editor read it there, and so does the agent that builds your edits.

New class or id

The row at the top adds a class or an id to the element. Start typing, then choose a suggestion or press Enter to create it. It becomes a block of its own, ready for its first property.

Keys

Tab and Enter move down the panel field by field, from the class entry through every block's add row and its rows, and Shift+Tab moves up. In an add row with something typed, both take the first match instead. Enter opens a list, Tab only lands on it.

Open it on this page

Turn edit mode on and select anything you see.