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:
Let's take a look at the top toolbar.
The toolbar contains many useful tools:
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.
Visual helpers:
On Bootstrap pages additional helpers can be used:
On Pages with the Interactions plugin active additional helpers can be used:
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.
Select the image and set the X and Y coordinates to place it in the correct position over the page.
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.
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.
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 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.
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.
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:
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.
Zooming the user interface affects everything in the app window, including page views.
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 light theme.
Use "Page -> Check for HTML errors" to let Pinegrow inspect the page for any syntax and semantic HTML errors.
The tool will check for:
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.
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 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.