How to Use Empty Sections in Divi to Create Unique Design Elements

hey divination thank you for joining us in this livestream and today I will show you how to use empty sections to create unique design elements on your Divi website and for this livestream slash tutorial we're going to use the jeweler layout pack which came out and if you haven't checked that out yet make sure that you do I've mentioned a link in the description below and if you're not an elegant themes member yet make sure that you check out Divi as well I've mentioned a link to the product page we can go ahead and discover Divi for yourself so without any further ado let's get to it alright so the jeweler layout bar contains seven different layouts so we have a home page in landing page a shop page an education page a blog page a contact page and an about page and as you can see this is a very elegant design and you can reuse the design for all kinds of websites so it's made for jewelers in particular but you can use all of the images for instance without any restrictions for any kind of website you want to create and I especially like the education page over here it looks very clean and it has high-quality illustrations included and it's just a very quality page and it really says a lot about the professionality that you have that your company has that your website has so yeah and within this live stream we're actually going to help take the design one step further by adding empty sections and using these for design purposes and what looks does that look like so I'll just show you right away what we're going to recreate within this tutorial and this is what you can expect so we're using empty sections to create designs like these and these are small designs but these are small tweaks but they can really elevate your design and just make it a little bit more personal a little bit more unique and over here we have another example and we have this as well so we'll be able to combine it with background images and all of the Divi building options that are available so we can you know get the best out of it and then this is the last example so to start off go to your WordPress website you'll need to install the jeweler layout pack but you can actually apply this method to any kind of pager working on doesn't necessarily have to be part of a layout bag that came out but you know you can just build upon the layout packs that you already get and just you know help make it a little bit more personal and the examples that I'm showing over here are just a few of the possibilities that you can apply and you know there are a lot more possibility as possible but once you get the way we're working you will be able to play around with all of the options and see what you like best all right so let's just go to the landing page over here and of course we're going to use the visual builder and I'll just start with that I'll just enable the visual builder now we're going to recreate all of these examples that I've shown you but there are some general steps that we'll go through first because these steps are necessary for each one of the examples and for the other examples that you want to create so we'll go through these general steps first and afterwards you can modify that particular section we use it for other examples so the first thing you will need to do is find a place on your page where you want to add that element so for instance we'll start with the following one this one over here and I'm just going to place that right in between these two sections because this is it's not empty but if you want to you know put an extra element over here you have the space to do it so I'll start by adding a standard section alright and the next thing I'm going to do is as I've mentioned before this is going to be an empty section but if you use an empty section like completely empty without anything in it it will not show on tablet and mobile because it doesn't contain anything so we're actually going to create the illusion of having eight an empty section but we're actually going to play something in it so I'll just use a one-column roll for it and you can actually choose whichever kind of columns trucks you want over there but I'm just making things easier for myself and then add a text module and over here this is an important part so we're going to use an invisible character for this and you can get this invisible character by pressing alt in 0-1-6-0 or you can just copy the invisible character I've mentioned character I've mentioned it in the blog post and I've shared the link in the description below so I'm just going to paste it in over here you can see it's empty but I still have that character going on and you just can't see it all right and the next thing I'm going to do is I'm going to open the bag the background settings of my section over here so I'll just open this section first go to the background settings and I'm going to reuse one of the colors and my color palette so you don't necessarily have to use this color but I just want to make it fit with the entire style of the layout back since we're working on the jeweler layout pack and I'll just use the following color code alright so we have the general steps so what I did is I created a new section added a row and a text module with an invisible character over here so the next thing I'm going to do and this is just going to make it easier for myself to you know play around with all of the different examples I'm going to save this to my library and I'm just going to call it empty section alright so now what I can do is go ahead and start with this one so I won't be it won't be needed to recreate this section from scratch if you want to apply other examples to it so we'll just access this section from our deviant library and start building upon that all right so we're going to create the first design element and that's the following one so we'll start with the design and afterwards we'll also add a background image that will make this look really good okay so the first thing I'm going to do is open the settings of my section go to the design tab open the spacing settings and over here I can add margin and padding or whatever I really want to because these sections are not dependable on each other so that's the nice thing about using separate sections for design elements if you're applying any margin or whatever to this section in particular it won't affect the other content that you have on your page and it will you know it will only apply to that section in particular which opens the doors towards a lot of beautiful designs so we're going to use some margin for this and we're going to add it to the left and to the right side all right so over here I'm going to add 200 pixels and I'm going to enable this option over here which will make it appear on both sides and we're going to modify this for tablet and phone so we'll use 100 pixels instead for tablet and 50 pixels for phone as you can see this matches the screen size better than the 200 pixels did alright and the next thing we're going to do is open the border settings over here and you can play around with all of the options as I've mentioned before but I'm just going to add some rounded corners I'm going to add 100 pixels to the top left and the top right so you'll need to disable this option in the middle if you just want to make it apply to a few corners instead of all of them and then I can open the divider settings and over here we'll be able to give it a little bit more structure so I'm just going to add a bottom divider so I've already added some rounded corners to the top and I don't think it's necessary to add any top divider over here because that's the way I liked it visually so over here I'm just going to select one of these dividers and I'll just use this one because I like this one when it has a higher horizontal repeat and this will differ on screen sizes as well so we'll start off by making this white so we'll use the color that matches the background color of the other sections so actually we're just making it blend with the next section over here and then I'll add 180 to my devided height and I'm going to add 8 for my horizontal repeat and as you can see we have a results that it's similar to this one but we'll also modify this to the screen size we're working on so for tablet we'll use 150 instead and for phone we'll use 120 same counts for the horizontal repeat over here you can see that this looks a little bit messy so we'll just modify that and we're going to use five for tablet and four for phone so this looks a lot better now we have this final result and if you just want to take it one step further and add the background image and the gradient overlay you can do that as well because as I've mentioned before the possibilities are really endless these are just a few things that I've tried out and I thought were you know looking really good so I'm just going to remove this color and instead I'm going to add a gradient background and if you want to go through everything step by step I've also mentioned the blog post in the description below where you can follow everything and you can find all the steps to each one of the examples that will recreate and over here I'll use a completely transparent color as well so these two color codes this is the same color as I've used for the section background but now I'm just combining it with a fully transparent color as well and over here I'm going to use one hundred and thirty degrees and I'll also modify my start position to 25 it doesn't really matter it doesn't have to be that accurate even and the next thing I'm going to do is open the background tab over here and I'm just going to choose one of the images that are included within the layout box so you can use these without any restrictions and I'll use this one over here and I just want to green to show up a little bit more but you can just leave it the way you want to and I'll just use top sender over here and the next thing I'll do is use overlay so now I have this stunning result alright so now we can move on to the next example and the next example will be let me just check it out really quick will be these lines over here as you can see so we're using two sections for this and I'm just going to exit this page I'm going to save and exit all right and I'll just go to another place so you can apply these randomly so you don't have to apply these on one in the same page it's nice seen you know use different kind of design elements on different pages so they just add and you know there's still subtle but they do add that little extra you want to add to your pages so I'll just open the home page for instance and if you remember I've added the general section to my DV library so I won't have to go through all of these steps again I'll just go to my add from library tab over here and over here you can see the empty section so make sure that you do that just to save yourself a bunch of time and you know then once you go through these repetitive steps you will be able to focus on you know all of the creative stuff and see what results you get so the next thing I'm going to do over here so we have this and the next thing I'm going to do is remove all of the row padding you can do that by opening the settings of your row and going to the spacing settings and adding zero or you can just you know use the visual builder I recommend you use the visual builder it just happens really quick that way and the next thing you will need to do is open your setting of your section and go to the design tab again open the dividers settings and we're going to use both a top and bottom divider over here so you will need to find the divider in the lists and it's going to be the first one actually so this is just a straight line and again make sure that you use a white divided color so make it match with the background color of your previous section and the next one and this really works this kind of method really works on clean web sites where a lot of white is being used as background color and over here I'm going to do the same thing to my bottom divider so I'll use the same one and use a white divider color alright so the only thing left to do is clone this section and as you can see we have this stunning result and you can go and go ahead and clone it you know numerous times as much as you want to but I liked having two of them I thought it was too much alright so let's move on to the third one and the third one is this one so I think this one looks really good as well actually this is probably my favorite I'm still a little bit hesitant I like this one too but I think this one is my favorite and all right so I'm just going to add it over here I'm staying on the same page and I'm just going to add my empty section for my TV library see how easy that is it it really takes no time to create these design elements if you if you know save a section once you go through the general steps alright so the first thing we're going to do is add a table divider go to the design tab open the divider settings and over here we're going to use the following one again we're going to use a white divider color or just make it match with the background color of your previous and next section then over here we're going to use a different divider hide we're going to use 40 pixels for desktop 30 pixels for tablet and 20 pixels for phone as you can see it really gives the same kind of result on all screen sizes and then I'll also add a button divider and for this one I'm going to use the following dividers so it's funny if you look at the result I just want to point that out if you look at this result it doesn't really look so similar to this divider stuff so you really have to play around with this horizontal repeat and the divider height and you can really get some you know differently looking results than the divider style itself and I really like that because it on just makes your website a little bit more unique and over here we're going to use 144 for our divider hide and we'll modify this horizontal repeat we'll make it six for desktop five four tablet and four four phone and here we have it and again you can go ahead and add a background image to this as well I'm going to choose the same image I just love how this looks and also use top-center from my background image position just because I want the colors of the image to come through and not the person that was shown and over here you can also apply it different different blend modes which is also really nice so we're just combining this background image with the background color that we gave to our section so you can get a lot of stunning results from this I'll just use overlay over here alright so now we have one example left and that's this one and you can do the same to this as well so we'll also add a background image to do to show you what it looks like but you definitely get the point by now that you can combine different settings and you know get unique results I'll just go back to the landing page because you do need to find the space to add these design elements you don't want to make you know look I don't you don't want to make your page look too busy so you definitely have to find a place to add it so I'll just add one over here because I see that I have some white space left enable the visual builder and I'll just scroll down and I'll add my section from my TV library so I just called it empty section and open these section settings go to the divider settings and scroll down until you come across the following divider style and make it white then go to the bottom divider over here and find the following one now you can play around with the divider hide or you can also play around with the padding of your section or your row so I'm just going to increase the padding of my bro and I'll just open the row settings go to the spacing settings over here and I'm just going to make this equally for top and bottom and as you can see you can just stop where you want to you can make this bigger smaller I'll just use 16 if I can get 60 no I'm getting 59 are you I can use these arrows okay let's go with 16 and then again within the background category with any background settings because someone told me that they hate the word subcategories um I've decided not to use it anymore and it's going to use an image and this is actually way too small so I'll just reuse this one so you do have to find a picture that is oh okay so what I've done is I've added it to my row so don't make that mistake and go to your settings to the settings of your section and add the image over here and over here again you can play around with all of the blend modes alright so we have these four examples and if you're making examples of your own I would love to see them so you know send them over and I am I will definitely take a look at them because I really enjoyed doing this so let's take a final look at the design elements that we've created using empty sections so we had this one this one as well and over here in the home page we have these two design elements and this one alright so that was it for this tutorial if you liked it please give it a thumbs up and we hope that you're enjoying this ongoing TV design initiative and if you're liking all of this content and you want to contribute on your own if you want to share your skills your knowledge with the divi community make sure that you check one of the links in the description below and contribute to the elegant themes blog so thank you for watching and we look forward to seeing you in our next live stream or video

Channel: Elegant Themes

Views: 7,059

Keywords:

Id: Y6pQ1S53NxM

Length: 23min 2sec (1382 seconds)

Published: Tue Jun 05 2018