Home/ Tutorials

Tutorials

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 is a powerful, developer-first HTML/JavaScript shopping cart platform with a full back-office management dashboard to track abandoned carts, sales, orders, customers and more…

This article was originally posted on the Pinegrow Forum

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 the Internet and offer it to your visitors in a 100% static, high-performance and secure version, and all this without requiring any specific WordPress hosting?

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.

5 Essential Tips to Make Your WordPress Theme Project a Success

A well thought out and well prepared WordPress project is a successful project.

There are many different situations in which you may want to create a WordPress theme. The following tips are specifically for users who wish to use Pinegrow or Pinegrow Theme Converter to create a theme for their own site.

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 Pinegrow.

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.

How to 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, in wanting to go a little further, we recently realized that we were missing the ability to prepare blocks of content in advance in a post or page and choose not to display the block “right away.”

Fantico – Creating a landing page with TailwindCSS and Tailwind Visual Editor

A step by step tutorial about building a landing page with TailwindCSS.

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 a free project, open for contributions.

The Pinegrow team has recently updated the project with many improvements.

How-to add features and functionality to your WordPress theme by using 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 are no exceptions.

For WordPress developers, customising functions.php is one way to change the default behaviours of WordPress. The functions file behaves like a WordPress Plugin, adding features and functionality to a WordPress site.

Adding web interactions to Booklers landing page

A step by step tutorial on adding web interactions and animations to a simple landing page.

WildMusic – Interactions tutorial

A step-by-step tutorial about adding web interactions to the WildMusic landing page.

Creating a Slider with Pinegrow Interaction 2

A step-by-step tutorial about creating custom sliders with Pinegrow Interactions 2.

Creating an animated loading screen – Interactions tutorial

A step-by-step tutorial about creating an animated loading screen with Pinegrow Interactions.

Creating an animated revealing menu – Interactions tutorial

A step-by-step tutorial about creating an animated website navigation menu with Pinegrow Interactions.

Interactive image hotspots – Interactions tutorial

A step-by-step tutorial about creating interactive image hotspots with Pinegrow Interactions.

Auto-prefixing CSS with Pinegrow

Here is a quick tip for using the SASS compiler built into Pinegrow for auto-prefixing your CSS.

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 plain HTML project.

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.

How-to use 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 animations, 9+ useful plugins, SASS source files, templates, tutorials and many more. As you will discover in this tutorial, it is the perfect candidate to start a web project with Pinegrow.

Working with Bootstrap modals

Learn how to easily and quickly add modals to your Bootstrap projects.

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.

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.

Using CodePen components in Pinegrow projects

A step-by-step guide to using the resources on CodePen in your own Pinegrow Web Editor projects.

Creating an animated accordion – Interactions tutorial

A step-by-step tutorial about creating an animated accordion component with Pinegrow Interactions.

Creating a reusable navigation component in multi-page projects

A step by step guide to defining and using reusable navigation with Pinegrow Components.

Using Master pages in a multi-page project

Using a Master page in a Pinegrow project makes building quicker and keeps your design unified.

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.

How to 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.

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!

Creating plain HTML and Tailwind CSS Timelines with Pinegrow

Pinegrow makes creating repetitive elements easier with HTML snippets. This is a step-by-step guide to putting together a timeline in Pinegrow.

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.

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 CSS Grid.

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 micro-interactions to your pages. They can be created by a number of programs including Adobe After Effects and Figma.

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 and JavaScript methods.

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 happen!

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. Download the PDF and the code and give it a try! Here is a link to the GitHub repo so that you can follow along with the PDF.



Last updated on April 5, 2020 at 11:32 pm


Print this article