Editing Divi Page Layouts

Back To Tutorials


The core pages of your Divi website are created with Pages. See video tutorial at the bottom of this page.


Website Pages

To view the list of Pages that make up your website click:

Pages / All Pages


Editing a website Page

Hover over the Page name and click Edit.

The page content will load in.


First, understand the elements that make up a page layout

Page layout designs are always constructed using the following elements.

Sections: Sections are the biggest building block in the Divi builder. You can think of them as horizontal stacking blocks that can group your content into visually distinguishable areas. In Divi, everything you build starts with a section.

Rows: Rows are created within sections. Rows are split into columns and help us design the page layout.

Modules: Modules are inserted within columns and display information such as text, images, galleries, video, forms and everything else.


There are two ways to edit a page built with Divi builder.

Edit Backend

1. Option one is editing the page in the backend.

This will display the sections, rows and modules as blocks.

Simply click an elements cog icon to make edits.

Edit Frontend

2. Option two allows you to edit the page visually and displays the header and footer elements.

Click Build On The Front End.

The web page will then re-load and display as it looks at the front end.

You can then make changes to the elements by hovering over them and clicking their cog icon.


IMPORTANT - SAVE A BACKUP BEFORE MAKING ANY CHANGES

Before making any changes to any of your web pages you have you must export the layout and save to your computer as a backup file. This will allow you to quickly restore the web page in question (which is much quicker than having to restore the entire website!).

To save/export the layout do the following:

  1. Click the up/down arrow icon.
  2. Select Export.
  3. Name the export something relevant.
  4. Click Export Divi Builder Layout.
  5. Save to your computer.