How to create a new page on your Divi website

This post is meant for clients whose website is built on Divi theme, to learn how to create new pages if they wanted to do it themselves.

*Note : Please click on images to view full size.

Login to your website using the URL, username and password given.
Upon successful login, you will get the Dashboard page.
All your existing posts are filed under ‘All Pages’(#1). The link is on the left navigation menu.
All pages folder

Click on ‘Add New’ (#2).

When the ‘Add New Page’ editor is loaded, enter a title for your new page.
Click on the purple ‘Use the Divi Builder’ button. By default, a standard section and a row will be loaded for you. Here are the options for sections that you can choose from:

Divi layout

A standard section is indicated by blue colour, a fullwidth section by purple and a specialty section by orangy-red.

A standard section gives you a simple column layouts such as one column, 1/2 and 1/2, 1/3, 1/3, 1/3; etc, within the width of your page.  Click on ‘Insert a column’ to have a look and decide on what you need.

A fullwidth section gives you a section that spans across from the left to the right of your browser.  Click on ‘Insert module/s’ to see what you can put in this section.  Options include a fullwidth map, code (eg, for shortcodes from a 3rd party slider), title, header, slider, etc.

A specialty section gives you a more complex layout options for your page.  Click on a particular layout you wish to use.

A Typical Web Page Layout

After clicking ‘Use the Divi Builder’ and the standard section is loaded, click on ‘Fullwidth Section’ just below the standard section box.

A purple fullwidth section will appear. Hover your mouse just beside the purple vertical bar, hold down on your mouse and drag the whole column to the top, above the blue standard section.

Click on ‘Insert Module/s’. Click on ‘Fullwidth Header’.
Divi fullwidth header

Enter your title and sub-heading. Scroll down and you will see many other cool options to add a colour, an image background, your logo, an icon, etc. Go ahead and configure those if you wish. Under ‘Advanced Design Settings’ you can further customize your page header. Click ‘Save & Exit’ when you have finished and click ‘Preview’ to preview your work if you wish.

Back on your Divi Builder, click on ‘insert column/s’ of your standard or specialty section. Choose the configuration you wish to have. A typical page with a sidebar would be a ‘2/3, 1/3’ columns.

Divi builder columns

Click on ‘Insert Module/s’ and you will have all the content option ranging from accordian, blurbs, testimonials, sidebar…. to text. Choose what you want and add your content.

Divi content modules
Do likewise on all the other columns you have and add your content. Feel free to experiment and explore what each module can do and how you can customize them.

Preview your new page and if everything looks good, click ‘Publish’.

Don’t forget to add your new page to the navigation menu.

Note : You can customize each section by clicking on the ‘hamburger menu (3 short horizontal lines)’ for the section. Here, you can give the whole section a background colour or image, have a parallax background, adjust the paddings, able or disable the section for a particular device and more. You can also customize a particular ‘row’ by clicking on the hamburger menu for that row.

I hope you will have fun using this basic tutorial to create a new page on your Divi website. The power to customize your page is made easy without needing to use codes. More complex customizations can be done if you know and use CSS.

Leave a Reply

Your email address will not be published. Required fields are marked *