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