Pinegrow supports rich set of properties that let you control how elements behave on the page.
First select the element that you wish to edit.
You can select the element by clicking on it on the page or by clicking on the element in the outline tree. The selected element will be highlighted with blue border.
Only one element can be selected at a time. Adding support for selecting multiple elements will come soon to Pinegrow.
Different elements have different properties. For example, image has the src attribute, form has action and so on. Pinegrow adds all HTML attributes as properties to their respective elements. In addition Pinegrow plugins for frameworks like Bootstrap add their own properties to elements.
All property changes are immediately visible on the page.
Each selected element gets an Actions menu. Besides quick insert links for inserting child elements, the menu shows a couple of useful functions:
<p>Some text</p>will replace the paragraph with only text
Element parents are shown at the top of the Prop tab in the form of breadcrumbs. Only one parent is shown by default. Click on the double right arrow at the beginning of breadcrumbs to expand the view. Collapse it in the same way. Clicking on any of the parents will select it. This is useful when you select a child element by mistake and want to get back to its parent.