x
Bookmark

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.

WordPress Divi Theme
Purchasing & Installing
   Purchase Divi Theme   (7:46)
   Installing Theme   (1:44)
Divi Builder
  Default Editor vs Divi Builder   (3:18)
   Page Settings   (1:05)
   Post Settings
Sections, Rows, Modules (SRMs)
  SRMs Overview
   SRMs Settings Tabs
  Adding SRMs
  Cloning SRMs
  Deleting SRMs
  Moving SRMs
  Changing Structures of Rows
   Types of Modules
   Types of Full Width Modules
Theme Options
   General Theme Options
   Navigation Theme Options
   Layout Theme Options
   Ads Theme Options
   SEO Theme Options
   Integration Theme Options
   Updates Theme Options
Customizers
   Theme Customizer
   Module Customizer
Role Editor
   Role Editor Overview
   High Level Theme Privileges
   Builder Interface
   Library Settings
   Settings Tabs & Types
   Module Use
  Portability
Library
   Divi Library
   Global Items
   Premade Layouts
  Saving to the Library
  Loading from Library
X

Forgot Password?

Join Us

Password Reset
Please enter your e-mail address. You will receive a new password via e-mail.