Pinegrow Docs

Become a Pinegrow expert

Watch the tutorial

See Pinegrow in action - Fixing layout of a theme and customizing it with Css variables.

The basics

Adding elements to the page

A couple of ways to do that:

Drag an element from the Lib tab of the left panel to the page or to the tree. Dragging to the tree gives you more control:


Some of the more complex elements have Insert actions in their Action menus. Elements with this are forms, progress bars, rows, dropdown menus, navbars:

Duplicate an existing element (click on double page icon):

Moving elements around

A couple of ways to do that:

Drag elements in the tree.


Drag elements by drag handle of their menu (right most icon):

Deleting elements

A couple of ways to do that:

Click on the trash icon on selected element:

Element properties

Prop tab in the left pane shows properties of the selected element. Refer to Bootstrap docs for details.

Editing the content

Double click on any text on the page to edit it inline. For more control, select Edit code from the Action menu of the selected element.

Undo & Redo

Undo is your best friend when something bad happens. You can go 20 levels back. Undo takes a bit of time because the whole page and all attached stylesheets are restored.

Collapsing elements

Collapse elements by clicking on the arrow in the tree or choosing Collapse / Uncollapse action from the selected element Actions menu.


Collapsed elements have yellow menus, uncollapsed blue.


Collapsed:


Uncollapsed:

Collapsed elements hide complexity of their children. That makes it easier to manipulate them (move around, duplicate...). But you can't select children of collapsed elements - they first need to be uncollapsed.


New elements added to the page are collapsed by default.

Styling elements with Css & Less rules

Inline styles are not supported because they make the Internets sad.


Add Css classes and rules to style the page. Do that in Css tab of the left plane:

Click on the rule name to edit properties or on <> icon to edit the code directly.


Click on Assign arrow to assign the class to the currently selected element. Remember, it is not enough to create a new class rule, you also need to assign the class to one or more elements.

Less variables, functions and expressions are supported. See Vars tab for variables and Less docs for functions.

Pages

Multiple pages can be opened at the same time. If pages share same stylesheet they will all get updated when you edit the stylesheet.


Each page has a Device size and Actions menu at the top. It is very useful. With it you can duplicate the page, mirror it, edit code and close it.

Zoom level in the top navbar helps you to fit pages on one screen.


Mirrored pages mirror all changes of their parent page.


Selected page has a gray outline. Save commands in File menu refer to the selected page.