Looking for Pinegrow V4 Documentation?

Visit our new documentation site

  • Features
  • Documentation
  • Forum
  • Blog
  • Download
Back

Useful docs and tutorials to quickly get started with Pinegrow

Categories: Editing | Tags: Beginner’s Guides

Starting to work with Pinegrow requires a bit of motivation and the desire to learn and enhance your workflow. We have selected a couple of articles and tutorials that will help you to use Pinegrow effectively.

Some tutorials were recorded with older version of Pinegrow, so the UI shown there might be a bit different from the latest version of Pinegrow. But the way things work is the same.

The Basics

What Pinegrow is and isn’t

Pinegrow doesn’t add any code, it doesn’t generate anything. Instead it lets you work with CSS and HTML visually and provides visual tools for working with Bootstrap, Foundation, plain HTML, WordPress and responsive sites in general. Read our post and decide if Pinegrow is for you.

Editing

Fixing Flatty theme with Pinegrow

Flatty, a free Bootstrap theme from Black Tie, is a beautiful and elegant theme perfect for a simple landing page. But its grid layout only works properly on large screen sizes. See how we used Pinegrow to fix the layout issues. Plus we made the theme customizable with LESS variables.

Kelvin Pine – a Free Personal Resume Bootstrap Theme

Kelvin Pine is a free Pinegrow-ready resume Bootstrap theme based on Kelvin theme created by BlackTie.co. This elegant template is great for putting your resume, portfolio or CV online.

Creating responsive layouts

Responsive websites adjust their layout and content so that they work great at any screen size. This is done with CSS rules that use media queries to target different screen sizes. A video tutorial is at the end of the article.

Components, Master pages and Editable areas

Build your own Blocks

Everybody loves blocks! The idea of having a set of reusable website sections is very appealing. And for a good reason – most websites and web apps share a lot of similar elements: navigation menus, headers, services, portfolios, and so on. So why not package these sections into blocks and use them to quickly build different websites? With Pinegrow, that’s easy & quick!

Components tutorial

Follow this tutorial alongside documentation about components.

Comprehensive Master Pages tutorial

Learn and experiment with master pages with a comprehensive master pages tutorial. We’ll keep adding more topics and examples.

Opening times widget

Our friends at ProteusThemes created an Opening time widget for Bootstrap. We turned it into a reusable Pinegrow component and recorded a step-by-step tutorial along the way.

How to reuse the same menu component on multiple pages?

Using smart components to edit the menu in one place and update changes to all other pages of the website.

Getting Mr. Pine Cone ready for Pinegrow CMS

Follow this tutorial to see how you can make any HTML website easily editable with Pinegrow CMS for static HTML websites.

WordPress tutorials

How to Create a WordPress theme in less than 20 minutes

This is the first video you should watch to understand the specific “Pinegrow workflow” for WordPress theme building.

Converting Freelancer HTML template to WordPress theme

In this tutorial we’ll use Pinegrow to convert a one-page portfolio website into a WordPress theme. In the process we’ll cover theme structure, static front pages, custom fields, default & custom loops, using custom PHP code and registering new post types.

How to start your WordPress theme development with Pinegrow WP

Pinegrow is an awesome solution to create beautiful static HTML pages and to create wonderful and dynamic WordPress themes. But before starting any HTML template to WordPress theme conversion, you should ask yourself a few questions and follow some easy rules.

How to setup Pinegrow for WordPress theme development?

A step by step guide about how to setup a WordPress install on your computer and setup Pinegrow WordPress builder so that you can start creating WordPress themes.

How to Check your WordPress Theme created with Pinegrow?

While Pinegrow natively generates fully valid WordPress themes, there are still some items that you should check before zipping your custom theme folder and consider it is done. This is our – not exhaustive – checklist.

Add and use sidebars to you WordPress theme (add a slider)

A Sidebar is a WordPress theme feature. It’s basically an empty container ready to host one or more widgets that the website administrator can select and configure from the Widgets screen in the WordPress admin. (Appearance > Widgets)

WordPress Goodies

PG-Hellobar

The PG-Hellobar for WordPress is a proof of concept for a fully customizable notification bar that you can add to your WordPress themes created with Pinegrow WP and use to display important notifications to your users.

PGBootstrapStarter

The PGBootstrapStarter theme is a free WordPress theme fully created with Pinegrow PRO WP and the WordPress Starter Theme.

PG-Blog

PG-Blog is a very light and responsive Free WordPress parent theme dedicated to blog writers who like simplicity and who want to focus on the content.

It is fully designed with Pinegrow WP with simple HTML and CSS. There are no fancy animations, no javascripts and no marketing gimmicks.

You can use the PG-Blog theme for personal and commercial purposes. It’s also a great way to learn about how to create websites with Pinegrow WP.

Hosting & publishing

How to host your HTML website on GitHub Pages for free

GitHub is a great place for hosting your HTML websites. It’s free and you can even use your own domain names.

Add animations to your websites

The AnimatorPRO

The AnimatorPRO is a third party commercial plugin that you can purchase if you want/need to Create “Code Free” animations and interactions within Pinegrow! Many triggers and Custom animations are available through Pinegrow GUI.

Using Pinegrow with other tools

Pinegrow + Atom = The Perfect IDE for the Web

Now you can use Atom and Pinegrow together: code parts that are easier to code in Atom and use Pinegrow’s powerful tools to work with HTML structure, Bootstrap, WordPress, master pages, components and so on.

Working with Pinegrow and external Applications

Pinegrow is not an all-or-nothing web development solution. You can use it for those tasks where it can saves you lots of time and effort while using other tools for tasks more suited to them.

Learning with Pinegrow

Using Pinegrow to learn how to code

Watch the video and discover how Pinegrow can be a useful tool if you want to learn create the code behind webpages.



Last updated on May 19, 2017 at 9:57 am


Print this article

Find this document useful ? Share it !
  • Contents

    • The Basics
    • Editing
    • Components, Master pages and Editable areas
    • WordPress tutorials
    • WordPress Goodies
    • Hosting & publishing
    • Add animations to your websites
    • Using Pinegrow with other tools
    • Learning with Pinegrow
Back to Top
  • Recent Articles

    • How to change your Pinegrow subscription plan
    • How-to Renew your license to continue getting Pinegrow updates & Major upgrades
    • How to Cancel your Pinegrow subscription
    • Color the Boxes
    • Pinegrow + Atom = The Perfect IDE for the Web
    • About charging sales tax on Pinegrow purchases
    • How to Try Pinegrow for free for 7 days ?
    • Use the right jQuery version in your WordPress themes projects with Bootstrap V3.3.x
    • Countdown to Pinegrow 3.0 – A New Feature Presented Every Week
    • Experience Feedback: The relaunch of Mr. Bürli
  • Beginner’s Guides

    • Beginner’s Guides
    • Getting started with Pinegrow
    • Getting Started with Pinegrow WP
  • Editing

    • Layout
    • Elements
    • Text
    • Code
    • Javascript
    • PHP, ASP, ERB
    • Editing with Atom Editor
    • Tips & Tricks
    • More …
  • Pro Features

    • Features Overview
    • Projects
    • Master Pages
    • Components
    • Editable areas
    • Libraries
    • Partials
    • CMS
  • Blocks

    • Components
    • Editable areas
    • Build your own Blocks
    • Bootstrap Blocks
    • Bootstrap Blocks for WP
  • Helpdesk

    • What Pinegrow is and isn’t
    • Troubleshooting
    • Support Forum
    • Release notes
    • Download older versions
    • Renew your License
    • Change your subscription plan
    • Cancel your Subscription
    • Contact Us
Pinegrow Web Editor © Humane technologies LLC, Poklukarjeva 22, 1000 Ljubljana, Slovenia