Covid19 update: WE ARE OPEN... it's business as usual and we look forward to hearing from you.

Part 2 – Using Layouts, Saving To, And Adding From The Library

Having got to grips with some of the basic features of Divi Builder, let’s delve a little deeper into how to load your layout, using the ultra-convenient library to develop your own unique style of website with a consistent and polished finish throughout.



When you create a new page you will be asked to choose from three different options: to build a page from scratch, to choose a pre-made layout, or to clone an existing page on your website. Assuming that you are new to the Divi Builder experience, let’s start with the layouts option and see what is available.

Selecting the purple, middle option to choose a pre-made layout will open a “Load From Library” window. Here you will find a staggering 791 layouts are available for you to choose from, covering many categories, such as templates designed for online stores, charities and lifestyle websites. You are certainly very likely to find a concept that offers a great launching stage for your own business model!

Once the layout has loaded, you will be able to see all of its elements in the Wireframe view within the backend Divi Builder. Loading a pre-made layout means that you will have a fully formed structure to tweak and alter as you see fit, as opposed to building your page element by element, from the ground up, which can be time-consuming. Whichever you choose, you will be able to save your resulting layout right back into your library as a template for future use, and save each individual element too, for a fast and versatile building experience.


Saving To The Library

Each page that you build with the Divi Builder will be composed of several elements that sit within one another. The smallest element is a module, and that sits within a row, within a section, within the layout as a whole. With Divi you can save any element, from an individual module up to a whole page layout into your library to use as a template elsewhere in the future,. With these templates available, you will be able to load what you’ve saved on any page and concentrate on specific text or content without worrying about building each element from scratch over and over again.

To save an element, hover over the element with your mouse to see the menu of small icons appear at the top left of the element. Second in from the right is a circle with a downward arrow in its centre. On hovering over this, you will see text telling you that this button will save your module, row or section to the library. The layout as a whole is highlighted in purple, while the sections are highlighted in blue, rows in turquoise and modules in dark grey. Clicking on the save icon will open an ‘Add To Library’ box and prompt you to give your template element a name, as well as asking if you want to add it to a category. You can categorise the items you have saved into your library by whatever system you choose, creating your own methodology for speedy page building in future. You will also notice a tick box option to save your element as a global item, which is an advanced but super handy tool that we will come back to in just a moment!


Loading From The Library

Loading elements from the library is incredibly easy. From the Divi Page Builder you can click on any “+” button to add the appropriate element, be it a module, row or section, and the items of that type that you have saved in your library will appear for you to select.

If you wish to use a saved page layout, you simply need to create a new page from your WordPress sidebar on the left of your screen and select the purple ‘Choose An Existing Layout’ option again, but this time go to the ‘Your Saved Layouts’ tab to choose from your library options. You can even use the ‘Your Existing Pages’ tab to simply clone the layout from another page.


Editing An Element You Have Saved

If you have saved an element to your library but realise that you want to change it, you can access your library at any time from your WordPress sidebar menu, going first to “Divi” and then “Divi Library”. Here you will be able to access your full library inventory. As you hold your cursor over each item you can select “Edit”. This will open a Wireframe view of that item alone, allowing you to perfect that element, so it is ready for future use.


Using The Global Item Feature

As we discussed earlier, when saving an item to your library, you can select the tick box making that saved item a “Global” item. What this means is that wherever you use that element in the future, across all the pages of your website, the content of that element will be synced. A perfect example of the practicality of this feature might be your website footer. Perhaps you create a section that acts as footer to your landing page; containing information about your company and how to get in touch. By making this a global item, you can add this footer to every page you build and it will always appear the same. You will be able, from wherever the section appears, to edit it, changing text, images and anything about it that you wish, and your edits will automatically update wherever your global item exists. With its excellent selection of library elements and efficient syncing through Global Items, Divi Builder gives you a masterful tool kit to create a highly professional looking website!

About Alex

A former Teapot Apprentice. I handle a lot of the hosting, server management and site setup for our developers as well as building websites. It’s great to be a part of the team offering a great service here at Teapot. I love tea and I’m also an avid gamer.

Give us a call on 01460 281865 or email us to see how we can help you!