Use Element properties panel to edit element’s attributes. For example, to edit classes of any element, or to change 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:
- The top part shows general properties common to all elements.
- The bottom part shows specific element properties and contains controls defined by frameworks.
These controls are common to all HTML elements:
- Classes (see below).
- Element id (
- Name, used to identify the element in Pinegrow (for example in the tree).
- Title (
- Empty placeholder is used inside Pinegrow to add a
pg-empty-placeholderclass 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.
- Attribute editor (see below).
The Classes control lets you add and remove classes (for example .my-class) from elements on the page. In HTML, classes are listed in
class element attribute.
The control contains the list of classes that are assigned to the selected element and thebutton.
Remove a class
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
Add a class to the element by clicking on the “Add class” button.
This will open the Add classes tool:
Add classes tool
Add classes tool is a floating panel that lets you quickly add and remove classes from the selected elements.
You can use the tool to:
Type one or more class names
1 and press
ENTER or click on Add button to assign the classes to selected elements. Use , or space to separate multiple class names.
Search the list of all known classes
2 in the project by typing in the same input box. Click on the class in the list to assign it to elements. Or use
DOWN keys to navigate the list and
ENTER to confirm the selection.
- Click on the class name in the
Toggle and remove assigned classes
Shortcut Use CMD + L to open the Add classes tool.
Shortcut right click on the element and select Add classes from the menu.
Giving an element a name
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
data-pg-name attribute of the element and it has no effect outside of Pinegrow.
Attribute editor lets you edit HTML attributes (for example,
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
<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: