Elegant Themes released the Divi theme in 2014, and have since created the Divi Builder plugin which is a drag and drop page builder, great for creating user friendly columns within a post or page.

The way to use the Divi Builder to edit a WordPress website is very different to standard WordPress editing; I cover how to use it in this post.

Before updating WordPress I highly recommend that you back the site up.

Using the Divi Builder

Once logged in to your admin area notice the left hand menu.

This menu is your way to (almost) everything in WordPress.

Choose Posts or Pages, then choose to edit.

If the Divi Builder is in use on the post/page you will see, below the page title, a green button labelled ‘Use Default Editor’ along side a blue button labelled ‘Use Visual Builder’.

Below the buttons should be a purple area that contains rows and sections. This is known as the page builder.

If the purple button at the top is labelled “Use The Divi Builder”, The Divi Builder is not yet switched on. To use it hit that button.

Editing a WordPress page using the Divi Builder

To get a grasp of the layout, I compare the back-end (WordPress admin area) with the front end (the live site).

You will likely see columns of text or images on the live page.

Now look at the back end. In Divi Builder you can probably make out how the sections are made up.

Within the Divi Builder sections are purple, blue or red.

Purple represents a full width section, blue is a standard section. The sections are made up of rows, these are green. Specialty sections are red, and the columns within a specialty section are orange.

Sections can be split into rows. Green is standard row, orange is a speciality row.

Rows can then be split into columns. To split a row into columns use the buttons to the left of the row. The first one is the burger, the section a clone button, the third splits the row into columns.

A full width row cannot be split into columns. You can, however, make a standard row full width.

Modules can be put inside columns, or full width rows. These are dark grey. Modules contain text, images, widgets, testimonials, sliders and a whole lot more.

Edit a module in Divi Builder

To edit a module click the ‘burger’ icon, top right, as outlined on the image below.

A light box opens, enabling you to edit the contents of that module.

Editing a post or page using the Divi Builder

Editing a text module in Divi Builder

If the module is a text module you will now be faced with options to change colours and alignment. Your web designer has likely done all of this for you, and I advise you to leave those settings alone.

Scroll down until you see the content box.

Edit the text as you wish, making sure you do not over fill the box. For example, if a text box is aligned with an image, there may be a maximum amount of words that will look good.

Text modules that run all the way across the page are usually infinite, so you should be able to keep adding to them.

Once you have finished click the SAVE AND EXIT button, lower right. You must also click UPDATE on the page to save that or you will lose your work.

Now check the public side of the site. Hit REFRESH (F5) when viewing the page to see your changes. There you have it!

You can also create text links in modules.

Edit an image module in Divi Builder

Editing an image module is slightly more tricky than text. Only because you should start with the correct image size.

One that comes straight from your camera is really not any good.

From your web designer find out the dimensions that your image should be. Then download an image editor and resize and compress the image. Read the ‘prepare your image for the web‘ section on my post, then return back here to continue.

Now you have the image in the correct size add it to the image module. Click the burger icon top left of the image module, as shown below.

Editing the image module in Divi Builder

Within the light box is a field showing the current URL of the image.

To replace the image click the UPLOAD AN IMAGE button.

Find your image in the Media Library or upload it from your computer using the UPLOAD FILES tab (top left).

Click set as image. Click SAVE & EXIT, then remember to hit UPDATE on the page to save.

Click REFRESH (F5) when viewing the public page to see your changes.

Other modules can be edited in a similar way. To move a module just click the burger icon and drag it to the new row. Note that modules cannot be dragged straight onto sections.

I hope that helps!

We create amazing websites to START, GROW & MANAGE your business.

NCS.Technology