Adding a New Page to your website
Hover your cursor over the Pages menu option in the left-hand navigation menu and in the fly-out menu, click the Add New link. Alternatively, click the Pages menu option and then click the Add New link underneath, or the Add New button at the top of the page. You will be presented with a page similar to the image below.
Enabling The Visual Builder
Once you are on the page, enable the Visual Builder by clicking the purple button. You can also change the Permalink under the title.
If this is a new page, you will be prompted with three choices regarding how you want to start building your page.
Chose a PremadeLayouts tab is where you will find all of the premade layouts that comes with the Divi Visual Builder creator.
And the “Clone Your Existing Pages” tab will contain a list of all the pages (including posts and projects) currently on your website where you may choose to clone an existing page to kickstart the design of a new page.
Build from Scratch
The three basic building blocks (Sections, Rows and Modules) are used to build your page.
Adding Your First Section
Before you can add anything to your page, you will first need to add a section. Sections can be added by clicking the blue (+) button. When you hover over a section that already exists on the page, a blue (+) button will appear below it. When clicked, a new section will be added below the section you are currently hovered over.
If you are starting a brand new page, then your first section will be added automatically.
Adding Your First Row
After you have added your first section you can start adding rows of columns inside of it. A section can house any number of rows, and you can mix and match rows of varying column types to create a variety of layouts.
To add a row, click the green (+) button inside of any empty section, or click the green (+) button that appears when hovering over any current row to add a new row below it. Once you have clicked the green (+) button you will be greeted with a list of column types. Choose your desired column and then you are ready to add your first module.
Adding Your First Module
Modules can be added inside of rows, and each row can house any number of modules. Modules are the content elements of your page, and Divi Visual Builder comes with over 40 different elements that you can use to build with. You can use basic modules such as Text, Images and Buttons, or more advanced modules like Sliders, Portfolio Galleries and eCommerce Shops. We have individual tutorials for every single Divi module, so if you want to learn more about the types of modules that Divi provides then be sure to head back to the main document page and browse through the “Modules” section.
To add a module, click the gray (+) button that exists inside of any empty column or click the gray (+) button that exists when hovering over a module on the page to add a new Module below it. Once you have clicked the button, you will be greeted by a list of modules. Pick your desired module and it will be added to your page and the settings panel for the module will appear. Using this settings panel, you can begin configuring your module.
Configuring And Customising Sections, Rows And Module
Each section, row and module can be customized in various ways. You can access an element’s settings panel by clicking the gear icon that exists when hovering over any element on the page.
This will launch the settings panel for the specified element. Each settings panel is broken up into three tabs: Content, Design, and Advanced. Each tab is designed to make accessing and adjusting Divi’s large variety of settings quick and easy. The Content tab of course is where you can add content such as images, video, links, and admin labels. The Design tab is where we’ve place all of the built-in design settings for each element. Depending on what you’re editing you can control a wide variety of design settings with a click; including: typography, spacing (padding/margin), button styles, and more.
Choose A Premade Layout or Clone from an existing page
In the Load From Library popup you will have three tabs available. The Premade Layouts tab is where you will find all of the premade layouts created by the Elegant Themes design team free for you to use.
The “Your Saved Layouts” tab is where you can access any layouts you personally have saved to the Divi Library.
And the “Your Existing Pages” tab will contain a list of all the pages (including posts and projects) currently on your website where you may choose to clone an existing page to kickstart the design of a new page.
Loading a Premade Layout
Under the Premade Layouts tab, you can easily find a new layout by scrolling through the list of layout packs or by searching by category in the left column.
Once you select a layout pack, you will be able to preview all the individual page layouts included in the pack. Clicking on a page layout on the right will generate a preview of the page on the left. Under the preview, you can click the “view Live Demo” button to open the live demo of the page in a new tab. When you are ready to use the layout, simply click the “Use This Layout” button to deploy the layout on your page.
Add Layouts to Existing Content or Replace Existing Content
You can either load a premade layout into a blank page, an existing layout, or you can replace existing content. Loading a layout to a blank page will simply add the layout to your page as expected. Loading a premade layout to an existing page will, by default, add the layout under the existing content of the page. So if you don’t see a change to your page initially when adding a new layout to it, you will need to scroll down to see the new layout content that was deployed in addition to the existing layout. If you want to replace the existing content entirely with the new premade layout, you can check the option to “Replace Existing Content” before choosing to use the premade layout. This option is located right under the layout preview and buttons.
Loading Saved Layouts and Cloning Existing Pages
If you have saved layouts to your Divi Library, you can access these layouts from the Load From Library popup under the “Your Saved Layouts” tab. To load the saved layout to your page simply click the saved layout from the list.
You can also kickstart the design of your page by cloning one of your website’s existing pages. Click the “Your Existing Pages” tab and select the page you want to clone. This will deploy the layout (and content) of the page to your new page.
Customisation and Flexibility
The ability to add premade layouts to kickstart the building of a new page opens up a world of flexibility for creating your own unique layouts. Once the layouts are deployed, you can edit them however you would like. For example, if you like a particular layout, but would rather not have a certain section, simply delete it by clicking on the trash can icon for that section and its gone!
And by replacing each element on the page with your own content you can have a beautiful, custom site in just minutes. With the visual builder making these changes is simple. Hover over any area you want to make changes to and the settings for it will appear. If you’d like to change text, simply select the text and start typing.
If you like the change you can hit “command + save” (or click the save button). If you don’t like the change you can hit “command + z” to undo it (or use the editing history button to roll back multiple actions all at once!).
Next: