Display helpers | Pinegrow Docs

Pinegrow has the following handy display helpers for both versions of Bootstrap:

Column resizers

When a column is selected the resize handles are displayed on the right edge of the column.

Paragraph in a column with the SM 6 and MD breakpoint markers, with callouts explaining the setting for the current device size.

Blue handle represents the span setting that affects the column at the current display size of the page view. This can be the span setting for that size or, if that is not set, a span setting for the closest smaller size.

For example, let’s say our page view is showing the MD size. The column span is set as SM=6 and LG=4. Since the span for MD is not set, the SM=6 defined the span on MD size as well and the blue handle represents span SM=6. If you now drag the handle, for example to 8, it will set the SM span to 8.

The white handle is shown in cases where the span is not directly specified for the current size (like in our example above). Drag this handle to set the span for the current size.

For example, dragging the white MD handle to 8 will add MD=6 span setting to the column. After that, the white handle will disappear, because the span for the current size will be set.

Heading and paragraph in a column with the MD 8 width marker on the right edge, used to resize the column.

Click on the resize handle to show quick column properties.

Column Size and Order dialog with the MD size set to 4, opened from the quick column control.

Column overlays

Column overlays helper displays a light blue overlay over all columns on the page, with column spans listed in the top right corner of each column.

Subheading columns in MD view with column overlays showing MD 8 and LG 6 on one column and MD 4 and LG 6 on the other.

This is handy when you need to have a good overview of the layout grid.

Use the Cols toggle over page views to enable or disable overlays only in that page view. Use main Display helpers menu to toggle column overlays globally.

Pinegrow view menu with Bootstrap 4 columns selected, with a callout saying to set it for all page views.

Column overlays only affect how your page is displayed in Pinegrow. In some rare cases, the overlays can interfere with styling and layout of your page. If that happens, simply disable them.

Grid overlay

Grid overlay display helper shows a Bootstrap grid over every row element on the page.

Page in MD view with vertical stripes showing the Bootstrap column grid behind two columns of subheadings.

Use the Grid toggle over page views to enable or disable overlays only in that page view. Use main Display helpers menu to toggle grid globally.

View menu with Bootstrap 4 grid selected, with a callout saying to toggle the grid for this page view.

Like with Column overlays above, disable grids if they interfere with styling and layout of your page. While this normally should not happen, it is good to know that it can.