Element propertiesMaster Pinegrow

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.

Element properties panel has two parts.

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.

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).
  • An 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 the class element attribute.

The control contains the list of classes that are assigned to the selected element and the Add class button.

Classes section in Element properties panel.

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:

Include Add classes tool

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:

Use names to organise your projects.

The name is stored in the data-pg-name attribute of the element and it has no effect outside of Pinegrow.

Attribute editor

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.

Edit attributes directly.

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:

Properties that depend on the type of the element.