Pinegrow Web Editor 4, November 22, 2017

There are many big and small new features, including:

Bootstrap 4 with new visual tools

Visual controls for responsive layouts, text, visibility, Flex helpers and more:

Bootstrap 4 Spacing and Flex Container panels for a block with the classes col-md-5, d-flex, pt-3 and pb-0 and Display set to Flex

Rich component library with 100s of ready-to-use Bootstrap elements. Use + icon to load custom Page libraries.

Components panel in the Cards section with a card preview showing a pine cone photo, Card title and body text

Grid and column overlay helpers. Toggle them above every page view or globally with View helpers icon in the top bar.

Bootstrap 4 card with a snowy mountain photo and the heading Ancient mountain Pines, with an MD 5 column breakpoint marker

Bootstrap 3 got all these goodies as well.

The User interface

You’ll notice a new default grey theme. Use “Workspaces” to switch to the Pinegrow 3 High contrast theme if you like it more. Save your own workspace layouts.

Workspace menu listing layouts such as Default (4 columns), All sides and Small screen, with My layouts Overview and CSS editting

Get UI out of the way. Just press TAB and all the panels are gone. With your page front and center, you can then use a bunch of quick tools to bring up the feature you need without opening the main panels. Toggle eye icon in panel headers to make that panel always visible.

The Pine Tree Poems page displayed full width in Pinegrow with the editor panels hidden

Floating panels.

Floating Properties panel for an h1 over the page, with callouts to move the panel by its handle and toggle floating

Press P to display quick Element properties in a floating quick window. Press + to display quick Library with page libraries.

Floating Insert Element and Properties panels over the Pine Tree Poems page, with the page Title field filled in

The start screen has thumbnails images.

CSS editing

Edit CSS code in the main code editor. Rules selected in the Style panel get highlighted in the code editor. CSS code is properly formatted now.

Style panel showing the .title-box rule with width 260px, text-align center and color #ffffff, beside its CSS code

Change element tag

Right-click on any element to change it into a different tag. For example P to DIV.

Context menu for a div.title-box with Change element DIV to options such as p, h1, span and a, and Actions below

Pick colors from the screen

Use color pickers to pick colors from anywhere in the Pinegrow UI, including pages. Great for getting colors from photos that are used on the page.

Color picker with an eyedropper dragged from the .title-box rule, showing the hex value #798978 and a choose button

Simpler Undo and Redo

By default, the editing history is now combined for all pages and all stylesheets.

Combined History panel listing Start, several Edit code steps on div.container, Delete elements and style.css footer margin changes

Grab & Drag

No need to select the element on the page before moving it. Just grab any element, hold the mouse down for half a second and then move it.

Pine Tree Poems title box outlined in green with a Just grab it callout showing it can be dragged

Duplicate as group

Press ALT when duplicating multiple selected elements to duplicate them as a group. Bt default, duplicating elements A B C will create A A B B C C. When using the group option, you’ll get A B C A B C.

Performance and bug fixes

The number of files in Pinegrow package was brought down from 10000+ to about 1000. This brings faster installs and faster startup.
Numerous bug fixes and small tweaks.