Kori Ashton takes you through the Divi Page Builder step-by-step on how to add columns and how to build out advanced layouts. She teaches you how to create their Demo 6 example. Incredibly easy drag and drop instructions.
Video Transcript
Hey y’all welcome to another WordPress Wednesday. My name is Kori Ashton here at WebTegrity in San Antonio, Texas. And today I am gonna take you into an advanced tutorial. This is gonna be a lengthy one. An advanced tutorial on how to use the Divi Page Builder inside your WordPress website.
What makes this page builder so powerful is you can buy this plugin by itself and apply it to any theme that you have, a free theme or a paid theme and start to make these dynamic, incredible page layouts to make your website look so impressive without ever having to write one line of nerd code. How incredible is that? So this is phenomenal for the brand new beginner just entering into WordPress but this is also an amazing resource tool for those developers who wanna code something really on the fly in this drag and drop environment. So this is gonna be a more advanced look, again, at the Divi Builder. And I’m gonna teach you, specifically, how to build out one of their actual demos, so an actual demo.
We’re gonna look at this particular demo that they have. They labeled it Demo six. As of today, number six. But I want this one. It’s pretty clean, pretty simple. It’s got really nice edge to edge imagery here, which is very, very trendy right now. It’s got this video with a nice little overlay happening. You know, three column break, edge to edge. They’ve got this really cool Parallax picture here with like, an image over an image. I mean, how do you do that? They’ve got these nice counters. All this stuff on the page. And I’m gonna teach you how to build this. So let’s go. I’ll stay off the screen so y’all don’t get distracted with me.
I have, over on my staging side and literally all I’ve done so far is create a new page by clicking add new. I named it test page and because I have the Divi Builder already installed in my page, I’m able to be right here and click Use the Divi Builder. One of the things that makes this Divi Builder even more mind blowing is I don’t have to stay in this screen set with all of these distractions all around me here. I don’t even know where to look sometimes. This Divi Builder allows you to go to the front side of your website and see it in almost a real time scenario. Actually, it is more real time as you build out the site, which is really, visually, what a lot of people need to have happen. So you would click here, use visual builder. Watch the magic begin as I get to move over to the front side of my website. And I would see my logo and my top menu bar and then my particular theme has a footer in black. And of course I can adjust those things. But the Divi page builder addresses the actual page content. Or the post content. This works on either of those. So now I wanna build out this particular layout with this edge to edge image, with this Parallax bit of text overlay. How do we do that?
Here we go. I’m gonna add an image behind here, behind this row. I’m gonna add an image by clicking on this little gear icon. And adding in an image to the background area. I’ve already uploaded my images to my media library. And there it is, sitting right there. I’m gonna go ahead and click check. So you can see it stretched edge to edge, beautifully across the page. Now in our demo we’ve got this section here that’s got some text in it. And I wanna make that area. So right here in the middle I’m just gonna click the plus sign. I’m gonna add a new row. And I’m looking for the text block right now. That’s how I’m gonna build this. There might be other ways because the Divi Builder actually has over 46 pre-made modules for you to just use, from counters, to accordions, to drop downs, to adding in your posts automatically. It’s super cool. So, unlimited, unlimited options.
I’m gonna just copy exactly what it is they have here. And I’m just gonna do the title for now. Paste that in there. Now it brought over, because I pasted it in the visual mode, I might do this and paste it in a text mode just so you can see how little, tiny it is. And how do we make that bigger. I definitely want it to be centered. I want the text to be lighter. And I have no way right here of putting background color on it. But you actually can do that. I’m gonna go ahead and click check. And what I want you to see is, I want you to think of this, if you’ve ever played around in Photoshop you know that there are layers. Text sits on top of an image, right? That’s the same way you wanna think about this page builder. And most page builders function just like this. You have layers where you have this background image sitting back here. Then on top of that background image we want to put now a block of color. And then inside that color we want to add out text. So there are, in a sense, three layers here. And I’m gonna show you what those look like. We have our one layer of text here, that has this gray box to edit it. We have this background here with this green outline. That is basically this row sitting on top of our background image, where we have this blue box.
So as you start to hover around you see these different editing options appear, phenomenal. So I wanna put that pink background color here. So again, just so you see what I did, I clicked on the gear icon to manipulate the row settings. You would click on the gear icon back here to manipulate this whole section. Or you would click on the gear icon here to manipulate the text. That’s how these layers function. Clicking on the gear icon. And I want to add a background color in the design area. So background color and I know my pink color code is BF6161. That gives me my nice kind of pink shade here. I’m gonna go ahead and click the check mark. Nice, so that extends out very nice. And of course, my text is too small still. So I wanna make edits to that. How do I increase the font size into this?
So check out this you guys. Again, no code needed. I can come through here and I’m looking through my text font. Default font or change it to any font you want. You can get just crazy, fun, silly. We’re just gonna do an Open Sans nice kind of straightforward, kind of simple font here. And maybe that size. I like that size. I certainly don’t like the fact that this is overlapping. When that overlaps that’s called a line height. Basically, we’re gonna want to separate that out a little bit. And that’s affected right here. Check this out you guys. We can play around with the line height and adjust that so if it does happen to wrap down to a second line it’s gonna be beautifully nested there together and not have any overlapping issues. So really nicely done there. I’m gonna click okay and that’s gonna spread out. But as you see here in our demo we’ve got all this padding, if you will, this extra space that kind of extends that picture out. How do we get that in here? That is gonna be done in the section settings. And what we wanna do is we want to add some padding in here. I don’t know the exact pixels that they’ve done but for now I’m just gonna throw in 200 on the top and 200 on the bottom and kind of spread this out. We might even wanna do more than that. You can play around with that spacing and see but you could start to see now, we’re able to see the picture even more. Isn’t that incredible and easy.
So scrolling down the page now we have this additional area of text. How do we build that next? We simply click a plus sign. We’re gonna add a new section below here. It’s going to be a regular section. And I’ll go in and explain the others here shortly. We’re just gonna go ahead and put again a singular row in here. And we’re gonna add in our text block. I’m gonna copy this content just for now so that I have the fake content on my clipboard. Pop it in there. And we’re gonna go ahead and leave this as dark. If we wanted to change it specifically to a totally different color, of course, we still have those options inside of here for the text color to change. But for now I actually like the way this is looking. And I’m gonna click okay. Now this is sitting on a white background color and our example is more of an off white. So I wanna apply this color to this background section. And again, here’s a background color option. And I’m gonna type E7, E2, D8 as my kind of off white color. Our demo shows this in two different paragraphs. And I wanted to break that in there. I thought I did but get ready to have your mind blown on this one you guys. You can even edit the text right here. You don’t even have to go anywhere else. If I wanted to break this into two paragraphs I’d just simply click in here, double click in here and enter down. And I can break this into as many paragraphs as I want. Break out this section. How cool does that look? Just amazing, and if I wanted to even I could come here, let’s see if I do this. I want to kind of justify these. So let’s go in here and orientation justified, and click okay. So now this stretches edge to edge really nicely across this section and you can see it’s very comparable to our demo. Moving down to the counter section.
How do we build this out? Again, we’re kind of getting in a rhythm here of understanding how the different sections break out. We’re just gonna add another regular section. This particular demo though, has three columns. So we’re gonna choose a three column layout in this section. And this is where we can scroll down through here and see all the different modules that would be available to insert. The particular one we want to do is circle counter. This is where it gets just incredible as to how much detail you want to change and customize in your website. If we want colors and fonts and everything like that, this is where we do it. Super simple, there’s no percentage, yeah, they’re using a percentage sign. So let’s leave that on. And it’s five 25. And the text color and the bar background color. We definitely want that to match more of our concept that we’re building out so we’re gonna use our pink color again. And put that in there to match. So right now though we don’t have the same darker background color. Well let’s go ahead and apply that really quickly so we can kind of see this start to play out a little better. Let’s go here, into our background section and add in the background color code. And that’s gonna be three, nine, 3D, five, two, apply. So you can see now that this is starting to look correct but our color here is off and our color here is not right. And we also need to apply this text. So let’s go in and do that really quickly. We’re gonna edit this counter. The text color, we actually want to manipulate our text color to be our number color. We want it to be our pink color. So it’s B-F six one, six one, there you go, apply. So now our color looks right. And of course we want the title to be our pink color as well. So going into our design we have our title font and our title text color. So we wanna apply that. So there you go. And then we also want to add in some text just below here like our demo is showing us. So in adding that we would just click add. And we’re looking again for that text block. There you go, click text. We’re gonna drop that in there. And we want it to be center aligned. And again, we wanna kind of apply our own color, text color. And we’re gonna use E7, E2, D8 for that. Very nice, y’all, see how that’s looking? Very comparable, right? And then if we just wanted three of these, check this out. This is how complex this is. I wanna duplicate these two modules, over here and over here. So I’ve got an option here to click duplicate. As soon as I do, it copies the exact same thing I just had. I’m gonna drag and drop it over here into this section. I can do the same thing here, duplicate my text, drag and drop it over here to this section. And then in order to do the third column, of course, you’re gonna repeat those steps. Drag and drop and just simply duplicate and drag and drop. Well you can’t beat that. And then you, of course, go in here and change the colors to match each other. Drag and drop it down below. Change the colors to match the demo. And change, of course, the percentage options.
All right, moving down to this really cool Parallax section. We’re gonna do a break out of the edge to edge imagery. How do we do this with a layover image? This was a little tricky. I was pretty impressed with how they accomplished this. Check this out. It’s incredibly cool. So I built it out here. These were my settings. All I did of course, was add a new row by clicking that. And I clicked just a regular section and then applied this. And I’m gonna show you what those settings are per section. And then I want ahead and added a singular row and then I added an image inside there. So we do have three layers. We have the section, the row, the image. And they all have their own unique settings. So pause this if you need to and walk through your sections. So here is the background section. When I open that up, that is my background image that’s actually this flower back here. I want you to see the other things that I checked. It’s this use Parallax effect. I went ahead, also, and applied a zero pixel. You might wanna play around with this for the padding but I’m pretty sure this is what’s gonna work best on yours. You leave the other three blank. That’s this initial tab here. And there was no additional CSS. That’s all there is. I’m gonna click okay. Inside of this singular row then inside the section I’ll show you the applied options here. You’re gonna check, use custom width, and you’re gonna go ahead and say 100%. This is different from the other option that’s there. So be sure to just follow through what I’m showing you here. Here’s an additional custom padding. This is negative 200. And that is to pull up our image so that it butts up against this line here. That’s all on this initial tab. Design, we have no additional margins but you do wanna check use Parallax. You do wanna check, keep column padding on mobile. And that’s it, there’s no additional CSS. All right, inside the picture itself, we’re gonna open this up, inside the picture itself. This is where you’re gonna apply that picture to sit here. It’s just an image box that I used inside of that row. We’re gonna say animation. You can say, if you want to, top to bottom if you’d like, remove the spacing below the images. This is important to have checked. I went ahead and center aligned the image. Design itself, we want a forceful width. And we also want to center the image. And we also have just another custom margin on here. Again, you might just wanna play around with the spacing to see what looks best in your layout. Clicking okay though, that takes you and gives you this really cool Parallax hover image effect where this egg is kind of suspended out over this area.
Pretty crazy involved. Isn’t it amazing? You didn’t have to write one line of code to get this done. Even though it seems like option overload there’s still just amazing capabilities within this builder. All right, we’ve got just another section to build out here. Let me show you what that looks like. Here’s that Parallax affect. And it looks like we might wanna add in some extra spacing. And you can certainly do that. What will you need? This big breakout section with a 50 50 column width, again this kind of off white background. So coming down below our beautiful Parallax, we’re of course gonna click, add a new row. And just a regular row. We’re looking for a text option here. And this is just gonna be our big, big, bold, red text, text orientation in the center. And we are going to actually come over here, you know if you wanted to you could play around in this area as well and take it to a heading one, make it nice and big, bold it out if you wanted to. But of course, you have the option to go into the design mode and set this to anything you want in a really cool, just drag and drop environment, which I absolutely love.
I just think it’s super cool to be able to play around with this stuff and see it in kind of a real time expand out. I mean, that’s incredible. And we also wanna apply the color, which is our kind of pink color that we have applied to it. What you will need. All right and then we have, in this, we have a kind of a two column split here. So just down below here we just wanna add another element inside of here. That’s literally all we’re doing is adding a new 50 50 split. And it’s gonna be a text side here. And we’re just gonna drop in that, enter down and we can, of course, put in all the text you want for this left side column. There you go, click okay. You can see what that would look like and then of course you can just, again, duplicate it. I clicked the wrong duplicator. You want to duplicate this inner one, grab that one, and drag and drop it over here to your right column. And now you’ve got your left and right 50 50 split. Of course this is all gonna look beautiful on a cell phone. And then we’ve got this three column break out but it’s edge to edge. Three pictures, how the heck do we do that? All right, we’re adding in another column. It’s a regular row. It’s three columns. And of course we want to drop in images, not text this time, so images. I’ve already got them uploaded to the media library. We’re gonna do, I believe it’s that one first. And the other thing we wanna realize is that we really wanna force this row full width. There are some options here that we can play around with to really make this stretch the full width inside of here. So any of this here on the section is going to stay the same. We’re not changing anything in the section area. So there’s no changes to the actual background back here. What we’re wanting to do is apply this to stretch the absolute full width. So we wanna make this row full width. We also wanna adjust the gutter, which is the spacing between the columns. And we wanna take it down to zero which is nothing, nothing. We just don’t want any spacing between any of it. The design itself, you can play around with padding if you wanted to give it a different look but this is what we wanna do here. Now you’re gonna see that looks correct, stretched over. I’m gonna duplicate this. Drag and drop it in my center column. Duplicate, just so that it takes all the customization I’ve already set to that image. And then of course I can come in here, click on the gear icon, change out the image to the correct image that I want in this spacing here. Click okay, come here change out the picture here.
Okay, and now we’ve got our beautiful three pictures stretched out there just like our demo. Okay, so the last section we’re gonna be working on is how to video section here with our text and our video with this really nice hover over effect. How do we do that? It’s simply adding another row. That’s all we’re doing adding a new row in and if you want to you can continue down adding in that background color that we’ve been doing. So that there’s some consistency down the page. And just apply that so that we’ve got this really pretty background color still in here. And it looks like we may have missed it here. I certainly wanna have that consistency running down the page. So you’ll wanna go in there and be sure that that yeah that looks good. This one too, I think, instead of this stark white I think I’d like to have that nice background color kind of match as we scroll down the page, just to give that kind of softer tone here. So here’s the what you will need. Really nice and this section here is where we’re gonna go ahead and add in the video. Adding in a new row we’ve already got the section here. Let me show you. You’re just gonna click this. Remember, our plus icon because we’re gonna add a new section. It’s a regular section. And we’re just gonna add in a row. That’s all we’re doing. And it’s asking, basically, what all do you wanna put in here? And for now we wanna put in that header text and then we wanna add in the paragraph text. So we’re just gonna click text for now. And this is our how to video. And of course we want it centered in the page.
And we really wanna apply our colors. Let’s see, okay our font size is here. We want it to be nice and big and bold. And then our text color we want it to be our red that was already on the page, good deal there, all right. So that’s kind of how that looks. We need to apply our background color though in our sections. Do you see how, whenever we’re working on this it’s just section by section you’re building it out. Oh, that’s our red. We’re building it out section by section. Adding in all the different details, without having to write any code. It really is just mind blowing for me. Because I know what it takes for us to do stuff in adding all this. It’s just incredible. You know what, I’m not gonna do it this way. I don’t wanna add another row here. I want to just add another element inside of here. And that’s gonna be this text section here. And this is gonna be our big block of text that they had in there. And we’re gonna justify it again to match the earlier on kind of style. All right, and the only thing that’s really making it look different, I guess, a little bit is the font selection, maybe a little bit of padding that you can play around with. But I wanna add in a video here so in order to do this you wanna go ahead and upload a video over to YouTube. And once you have it uploaded to YouTube you can come in here and grab in your share link here. So I just went to embed, or went to the share section rather, and grabbed the share URL. And then here’s what we wanna do here. We wanna add another option. And we wanna add in a video. And it’s just the singular video. It’s not a slider it’s just the singular video. And this is where it’s asking for the URL. So you can either upload it to your server but it’s gonna load a lot more quickly if you have it embedded over on YouTube first. And then check this out. You can create an overlay image if you’d like to upload it here and just kind of have a cover image, which would be pretty cool to do. You could easily do that. Or it can generate it itself. And basically it takes the first shot of that and it creates a picture and puts it over there and creates this really cool hover over effect for you in the moment. Click okay, as I scroll down here and I hover over it gives it that nice overlay effect. I can click, of course, and play the video right here in my website, easily. So, super, super, nice slick options here on how to build out using the Divi Builder, building out the demo six.
So, y’all you know that this is a little bit more premium. This is not a free builder. They don’t have a free option. You can play around with it here on the Divi Builder page and see all the different options, see all the different modules that you can use, from galleries, to testimonials, to side bars, to email options. There’s all sorts of stuff. So for the next few weeks I’m just gonna start building out these videos for you to show you how to use the Divi Builder in all sorts of cool ways. Next week I’m gonna show you how to build a coming soon page, literally within a minute. It’s incredible, it’ll have a countdown on there for you and be able to collect their email addresses. We’re also gonna show you how to build out a really cool about us page layout.
So stick around, be sure to subscribe to our YouTube channel. And if you have questions about the Divi Builder be sure to put them in the thread below. I also have an affiliate link below. If you’re interested in buying it I’d appreciate y’all using that. I’ll see you next WordPress Wednesday, bye y’all.
