How to Create and Manage Divi Layouts

In addition to helping you create a beautiful web page without having to deal with CSS, a page builder also helps you to cut off much time in creating a web page or a website entirely.

Most page builders allow you to work with templates whereby you can either import a template, create a template, and export a template. Divi Builder itself uses the terms “layout” instead of “template”.

In Divi Builder, layouts are categorized into seven types:

• Module layout
• Fullwidth module layout
• Row layout
• Section layout
• Fullwidth section layout
• Specialty section layout
• Page layout

Each layout type can only be imported in a context assigned to it. For instance, a module layout can only be imported via the settings panel when you want to add a new module. Or a section layout can only be imported via the settings panel when you want to add a new section. When you are trying to import a layout outside of its context, you will get the following error message.

Before you import a Divi layout from a JSON file, you can check the context of the layout by opening the JSON file with a text editor like Notepad (Windows) or TextEdit (Mac). You can check the context on the beginning section of the file. Read here to learn more.

How to Create a Divi layout

In general, there are two ways to create a new layout in Divi. First, you can create a new layout via Divi Library. Alternatively, you can also create a new layout from the Divi Builder front-end editor when you are working on a page.

# Create a Divi Layout from Divi Library

Open Divi Library (Divi -> Divi Library). Once you are there, click the Add New button to create a new layout.

A popup will appear. Give your layout a name and select the layout type you want to create and click the Submit button.

You will be taken to the Gutenberg editor to create your layout. You can create the layout from the Divi Builder front-end editor by clicking the Build On The Front End button.

Start to create your layout. Once you are done, click the Save button on the bottom-right corner to save the changes and click the Exit Visual Editor button on the top bar to exit the Divi Builder front-end editor.

You will be taken back to the Gutenberg editor after clicking the Exit Visual Editor button above. Your layout has been saved until here and you can close the editor.

# Create a Divi Layout from Front-end Editor

There are three element types you can use when creating a page with Divi Builder: section, row, and module. You can save each element as a layout.

To save an element, say a module, as a layout, hover your mouse over the element and click the three-dot icon and select Save to Library.

Give your layout a name and click the Save to Library button. Your layout will be saved according to its context. For instance, if you save a module, your layout will be saved in a module context.

How to Manage Your Divi Layouts

You can create as many layouts as you want but having too many layouts without managing them can be a nightmare. It will be a bit time-consuming to find a layout when you need it. Divi Builder allows you to organize your layouts to make it easy for you to find them. You can create categories to organize your layouts.

You can either create a category from Divi Library or from the front-end editor when you want to save an element as a layout. To create a category from Divi Library, go to Divi -> Divi Library and click the Manage Categories button.

You can create a new category just like when you are creating a category for articles in WordPress. Type your preferred category name, set the parent category, and provide category description. End by hitting the Add New Category button.

After creating some categories, you can select an appropriate category every time you create a new layout. Be it from Divi Library or from the front-end editor.

How to Delete and Edit an Existing Layout

To can simply go to Divi Library to delete or edit an existing layout. Hover your mouse over a template you want to delete/edit and select the action you want to take. Clicking the Trash link will delete your layout while clicking the Edit link will take you to the editor where you can edit your layout.

The Bottom Line

Divi layouts help cut much time in creating a web page or even a website. If you regularly create new pages on your website with Divi Builder, you can create global layouts to save you time.

In order to make it easy for you to find a layout when you need it, you can organize your layouts into categories.