Tools & Helpers

The Toolbar

Let’s take a look at the top toolbar.

The toolbar contains many useful tools:

• Use
  100%
  zoom control to select the page views magnification. “Fit” will auto resize page views to fit into the available page area.
• Display helpers
  lets you toggle visual helpers like selected elements menus and borders, element outlines and so on. More details below.
• toggles the text editing mode.
• Use Test clicks
  to let your page handle clicks, more below.
• toggles the Page code editor.
• Use
  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
  or press
  CMD +
  R 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
  or
  CMD +
  B to preview the current page in the external browser.
• opens another page view in the selected page tab.
• Repeater × 1 lets you repeat any editing operation (described below).
• and
  TAB collapse all panels and hides all floating panels. Click it again to bring the panels back.

Visual helpers

Clicking one the displays the menu where you can toggle various visual helpers that are displayed in page views.

Visual helpers:

• Show server-side code displays PHP, ASP and similar tags and marks them with yellow color.
• Element outlines displays dotted blue border around all elements on the page. That’s 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 blue border around the selected elements.
• Mark components uses blue and yellow borders to mark Pinegrow PRO component definitions and their instances.

On Bootstrap pages additional helpers can be used:

• Grid displayes 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.

Test clicks

When Test clicks are active, Pinegrow let’s 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.

A tipPress ALT when clicking to toggle the Test clicks setting just for that click. When Test clicks are off ALT + click will do a test click. When Test clicks are on, ALT + 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

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

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

Type a number before the operation with 0 to 9 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 or press CMD + D.

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.

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

• “Change element tag to” provides a quick way to change 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.
• “Remove outer tag” 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.

Zoom the user interface

Use 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.

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.

At the moment, two themes are available: the default gray theme and high contrast theme with dark backgrounds. We’ll add the light theme soon.

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

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”.

Pinegrow will examin 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.