How To Create Overlapping Columns in Divi

hi my name is steven welcome back to my youtube channel if you're new here please don't forget to subscribe and hit that notification bell so you get notified when next upload the video in today's video i'm going to be showing you how you can grade a beautiful overlapping effect using the david visual builder and here you can see that i have three different examples right here and then i'm going to show you which one is the right way of doing it this is also responsive as well you can see how this will adjust to the screen size that you are using but this first one right here will swap the image to a different image once we get to the mobile version right here so let me go ahead and show you how you can grade a perfect overlapping colon effect in dv builder so let's go ahead here and log into a wordpress website you can see the three examples that i have right here so let me go ahead here and regret these examples so you guys can see the difference between three of them so let's go ahead and grade this first one right here you can see here that we have a two column row so i'm going to go ahead and add another section here so i'm going to add two column inside the section like this and then i'm going to add an image in the first column and then in the second column here i'm going to add the blob module so you can see here this is what we have in here so i'm going to give this section a background color so we can differentiate it from the previous ones that i grated before so you can see now that we have a background color here so what i'm going to do now is i'm going to go over here and select an image for this one and then i'm going to go to design and then i'll click on sizing and then i'm going to force full weight so this is going to force the image to be full width and then over here i'm going to change this to uh maybe uh call to action because i don't want another image here so i'm just going to delete this and then i'm going to select call to action so i'm going to select this one right here and then i'm going to go to links over here and then i'm going to go to button link and then i'm going to just type something in here to display the button and then now you can see the button over here so just for the sake of the tutorial i'm not going to design the button or any of the tests inside so i'm just going to use this to show you guys an example so i'm going to go to a design over here and then i'm going to click on spacing so i'm going to go here and then i'm going to give this 50 pixels at the bottom at the top and then i'm going to give 25 on the right and the left and then i'm going to go here on margins and then i'm going to add maybe top margin to push this down a little bit and then i'm going to add a left negative margin so i'm going to do like this you can see that we have that overlapping effect right here and then now that we have that we're going to also click on this uh responsive mode right here then i'm going to click on the tablet just to see what this will look like on tablet you can see that this is now looking good on the tablet i'm going to go over here and then i'm going to add 0 here then i'm also going to add 0 here as well also i'm going to add a negative 30 pixels here just to get rid of this space here this white space between this image and this text but if you like it you can leave it there but i'm just going to get rid of it i'm going to type that here and then i'm going to put the negative sign here and then that is going to close that gap right here so let's check the mobile version as well you can see the mobile version is looking okay so we're going to go back to the desktop version right here and then i'm going to click on this title here and then i'll just maybe align this to the left maybe i'll click on this pencil icon right here then i'll click on a light to the left like this and then i also click on this one and also do the same thing then i'll click on this button click on the button alignment here to align this to the left okay so far you can see that this is looking good right but the problem is maybe we want to add more stuff in here like for example if we go back to this one that we have right here maybe if we want to add anything maybe we can add an audio if we want we can add an audio in there or maybe we can add anything else that we want maybe we can add a comment so you can add as many stuff as you want as many modules as you want inside this column right here but over here because we're using just the blog module right here we cannot add anything else in here and this is going to be a great solution if you are just using this text and this button right here if this is just enough for you this might be a great option and then again if you come over here and then maybe you want to use a different image here let's say for example we go here and then we decided to i use this image that is a little bit smaller than the one we have already maybe we just use this image right here and now you can see that it's going to look like this and you can see that this is not a great solution and even if you go up here and drag this back up it looks okay but then what if we have more text in here uh let's say for example we have like a lot more content in here now it's going to look like this and you can see that now your content is now longer than your image and that is not looking very good so now you can see the problem with this method so i'm going to show you the second method which is this one that we have here and this one right here what we're going to do we're going to click on this blue icon right here and then instead of using the regular sections we're going to go and choose these specialty sections right here and then i'm going to select one of these ones i'm going to select this one right here the problem with this one is that we can add a colon in here but we cannot add a colon over here so we can also add an image here maybe we can just add this image over here so i'm going to go here and select this image that we used before and now you can see that we have the image here so i'm going to go to design and click on sizing and then i'm going to click on first full width so here let me go in here and then i'm going to add anything that we want in here maybe i want to add um i can add a text over here maybe i can just add a call to action as well all right and then i'm going to drag it up a little bit and then maybe i can add a button as well so maybe i can just click here and add a button and so i'm going to click on the column and then i'm going to go back over here and click on spacing and then i'm going to add 25 pixels on the bottom and also on the top and then i'm also going to add 25 pixels on the right and on the left as well so it's going to look like this now i'm going to go to content and then i'll go to background and give this a background color so now that we have that what we can do now is go back to design and go to spacing and now we want to push this down to come to the middle of this image that we have here i'm going to push this a little bit down like this then i'm going to give this a left negative margin like this to overlap this well now the problem with this one is now you can see that we have this space left here that we don't really need you can see the amount of space that we have over here and the amount of space that we have here you can see that this is not a network space you can see here that any negative margin that we add here will reflect over here on the right so that's not looking good and i don't like that so that doesn't work for me if you work for you you can go ahead and use this method and another problem here is that if we change this image to a smaller image so maybe we change this to this image you can see that we're going to have the same problem that we had before and this is not looking good either so this is the second method and you can see that this method doesn't work either so let me go ahead and show you the method that i use all the time this method works for me maybe it will work for you as well so what we're going to do is that we're going to click on this icon here and then we're going to add the regular sections so inside the regular sections we're going to add a two column section so from here what we're going to do is that we're going to go inside the second column right here and then we're going to add pretty much anything that we want to add in here maybe i want to add call to action in here maybe i want to add an audio right here so so pretty much anything that we want to add so now that we have this in here as an example i'm going to go here and click on this call to action and then i'm going to scroll down and remove the background because we don't need that background here and then i'm also going to go in here as well and change the background on this one as well so i'm going to delete that and now that we have that what i'm going to do again is i'm going to go to this section right here and then i'm going to click on the column number two and then i'm going to scroll down and give this column a background color maybe we can give it this background color and then i'm going to go to design and then i'm going to go to spacing and then i'm going to add 25 pixel on the top and the bottom and then i'm also going to add 25 pixel on the left and right as well so i'm also going to go here maybe i can go here i can copy this title that we have in here just for the fun of it i'll copy the title and then i'm going to scroll down here and paste that title in here as well okay so we have that here i'm going to move it to the top so you can see now that it looks like this and then i'm going to go back here and then i'm going to align this text to the i'm going to align this to the left so i'll click this one as well and then i'm going to scroll down and align that to the left as well and then i'm going to do the same thing with the button i'm going to align the button to the left as well okay so now you see what we have in here i can just go ahead and delete this one i think this one we do for now so now what we have here is that we have something inside this column right here and then this second column right here we don't have anything inside this column so now what we're going to do is to select this entire row so we're going to select this row and then we're going to scroll down here and we're going to click on background and now we're going to give this a background image so i'm going to choose one of these images that we have here so maybe i'll just choose this image right here okay so now that we have this background image what we are going to do is to go back here and click on the section again and then we are going to scroll down and then we are going to go back to background then we are going to click on this gradient background right here so once you select this gradient background you can see that the gradient is not showing so we're going to scroll down and select this option place gradient over by grand image and then it's going to show up like this and what we're going to do now is that we're going to come down here and then we're going to make sure that the gradient type is on linear and then we're going to scroll down here and change the direction to 90 degrees so we're going to change that to 90 and then we're going to change the end position to zero so now that we have the end position to zero and then we're going to change the starting point now you can see we can change that starting point to maybe whatever you want maybe you can change it to maybe uh 70 like this so what you're going to do right now is to use these gradients to hide the background that we have over here on this green side so we're going to change this green to white background so now that we change this to white you can see now that it blends in with the background so if you have a different background color maybe if you have a blue background or yellow so you can change this one to that color to match your background color so that it will hide the image and blend in with your background so now that we've done that what we're going to do now is to select on this blue one and then we're going to change this blue one to transparent now you can see now that we have an overlapping effect with an image over here and also our text over here so this is the perfect way to do this and if you also want to maybe add a little bit overlay on top of this image you can go ahead and do that so let's add black here and then i can reduce the opacity like this and then it's going to look like this you can see that we have that nice overlay over here and then if you go to mobile it's going to look like this so let's go back here you can see the one we created earlier before if you go here and change this to desktop it's going to look like this and if you change it to mobile and then it's going to have a different image so let's go and do the same thing with this one we're grating right now you can see what we have over here you can see here that we don't have anything in here right now so what we're going to do is to add an image here so we have an image here and then we're going to select the image that we want to show on the mobile version so maybe we want to show this image for example i'm going to select that image and then i'm going to go to design and then i'm going to force forward so what we're going to do now is to select that image and then we're going to hide this image on desktop and tablet so we're going to go to advanced and then we're going to go to visibility so this is going to disable this image on tablet and on desktop now you can see here that we can't see the image anymore and when we go to mobile you can see that the image is now showing over here so now you can see the overlapping effect that we have so if you want to add more space here or more space here maybe you want this image to be a lot bigger than this test you can go ahead and do that by clicking on this section right here and then go to design and go to spacing what you need to do is to add some padding maybe i'll add 100 here and then i add 100 at the bottom as well and what you need to do is to click on this responsive mode go to you can see what it's going to look like on tablet and then if we go to mobile you can see what that is going to look like as well maybe we don't want this over here we are going to put zero here and you can see that the image is gone and it's hidden behind this column and to get rid of this space right here so if you want to get rid of this space you can see this space in between here all you need to do is to go over here click on design and then click on sizing and then we're going to select custom dollar weight and then we're going to change this to one and now if i save that changes and then go back to mobile you can see that that space right here is completely gone so this is how you can create a perfect overlapping effect that will swap the different image when you go to the mobile version so if i click on save changes and now if we go back here and refresh the page you can see if i scroll down here you can see that we have a perfect overlapping effect right here so if i go back in here and add maybe i can duplicate this over and over again and what you can see here and this is going to expand and it's never going to be longer than the image is never going to look weird like this one right here where the image will be small and then the content will be a lot longer than the image so this is never going to happen with this method so if i go back here and refresh this page you're going to see what we have here you see a perfect and nice overlapping effect is going to look like this the only difference here is that maybe you will start losing the quality of the image so this is exactly how you can grade a beautiful overlapping columns using the divi visual builder if you find this video interesting or helpful in one way or the other please hit that like button subscribe to this youtube channel and don't forget to hit that notification bell so you get notified every time we upload a video thank you so much for watching and i'll see you next time

Channel: WpLifestyle

Views: 3,715

Keywords: Wplifestyle, Stephen iloka, divi theme tutorial, divi builder tutorial, divi visual builder tutorial, overlapping columns, image and text overlap, overlaping elements, text over image, elementor tutorial, elementor design tips, design tips, design tricks, overlapping length in column, column lapping, divi tricks, divi tips and tricks, divi theme tips, Overlapping Divi Columns

Id: XfSeeV2iSnI

Length: 14min 42sec (882 seconds)

Published: Wed Sep 29 2021