Divi Theme Tutorial - How to Use Section Divider

hello everyone and welcome in today's video I want to show you how to create section dividers in Divi let me show you pretty much what we're going to be designing so here we have our first example so I show you how to add this divider right here and then in the next example I show you how to add a basic line and then finally on the bottom here I show you how to add this divider now we're not just adding these dividers at random we are designing we are adding these dividers because of this type of image or the style of the image that we have so that's what we're gonna be covering in today's video now before we get started if you like to design professional-looking website with Divi if you buy Divi using my affiliate link I will give you access to my web design formula course a course that teaches you how to design professional-looking websites with Divi and before we get started I also like to mention that I create a lot of website tutorials here so by subscribing and hitting the door notification you'll be notified every time for I released new tutorials alright let's not waste a lot of time let's dive in and let me show you how to create this alright so let's start by creating a brand new page so I am going to come over here and click on pages so the page I'm going to create just gonna have pretty much any name it doesn't really matter here so I'm gonna click on add new and I'm just gonna name my page new dividers and then I'm gonna click on use Divi builder so this now is gonna take us to our builder alright so I'm gonna build everything from scratch so I'm gonna go ahead and click on the start building next I'm gonna add a single column here and then I'm just gonna close out of this and then I need to add a background image that we're going to use for the design that we're going to have now so I'm gonna click here on section settings click on background and then I'm gonna click on the third tab and add our image now I already have an image here that I downloaded from pixels com this is a royalty-free site so I'm gonna click here and add my image next I'm just gonna save this and then I'm gonna come over here and let's just add a divider for now and in this divider here we're just going to create a height so I'm gonna come over here to show divider and say no to that then over here I'm just gonna go and click on sizing and let's set height so our height here is going to be let's say 12 V W the reason why I'm adding the highchair is because I want to reveal more of this image I mean there's several ways we could do that we can also go in here and add some modules but this video is all about the section dividers alright so now that I've done that I'm gonna come over here and I'm just going to increase this as well so we can see more of our image and let's go up to about say 200 okay so now that we have 200 next I'm gonna come over here now into my section settings design and then click on dividers so our divider needs to come on the bottom here so we need to make sure that we click on the bottom tab and here's the thing when you use dividers you need to use dividers depending on the style of the image that you have so right now we have a lot of water so something wavy a is going to work really well for our example here so let's go ahead and look for that so we can either go with this one here or we can use the other one which has a bit of a transparency that one right there so you can choose which one but the idea here is they both have waves so that's good idea that's a good thing all right so I want to go with I'm gonna go with this one here now before I make any tweaks to this what I want to do is to add another section so let me just click here on this plus button at a regular section and two columns so in here we can add a text module so let's go ahead and do that and let's save that so maybe over here we want to add an image so let's go ahead and add our image so we're gonna pretend here that this is a proper site so let me look for an image that works with this so have a look all right looks like okay you know what let's go with this one here upload an image and then I am going to go in and save this and add a bit of space here in fact you know what we don't need to add a lot of padding so I'm gonna go with 122 all right so now that we have this you can see that our design here pretty works because of the water that we have here and it's bit wavy so this is the style that you want to use but don't go crazy with these section dividers as well it makes your website look unprofessional all right so the next thing we can do here as well is if we go in here and click on background and let's say we need to add a background color now of course you want to add a color that works with what we have up here so we need some blues so let's just drag this all the way up and let's choose our color so you can go with pretty much any color you want here go slightly darker if you want but as you can see I mean this pretty much you know works and it is good for our section okay so let's try this well perhaps you can even make it darker there we go alright so I'm gonna go with that and over here now all we need to do is to change the text so I'm gonna come over here and change the color so now as you can see this section looks much much better now let's try the other style so let's go back in here and let's go and click on dividers and this time we want to go for the basic one the basic wavy one there we go so again in fact you know what I actually preferred this one so I'm gonna go with this one here now there's also a few things you can do you can adjust the height here and again this is working with the wave that we have but of course you want to have it too low so have your wave there and you can also increase the repeat now of course when you take a look at this this looks ridiculous so ideally you just want to keep it simple and you can also flip this around if you want to but right now I think it looks okay okay so as you can see here this is a wavy divider and this really works well with the image that we have here you might as well want to add a bit of height there but as you can see this looks really nice now let's go in and try another example so I'm gonna go back in and enable the visual builder right so you know what I'm just gonna go in here and add more height to our divider here so I'm gonna go to sizing and I'm going to increase this a bit more so we can see more of this image alright so I'm going to save this and there we go so that's our section now let's try another example so in this example what we're gonna do is you shouldn't duplicate what we have here and then change the design so I'm duplicate this one here and then I'm also going to come over here to the second section and duplicate this as well so all I have to do now is to drag this one here between these two be in between here alright so there we go so in our second example here we're going to change our image so I'm going to go back in here click on background and let's use a totally different image so I want to go with this architecture one here click upload an image now as you can see here the architecture image doesn't really work well with these wavy lines because we have straight lines here and definitely I'm sure you can agree with me that this doesn't work here so what you want to do is to go over you to design dividers so you want to choose dividers that work with the style of image that you have so let's go ahead and add our bottom divider here and this time we need straight lines so this could work really well you can see as soon as I've added it there it looks really nice we can reduce the height a little bit if we need to but that in itself could be our divider that we can go with what we could do as well is choose a different style so what we're looking for here is things with lines I mean that could work as well but to be honest um what I'm really a fan of this one here let's find another one this one works really well as well so you can play around with the high two but the fact that it's got these sharp edges it really works with this architecture image or the image of the buildings okay there's one more style that we could use here and that is this one right here and again that one works okay although it has a bit of a curve here that's why I probably wouldn't use that one okay so let's see so for this design I'm going to go with either this one here or the basic one just the the slopey line I'm save and let's say you want to change the color of this section behind here we can go in go to background and then we can just reset this to white save that and you can see now it's really nice it's clean and it looks really really cool so I'm gonna go in here now and just change the color of my text so we're going to change this and that's all colorful on text let's save that right so let's do another style so this time again we're going to duplicate this once and we're also going to duplicate this like that okay now let's drag this the bottom you and then this one here needs to go between the two there we go all right so no we're gonna do what we did before we're gonna go in and change the image so I'm gonna click here on my section settings click on background and let's choose a different image here so I'm gonna go with this one here click upload an image now again if we take a look here in this image it doesn't really look nice with the with the slope so what we could do is we could come over here to design dividers and let's choose a different style here now the style that could work here is we could go with this one here and this could work really well and we can also play around with the repeats but this is just saying that this is a bit fun but you know what I'll just choose another one this repeat I'm not sure if oh there we go I really like that so this is the design that I'll probably go with for this image here so let's go down and see there we go so this divider here could work well and let's change this image because it doesn't match now if we also want to add it to a background for this since this is and really playful design we can come over here and change the background color completely of that section so as you can see now this looks much bit much much better now let's change the text so I'm gonna come over here click on design text and then I'm gonna sort of make this white so that it's easier to read on that background save that and then over here you just need to change this image let's see if we can find an image that works better so I think right so let's go with this one here load an image and there is our image of course over here on the left you want to add your titles so let's go ahead and do that quickly so I'm just going to duplicate this then I'm just gonna add my title over here okay let's call this main title and set this to a heading one and let's go ahead and starlight and wand by color first then just making this slightly bigger there we go save that so now our section is complete I mean of course we can send to this if we need to but I'm just gonna keep this as it is alright so what I'm going to do is I'm going to copy the module here and paste it so I'm gonna come over here click on copy and I'm gonna also going to right-click and paste module and here it is now of course we can't see it because it's white so we need to go in and change the color so I'm gonna go in here and click on design heading text and let's change the color there we go so now we have our title there save that and we also need to add our heading one more time here so I'm gonna paste and drag it into position baby go so now let's save our page and exit the visual builder and then we can see the final design all right so just to recap as you can see here our section dividers are pretty much working with the style of the image so as you're designing your pages and your sections you need to bear this in mind this is how you get a really nice consistent design but as I mentioned earlier on you don't want to use a lot of these section dividers it makes your website really look unprofessional so you want to use this in a very very subtle way so here it works I mean it could be also maybe a website to do with swimming or anything to do with water sport it'll work really well for that and then over here with the architecture because of the lines that we have here at this basic slant here works really really well and finally over here this again works really cool and this now has really worked because of the color that I added here because we have nice bright colors here so I've decided to add a color here on the bottom but the most important thing here is when you add your your section dividers it takes on the color of the section that's below it and we can also use dividers above but in this example I decided to show you how to use these dividers pretty much on the bottom right so go ahead try it out and see what sort of designs you come up with don't forget to hit the subscribe and bail notification by doing so you'll be notified when I release new tutorials until next time thanks for watching and I'll see you in the next video

Channel: MAK

Views: 2,506

Keywords: Augustine mak, Divi 4.0, divi 4.0 tutorial, divi 4.0 templates, Divi 4.0 template, Carflows divi, wordpress funnels, Cartflows, wp fusion

Id: jFCFlUHuXKk

Length: 15min 5sec (905 seconds)

Published: Mon Apr 13 2020