Divi – Premade Layouts

Video Tutorial

Script & Screenshots

In this video I’m going to go through the premade layouts.

Divi comes with a variety of premade layouts. Because these come with pre-placed modules with dummy content already loaded, these are a great way to get started. The primary workflow for using Divi’s pre made layouts is to replace all the elements the layout created, like images and text, with your own content.

The best part of these layouts is that you can edit them however you would like. For example, if you like a particular layout, but would rather not have one of the modules in it, simply delete it in the builder and its gone!

To load a premade layout, you start by clicking on the Load From Library button.

It automatically goes to the Predefined Layouts page.  For the pre made layouts, you have options like About pages, contact, portfolios, shop, blog, projects, and home pages.  Or you can choose as simple as full width, dual sidebar, right sidebar, or left sidebar.

If you have existing content on your page, and then change to a different predefined layout, you will lose all the content that you had on the page.  It’s best to decide on a layout and once you start editing it, not to change to another pre made layout.  If you do, you will lose all the edits that you made.  You’d be better off to continue making changes to the layout you originally chose so that you don’t lose your work.

To load a premade layout, click ‘Load’ on the layout you prefer to use.  This will load that content into your page.

Here are all the About Me page on the back end.  It automatically created the sections, rows and modules.  I’m going to click on Publish so I can show you what the front end of this layout looks like.

Here is what this premade layout looks like on the front end.

By replacing each element on the page with your own content you can have a custom site in minutes.  By clicking the edit icon on each building block in the builder, you can access the module settings to customize each element.

Make all the changes you need to the General, Advanced Design, and Custom CSS tabs to get this module to have all your content and desired look.  Then click on the Save button to save your changes.

Click on Update to save the changes on the page.

If you click refresh, you can see the changes made to your template.  Continue to make changes to the modules until you get all the content replaced with your own and the site looks like you desire.

That’s it for this video.  I’ll see you in the next one.