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.
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.
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 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.
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
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!
Follow this tutorial alongside documentation about components.
Learn and experiment with master pages with a comprehensive master pages tutorial. We’ll keep adding more topics and examples.
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.
Using smart components to edit the menu in one place and update changes to all other pages of the website.
Follow this tutorial to see how you can make any HTML website easily editable with Pinegrow CMS for static HTML websites.
This is the first video you should watch to understand the specific “Pinegrow workflow” for WordPress theme building.
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.
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.
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.
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.
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)
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.
The PGBootstrapStarter theme is a free WordPress theme fully created with Pinegrow PRO WP and the WordPress Starter Theme.
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.
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
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 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
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.
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
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