Lesson 4:
Design Your Pages + Posts

How To Design With The Divi Front-End Visual Page Builder

Skip to the Next Lesson
Free Demo

Practice Using The Free Divi Builder Demo

Enable The Visual Builder

Follow These Steps:

Go to your new Page.
Click the purple Use The Divi Builder button.
Begin designing from the back-end. (Optional)
 Select the blue Use Visual Builder button, and begin designing from the front-end. (Recommended)

Insert Sections

Here’s what you need to know:

Everything you build in Divi starts with a section. Sections are the horizontal building blocks that contain your rows + modules. There are three types of sections you can choose from: Standard, Specialty and Fullwidth.

This step demonstrates on a new page using the Visual Page Builder

Insert Rows

Here’s what you need to know:

After you add your section, you’ll be able to insert a row and choose from various column layouts. There are plenty layouts to choose from allowing you to structure your pages and posts however you want.

This step demonstrates on a new page using the Visual Page Builder

Insert Modules

Here’s what you need to know:

After you insert your row, you’ll be able to insert one or more content elements called modules within each of the row columns. Divi comes with 40+ different modules that you can use to build just about anything your creative business website needs. 

This step demonstrates on a new page using the Visual Page Builder

Browse The Pre-Made Divi Library

Here’s what you need to know:

The Divi Library allows you to save + reuse Divi Layouts on any post, page or another Divi website saving you hours of design time. To help get you started, Divi already comes with tons of pre-made layouts for you to use.

Save Your Own Divi Layouts

Here’s what you’ll need to do:

 First, build out your layout using sections, rows + module.
From the bottom toolbar, click the Save To Library icon.
Give your layout a name.
 Click Save to Library.

Import Your Own Divi Layouts

Here’s what you’ll need to do:

From the bottom toolbar, click the Load From Library icon.
Select the Add From Library tab.
 Select your custom Divi Layout.
 Add in your content.

Import Third-Party Divi Layouts

Follow These steps:

 Download Your Divi Layout file.
 Drag and Drop your .JSON file into the Divi area.
 Select your Import Options.
 Click Import Divi Builder Layout.
Use this step to import your free Divi Layout pack.

Add a New Blog Post

Follow These steps:

Go to Posts, click Add New.
 Enter your Post Title. 
 Enable the Use The Divi Builder button. 
 Insert a column. (i.e. a Single Column) 
 Insert a module. (i.e. Text)
 Add your content.
 Click Save.

Edit Your Blog Post Content 

Follow These steps:

 Within the Module Settings, find the Content area.
 Be sure the the Visual tab is selected.
 Use the toolbar above the text area to Bold, Italicize, Add Links, Add Header Text and so on within your blog post.

Add Media Within Your Post

Follow These steps:

 Within the Content area, click where you want to insert your image.
 Click the black Add Media button.
 Choose an existing image or upload a new one.
 Click Insert into post.
 Click Save & Exit.

Assign Your Post To a Category

Here’s what you need to know:

Categories help visitors find they posts they want to read about. This is optional, but recommended if you are blogging about a lot of different topics. To set your categories, locate the Categories box on the right side, and select your existing category, or create a new one. 

Set Your Featured Image

Here’s what you need to know:

The featured image is what will appear on the blog feed of your website. By default, this will also be the first image that appears within your blog post. To set your Featured Image, locate the Featured Image box on the lower right side, click Set Featured Image, and select an existing image from your Media Library, or upload a new one.

Publish Your Post

Here’s what you need to know:

Click the Preview button to view how your blog post will look before publishing. If you are still working on things, but need to come back later to finish, then click the Save Draft button and edit your post later. Once you are ready to share your new post with the world, click Publish

Lesson 5:
Simple CSS Tips For Divi
Next Lesson

Pin It on Pinterest

Share this free online guide!

Show your friends how simple it is to build a WordPress website with Divi.

Shares