Getting started with the Divi Builder

At Wohok Solutions we use the Divi Builder a lot. It’s a great way to build pages and posts in a structured way and makes it relatively easy for our clients to change existing content as well as create new pages and posts. This article gives a quick introduction to the Divi Builder and guides you through everything you need to know to get started.

The Divi Builder is developed by Elegant Themes (www.elegantthemes.com). It’s a great way of creating great-looking content on WordPress without the need of knowing how to code. At Wohok Solutions we aim to build websites our clients can manage all by themselves. The Divi Builder helps us a lot with that.

Having said that, getting to know how to use the Divi Builder requires a little bit of learning. Elegant Themes provides great tutorials and guides on various topics and in varying depth. This article’s aim is to point out the tutorials and videos most useful to you to help you get comfortable with the backend of your website as quickly as possible.

The Visual Builder

The Visual Builder is a great way to change existing content, particularly textual content. It can also be used to create and add new content, to get started, however, let’s stick to changing content first.

To get started, make sure you are logged in. If you’re not sure how to do that, ask your web developer to send you the link or to create a user for you.

After you’ve logged in, there are two ways to start editing a page or post with the Visual Builder:

Visual Builder 01

The first choice is to go to the page of your website on the frontend. If you’re logged in you should see a black bar on the top. As marked in the screenshot above, you can see the activation button for the Visual Builder. Once you click on it, the editor will load and you are ready to go.

Visual Builder 02

Choice number two is to access the Visual Builder from the backend. To do so, you need to go to the page or post you want to edit and then click on the “Use Visual Builder” button as marked in the screenshot above.

The following tutorial from Elegant Themes walks you through the basic functionality of the Visual Builder. For more information, please also visit the official Visual Builder documentation: Full Visual Builder Documentation

Creating a new Page or Post

For creating new pages and posts, it’s best to go to the backend of your site and on the left either click on Posts or Pages. Posts are usually used for blog or news articles. Pages are more used for things like About Us or the Homepage. For this tutorial, it doesn’t make much of a difference which one of the two you’re using.

Once you’ve clicked either of the two, you’ll see an “Add New” button on the left top. Click that button and continue.

New Page 01

You can now see a new page which probably looks similar to the screenshot above. To activate the Divi Builder for this page, click on the button marked red. For any given page, you can also choose not to use the Divi Builder, this ultimately is completely up to you.

New Page 01

After clicking the button, you can see that the builder has been activated. Next step is to add a title and save the page as draft. Saving the page makes sure changes don’t get lost. Whenever you change something, always make sure to either save the page as a draft if it’s not published yet or to click “Update” to update the published site.

New Page 01

On the right top of the page you have some more Divi related options. Depending on your site, those might look slightly different to the screenshot above. One important setting here is to set the Page Layout to full width. If you’re using a sidebar, this might be different, but for most newer sites this isn’t the case anymore, so if your new page looks kind of weird and you have content there you don’t have on other pages, try to make some changes in this section, that might solve things.

To actually add some content to the page, please read on. The next chapter will go deeper into the Divi Builder structure and how to use it. The chapter after that introduces Divi Libraries and how to work with predefined layouts. Finally towards the end of the article, we’ll take a look at some of the most important modules you’ll come across using the Divi Builder.

The Divi Builder Backend Editor

Additionally to the Visual Builder we’ve introduced in the beginning of the article, the Divi Builder Backend Editor is another way to edit the content of your pages and posts. It is actually the original editor, the Visual Builder was added in 2016 to make it easier for everybody to change things and immediately see the results and what it looks like.

Nevertheless, the backend builder is probably still the more powerful tool and I as a programmer prefer it to the Visual Builder as it perfectly represents the structure of the page. Having said that, however, I know programmers are kind of funny people at times, so what’s true for me is very likely not true for most other people. But that shouldn’t stop you from at least getting a basic understanding of the backend builder as well, because you’ll probably need it.

Again, the team at Elegant Themes has created a wonderful tutorial on how to get started with the backend builder, so there’s no need for me to redo that from scratch. You can find the full tutorial here Full Backend Builder Documentation and the Youtube video embedded below.

Using the Divi Library

Now that you’re familiar with both, the Visual Builder on the frontend and the traditional editor on the backend, we get to one of the most powerful tools of Divi, the Divi Library. The Divi Library allows you to save samples of full page layouts, sections, rows or modules that can later on be reused on other pages or posts.

If you are one of our customers, we would have saved your basic layouts to the library which makes it even easier for you to create new content. Before you load a template, make sure you don’t need the content on that page anymore as loading the template will overwrite whatever is currently in the Divi Builder on that page or post.

Load Library Template 01

To access the predefined layouts, click on “Load From Library” as indicated in the screenshot above.

Load Library Template 02

Next click on “Add From Library” to see the list of custom layouts available for your website. For this website there’s only one general layout but for your website there might be a lot more layouts for various different use cases.

Load Library Template 03

After clicking on load, the template is loaded and you can see that a Fullwidth Section with a Fullwidth Header has been added on the top with another normal section below it.

Apart from the custom made layouts, there are also predefined layouts made by the Elegant Themes team. Watch the video below or click here Documentation Premade Layouts to learn how to use those, it might also help you to get started with the custom layouts.

Finally, as you get more comfortable with using your website, you yourself might want to start to create new templates, delete old ones or simply copy content from one page to the other. Take a look a this tutorial here Documentation Divi Library or watch the video tutorial, again provided by the team at Elegant Themes:

Important Divi Modules

You’re done with the basics, now we get to the more detailed areas where you can pick and choose what’s important for you. Below we quickly mention and list the most important modules that you’ll probably come across while working with the Divi Builder. To find the documentation for the module you’re interested in or to get more information on the Divi Builder in general, please go to the documentation overview page here: Full Divi Builder Documentation by Elegant Themes

The Text Module

The text module is the most basic module and probably the one you’re going to use the most. It is simply a normal WordPress editor with some more features and settings. To learn more, check out the video tutorial below or the full documentation here: Full Text Module Documentation

The Image Module

You can add images either directly to the text via a text module or have a image-only column using this image module. Again, watch the video tutorial for more details or check out the full documentation on the Elegant Themes website: Full Image Module Documentation

Fullwidth Modules

Fullwidth sections and modules are great, especially for the top part of pages. The most common modules you’re going to use for this are the header module and the slider.

You can find the video tutorial for the header module below and the full documentation here: Full Fullwidth Header Documentation

Furthermore, please find the Elegant Themes video tutorial for the fullwidth slider below. The full documentation can be found here: Full Fullwidth Slider Documentation

The Code Module

Finally, the code module. Even though that’s probably more a module for programmers, it can also be very useful for you. If you, for example, want to add a Youtube video, you can simply copy the code Youtube provides under Share / Embed and put it into the code module. Or you can paste WordPress shortcodes for whatever plugin you want to use right into one of those code modules. As for all of the modules, Elegant Themes has provided a great video tutorial (below) and a more detailed text guide here: Full Code Module Documentation

Conclusion

To learn how to use the Divi Builder, you’ll probably have to invest a couple of hours of your time. However, it’s time well spent as it allows you to take complete control over your own website and not depend on web developers or web designers to upload every bit of content you want to show on your website.

Share this Article

About the Author

Wolfgang GeigerWolfgang Geiger is founder, director and lead developer of Wohok Solutions. Passionate about website development from an early age, Wolfgang has built websites for more than half of his life. He has degrees in both, Computing and Business Management and is fluent in German, English and Mandarin. In Hong Kong he enjoys the mix of East and West, the energy in the city and the fabulous local food.

Get in Touch

Do you have any comments or questions? Get in touch, we'd love to hear from you!

Name

Email Adress

Company

Message