Overlapping Columns in Elementor 3.0

what's going on guys tyler here and today we are talking about overlapping columns in elementor now i do want to give a shout out to i believe you pronounce the channel oh boy um here on youtube i do want to give a shout out to their channel for putting out a video um a similar video tutorial about this theirs was way more in depth on you know different methods that they tried that didn't work and reasons that they didn't work and everything like that so if you're interested in that or maybe after today's video you have some questions be sure and check out their video i will go ahead and link it down below in the description if you're interested in that so thank you boy for your in-depth tutorial there but in this video i'm going to be moving very quickly and going through the steps really rapidly so if you're get stuck or kind of get behind be sure and just pause this video catch up get all the steps done and then you can move on to the future step and as always guys be sure and smash that nice red look and subscribe button if you haven't already join the fan be a part of the subscriber fam and i do have some pretty awesome videos coming up that i have planned so be sure and hit that nice red looking subscribe button so you can be notified of future videos just like this one and of course elementor pro is just an incredible plug-in if you haven't upgraded yet i be i highly highly recommend you do upgrade so be sure and check out that link down below in the description it's just a phenomenal plug-in gives your website so many awesome features graphical features visual features functionality features all kinds of different features and it's really at a great price so be sure and check out that link down below in the description and let's go ahead and jump over to my computer alright guys so let's take a look here at what an example of some overlapping columns looks like in elementor now this is a really cool effect you kind of get this whole uh like effect of this column right here being put over top of this image column and you can see the image behind it and it looks like this one is here placed in front of it now it's not really truly an overlapping columns of as you would think of when you're building with elementor it's a little bit different and i'm just going to jump right in and show you how this works but um one thing i do want to mention before we jump in is the images are going to be very important you want to use an image that puts the subject or the focus of whatever you're trying to display in that image for example this person right here you want that to be in the opposite third of wherever you're putting your content box so for example in this image this full image extends all the way out over to here you can't see it right at the moment but it extends all the way over behind this like kind of light brown box here but the third that i have the subject in is on the far right so the subject is actually in the far right and i strategically did that i strategically used this image because i want the subject to be on the right side in the content to be on the left side now you still want the image to look decent because in the mobile version we won't be able to get the same exact effect and they'll see the whole image so you want the image to look good and presentable on its own but you want to make sure that your subject is on the third opposite of your content so if you were to flip this if you wanted your content on the other side here so the content was over here on this side and you have your image on this side over here then you would want to put your subject in that third if you have any kind of issues with this you might may be able to just flip your image or flip it horizontally that's sometimes an option that's actually what i ended up doing with this image right here and it worked really nicely all right so once you have your image in the right third and you're ready to go with your perfect image then we can go ahead and get started here so the first things first i'm here in the editor here you want to go back here in the editor and let me actually just remove this for right now all right so as you can probably see already we have an image but the image is actually in the background there's nothing here in this right column here and we have all our content in this left column here so let me show you how this actually works and it's easiest to understand if you pull up the navigator and if you go over here to the bottom left side you can see here you click that little navigator it'll bring up this little hierarchy menu to show you kind of where everything stacks it's similar to like layers and photoshop or anything like that it shows you kind of how everything stacks in place here so we have this section this is going to be our main section as you can see right here um we have that section and then within that we have a column right here the main column and then within that we have an inner section now this is going to be key to be to be able to create this is you're going to want to use this intersection element and to get to that you just go right over here and drag in and drop a intersection element and we can just actually go ahead and duplicate this so i can show you how this works here but basically what we're going to do is this intersection we can get rid of that so we have one column right here one section right here we'll just drag in an intersection right here and there we go we've basically created two columns within one column now if you're confused already check out my other video about intersections this is what it looks like right here you can go ahead and kind of learn a little bit more about intersections but if not if you understand intersections or if you're just wanting to follow along just stick with me it'll all make sense here in a little bit but basically we'll need to drag that in to use that intersections uh element all right great now that we've got the intersections element in here we're ready to start building out that column overlap effect for the first example we'll build out all of our content here on the left and basically what i'm going to do is actually click here on the column and go over to style and then we're going to go to background type and we're going to go to classic to make it a color here we'll go to color here and select the color that works best for us we can also use global colors just right here if we set those up again i have videos on these here's an example of one of those videos if you're interested in checking that out but we can go ahead and just set up a background color for our content and pick the color just like that and then we just go ahead and begin building our content just like we normally would we drag in a title here we drag in a text editor right here and then we'll drag in a button down below now for the sake of this tutorial i'm not going to go through and actually show all this stuff i'm just going to go ahead and use the content i've already built out voila that was nice and quick all right we've got the content built out here and we're all set to go now one thing you may need to adjust is when you're building out your content you click on your column you may want to adjust the padding here that will kind of give this kind of uh margin or the spacing not margin excuse me this like spacing around the edge of the uh border of the content so here it i have my padding set to 40 in case that's any kind of reference for you guys but set this all up so it looks nice and you're all ready to go and then we'll get started on the image all right now the image is actually not that tricky what we're going to do is we're actually going to set it as the background of our main content container so right here on this single column not in the intersections anymore we're in the single column the main content container so for reference that's this section right here um you can go ahead and click that and we're gonna go to style and we're going to go to background type and we'll hit classic and we'll set our image to the image that we want to use all right you can kind of see things are starting to take shape here what we want to do now is in this same section in these settings now that we've selected our image we want to go ahead and hit size and hit cover that's going to change the size and fit it into the width of the container that it's in we want it to be set to cover and the repeat to be set to no repeat so it's not repeating down below or off to the side or anything like that and then we're gonna want to set the position to center right now this is going to set it center vertically and over to the right horizontally now just like that you can kind of see it kind of moved everything and it probably doesn't really matter you could probably also set it center center it does seem to work like that but for this tutorial we're just going to set to center right and yeah there we go once you have that all set up this is kind of what it should look like right here now you can see here we do have a little bit of a border up here where you can see the image and a little bit down here so we want to make that even and we want to make it on both sides a nice thick border so you can really see the image behind this content box right here so we're going to go back to the same section settings and we're going to go over to advanced and we're going to change the padding now we're going to unlink the values by clicking this little link and we're going to add a top to let's just say 50 and the bottom to 50. that should give it a nice healthy chunk above and below there and uh yeah that's looking pretty good just like that now what we're going to do to go ahead and kind of cut this image off as you can see here you we actually cut this image off right here is we're actually going to simulate it cut it being cut off we're not actually going to hide or or destroy the image or change the image at all we're actually just going to hide it behind what's called a gradient now our gradient is something uh one color that kind of like fades to another color or for example in this example it would be one color that kind of fades over to the image now what we're gonna do is when you reduce that fade all the way down to where it's just one line it makes a hard line just like this so now let's just go ahead and do it it's just easier explained here so when we go back into section again we're in the main section here where we have our image we'll go back over to style and we have our image right over here we want to go down to background overlay now once we click this we have the option to do a classic like a color or a gradient we're going to want to use gradient here and we're going to go ahead and set the color right here to whatever the color of your background is so mine is white here you can see clearly it's it's just a typical white background but if you had you know a black background website then you want to set it to black just like that but let's go ahead and just set it over here to white and uh yeah we want the opacity to be all the way up there on it and we are pretty much all set here now what we want to do is set this location to let's just say 30 for right now and then we want to set this secondary color we want to set it to completely transparent because we don't want another color we just want it to fade to the image again if this isn't making a ton of sense don't worry just keep following along it'll all work out here in a minute so basically what we can do is just drag this little opacity ticker and drag it all the way down to the bottom so now it's basically just transparent it's a white fading to transparency so now that we have that set we're good to go we can change this location all the way down to zero now what that did is you can kind of see this hard line i don't know if you can see here in the video but where my mouse is you can see this hard white line here that it's now created now we need to change the angle so it's actually sitting up and down we want to change the angle to 90 degrees that will move it over to left and right now so you can see right here we have this nice hard line right there and if we move the first location slider so the one that we set to 30 if we move this we can actually move that hard line and set it wherever we want okay so now let's keep it yeah 25 30 somewhere in there looks pretty good we'll just leave it at 30 for this example and then the opacity we're going to want to actually bring it all the way up now this is different from the opacity on the first color we selected this is the opacity right here we'll want to bring it all the way up and as we bring it up you can see it completely blocks out the image and just shows our white gradient that we've created if you bring it down you can see it kind of like shows more of the image but let's bring it all the way up and it creates that effect of this image being cut off even though it's not it creates this effect that it is cut off and when we actually take a look at that on the page it looks like we've now got these two columns that are overlapped all right awesome so we've got the effect going right there let's just make sure it works on tablet so we can go over here to responsive mode and switch to tablet and take a look and yeah it looks pretty good we might want to adjust some of the content here to make it fit a little bit better and you could go ahead and do that by hitting edit here and going over to style and typography and if you're gonna adjust the size right here you could actually set this to tablet and then set the size for it and that would apply specific size settings only to tablet again this is probably stuff for another video so we're not going to worry about that right now i'm just going to leave it how it is default but i wanted to show you that that is possible that you can adjust anything and set the settings specific to tablet so let's go back to desktop and we are here and everything looks really nicely right the only issue is is when we switch over to mobile we get this really weird effect we can't see the image things are just kind of in the way and things like that so we got to get rid of that background image and add it in a different way so what we're going to do is go back to desktop here we're going to go ahead and drag in a new image here and basically what we're going to do is put it in this secondary column that we had nothing there and we're going to choose the same exact image all right so i've got this image inserted right here on our secondary column and then what we're going to want to do is go over here under the image settings here under image size we'll set this to full so now we've got that image there and it's placed it's ready to go what we need to do now is disable it on desktop and tablet because we don't want to see it on desktop and tablet so we'll go over here to edit and we will go to advanced and we will go over to responsive here and we'll just hit hide on desktop hide on tablet now what this is going to do is it's actually going to stack the columns and you know this is aside from hiding on desktop and tablet when we're in the mobile view you'll actually see this is stacking the two columns so you can see our image is now down here and our content box is up above but really we want the image up above and the content box down below so what we're gonna do here to to change that is go back to the desktop view so we're gonna go over here to this section right here this is the intersection now we're editing the intersection settings we'll go over here to advance then we'll hit responsive and we can reverse columns on mobile we'll hit that and now you'll see when we switch to mobile view the image is now up top and the content box is down below that's awesome that looks great except that we have that background image still there so we'll go back to desktop and what we're going to do is actually edit this section again this is the main section here where we have placed our background image and we'll go over to let's just go over to size here and switch it over to mobile now here we'll go ahead and hit custom size and we'll just set this size to zero that's going to basically set the size of the background image to zero when it's on mobile so now if we take a look at how this looks we can actually see here this is now our desktop version of the site here of this effect and if we look at the tablet version we can see here this is the tablet version of this effect here and lastly let's take a look at mobile this is the mobile version of the effect right here and again like i said you can adjust all of these settings you can fit them you know make the settings adjustments on the text specific for mobile you can make adjustments if you want to adjust this image so it fit all the way through the columns and everything like that if you need to make any kind of other adjustments you could do that by selecting mobile here and then changing any kind of settings on there so that is just how easy it is to make this look of overlapping columns in elementor again it's not a feature that they've natively built in but you can definitely replicate it with all of these settings here so i hope you guys enjoyed today's video if you guys have any questions be sure and drop a comment down below in the comment section below this video here and again a big shout out to uboy for a tutorial similar to this the link is down below in the description if you want to see that if you have any other questions you might be able to find answers on that video there and last but not least is subscribe to the youtube channel i would really appreciate it it's a nice red looking subscribe button you just gotta tap it and make sure you are subscribed and of course you can get elementor pro at a great price check out the link down below in the description and see you know what kind of price you can get for it because it really is just a phenomenal plug-in with so many features as you saw here the the you know abilities and the possibilities are just endless with elementor and elementor pro so be sure and check that out in the description and we'll catch you guys on the next video take care

Channel: Tyler E Morrison

Views: 5,954

Keywords: elementor columns, elementor overlapping sections, overlapping columns in elementor, overlapping columns in elementor pro, overlapping columns, image and text overlap, overlaping elements, text over image, elementor tutorial, elementor tips, elementor tricks, elementor how to, elementor design tips, design tips, design tricks, overlapping length in column, column lapping, overlapping sections elementor, overlapping sections divi, elementor 3.0, elementor 3.0 tutorial

Id: KYNDUDlEYaU

Length: 17min 53sec (1073 seconds)

Published: Mon Oct 05 2020