# Working with Froala Blocks
**URL:** https://forum.pinegrow.com/t/working-with-froala-blocks/3925
**Category:** Tutorials
**Created:** [April 6, 2020, 9:58pm UTC](https://forum.pinegrow.com/t/working-with-froala-blocks/3925 "2020-04-06T21:58:15Z")
**Posts on this page:** 11
**Page:** 1
### Author:  [@matjaz](https://forum.pinegrow.com/u/matjaz)
#### Post date: [April 6, 2020, 9:58pm UTC](https://forum.pinegrow.com/t/working-with-froala-blocks/3925/1 "2020-04-06T21:58:15Z")
Hi,
@RobM prepared a step by step tutorial [the tutorial on using Froala Design Blocks](https://pinegrow.com/tutorials/froala-blocks/) in Pinegrow Web Editor. The tutorial covers one of the most useful features of Pinegrow - Page libraries in the Library panel.
Use this topic to discuss the tutorial, our team will be here to assist.
Please post only questions and comments that directly relate to the content of the tutorial.
---
### Author:  [@matjaz](https://forum.pinegrow.com/u/matjaz)
#### Post date: [April 7, 2020, 10:42pm UTC](https://forum.pinegrow.com/t/working-with-froala-blocks/3925/3 "2020-04-07T22:42:25Z")
Thanks @Pinegrow_User, it was a Docs site caching issue that prevented the display of images. Fixed now. (I’ll hide your post as it is not relevant anymore)
---
### Author:  [@schpengle](https://forum.pinegrow.com/u/schpengle)
#### Post date: [February 22, 2021, 8:26pm UTC](https://forum.pinegrow.com/t/working-with-froala-blocks/3925/4 "2021-02-22T20:26:23Z")
Well this is great!
Im doing the tutorials again…er a year late or so, now that ive figured out that it was my custom Workspace layout that was breaking my workflow with random interface errors I couldnt work out.
So this Tutorial has just been done too.
marvellous, just dont do what I did.
I followed the TEXT tutorial this time, instead of the video and as I was getting tired and nearly at the end,
**I totally missed part 6 out** as I could see the end I guessed.
SO… I ended up, using the process of adding the blocks in the first at the beginning, using the contacts.html page to THEN REPLICATE this process and add every other page…
And then write to support to ask if there was a way to get them to all show up in one page as it seemed silly to have a LOAD of tabs at the top.
One for each topic.
Well, actually YES! It IS silly.
Just do as the Bobbette suggests and OPEN the library view…until the hamburger stretches to…show
ALL the other page topics in blue buttons.
# Alt + click them
AAaaaand, save an embarrassingly silly request to tech support/feature request, for not having RTFM!
oops.
I realised when I watched the video tutorial.
I think next time I’ll do both text and vid… _sigh_
---
### Author:  [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [February 22, 2021, 9:15pm UTC](https://forum.pinegrow.com/t/working-with-froala-blocks/3925/5 "2021-02-22T21:15:27Z")
Sorry, I try to keep the Vid and Text pretty much the same, but…
---
### Author:  [@schpengle](https://forum.pinegrow.com/u/schpengle)
#### Post date: [February 22, 2021, 9:20pm UTC](https://forum.pinegrow.com/t/working-with-froala-blocks/3925/6 "2021-02-22T21:20:31Z")
no its fine, its my bad I think 🙂
Anyway! Ive just DONE something!
🙂
Based on that, I’ve just edited the Froala Blocks, index.html file \*_in Pinegrow_ itself, To rearrange it and actually change it so that It appears as an easy menu in the library panel 😃
Ive just got it to work as via the hamburger, Alt click thing, now going to check the media queries, so that there is no hamburger, just the blue buttons, so you can go straight to the sections you want, by loading the index. html page! 😃
oh and renamed that to Froala.html so that you see the name Froala at the top in the tab 😃
But… got waylaid as the local 7-11 shop just offered my their old bread crates and wheeled based!
SO I just had ot go and get those and ram them in here… for me to put all my horse rugs on!
Ha
---
### Author:  [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [February 22, 2021, 9:22pm UTC](https://forum.pinegrow.com/t/working-with-froala-blocks/3925/7 "2021-02-22T21:22:20Z")
How do you spell envious groaning noises? Storing Horsie blankets is a PITA!
---
### Author:  [@schpengle](https://forum.pinegrow.com/u/schpengle)
#### Post date: [February 22, 2021, 9:41pm UTC](https://forum.pinegrow.com/t/working-with-froala-blocks/3925/10 "2021-02-22T21:41:22Z")
Froala block a rock a loo.
[ ](https://www.youtube.com/watch?v=5nfqRQNSwBI)
Now I might just make a plain Froala.index.html page with just the buttons.
so I need to find the media query that shrinks down the nav to the hamburger, overide that in the css and bingo, and navigable Froala page for Pinegrow Library.
not sure where that pesky media query is for the size of Librarywindow in PG, standard 3col layout.
probably in BS
TADA!!
so this is what I did in order to get that simpler view in the Library panel for Froala Blocks.
I used PG to do this, so used PG to customise its own LIbrary View.
nice!
so download the Froala zip and unzip wherever you are going to keep it, in order to use it in your library view after. If you move the unzipped files after adding them to the Library panel, well, they will be a big 404.
then navigate to that directory and do the following:-
1. Open index.html and save as Froala.html - this is JUST so. you see **Froala** in the Library tab.
2. Leave the default index.html incase you need it later, and when adding the library page to Pinegrow as per the PG vid, use this new Froala.html instead of **contact.html** shown there. -this new page will be what you view in the library panel.
3. Move navigation section up to just below the h1 heading in the tree.
4. Remove the p.lead blurb
5. remove background image
6. In Pinegrow , ctrl or cmd F and find the line
And REMOVE the **-md.**
This disables the navigation responsiveness in small/all screens - or not, test on others and modify, improve and post here.
🙂
1. Save.
You have now created your own, much improved Froala Blocks interface, which you can view on the standard PG 3 col workspace, without undocking library panel and expanding and use THIS in order to carry on doing the [Froala Blocks Tutorial](https://pinegrow.com/tutorials/froala-blocks/) if you are stuck on one smaller screen/laptop.
REMEMBER to **Alt + Click** the buttons for selecting to work, or otherwise, you just get some funky button colour action instead.
N.B, just remember to use the _back arrow_ top left, to return to this library category view, once you have selected a different page and finished what you wanted to do.
And a final Caveat is that at this, narrow library view… some of the Froala features look, well, pretty dire, so youd have to expand them, or view them online on the freola site to see what they actually looked like anyway, without undocking and expanding the library view massively.
ie, the
**Features**
category… really not a happy place to be at this size.
---
### Author:  [@ryanb](https://forum.pinegrow.com/u/ryanb)
#### Post date: [August 20, 2021, 1:20pm UTC](https://forum.pinegrow.com/t/working-with-froala-blocks/3925/11 "2021-08-20T13:20:37Z")
Great step by step but I wish there was an easier way to integrate these design blocks.
---
### Author:  [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [August 20, 2021, 2:24pm UTC](https://forum.pinegrow.com/t/working-with-froala-blocks/3925/12 "2021-08-20T14:24:28Z")
Hi @ryanb,
Are you talking about the original tutorial, or how @schpengle is using them? Other than adding the assets to your project, it is basically drag and drop. Instead of opening one of the individual component pages you can load the index.html page to navigate to all the component pages.
Cheers,
Bob
---
### Author:  [@stackmode](https://forum.pinegrow.com/u/stackmode)
#### Post date: [January 24, 2023, 12:44am UTC](https://forum.pinegrow.com/t/working-with-froala-blocks/3925/13 "2023-01-24T00:44:05Z")
Is it possible to use Froala Blocks with the Pinegrow WordPress plugin?
---
### Author:  [@matjaz](https://forum.pinegrow.com/u/matjaz)
#### Post date: [January 28, 2023, 12:34am UTC](https://forum.pinegrow.com/t/working-with-froala-blocks/3925/14 "2023-01-28T00:34:12Z")
@stackmode PG WP plugin does not support loading external page libraries due to cross origin browser restrictions. The easiest workaround is to simply copy paste the code from Froala to PG, for example into Insert → Insert code.