Unzip to somewhere such as C:\Program Files (x86)\Pinegrow Web Designer\frameworks

Open Pinegrow

Open your project or start a new one using a BOOTSTRAP 4 page.

save the page

Click manage libraries and plugins

Click load plugin

Open pg.chocka-blocks.js (inside chocka-blocks folder)

Add and Activate chocka-blocks.js

A pop up will appear. Add the resources to the page or project

Chocka blocks will now appear in the lib panel

Be sure to activate Font Awesome 4 Pinegrow Plugin for icons.

If certain blocks that use Javascript appear broke when you drag into Pinegrow, simply refresh Pinegrow after you dragged the block in, this is down to how Pinegrow handles Javascript. An example is some of the skill counter blocks. Only a handful of blocks rely on Javascript but if the block does not appear right at first, just refresh the page in Pinegrow and carry on building.

Still not getting it?

Video Transcript

In this tutorial I’m going to show you how to install Chocka Blocks for Pinegrow – Over 300 Bootstrap 4 Blocks for Pinegrow Web editor, – or if you’re using the Free version – 50 free Bootstrap 4 Blocks for Pinegrow. The number of featured blocks are constantly rising so check our download page for the exact number of blocks currently featured in this HUGE Pinegrow block kit plugin..

After you have downloaded the plugin, open the zip file and extract the folder somewhere on your machine.

I recommend unzipping to the frameworks folder of your Pinegrow install. This is were all the addons bundled with pinegrow are located, but you could unzip anywhere you want.

If this is your first time installing a Pinegrow Plugin, I recommend you just unzip the download to a folder on your desktop for a test install.

I also recommend creating an empty folder on your desktop which will be used to save your project to – call it anything you wish. For the purpose of this demonstration, I have prepared one called ‘my plugin test’.

OK, let’s begin

Open Pinegrow

From the Pinegrow Home screen, click open a new page or project.

Select a new Bootstrap 4 Index page.

Once the page is open, the next step is to save it. You must always save the page before you can add the Plugin to the project.

From the Pinegrow Menu, click file.

From the dropdown, click save.

Save the page to the folder you created.

You can click yes to open as a project when prompted..

Now it’s time to load the plugin from the first javascript file inside the Chocka Blocks Plugin folder.

It will be called pg dot chocka dash blocks dot JS.

From the Pinegrow Menu Click file.

From the drop down click manage libraries and plugins.

Click load plugin.

Click the folder icon.

Locate the folder of the plugin you downloaded.

Open the plugin JS file – pg dot chocka dash blocks.

Click Add.

A pop up will appear asking are you sure?

Click OK.

Activate the plugin.

A pop up will appear prompting you to add the resources to the page or project.

Click add or update to the current open page, or add to all the pages currently in the project.

As we only have one page in this test, I will click add to index dot html.

Once the resources have added the blocks will appear in the library list panel on the left in Pinegrow.

Next we need to activate Font Awesome Four Icons. We will add support for Font Awesome 5 soon, so just be sure to double check what version is currently being used.

Click file.

Click manage libraries and plugins.

Activate font awesome 4.

Add the font awesome resources when prompted.

You should activate and add the plugin resources to any additional pages you create.