The outline tree is one of the most useful features of Pinegrow. From the tree view, you can clearly visualize the structure of the page and manipulate all its elements.
Working with the outline tree is really useful but the display can quickly become messy for documents with a lot of content. Sometimes, it can be very convenient to temporarily collapse elements in the tree view or temporarily mask the preview of some elements of your document.
For both situations, Pinegrow offers 2 clever options which are Collapse & Uncollapse elements and Hide & Display elements.
Collapsing and Uncollapsing elements
From the outline tree, each container can be collapsed or uncollapsed by clicking on the icon and/or the icon at the left side of the name of the component.
While collapsing a top level container leads to the masking of all its “children”, you can also collapse and uncollapse children containers as well to achieve the same result.
In the example below, we can see that the navbar is in an uncollapsed state as the arrow icon is pointing to the bottom.
If you don’t need to work on the container or its content anymore, you can then collapse the Navbar element by clicking back on the icon. The element estate is then freed, allowing you a more global view of your main document structure.
Collapsing and Uncollapsing are EDITING helpers and have no effects on the visible result of your document.
Clicking on any element within the collapsed element will select the whole collapsed element.
Hide and Display elements while editing a page
This switch only affects the preview of any elements in Pinegrow while in EDITING mode.
From the outline tree, each element can be hidden or displayed by clicking on the icon and/or the icon at the left side of the name of the component.
While hiding a top level container leads to the hiding of all its “children”, you can also hide and display children elements as well to achieve the same result.
In the example below, we can see that the navbar is in “visible mode”.
When the Navbar is set to hidden, the icon become and the content of the element is dimmed in the outline tree and invisible in the editor layout preview.
Hidden state is an EDITING helper and only affects the preview in Pinegrow. The element remains visible in the SAVED document.
Select Remember collapsed and hidden elements checkbox in Support -> Settings to let Pinegrow store that information in saved files in the form of data-pg-collapsed and data-pg-hidden HTML attributes.
This is a master page.
This page uses a master page. (the name is specified)
Components are defined on this page.
Components are used on this page.
Last updated on November 26, 2015 at 10:30 pm