Use the Element properties panel to edit an element’s attributes. For example, to edit the classes of any element, or to change the source and alt text attributes of an image. The panel also contains controls for properties defined by frameworks like Bootstrap.
All changes done in the Properties panel are applied to all selected elements.
The panel is divided into two parts:
These controls are common to all HTML elements:
id
HTML attribute).
title
HTML attribute).
pg-empty-placeholder
class to elements that would otherwise be shown with height 0 and thus inaccesible in the visual editor. This class has no effect outside Pinegrow and is removed from the element once a child element is inserted into it.
The Classes control lets you add and remove classes (for example .my-class) from elements on the page. In HTML, classes are listed in the class
element attribute.
The control contains the list of classes that are assigned to the selected element and the
button.Remove the class by clicking on the x icon.
Toggle the class (switch it on and off on the element) by clicking on its name.
Add a class to the element by clicking on the "Add class" button.
This will open the Add classes tool:
Include Add classes tool
You can give a name to important elements on the page, so that it will be easier to recognize the elements in the tree, in the undo history and elsewhere in Pinegrow.
Pinegrow displays the name when refering to the element:
The name is stored in the data-pg-name
attribute of the element and it has no effect outside of Pinegrow.
The Attribute editor lets you edit HTML attributes (for example, title
, src
, class
...) of the selected elements. Pinegrow has handy tools for editing most of these attributes (for example, Classes tool), but sometimes is needed to edit a non-standard attribute. data-*
attributes are one such example.
The bottom part of the Properties panel shows specific controls for the selected elements.
That includes properties of HTML elements like <a>
links, <img>
images and so on:
If you're using Bootstrap, Foundation or another framework supported by Pinegrow, various framework controls will also be shown here, including Pinegrow PRO editable areas: