5 Creative Ways to Use Divi’s Built In Margin and Gutter Controls

hello divination and welcome in today's video I'm going to show you five creative ways of how to use TV's built-in margin and gutter controls these are the examples of what we'll be working on today so without wasting a lot of time let's dive in and let's get started okay so let's start off by creating a brand new page so I'm gonna come over here to page just click on add new I'm just gonna call this page but you can name your your page whatever you want so I'm gonna go ahead and click on use the Divi Builder and then we're gonna click on use visual builder now over here we got to get three options we're gonna choose build from scratch some one is selected and then we're gonna go with four columns we're gonna close this for now and then we're gonna go into the row cities and then over here I prefer working with this snap to the left so I'm gonna choose that and then just drag this over here to the right so I can see most of my design so the next stage now is to set our gutter width so I'm gonna come over here to design sizing and then over here for my gutter width I'm gonna activate it and then over here Wade says use custom cutter with them and say yes and then we're gonna set this to 1 next we need to set our custom margins so I'm gonna come over here to spacing and for my margin here I'm gonna set it to the zero to both through the top and the bottom and then I'm gonna activate this chain here so that my value is added both to the top and the bottom we're gonna do the same for the padding again I'm gonna activate the chain and then we're gonna save the next stage now is to go into our section settings so I'm gonna click here on the scare icon click on background and here we're going to add a gradient so I'm gonna choose the 2nd tab click this plus button and then I'm gonna add my first color now if you want to use the same color as I'm using throughout this tutorial I would leave a link to the post in the show notes below right so let's go ahead and add our first color so I'm gonna come over here and paste it like that I'm gonna add my second color now this color is has some transparency on it so I'm going to click the SiC and slide it down a little bit so I can get the air transparency values and then I'm just gonna highlight and just paste my values between these brackets okay so now the next stage is to adjust our gradient direction so I'm gonna come over here we want this at 90 next we're gonna set our start and end position and this needs to be set to 50% for the start position and 50% for the end position next we're gonna add our custom padding so I'm going to come over here to design spacing and for the custom padding we're gonna add 0 both to the top of the bottle and then save ok so the next stage is to duplicate this row so I'm going to go ahead and do that by clicking this icon and then we're gonna start adding our images so the first image we're gonna add is gonna go into the top row in column 3 so I'm gonna click this plus button search for my image module and select it so here is where I'm going to add my image so I'm going to come over here and just delete this click the plus button and I have all my images here in my media library but you can also use your own custom images and by the way this is the fitness layout pack so if you want to use the exact same images you can just install these images from the layout pack so I'm gonna go ahead and select my image here and click and then up click on upload an image next we're gonna come over here to design spacing and I'm gonna add a custom margin off- 6vw I'm gonna save this for now and then in the second row I'm gonna add an image so I'm gonna come over here search for my image module select it and then I want to add my image and this time he's gonna beat this one right here upload an image and what can I do here he's gonna add -10 VW to the bottom modules on the concurrent design spacing and add my 10 VW I'm gonna save this for now next I'm gonna add an image to the same row but in the fourth column so I'm just going to duplicate this to make things easier for me and then just drag it over here like that and then I'm just gonna go in and change that image so I'm gonna click here on the gear icon change my image upload an image and then I'm gonna come over here to design spacing and then I'm gonna click I'm gonna save this as - 5vw you may have noticed that I used the V W length unit for the custom margins this allows the design to scale along the browser without jumping around in fact we have a full article which I'll link to in the show notes below for more information about the viewport width so pretty much this is our final design I'm just gonna save this okay so we almost done so the final part here is to add some margins to our section so I'm going to come over here to my section settings click on design spacing and add my margins to the top so for this I'm just gonna add 200 and 200 to the bottom so now we can see there are negative margins have created this design so I'm gonna save for now and then we're gonna move on to the next design so we're gonna start off by adding a new section so I'm going to come over here click this plus button and add a regular section and in this section we're gonna add two columns and before we add any modules we need to go in and make some adjustments so first of all we're gonna come over here to our column row settings click on background we're gonna add a color to our column 1 background so I'm gonna click this plus button paste my value in here we're gonna go to design and set our custom width so I'm gonna come over here to sizing use custom width and we're gonna set this to 700 and then over here we're gonna set our custom gutter width so I'm gonna say this to yes and we're gonna set this to 4 now it's time to add our box shadow all the way down here to box shadow I'm gonna select my box shadow style and for the horizontal position I'm gonna say this to minus 10 and minus 10 for the vertical position as well next I'm gonna add my color so I'm gonna click here on the eyedropper tool and paste my color between the brackets and then save now it's time to add our text module so I'm gonna click this plus button and search for my text module select it so over here we're just gonna add text which says about us and we're gonna highlight this and set it to a heading 1 like that next we need to set our heading font so I'm gonna come over here to design heading texts and we are going to change our fonts to fear our sans and we're gonna go with it and dance options ominous like this for our font weight we're gonna make it ultra bold all caps we're gonna align this to the center and give it a text color so I'm gonna click here on this eyedropper to paste my color in here now it's time to set our heading text size so currently it's set at 30 pixels but we want this nice and big so we're gonna set it to 100 we're gonna set our letter spacing at 10 pixels and now as you can see the space we have for this title does not look great so let's come over here to the sizing and set our width so we're gonna make this 600 pixels okay so let's move over here and add our margins because we want the sticks to overlap this border so I'm gonna come over here to spacing and then for the margin left I'm gonna set this to a minus hundred and I'm gonna do the same to the right so now we can see the text is not overlapping the border next let's add our custom padding so it's gonna add zeros throughout because we don't want any space around the text the key to this design is to increase the width of the module so that when we add the negative right and left margin the text module has room to extend beyond the column on both sides we can also add a divider here if you wanted just to add to this design so let me just save this and add that quickly so I'm gonna click here on this plus button and select my divider module next I'm gonna come over here to design color we're gonna add our color right here and I'm gonna paste it here and by the way if you want to use the exact same colors as I'm using throughout this tutorial I will leave a link in the show notes below right so now that I have my color we're gonna go to the divider wait so I'm gonna click here on sizing and we're gonna set the weight to 12 pixels and here for the width we're gonna set this to 150 percent now let's go ahead and add the custom margin so I'm gonna come over here to spacing and what we're gonna do here is we're gonna add 15 to the top and minus 25 to the left and minus 25 to the right so let's go ahead and do that so here we're gonna add 15 and then minus 25% to the left and there right and then finally what we need to do is to just make sure that this line is not covering the text over here so I'm gonna go back into my text module here and and some margins to the top so I'm gonna click here on spacing and I'm gonna add 40 here to my margin top great so now that that's done I'm gonna go ahead now and save and that is our design the same technique is used here as well we increase the width to a max of 150 percent so that we can extend the module outside the column on the left and the right in our third example we're going to be overlapping modules with buttons so for this example we're going to be using a layout pack from the soccer club so let's create a brand new page so I'm gonna click here and add it I'm just gonna call this soccer use Divi builder and then I'm gonna go straight to the visual builder now this time instead of starting from scratch we're gonna choose a premade layout pack I'm just gonna search here for soccer and then I'm gonna select my landing page click on use this layout and in a moment this layout is going to be installed on this actual page so if you notice here we have these two buttons here so what has happened here is there's been a margin bottom of zero that has been added to this top one here and zero to the top margin so that these buttons look like they're on this actual video so what we're gonna do is we're going to use some negative margins and have these buttons overlap the video so we're gonna come over here to the top module click on this module settings and then we're gonna come over here to design spacing and add a margin button so as you can see the button now is overlapping the video so we're gonna save this for now and then move on to the bottom button so I'm gonna go into the module settings as I did before click on design spacing and then we're gonna add a margin top this time and notice that it's minus 56 same as the other button so now our button is now overlapping this video module okay so in our next example we are going to be overlapping sections with rows for this example we are going to be using a real estate landing page so I'm going to come over here to pages click on add new so I'm just going to call this page real click on use Divi builder and then I'm gonna go straight to the visual builder now as we did before we're also going to use a premade layout so I'm going to choose this option search for real estate and then here is our real estate landing page I'm gonna select it and then click on use this layout so as you can see here this row is actually overlapping so let's take a look and see what happened here so I'm gonna click here on the row settings I'm gonna snap this over to the left when I click on filter and then we're gonna go to modified styles so here are the modified styles we can clearly see here that we have a minus 10% that has been set here as the negative margin so if I get rid of this you'll notice that this now goes back into that position so just by adding a negative margin here it you can creatively change the design of your page now let's move on to the fifth design this time we're going to be extending rows on hover so for this example we're going to use the plumber services page so again I'm gonna add a brand new page click here on add new I'm gonna call this plumber use the V builder and then we're gonna go to the visual builder choose premade layout I'm gonna search from my plumber layout pack we're gonna go with the services page and then use this layout great so the area we're going to focus on is this area here which has the 10% off so what we're gonna do is we're gonna hide this information by default and then reveal it when we hover so to do this we can open up the row settings and update the following so I'm gonna click here on this gear icon I'm gonna snap this over to the left we're gonna come over here to our column background color click the plus button and I'm gonna add my color knob this color is gonna be an RGB a value so I'm just gonna drag the slider down and paste the values between the brackets like that next we're gonna add a custom with to do to this part so I'm gonna come over here to design sizing use custom width and then we're gonna set our custom width to 800 I'm gonna set out gutter width to 1 and then over here for the alignment we can align this to the right so I'm gonna select this option here now we need to add our custom margin settings to get the hover effect so I'm gonna come over here to spacing we're gonna add our custom margin over here next for column to custom paddy we're gonna activate this chain because I'll value it's gonna be the same for the left and the right so my value here is gonna be 2 VW now it's time to set our harvest dates so I'm gonna click here on this arrow icon click on the hover and then for the rights margin on hover we're gonna set this to 0 and so now we can see that this is revealing this information so if I toggle between the default and hover you'll notice that that's actually really cool and then finally we're gonna go ahead and save and publish our page so now when you hover over it you can see that this information here is revealed when I mouse over the 10% off so they have it thank you all for watching if you like this video please give me a thumbs up and do follow us on our social media platforms by doing so you'll be notified every time we release new tutorials and if you have any questions regarding this tutorial please leave your questions in the comments box below and I'll do my best to respond to them until next time thanks for watching and I'll see you in the next video

Channel: Elegant Themes

Views: 7,829

Keywords: Divi Theme Tutorial, Divi Builder Tutorial, Divi 3.0 Tutorial, Divi Tutorial, Divi Quick Tip, Extra Theme

Id: II80FtV3fLs

Length: 14min 53sec (893 seconds)

Published: Sun Nov 04 2018