An Overview Of The Divi Builder

In this tutorial I’ll be introducing you to the divi theme. What makes Divi so special is that it’s powered by the divi builder. A drag-and-drop WordPress page builder that replaces the standard WordPress post editor and allows you to build beautiful designs in diverse layouts more quickly and more easily than you ever have before. Now what you’re looking at here is a very basic layout built with divi.

Everything built with Divi is comprised of sections, rows and modules. Sections are your largest organizational element, they house various rows of columns and in each…inside of each row are modules. So, looking at this page we have a single section. This big white bar here and inside that section we have a row comprised of two columns. Inside of one column here on the right, We have an image module and inside this column on the left, we have a text module and divi comes with dozens of different modules that you can place inside of these different row types and rows can be…made to have different numbers of columns.

So let’s move into the divi builder and see what this looks like within the builder interface. So I’m going to head over to the divi builder and as you can see, we have the section here, that’s the blue element and inside that section we have the row, as I’ve said…this is a two column row and inside the first column we have a text module. Inside the second column, we have an image module and any number of modules can be added inside of a column. And any number of rows can be added inside of a section and any number of sections can be added to a page. Also elements can be moved within the page.

So if I wanted to switch the position of this text module to be on the right and the image to be on the left, I could do that just by dragging and dropping. And if I update the page I can take a look at the front end you’ll see how those two elements have switched inside of that row. Now let’s add a new row to this page, just show you how this works. I’m going to click add row to add a new row to my section and then I’m going to get a pop up box here with a bunch of different column layouts to choose from. I can do just a one column full width row.

I can do one half one half row, three column, four column and a bunch of different variations in between. So in this case I’m going to do a one third one third, one third row and add that. So you can see a new row has been added below my first row, and I have a bunch of empty columns here and I need to add modules to those columns, just like I have in the first row. And if I click any of the insert modules here buttons, here I’m going to get a new pop up list of all the different modules that divi comes from, comes with.

And there’s countless modules here and you can do so much with each of these modules in combination on your page. And I don’t want to go over every single module right now. In fact we have an individual tutorial that goes over each of these modules in depth, and so I recommend you head back to the divi documentation page when you’re done listening to this overview and dig deep into the different tutorials we have here. We learn by each of these modules, if any of them are, you know giving you any trouble. So in this case I’m going to add some more images, just like I have on my page already.

So I’m going to click on the image module and once you click on any module you’re going to get the module settings. All module settings are comprised of three tabs. The general settings, the advanced design settings and the custom css settings. As a general philosophy, everything you need to create a great page, using standard divi modules is right here in the general settings. And if you ever want to explore outside of those settings because you want additional control over the look and feel of that module then you can venture into the advance design settings and if you happen to be a web developer and you know how to code a css then you can delve even further into the custom css tab and here we have broken down each of the elements within the module and you can just type in custom css right here.

But for now we’re just going to be focusing on the general settings and like I says…said there’s no need to go into these different tabs unless you really want additional control and that’s why we separated them to keep the general settings simple and to the point. And if you want more information about the general settings and custom css settings, we have tutorials that go over those specifically. So I would recommend you check those out as well. now when you look at the general settings you’re going to see various settings and these setting are going to be different for each module that you add to your page. In this case we’re adding an image module and so I have only a few settings here and they relate to images.

The first being the option to upload an image and so I’m going to do that first. I’m going to click the upload image button and upload an image from my library and then moving down here, you can also do things like add your alt text, give the image a title, you can choose to have these image open in a light box which I will do and you can also choose to have the intro animations by default. When you scroll down the pages, image will load in with a specific animation. You can choose that and you can choose the alignment and you can also choose an admin label and this is what appears within the builder when you’re looking at the modules so right now, it just says image but if you have a pretty big page going and you want to remember what each of these modules are or easily you can input a title here. So I’ll just say profile pic and save. As you can see my profile pic image module has been added to the first column in the row and let’s do the same thing for these other columns.

You’re going to add an image to each of those. Okay, so I’ve added a new three column row and in each of the three columns I’ve added a new image. And so if I update this page and if we refresh our page here you’re going to see a new row below this one and three images and equal sized columns. Three columns in that row. Some refreshing as I scroll down you can see the images have been added. Now, you’ll notice that in addition to your module settings rows and sections also have settings as well. And by the way if you ever want to re-access the settings of a particular module, just click these setting icons here on the left and that will re-launch the settings pop up and you can adjust all the setting for that module that you have added to the page previously.

And like I said there’s also sections for rows I’m sorry settings for rows and sections, so if you click that settings icon on the row, you’re going to get a bunch of row settings and there’s quite a few settings here to go through but.. no, we’re not going to touch on these right now and if you’d like to learn more about the various row settings and all of the section settings, we have two new tutorials that was just on those, so I suggest heading back to the documentation page when you’re done with the basic intro here to learn more about some of these more advance settings. In this case I really don’t need to modify the row settings.

To create basically you probably won’t need to either. But I will touch on one common setting which is the background color setting for sections and what I’m going to do is actually add a whole new section below this current section and then I’m going to add some, horizontal division between these two pieces of content by assigning a background color to my new section, that way the two pieces of content is seen separately.

It’s kind of a nice way to create a fun flow to the page. And so to add a new section of the page you’re going to wanna click the add new section button and you’ll notice that they’re a couple different section types that you can add and I’m going to get into those a little bit later but for now I’m just going to click the add standard section button and I’m going to choose how many rows I’d like to add, four columns and then like before I’m going to want to add some modules into each of these columns and so what I’m going to do is add a blurred module and what a blurred module is, is it’s just a small piece of text content, along with a title and an icon and these are pretty commonly found at the top of websites on home pages.

This gives a nice little, kind of intro to your services and what you offer, so I’m just going to give it a title here called blurred module. I’m going to assign an icon to it so I’m going to give it an icon ,I’m going to choose an icon color and I’m going to choose a text color because I want to make my text color light and I’m going to make my text orientation centered and a copy and some content to be placed below the title blurred and any module, row or section can be duplicated instantly by clicking the duplicate icon. So to speed things up a bit, because I know I wanna add four blurbs, one to each column. I’m just going to duplicate this three times and move each blurb into it’s own column. Next up I’m going to adjust the background color of that section.

So I’m going to open up the section, settings and look for the background color option here and then I’m going to choose a custom background color and make it like a nice dark grey. Now since I made my section background color, dark grey and I’ve made my blurb text light it’s going to show quite nicely and it’s going to be very different from the section above it which I showed you previously which has the white background and dark text. So if you refresh our page and scroll down…you’ll notice that this new section has been added, along with the blurbs and their pink icons and so you can see how a section background color can be very useful and how organizing your content, organizing your rows into different sections can lead to big diversity of layout combinations. So that’s a basic kind of overview of modifying a divi layout.

But let’s start from scratch because I know you’ve just install the divi builder and you’re probably wondering, how to get started right away and to do that, we’re going to create a whole new page . so I’m going to go over to my dashboard, go over to pages and click add new. And the first thing you’re going to want to do to use the divi builder is enable it. And you see by this big button here it says use the divi builder and what this is going do is it’s going to enable the divi builder and disable the standard post editor that you see here. So I click this and as you can see that layout that you were looking at earlier has been added and the standard tiny m.c.e word press editor has been removed.

And you agreed with a section and an empty layout, I mean empty row here and the first thing you’re going to want to do is add some columns. So just like before we’ll be constructing this new fresh page by adding some content starting with a row. So in this case I think this will be a contact us page and so what I’m going to do is add a new one half, one half column and on the left here I’m going to add some text maybe just talking about our company and giving some you know contact information maybe a phone number and address and so on. And then to the right of that I’m going to add contact form.

So divi has a contact form module. So I’m just going to scroll through and find that contact module and add it to the page, here it is…contact form and like all of our modules there’s various settings here, you’re going to wanna type in the e-mail address, where the email should be sent to you, so I’m just going to go ahead and change it to nickelodeonthemes.com. you can give it a title, say contact us and like before you can give it an admin label and also a css id and a css class if you want to customize this a bit in your child theme. So I’m going to save this to the page. I’ve added some text and a contact form, let’s just give a…let’s take a little peek at our layout so far. If we view the page, you’ll see that we have, two columns, one row, with that, text module on the contact form. So there we have it much that how we started originally with that two column row, that single column, single row I mean. And like I said we have the text here, in a contact form.

Ok, so now that we’re starting to build our own page let me introduce you to something new which is the full width section. Something that I’ve said before there are actually couple different section types. Actually there’s three, there’s a standard section which can house any row type and just about any module and then there’s a full width section which unlike the standard section these full width sections extend the entire width of the browser and they have their own set of modules that can be added.

So I’m going to add a full width section and you can see it’s a different color, it’s purple just let you know this is a full width section not the standard section and much like a standard section you can insert modules, now you can’t insert columns into a full width section because it’s always extending the full width of the page, just one column. And So I’m going to click insert module and choose from the various modules available for full width sections. In this case I’m going to add a full width slider this is a very common thing to add at the top of your page. You’ll probably using sliders a lot at on your home page and so..let me show you how to add a slider pretty quick here. Now the first thing you’re going to want to do when you open up a slider is to add a new slide, so I’m going to add a new slide, I’m going to give it some title text.

You can give it up some buttons as well, so I might say, join today, you can give it a url as well as a background image, so I’m going to upload a nice background image to this slide. You can choose the background color, in this case I don’t really need a background color since I have a background image. You can also upload a slide image to accompany your text in this case I’m just going to stick with text by itself. You can also upload a video you can adjust you text color, in this case I have a dark background color,so I’m just going to keep light text and you can even upload a background videos. But like I said I have a background image so I don’t need to upload a background image and a background video so I’ll stick with the image for now.

And then you can add, some content to the slide, some text to be displayed along with your title and I’m going to save and add a new slide to my sliders you can see here, and I’m just going to duplicate this and then added my second slide and I’m going to upload a new image for this one. And your background image and save and there we go. So I’ve added a new slider and added two slides and like I said this is a full width section so it’s going to extend the full width of the page so they go back to my page here and refresh, you’ll see a new full width slider has been added with my background image, and the text, you know the custom button text, and there goes my second slide, second slide over here to go there.

And as I can see here I probably wanna make this text color dark since it’s such a light background. So I could probably go back here, go back and edit my slide, change the text color to dark. Save, refresh and now we can take a look at that change. So like I said at any time if you wanna edit a module. So that’s a basic overview of building your new page with divi. And If at anytime you wanna switch back to the standard post editor, you want to stop using the divi builder, that’s fine just click the use default editor up here and that’s going to remove your builder content and switch back the standard post editor of course, it’s a little dangerous because you are going to have all your content removed, obviously you’re going to lose a lot of that content, so it gives you a little warning here, just to make sure you really wanna switch back and if you do click yes and its going to wipe the slate clean and you’re going to have just whatever content you had here just before you started.

So next up I’m going to show you something that will hopefully speed things up, speed up your design process, quite a bit and that’s what’s called the divi library and including pre-made layouts that should put to be. So this is a great starting point if you’re just beginning with the theme and if you want more information with the divi library be sure to check out the full tutorial on the divi library as well as the various subsequent tutorials about different aspects of the divi library such as global modules, and how to import and export your divi library to different websites. We find that as people use the divi library more and more and have this collection of web design elements that they use to build their website and their clients websites. It’s nice to be able to take that toolkit with you wherever you go. And so what I’m going to do is start back with the divi builder, I’m going to click use the divi builder but this time instead of starting from scratch I’m going to click the load from library button and what this is going to do is load up my divi library as well as the pre-made layouts that ship with divi. In sense I haven’t saved anything to the divi library I don’t have anything in my library. Actually I have one that I’ve saved.

But what you will see is all the pre-defined layouts that ship with divi. So you have a bunch of different layouts that can load instantly for just about every…you know thing you need to do. It’s about us paying pages contact pages so instead of building that contact pages built, I couldv’e just loaded this right in. in order to save me a lot of time so you have a lot of great layouts that we’ve designed…that we think look good, that you’re free to use to literally jumpstart your new website.

So what I’m going to do is I’m going to click the home page layout here and load that in. I’m doing this you can see it just loads all these modules in a really great configuration that we’ve picked out just for you and if you update that page and take a look you’re going to see that this layout has been totally pre-configured, look like a really modern homepage layout. you have the slider and those blurbs that we were using earlier you have a nice…called the action module an image, some number counters and now the slider, some more blurbs more sliders.