Pinegrow Web Editor is a desktop application for creating and editing websites.
Pinegrow is a general purpose HTML and CSS editor. Although it has extensive support for frameworks like Bootstrap and Foundation, Pinegrow is not tied to any particular framework or library.
With Pinegrow you build websites by editing HTML layout and CSS rules. Pinegrow is a collection of integrated tools: some are visual and some work with code. You’re free to mix & match these tools in a way that best fits the task at hand.
For example, when working with Bootstrap, you can use Element properties panel to (1) visually control Bootstrap properties, live-synced with the (2) code view where you can inspect and tweak the HTML code directly. At the same time you use (3) Style panel to edit active CSS rules.
Your page never becomes tied to a closed Pinegrow file format. Pinegrow reads and writes HTML and CSS directly, so you can use it alongside your other tools.
New to Pinegrow? This interactive guide is the best place to start. We'll go through all Pinegrow panels and take them for a spin.
We'll need a page to play with during this introduction. CLICK on the button below to open a sample page about the oldest Pine trees in the world:
We'll need a page to play with during this introduction. To open the sample page used in this gude, open the in-app help in Pinegrow by clicking on the 271_ICON in the top toolbar. There, go to "Getting started with Pinegrow" and click on the "Open the sample page" button. Or, you can open one of your own pages and experiment with that.
NoteFeel free to mess up the sample page as much as you want during this tutorial. You can always close it and open a fresh copy by clicking on this button again.
Most editing operations in Pinegrow happen on the page view.
Play around with page views:
The purpose of this guide is to go through all Pinegrow panels and tools quickly. So we'll cover the rest of the selected menu commands elsewhere.
Open the Tree panel.
NoteYou can CLICK on the "Open the panel" links throughout this guide to open that panel. Pinegrow will also show a visual clue to highlight the panel.
Tree panel displays the nested HTML structure of the selected page. The selected element is blue.
Let's take a quick look at the tree:
Open the Library panel.
Library panel contains HTML elements and components (groups of HTML elements) that we can add to the page.
Let's add a new element to the page:
Open the Element properties panel.
Use Element properties panel to edit element’s attributes. For example, to change source and alt text attributes of an image. Classes are managed there as well. And the panel contains controls for properties defined by frameworks like Bootstrap.
Let's try to edit some properties:
Open the Style panel.
Visual styling of page elements is done with CSS rules. Each rule has a selector that specifies what elements are affected by the rule and properties like color, font, etc. that define the visual style.
We'll spend a bit more time on this panel because it is a very powerful tool if you know how to use it effectively.
On the sample page, select the H2 element with the poem title and take a look at the Active tab in Style panel: Active tab 1 displays all CSS rules that affect the selected element.
The Active tab also displays the style set directly on the HTML element with the style attribute 2. We'll explore it a bit later.
Rules from framework stylesheets, like bootstrap.css, are hidden by default. Click on the Show more links 3 to display them.
Visual editor 4 contains visual controls for editing CSS rule properties.
Let's do some styling!
So far we were modifying an existing CSS rule. Let's create a new CSS rule now:
Add a new CSS rule:
Every HTML element can have the style attribute for setting its visual properties. For example:
<h1 style="color:red>I'm red!</h1>
Although the style attribute is the quick and easy way of styling elements, using it is not recommended. Why? Because instead of using one CSS rule to tell the browser that all H1 elements should be red, you have to specify the color on each and every H1 element on your site. Now imagine that you have 20 pages and want to change the color to green.
But, Pinegrow knows a smart way of using the style attribute:
Let's paint with style attribute:
The "Style attribute -> Save as CSS rule" is a very convenient workflow. It lets us jump right into styling the element without first having to figure out what kind of CSS rule we need to create.
The Style panel has a lot more to offer, but for now, let's leave it and continue exploring Pinegrow.
CLICK on text_edit_ICON in the toolbar or DOUBLE_CLICK on any text on the page to activate the text editing mode.
The edited element will get a dotted yellow border and a blue text editing menu:
Let's change some text:
NoteFor best results select only the element that you want to edit. For example, if you want to change a button label, just select the button, not the parent container of the button.
NoteUse the Element code panel (described next) in situations where Text editing doesn't do excatelly what you want.
Open the Element code panel.
Pinegrow is not only a visual website builder – you can use it to work with code as well. Edit element code panel lets you edit the code of individual elements. Instead of dealing with the whole page you focus only on the relevant parts of the code.
NoteDon't know HTML? The Element code panel is a great place to learn about code. No scary code soup - instead take a look at different elements one at a time and observe how different editing operations change the code.
Let's get coding!
Open the Page code panel.
There we can also edit the code of the whole page.
Note that simplified syntax mode is not available in the page code editor.
Let's edit the code of the whole page:
Most editing operations in Pinegrow can be done on more selected elements at the same time. This is a great time saver.
To select multiple elements:
Do editing operations on multiple elements:
Each page can have multiple page views showing the page at different sizes and in different devices.
Play around with page views:
The Repeater is a handy feature that lets you repeat a single command many times.
Let's repeat some stuff:
Open the History panel.
History panel shows the list of editing steps.
It has two tabs: HTML tab shows edit history of the current page and CSS shows the global history of CSS edits.
Travel back in time:
Let's take a look at the top toolbar.
The toolbar contains many useful tools:
Open the Project panel.
NoteProjects are available in Pinegrow PRO edition.
Pinegrow projects are plain-old file folders. Just open a folder as a project, and you'll see a list of all files and subfolders here.
Let's create a project:
Open the Actions panel.
NoteActions are available in Pinegrow PRO edition.
Actions panel lets you create Smart components, Master pages, Editable areas and more. Select one or more elements on the page and assign an action (behavior) to them. These features are available in Pinegrow PRO edition.
We'll just mention this panel at this point. Visit the online documentation.
Open the WordPress panel.
NoteWordPress theme builder is available in Pinegrow with WordPress Theme Builder edition.
Use WordPress panel to convert the HTML project into a PHP-based standard WordPress theme. This feature is available in Pinegrow with WordPress theme builder.
We won't go into details here. Check out the documentation to see how you can build a WordPress theme with Pinegrow.
Congratulations! Now you know what Pinegrow is about and how to use it.
There are many features that we didn't mention here. Almost every panel & tool has a bunch of tricks up its sleeve that can help you to be more productive. Start using Pinegrow and check the rest of the documentation to learn more.