Tools & helpersMaster Pinegrow

Pinegrow contains many helpers and tools that can make you even more productive.

Here are a couple of tips on how to effeciently work with inline text editing:

The Toolbar

Let's take a look at the top toolbar.

The toolbar has many useful tools.

The toolbar contains many useful tools:

  • Use minus-circle_ICON 100% plus-circle_ICON zoom control to select the page views magnification. "Fit" will auto resize page views to fit into the available page area.
  • Display helpers Pin13_ICON lets you toggle visual helpers like selected elements menus and borders, element outlines and so on. Use the down_ICON or right-click to choose which helpers to show when Display helpers are enabled. More details below.
  • text_edit_ICON toggles the text editing mode.
  • Use Test clicks touch_ICON to let your page handle clicks, more below.
  • KODA_ICON toggles the Page code editor.
  • Use JS_ICON to toggle Javascript code on your page during editing in Pinegrow. This is useful if Javascript causes performance issues or too much movement on the page.
  • CLICK on refresh_ICON or press CMD+R_KEY to refresh the page view of the current page. That is handy if page display becomes messed up during editing or if you want to reload external resources (images, scripts).
  • Use 27_ICON or CMD+B_KEY to preview the current page in the external browser.
  • add_ICON opens another page view in the selected page tab.
  • Repeater × 1 lets you repeat any editing operation (described below).
  • hide_ICON and TAB_KEY collapse all panels and hides all floating panels. Click it again to bring the panels back.

Visual helpers

Press CMD+T_KEY or click on the Pin13_ICON to show or hide visual helpers. Hiding visual helpers like selected element borders is useful when they are obscuring your view of the page.

Clicking one the down_ICON or right-clicking on the icon displays the menu where you can select which visual helpers are displayed in page views when Visual helpers are active.

Menu with visual helpers.

Visual helpers:

  • Show server-side code displays PHP, ASP and similar tags and marks them with yellow color.
  • Element outlines displays dotted border around all elements on the page. The color circle on the right allows selection of the outline color of your choice. It is useful for observing the boundaries and layout of page elements.
  • Selected element menu toggles the blue menu displayed on top of the selected element. Sometimes it's useful to hide it because it obstructs the view of other elements.
  • Selected element border controls the display of border around the selected elements.
  • Mark components uses blue and yellow borders to mark Pinegrow PRO component definitions and their instances.
  • Image overlay lets you use an image as a visual guide for creating pixel-perfect designs (see next chapter for details).
  • CSS grid displays the current CSS grid as defined by the active stylesheet.

On Bootstrap pages additional helpers can be used:

  • Grid displays the column grid inside all containers on the page.
  • Columns displays light blue overlays over all columns on the page, with information about their size.

On Pages with the Interactions plugin active additional helpers can be used:

  • Hidden and shown by Interactions reveals elements that only appear or disappear following an Interaction event.

Image overlays

Use "Image overlay" in the Visual helpers Pin13_ICON menu to toggle and setup the image overlay that is used as a visual guide for implementing your design.

Toggle and configure image overlay.

Select the image and set the X and Y coordinates to place it in the correct position over the page.

Setup the overlay.

The image overlay is shown on top of the page. It doesn't affect the page itself in any way. Use Opacity and Grayscale settings to make the overlay distinguished from the page.

Image overlay is shown over the page.

Watch the video about how to use Image overlays

Test clicks

When Test clicks touch_ICON are active, Pinegrow lets the page handle all clicks. That is useful for developing dynamic pages with elements like modals and sliders. Normally, Pinegrow handles the clicks and selects the element that was clicked. So, the modal button will not open the modal, but will get selected in Pinegrow.

With Test clicks the page will handle the click and clicking the button will open the modal that can then be visually edited in Pinegrow.

Test interactive page elements.

A tipPress ALT_KEY when clicking to toggle the Test clicks setting just for that click. When Test clicks are off ALT_KEY + click will do a test click. When Test clicks are on, ALT_KEY + click will select the clicked element.

A tipYou can still select and move elements in the tree even if Test clicks are active.

The Repeater

The Repeater lets you repeat operations like inserting and duplicating elements N times. It is a great time saver.

All operations that insert new elements to the page work with the Repeater. Just type the desired number before the operation and Pinegrow will add that many copies of the element to the page.

The repeater lets you repeat an operation N times.

Type a number before the operation with 0_KEY to 9_KEY keys to set how many copies of the element you want to insert.

For example, to make 10 copies of an existing element, select that element, type "1" and "0" and click on the duplicate_ICON or press CMD+D_KEY.

To change the number, just type another number.

Element context menu

Right-click on any element on the page or in the tree to display its context menu with many useful commands.

The element context menu.

While some commands, like Duplicate and Delete, can also be accessed elsewhere, some are unique to this menu:

  • "Insert" allows you to quickly prepend, insert into, or append elements from the Library to the selected element. 
  • "Transform" provides several highly useful functions for manipulating the page elements:
    • It provides a quick way to change the element tag, for example from <p> to <h1>. If the tag you need is not listed, click on the ... to enter a custom tag. This tag will then be displayed in the list for the duration of the session. When creating <li> list items, Pinegrow will wrap the elements with <ul> or <ol> if needed.
    • Also located in the "transform" menu is "Remove outer tag" that removes the clicked element and leaves its children in its place. Use it to get rid of unwanted wrapping elements.
    • "Merge selected into" will take all selected elements and append or prepend them to the clicked element.
    • "Split parent at this position" clones the parent element and leaves all child elements positioned before the clicked element in the original parent and moves all the rest child elements into the cloned parent element.
  • "Select" allows you to easily select parents or childrem of the selected element.

Zoom the user interface

Use zoom_ICON setting to make the whole Pinegrow user interface smaller or larger. Making it larger helps with accessibility issues, while making it smaller lets you fit more panels and page views on the screen. That's especially handy on small screens and on retina screens.

Zoom the user interface.

Zooming the user interface affects everything in the app window, including page views.

Workspaces & Themes

The Workspace menu lets you restore one of predefined workspace layouts, save and display your custom workspace layouts, as well as choosing the user interface theme.

Workspace layouts and themes.

At the moment, two themes are available: the default gray theme and light theme.

Checking HTML for errors

Use "Page -> Check for HTML errors" to let Pinegrow inspect the page for any syntax and semantic HTML errors.

The tool will check for:

  • Incorrectly closed tags.
  • Elements located in wrong places, for example a <p> within a <p>.
Check the page for errors.

Click on the element names in the list of reported errors to select that element on the page.

Every page is automatically checked for errors when opened in Pinegrow. Any HTML errors on the page can interfere with editing operations and can lead to unexpected results if they are not fixed.

Fixing broken links

Did you know that Pinegrow can automatically fix broken links within a project? This feature is available in the Project panel. Right click on the file and choose "Fix links".

Fix broken links.

Pinegrow will examine the page for broken links and then try to rebuild them by searching the project for the closest file with the same name as the url linked in broken link.

Fixing links is a Pinegrow PRO feature because it requires projects to work.