Tutorials | Pinegrow Web Editor
Home/ Tutorials

Tutorials

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 and it is now “up to date” with the latest version of Bootstrap (4.50) and support for the latest version of WooCommerce (4.2.2) among many other 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 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.



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


Print this article