Let’s take a look at this Drupal 8 website, that’s based on the ‘Druppio’ theme. This is not a theme that’s associated with SooperThemes And the reason we are using this is to demonstrate How easy it is to install the Glazed builder ‘page builder’ on your existing website Even if it’s not using the Glazed Theme or the Bootstrap basetheme Or anything at all from SooperThemes.
The first step to Page Builder installation is to log-on to SooperThemes.com And go to the ‘download’ page Here you download the Glazed Builder module for Drupal 7 or 8, depending on your website. And next, we’ll go to the ‘Extend’ or ‘modules’ page and install the module We choose the file, find it on our downloads Press ‘install’ to install the module And next up we’re going to enable the newly added module We don’t need to enable the ‘Block Type’ or ‘Node Type’ set modules We just need the Glazed Builder module because we’re going to use it with our existing content types Now, press install Now.
Let’s take a look at a page and see if we already see our Glazed Builder interface. As you can see, there is no new interface, and that’s because we need to tell Glazed Builder On which fields we want to use the Drag and Drop page builder This specific page we’re looking at now is a ‘node’ of the basic page content type. What we want to do is go to ‘structure’ ‘Content types’ and ‘basic page’ and then to ‘manage display’ form here.
We find the node types’ body field, on which we want to enable the Glazed Builder field formatter Click on ‘save’ and let’s look at our page again to see what happens Now we see the Glazed Builder logo, but it doesn’t look quite right And that’s because we’re missing the bootstrap 3 library Now, the next step you can skip, if you’re using the bootstrap basetheme or in some other way already use bootstrap But if you don’t use bootstrap like the Druppio theme We need to enable it through the Glazed Builder configuration form Go to ‘configuration’ > ‘content authoring’ > ‘glazed builder’ and then to the form Here, you will pick the ‘load Boostrap 3 Light’ option.
The light option refers to a customized version of the bootstrap 3 library That we edited to make it work better with custom themes So, it’s basically bootstrap 3, minus some typographic styles that might interfere with your custom theme Let’s look again at our page And now that looks much better. Now we can already start in-line editing our existing content with Glazed Builder We can add marketting elements like our ‘quote slider’ And basically, everything that a Glazed builder can do, we can now do on this content type And it adds tremendous value and it only took us 3 minutes Next, let’s take a look at the home page of our website and see what’s going on over there The homepage in this theme is built of content blocks And because this is not the basic page content-type that we just configured to use Glazed Builder on We can’t do in-line editing yet or use any other Glazed Builder capabilities. Let’s fix this Go to ‘structure’ in the main menu Then choose ‘block layout’, ‘types’, there’s only one type so we know it is ‘basic block’ And then we go to the ‘manage display form’ Here we see again there’s a ‘body’ field, in which we can enable the Glazed Builder field formatter Choose ‘Glazed Builder’ and save Now. Let’s take a look at the homepage again You can see instantly, we have our in-line editing capability And, there’s a Glazed Builder instance appearing on each block of the homepage We can start editing and we can start adding basically any of the drag-and-drop elements provided by Glazed Builder.
Let’s add a Google map to our content block, for example We have our office in the Freedom Tower, New York And there you go, it just takes a second and we added a Google Map to our homepage.