The 7 DAYS TRIAL mode is what you need.

Just download the application from the Pinegrow website and you will be able to freely try Pinegrow on your Windows, Mac OS or Ubuntu Linux for 7 days (and even a bit more if you ask us at Pinegrow support email).

What is available in TRIAL mode

• Create & save any HTML project. (except Blocks)
• Freely discover the PRO version and experience the power of the project mode + smart components (custom blocks).
• Discover the WordPress theme builder: Create and export a basic WordPress theme.(saving the HTML source is not allowed)

The post How to Try Pinegrow for free for 7 days ? appeared first on Pinegrow Web Editor - Documentation and Tutorials.

In addition to EU, other countries have also adopted sales tax for sales of digital content including apps, games, software and e-books (defined as “electronic services” by the legislation):

• India
• Norway
• Switzerland
• South Korea
• Russia
• South Africa
• New Zealand
• and counting …

Please, contact your local administration or search Google for the rate of your country.

If you’re making a purchase from EU or one of the above countries, sales tax (VAT in EU) will be automatically added to the price during the checkout process.

Making a VAT-free purchase for EU companies

If you’re buying as an EU company that is registered for VAT and is located outside of UK where our payment provider is located, you can buy Pinegrow without VAT. During the checkout process, click on Add VAT number and enter your VAT number.

Ups… We’re a EU company but we forgot to fill in our VAT number when we purchased Pinegrow

Please write to help@paddle.com with your company info, VAT ID, Paddle order number and ask them to refund the VAT and issue the invoice. They’ll sort it out.

The post About charging sales tax on Pinegrow purchases appeared first on Pinegrow Web Editor - Documentation and Tutorials.

To install the application, the recommended process is the following:

• Unzip the ZIP file to your prefered location on your hard drive
• Run Pinegrow from the terminal.

In the future we may improve the setup process and also validate the application on more Linux distributions. (No ETA)

Known issues

Drag & drop doesn’t work when running Linux through VMWARE

This not “an issue” that we can fix with code but a technical constraint from one of the component we use to build Pinegrow. We plan to fix it for Pinegrow V3

Currently, the only workaround is to use the application on the host system instead of a Virtual machine.

Permission issues

Embedded Chromium (which is a component included in Pinegrow) is writing to /tmp which – according to our knowledge – should usually be open to all users, not just root.

For some templates Pinegrow crashes when opening the file

The crash doesn’t happen if Javascript is turned off while editing the page, so we suspect that the crash is connected by Firebase JS code.

For now, the solution is to uncheck Enable Javascript in Support -> Settings.

The post How to install Pinegrow on Ubuntu Linux appeared first on Pinegrow Web Editor - Documentation and Tutorials.

1. Pinegrow WordPress Starter Theme
   A foundation for quickly developing your own custom themes. (PGWP sources included – commercial)
2. PG-Blog
   A WordPress theme for blog writers (PGWP sources included – free)
3. PGWP-Landy
   A HTML template to use with Pinegrow WP (PGWP sources included – free)
4. PGWP-Flatinum
   A HTML template to use with Pinegrow WP (PGWP sources included – free)
5. PG-BootstrapStarter
    A WordPress theme created with Pinegrow WP (free)
6. Demo theme
   From the Video Course (PGWP sources included – free)
7. PG-Hellobar
   A Notification Bar for WordPress created with Pinegrow + Bootstrap and some bits of Javascript. (PGWP sources included – free)

The post Ready-made WordPress themes and Sample projects appeared first on Pinegrow Web Editor - Documentation and Tutorials.

Setup the WordPress Master Page

When dealing with WordPress development with Pinegrow, the Master Page is the page where you control the header and the footer for your theme.

Index.html is generally used as the Master Page but this is not mandatory and you can use any other template as long as you are aware that the choosen template will “control” the content of your header and footer.

• This is the master page: Use this setting to define the current template as the master page.

If the current template is not your master page, you will have to uncheck this setting and enter the name of the master page (for example index.html) in the Use master page field.

• Theme name: is the name of your theme
• Theme slug: is the identifier of your theme. No spaces, no dash, no comma. Here you can use underscore (_) and less than 20 characters.
• Theme folder: is the location where your theme will be exported. This is the parameter causing the large majority of email we receive at Pinegrow support.

Click on the folder icon and navigate to the folder where you have installed your WordPress site.
Locate the folder named wp-content and get into it, then get into the folder named themes.

If you are at the right location, you SHOULD see a folder named twentyfifteen (and maybe twentythirteen and twentyfourteen which are the default themes when you setup a new WordPress).

If you don’t see these folders, you are probably NOT in the right folder!

Now, CREATE a new folder with the name you want for your theme.
This is the place where your theme will be AUTOMATICALLY exported during the EXPORT and this location will make it available in the WordPress Themes menu.

• Preview page url: is the url of your local wordpress website. For example http://localhost/yoursitename

Your Pinegrow template is now ready for your development session and you are now able to edit your template and export your theme automatically to your local WordPress site.

The post WordPress Master Pages appeared first on Pinegrow Web Editor - Documentation and Tutorials.

While the UI is different (so the screenshots are not up-to-date), the flow between V2 and V3 is very similar.

For our customers having troubles to understand Pinegrow V3 without a specific documentation, the version 2.951 – which is a rock solid release – is still available for download from our homepage as well as from the documentation site and can be used without any restrictions if your license is valid for V3.

While we believe Pinegrow V3 is our best Pinegrow version ever, version 2.951 is still an excellent choice for any professional project.

The post About Pinegrow V3 Documentation appeared first on Pinegrow Web Editor - Documentation and Tutorials.

Use Add View to open additional view of the selected page.

Highlighting an element in one view will highlight the same element on all other views. Same goes for selecting an element.

Edits are instantly synced across all open views.

A specific device can be chosen from the list to resize the view. Device views can be rotated.

Page view height can be also set manually.

Views can be enlarged to more than 100%. That’s great for precision work.

Use quick navigation to scroll page views into view.

The post Multiple Page Views appeared first on Pinegrow Web Editor - Documentation and Tutorials.

Clicking on the element in the tree selects the element and displays the menu.

Delete, duplicate and hide are all familiar Pinegrow commands.

Indent and outdent commands are new in Pinegrow 3.

Multiple elements can be selected with CONTROL click (COMMAND click on Mac). Use SHIFT click to select a range of elements on the same level.

When the layout of one selected element is changed…

…Pinegrow applies the same change to all selected elements.

Search results can be easily selected and deselected.

Quick insert is also available from the selected element menu.

Clicking on the border between the two elements inserts a new element in that space.

The post Editable Tree View appeared first on Pinegrow Web Editor - Documentation and Tutorials.

Use the new drag & drop to place elements from the Library panel to the page.

Custom HTML code can be easily added to the page. You can also use the simplified HTML syntax.

The Library has “Recently used” section.

Click on Insert element icon or press the PLUS key to quickly insert elements from the Library at any time.

Adding elements to the page works with multiple selected elements.

The post Library Panel with Quick Insert appeared first on Pinegrow Web Editor - Documentation and Tutorials.

Use CONTROL click (COMMAND click on Mac) to select multiple elements.

All editing actions are done on all selected elements.

Use SHIFT click to select a range of elements.

Elements on different pages can be selected and edited as well.

The post Selecting elements appeared first on Pinegrow Web Editor - Documentation and Tutorials.

What is Pinegrow?

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.

Note: numbered points ((1), (2)…) used on images in this document are not interactive. Clicking on them will just open the whole image.

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.

Let’s take a look at the editing interface. The following description is just a quick overview. Every tool in Pinegrow has a bunch of useful features for speeding up your work.

Live page views

Most editing operations happen live on the page view. Each page can have multiple page views showing the page at different sizes and in different devices.

Document structure tree

Tree panel displays the nested HTML structure of the selected page. The tree is editable.

Library

Library panel contains HTML elements and components (groups of HTML elements) that can be placed on the page. You can also use the Library panel to insert the code directly and to define your own snippets and smart components. You can drag Library elements to the page view or to the tree.

Selecting elements

Most editing operations in Pinegrow are done on one or more selected elements. Select elements by clicking on them in the page view or in the tree. Use CTRL (CMD on Mac) and SHIFT to select multiple elements.

Now let’s take a look at what you can do with the selected elements.

Element properties

Use Element properties panel to edit element’s attributes. For example, to change source and alt text of an <img> element. Classes are managed there as well. This panel also contains controls for properties defined by frameworks. Bootstrap pages get a range of handy controls for text alignment, text context and so on. You can define custom element properties by using Smart components and editable areas or by creating Pinegrow plugins.

Style

Use Style panel to work with CSS rules. The panel has multiple parts: (1) Active tab shows the list of CSS rules that affect the selected element. (2) Individual stylesheets can be opened in separate tabs. Click on any rule to display it in (3) Visual editor with controls for most CSS properties, including: shadows, transforms, transitions and Flexbox. You can use (4) List editor to directly edit rules and their properties – or switch to code editor. SASS and LESS stylesheets are fully supported.

Element Code

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. And if you prefer a simpler syntax, you can switch to Pug (ex Jade) mode. Pinegrow will automatically convert HTML code to Pug and back. Code editors and visual tools are synced, so that you can immediately see how editing operations affect the HTML code.

Page code

Whole page code editor is available as a separate panel. Again, all changes are synced between the code editor and all open visual tools.

Actions

Actions panel lets you create Smart components, Master pages, Editable areas and more. Select one or more elements on the page and assign a specific action (behaviour) to them. These features are available in Pinegrow PRO edition.

WordPress

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.

Text editing

Use the “Text edit” control or simply double-click on the text that you want to change. When text editing mode is active, just click around the page and type to edit the text.

Flexible workspaces

Pinegrow’s user interface can be freely re-arranged: panels and tabs can be (1) moved, (2) resized and (3) collapsed. You can create the workspace that best fits your workflow or switch between a set of pre-defined workspaces.

Useful workspace tips

• Make the user interface smaller to fit more information on the screen (4). That’s especially useful on retina screen.
• Click on the selected panel tab to collapse the whole panel stack. Click again to expand it (3).
• Click on section headings to collapse and expand them (5). ALT + Click to do it for all sections. ALT + Click also works in the tree.

Using Pinegrow with other tools

Pinegrow can be used with any tool that works with standard HTML and CSS files, for example code editors or website builders that export complete HTML and CSS files. Pinegrow automatically reloads open files when they are saved in other apps.

In addition to that, Pinegrow and Atom code editor can be connected together with a special Atom plugin, so that all edits are live-synced between the two apps, without having to save files.

Plugins

Features like support for Bootstrap, Foundation, WordPress, Smart components are implemented as Pinegrow plugins. Plugins are JavaScript files that use Pinegrow API to integrate into Pinegrow and extend its functionality. You can develop your own plugins to add support for your specific frameworks, component libraries, CMS…

Is Pinegrow the right choice for me?

Short answer: if you read so far – Yes ☺

Long answer:

If you don’t know what HTML elements and CSS rules are, and you’re just looking for a simple drag and drop editor to quickly build a website without knowing what happens in the background, then Pinegrow is probably not the right tool for you.

On the other hand, Pinegrow is a good choice for you if:

• You’re proficient with HTML and CSS and want a powerful editor that combines visual tools with code editing and integrates well into your existing workflow.
• You aren’t familiar with HTML and CSS yet, but need a playground where you can learn them well.
• You’re working with Bootstrap or Foundation and don’t want to remember hundreds of framework classes and are tired of copy-pasting the code of various components.
• You prefer to work with HTML and CSS directly and have complete control over your code or need flexibility that code generators can’t provide.
• You wish to automate your development workflow by using reusable component libraries, master pages and editable areas.
• You are looking for a simple CMS for static HTML websites, either for yourself or for your clients.
• You need an easy way to convert HTML websites into WordPress themes.
• You’re looking for an efficient alternative to a cloud-based or subscription-based web editing software.

The post Quick introduction to Pinegrow appeared first on Pinegrow Web Editor - Documentation and Tutorials.

Atom + Pinegrow

Atom is back! Live-sync Pinegrow and Atom code editor to create the perfect web development IDE. All edits are synced between the two apps, without having to save files first. Follow this guide to set it up.

Split and Merge HTML elements

“Split parent” splits the parent of the selected element into two elements, at the point of the selected element.

In this example, “Split parent” will split the Column into two Columns, with H2 in the first column and P in the second column:

“Merge” combines selected elements into the element on which you run the “Merge” command. Content of merged element is prepended or appended to the destination element, according to its position in relation to the destination element. Empty merged elements are discarded.

In this example, content of all three selected columns will be merged into the middle column (because we’re doing “Merge” on the middle column):

Compile & Save command for SASS/LESS stylesheets

Normally, changed SASS/LESS stylesheets are compiled into corresponding .css files when you save the page. Use “Compile & Save” command to force compiling .css files even if the source SASS/LESS file is not changed. For example, if you open a project in Pinegrow after editing the source file with another app without compiling .css files.

Hide selected element border

Blue borders of the selected elements sometimes get in the way. Use “Display helpers” tool to switch them on and off. There you can also hide menus of the selected elements and other visual helpers.

More predefined workspaces

Restore workspace menu has better descriptions and a new layout: All sides, a 4 column layout with Element properties and Element code just below page view area.

Bug fixes

Just when we think that we fixed everything, new bugs come out – thanks to out amazing user community. Btw. if you haven’t yet checked out our Slack and forum, give them a visit. They are full of friendly and helpful Pinegrowers.

Read Quick introduction to Pinegrow (docs)

This short guide will be useful if you’re not yet familiar with Pinegrow or if you’re not yet sure if Pinegrow is the right tool for you. It is also the start of our efforts to update and improve Pinegrow documentation.

The post Release 3.07 appeared first on Pinegrow Web Editor - Documentation and Tutorials.

Live editing in concert

All edits are live-synced between Atom and Pinegrow, without having to save changes first:

Navigate the code visually

Elements selected in Pinegrow are highlighted in Atom:

Control Pinegrow from Atom

Use Ctrl+Alt+P in Atom to select the current element in Pinegrow. Open and refresh the current page in Pinegrow.

Remote editing

Atom and Pinegrow can run on different computers with different operating systems. Read instructions below on how to map local and remote file paths.

Edit HTML and CSS files

Live sync works for HTML (or other types that are listed among editable types in Pinegrow’s settings) and CSS files.

How to install

1. Install Pinegrow and Atom

Download and install Pinegrow and Atom.

2. Install Pinegrow+Atom package in Atom

In Atom go to Preferences -> Install and install pinegrow-atom package.

3. Configure API url

In Atom go to pinegrow-atom settings and set the URL of the Pinegrow instance you wish to connect to. Note that every Pinegrow window has a separate API URL. Use Support -> Show API url in Pinegrow to get the correct address.

4. Open same project or files in both apps

Atom and Pinegrow will sync edits for HTML and CSS files open in both editors. Use Support -> Settings -> Editable types to tell Pinegrow which file types should be handled as HTML files.

5. Remote editing

When running Atom and Pinegrow on different computers file paths will probably not be the same in both apps. Most likely you’ll open local folder in one app and a network share in another app. In Atom use Packages -> Pinegrow -> Detect PG <-> Atom file path mapping to auto-detect the correct path mapping.

Also, you’ll have to replace “localhost” in Pinegrow API url with the name or IP of the computer where Pinegrow is running.

The post Pinegrow + Atom = The Perfect IDE for the Web appeared first on Pinegrow Web Editor - Documentation and Tutorials.

Faster CSS styling workflow

The goal of Pinegrow is to make you a more powerful web developer.

With that goal in mind, we redesigned the flow of creating new CSS rules.

Now you can use a one-step process to create a new CSS rule and to add a class to the selected elements.

Watch this short video to see how you can quickly style your document with CSS rules:

Improved text editing

Going from editing one element to another flows smoother now. The editing cursor goes where you click when switching to editing another element. Pressing Enter when editing a P or a heading will break the element at that point in two elements.

Shiny new Help and Tutorials

Pinegrow now has a built-in help system with interactive guides, including a comprehensive Getting started tutorial that covers the basic usage of all Pinegrow panels and a reference of all Pinegrow keyboard shortcuts. And it also works offline.

Other improvements and bug fixes

• Color picker accepts the current value when clicking outside of the picker (before that meant that color selection is canceled).
• Page code editor removes the “Code has syntax error” message once the syntax error is fixed.
• Element outlines (blue dotted borders around elements) are now off by default. Use the Display helpers icon in the top toolbar to turn them on.
• Pinegrow no longer temporary adds special .pg-* selectors to CSS code. In certain situations, these selectors were left in the code. Pinegrow will now offer to clean up such code.
• Javascript syntax highlighting in code editor when you open a JS file through Project panel.
• Fixed the issue where Undo and redo stopped working after an error during a undo or redo operation.
• More.

The post Release 3.1 appeared first on Pinegrow Web Editor - Documentation and Tutorials.

The goal is to color the boxes with their respective colors. And we need to do it in a proper HTML way: by defining classes red, orange and blue and assigning these classes to the boxes.

Download the project files.

Here are the boxes:

And this is how the result should look like:

With Pinegrow we do that in 1 minute:

Can you do better with your tools?

And don’t be sad if you can’t beat Pinegrow with your favorite tool. Although we enjoy healthy competition, we don’t want you to throw away your existing tools. Pinegrow reads and writes HTML and CSS files directly, so you can easily add Pinegrow to your web development tool-belt and use it alongside other tools.

The post Color the Boxes appeared first on Pinegrow Web Editor - Documentation and Tutorials.

Reset Pinegrow settings

Activate Pinegrow with your license details

The post Reset Pinegrow settings and re-activate the application appeared first on Pinegrow Web Editor - Documentation and Tutorials.

Please use the following link to cancel your subscription: http://shop.pinegrow.com/manage

There you’ll also find an optional field for your feedback on using Pinegrow. Your response is warmly appreciated.

IMPORTANT: Cancelling your subscription will immediately deactivate your Pinegrow license with no possible refund. If you subscribe now, you cannot “schedule” an automatic cancellation at the end of the one month period right after your purchase.

If you wish to continue using Pinegrow until the next payment is due then you will have to cancel the subscription a day before that date.

The post How to Cancel your Pinegrow subscription appeared first on Pinegrow Web Editor - Documentation and Tutorials.

How does the 1 year of free updates work?

Each product purchase (except for monthly subscriptions) gives you a license to use the current version of the program forever and includes one full year of free updates to your edition of Pinegrow.

After the one year of free updates expires you may wish to renew your license – for just half the price of a new license – so as to obtain an additional year of free updates.

Your existing version will continue to work, but we’re confident that you’ll want to take full advantage of our latest enhancements at a substantial discount.

Note: If you don’t want to renew your license and need to reinstall an older version of Pinegrow, you can download it from here.

Price and Conditions

Please, check the current prices and conditions here: https://pinegrow.com/renew (You can also take advantage of your visit to read our License Agreement.)

IMPORTANT: Different conditions may apply for Company/Volume licenses purchase or for licenses purchase made through MightyDeals or another special discount operation. Please contact us.

How-to proceed

1. From https://pinegrow.com/renew, clicking on the Renew Now button will take you to a form where you’ll enter your existing Pinegrow serial code and email (you’ll also have the chance to recover forgotten serial codes).

2. If all the details shown on the screen are correct, click on Renew through Paddle and after that you’ll be presented with a payment form.

3. Your serial code will stay the same. To activate the renewed license run Pinegrow app and press on “Check license” on the license check screen.

The post How-to Renew your license to continue getting Pinegrow updates & Major upgrades appeared first on Pinegrow Web Editor - Documentation and Tutorials.

Double-click to collapse panels

Panels are no longer collapsed by clicking on the active tab. Instead, double-click on any tab to collapse the panel.

Style Active panel shows rules with :after and :before pseudo selectors

:after, ::after, :before and ::before selectors are used to insert content after or before an element with a CSS rule. Active style panel now lists such CSS rules.

The post Release 3.11 appeared first on Pinegrow Web Editor - Documentation and Tutorials.

If you have just purchased a monthly subscription

Subscribe to the plan you need and contact us with the details of your new subscription. (+ the details of the previous one).

We will immediately cancel the useless plan and proceed to the refund.

If the subscription is older than 1 week

The only way is to stop (cancel) your current plan and purchase a new one with the license you need.

IMPORTANT: When the subscription is older than 1 week, cancelling it will immediately deactivate your Pinegrow license with no possible refund so if you wish to continue using Pinegrow until the next payment is due, cancel the subscription a day before that date.

The post How to upgrade your Pinegrow version while your subscription is still active? appeared first on Pinegrow Web Editor - Documentation and Tutorials.