Home/ Documentation/ Panels & Tools/ Element Properties

Element Properties

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.

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).
  • 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.

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:

Add classes tool

Add classes tool is a floating panel that lets you quickly add and remove classes from the selected elements.

Add classes tool.

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:

Use names to organise your projects.

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.

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.