Tips & Tricks

A collection of useful Pinegrow tips and tricks.


Use SHIFT + Click to do a test click. In “test click” mode Pinegrow let’s page handle the click event. That’s useful for interacting with the page, for example pressing on buttons to open modals or expand menus.

Use Actions -> Edit code to edit text labels on buttons and other delicate elements. Using inline editing-mode (Actions -> Edit text or double-click) will sometimes delete the whole element if its text content is deleted.

Use Active checkbox in CSS panel to only show CSS rules that apply to the selected element (note: empty rules are not shown in this mode):

active

Use File -> Open project in new window to open a project folder in a new Pinegrow window.

Collapse elements in the tree view. Navigating and moving sections will be much easier. Use ALT + click to collapse / uncollapse all element on that level.

collapse

Right-click on elements in the page or tree to display the context menu:

contextmenu

CMD (CTRL on Win/Linux) + Click in Project and page tabs to show pages side by side:

pages

Give elements in tree custom names with Pinegrow name property in PROP:

pgname

When editing the Bootstrap carousel (slider) images using Edit code feature, the image changes but then the slider elements appear on top of each other.

Do a Page -> refresh (CMD + R on Mac, CTRL + R on Win) if page preview becomes messed-up, for example after making changes to the carousel. This will update the preview and re-run any JS code.

Disable Javascript in Page -> Javascript enabled to see how the page looks without the JS code and to speed-up the page during editing. This doesn’t affect how page runs outside of Pinegrow.

Use jQuery selectors to search the tree. For example: .myclass will find all elements with class myclass.