Element Properties

General properties

These controls are common to all HTML elements:

• Classes (see below).
• Element id (
  id HTML attribute).
• Name, used to identify the element in Pinegrow (for example in the tree). 
• Title (
  title HTML attribute).
• Empty placeholder is used inside Pinegrow to add a
  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.
• Attribute editor (see below).

Classes

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 the Add class button.

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
  UP and
  DOWN keys to navigate the list and
  ENTER to confirm the selection.
• Click on the class name in the
  Recent list
  3.
• Toggle and remove assigned classes 
  4.

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

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.

Specific properties

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: