You can also use this Tutorial to help installation – Scroll to the bottom of the post for an interactive guide – How to install Pinegrow Plugins
IMPORTANT: THIS PLUGIN IS NOW USING BOOTSTRAP 4
- Download Zip
- 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.
Still not getting it?
We HIGHLY recommend you try this interactive guide:
It will also help you troubleshoot and avoid common issues
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
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..
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.
A pop up will appear asking are you sure?
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 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.
Congratulations! You just installed our Chocka Blocks Pinegrow Plugin, well done!