Hi,
@RobM prepared a step by step tutorial the tutorial on using Froala Design 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.
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)
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.
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
Sorry, I try to keep the Vid and Text pretty much the same, but…
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
How do you spell envious groaning noises? Storing Horsie blankets is a PITA!
Froala block a rock a loo.
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:-
Open index.html and save as Froala.html - this is JUST so. you see Froala in the Library tab.
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.
Move navigation section up to just below the h1 heading in the tree.
Remove the p.lead blurb
remove background image
In Pinegrow , ctrl or cmd F and find the line
<nav class="navbar navbar-expand-md">
And REMOVE the -md.
This disables the navigation responsiveness in small/all screens - or not, test on others and modify, improve and post here.
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 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.
Great step by step but I wish there was an easier way to integrate these design blocks.
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
Is it possible to use Froala Blocks with the Pinegrow WordPress plugin?
@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.
