Tutorials

Step-by-step tutorials for building websites with Pinegrow.

Step-by-step tutorials for building websites with Pinegrow: Tailwind CSS and Bootstrap pages, animations with Pinegrow Interactions, components and master pages, CSS styling and WordPress themes. More tutorials and courses are in the sections for Tailwind CSS, WordPress and Vue Designer, and on the Courses page.

55 tutorials and 5 courses. See all courses.

AI Assistant2

AI AssistantOctober 25, 2025
Using the DeepSeek API with AI Assistant
According to user feedback from Kenneth Kajander, DeepSeek API can be successfully integrated with Pinegrow’s AI Assistant using a specific configuration.
AI AssistantApril 23, 2023
Create engaging HTML presentations with AI Assistant
Learn how to create customizable HTML presentations using Pinegrow’s AI Assistant and extend the tool with your own custom features.

Tailwind CSS5

CourseWordPressDecember 1, 2024
Creating a Tailwind CSS block theme
This course presents an efficient and enjoyable development experience of converting a Tailwind CSS landing page into a functional WordPress block theme.
WordPressJuly 23, 2022
Flex: a Tailwind CSS theme with Gutenberg blocks and Pinegrow Interactions
A fun tutorial on converting a Tailwind CSS project into a WordPress theme based on Gutenberg blocks. As a bonus, we will use Pinegrow…
October 30, 2020
Creating plain HTML and Tailwind CSS timelines
Pinegrow makes creating repetitive elements easier with HTML snippets. This is a step-by-step guide to putting together a timeline in Pinegrow…
August 13, 2020
The complete guide to customizing a Tailwind CSS theme
A step by step tutorial to creating custom Tailwind CSS themes, including installing the tools and setting up the build process.
July 30, 2020
Fantico: a landing page with Tailwind CSS and the Tailwind Visual Editor
A step by step tutorial about building a landing page with TailwindCSS.

WordPress18

Vue DesignerDecember 19, 2024
Headless WordPress with îles and generative AI in Vue Designer
Learn with Vue Designer – Course 2
WordPressJuly 2, 2024
Marco Michely tutorials
A selection of videos created by Marco Michely that you can find on the Pinegrow forum as well as on his website https://56kblog.de.
WordPressMarch 6, 2024
Adam Lowe’s Pinegrow masterclass: tutorials and insights
Adam LOWE, the lead architect at Peak Performance Digital, is a leading advocate for Pinegrow Web Designer, known for his influential tutorial videos freely…
WordPressSeptember 20, 2023
Wrap WordPress shortcodes in custom blocks
A quick tutorial on how any shortcode can be turned into an editable custom block. Shortcode options are mapped to block attributes. The process…
CourseWordPressMarch 20, 2022
Creating custom WooCommerce themes
Everything you need to know about creating a custom WooCommerce themes with Pinegrow Shop Builder.
CourseWordPressDecember 20, 2021
Convert the Agency template to a WordPress theme
This set of tutorials will walk through the conversion of the Bootstrap 5 Agency template to a WordPress theme. This is an ongoing series…
WordPressOctober 28, 2021
Simple full site editing with a minimal theme and blocks
Use a minimal page template and custom blocks to implement a simple full site editing theme.
September 29, 2021
Snipcart eCommerce WordPress integration with Pinegrow
Roel Van Eyken, a graphic/Web designer from Belgium offers us an excellent guide to integrate Snipcart in your WordPress themes created with Pinegrow. Snipcart…
April 14, 2021
From WordPress to static HTML with Pinegrow and Simply Static
Did you know that you can develop* a website locally (on your computer) using the WordPress CMS and then put it in production on…
October 28, 2020
5 essential tips for a successful WordPress theme project
A well thought out and well prepared WordPress project is a successful project. There are many different situations in which you may want to…
September 30, 2020
Start your first WordPress theme development in less than 12 minutes
As the WordPress specialist in the Pinegrow team, I’m often asked about my personal workflow and precisely how I start creating WordPress themes with…
August 24, 2020
Temporarily hide editor blocks from posts and pages
With the new WordPress editor, everything happens in blocks. Whether you like it or not, it’s a smart concept that offers new possibilities. However…
June 30, 2020
Learn WordPress development with the Pinegrow Starter Theme 2
The WordPress Starter Theme 2 (ST2) is a framework for quickly developing your own custom WordPress themes. It was first introduced in 2017 as…
June 17, 2020
Add features to your WordPress theme with code snippets
At the core of any WordPress theme, there is a file named functions.php and themes created with Pinegrow or Pinegrow Theme Converter for WordPress…
WordPressJune 11, 2019
Convert a Webflow project into a WordPress theme
A step by step tutorial about how to convert a Webflow template into a WordPress theme with the new Pinegrow Theme Converter for WordPress…
WordPressAugust 14, 2018
HTML to WordPress theme with Pinegrow WP
Wim Teuling is instructor for the Digital Design and Development program (D3) at the British Columbia Institute of Technology and he has created an…
WordPressApril 26, 2018
Create a personal portfolio 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, customizer…
WordPressApril 2, 2018
Pine Adventures: create a WordPress theme without PHP coding
In the next hour or so we’ll create a real, production-ready WordPress theme – even if you never worked with WordPress before. We’ll do…

Bootstrap3

May 6, 2020
Working with Bootstrap modals
Learn how to easily and quickly add modals to your Bootstrap projects.
April 22, 2020
Styling your Bootstrap project with Bootswatch and Sass
A quick introduction to using the Bootswatch free Bootstrap themes and Sass to make your web page look great.
April 5, 2020
Working with Froala Blocks
A step-by-step guide on how to add Froala Blocks to Pinegrow library and use them to quickly build a great looking website.

Interactions8

February 11, 2021
Creating interactive Lottie animations
Lottie are super small animation files that are scalable and can be targeted for manipulation. They are a great way to add movement and…
December 30, 2020
Creating a slider with Pinegrow Interactions
A step-by-step tutorial about creating custom sliders with Pinegrow Interactions 2.
August 14, 2020
Interactive image hotspots with Interactions
A step-by-step tutorial about creating interactive image hotspots with Pinegrow Interactions.
July 16, 2020
Creating an animated accordion with Interactions
A step-by-step tutorial about creating an animated accordion component with Pinegrow Interactions.
July 1, 2020
Creating an animated revealing menu with Interactions
A step-by-step tutorial about creating an animated website navigation menu with Pinegrow Interactions.
June 17, 2020
Creating an animated loading screen with Interactions
A step-by-step tutorial about creating an animated loading screen with Pinegrow Interactions.
June 3, 2020
WildMusic: landing page interactions
A step-by-step tutorial about adding web interactions to the WildMusic landing page.
May 21, 2020
Adding web interactions to Booklers landing page
A step by step tutorial on adding web interactions and animations to a simple landing page.

CSS and styling6

December 15, 2022
Creating custom page dividers in Pinegrow
CSS dividers help with sectioning your content both making your pages more readable, but also enhancing the visual appeal. This tutorial shows how easy…
June 30, 2021
Styling with CSS in Pinegrow: a short tutorial
Pinegrow is all about choices. Adding styling to your page is no exception. Whether all code, low-code, or no code Pinegrow can let it…
November 13, 2020
Using media queries and CSS functions to create a responsive design in Pinegrow
Your website needs to look good on a variety of screen sizes. Pinegrow makes responsive design easy with a variety of different tools.
September 30, 2020
Adding gradient and SVG backgrounds in Pinegrow
Gradient and SVG backgrounds can add a spark of visual appeal to your sites. Luckily, adding them in Pinegrow is easy!
September 10, 2020
Styling pseudo-classes and pseudo-elements in Pinegrow
Pinegrow makes adding and styling pseudo-classes and pseudo-elements quick and easy. This tutorial shows you how.
May 20, 2020
Auto-prefixing CSS with Pinegrow
Here is a quick tip for using the SASS compiler built into Pinegrow for auto-prefixing your CSS.

CSS Grid4

CSS GridNovember 30, 2020
Create a CSS Grid layout in Pinegrow (Summer Nights 2)
CSS Grid has gained much wider support, with virtually all modern browsers supporting it. Page layout is significantly easier than using traditional floats and…
CourseCoursesSeptember 7, 2018
Learn CSS Grid with Pinegrow
The goal is to quickly learn enough about the CSS grid so that we can start using it in our projects.
CSS GridJuly 18, 2018
Use multiple track names to create a responsive CSS Grid layout
In this quick CSS Grid tutorial we’ll use multiple track names to create a responsive CSS Grid layout.
CSS GridJuly 4, 2018
Summer Nights CSS Grid tutorial
A step by step tutorial on creating a responsive CSS grid layout with fallback for older browsers.

Components and master pages5

Components and master pagesAugust 4, 2022
HealthHub, a master page example
A ready-to-use HealthHub project that uses a master page to manage header and footer.
November 4, 2021
Getting Mr. Pine Cone ready for Pinegrow CMS
This is a legacy tutorial. Much of the design of the Pinegrow Web Editor has changed, but the majority of the functionality has not…
July 30, 2020
Using Master pages in a multi-page project
Using a Master page in a Pinegrow project makes building quicker and keeps your design unified.
July 16, 2020
Creating a reusable navigation component in multi-page projects
A step by step guide to defining and using reusable navigation with Pinegrow Components.
June 30, 2020
Using CodePen components in Pinegrow projects
A step-by-step guide to using the resources on CodePen in your own Pinegrow Web Editor projects.

JavaScript1

May 20, 2020
Using the iziModal library in your web project
Pinegrow makes adding a JavaScript library into our projects easy! Here is an example of using the “iziModal” library to add modals to a…

SVG1

March 25, 2021
Using SVG images in Pinegrow
Scalable Vector Graphics (SVG) are a light-weight way to display vector images that can be displayed at any resolution and manipulated by both CSS…

Accessibility1

December 9, 2020
Implementing user controls in Pinegrow
Accessibility controls are important in web design. This tutorial walks through one method to add controls to your navbar and gives a review of…

Vue Designer1

Vue DesignerSeptember 28, 2023
Pizzeria: static HTML into Vue islands with îles, VitePress and Astro
Learn with Vue Designer – Course 1

Publishing and hosting1

April 7, 2020
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.

Older content4

These tutorials are kept for reference and may show an older version of Pinegrow.

Legacy: Bootstrap 4October 15, 2020
Create a language dropdown with flags in Bootstrap 4
A step-by-step guide to creating a Bootstrap 4 navigation bar with drop down menu for language selection.
Legacy: Bootstrap 4May 19, 2020
Adding multiple levels of submenus to a Bootstrap 4 navigation bar in your WordPress theme
One of the Bootstrap 4 most wanted feature can now be available within your WordPress themes.
Legacy: Bootstrap 4April 21, 2020
Use the Material Design for Bootstrap (MDB) UI Kit with Pinegrow
Material Design for Bootstrap is a popular and highly customized version of Bootstrap 4 with 500+ material UI elements, 600+ material icons, 77+ CSS…
CourseArchiveLegacy: Pinegrow 2.xNovember 13, 2017
Online course for Pinegrow 2.x
Learn WordPress theme development and create awesome WordPress themes by visually converting static HTML pages to WordPress themes.