Overlapping Columns in Elementor

hi girls and boys welcome to elemental tips and tricks video clips today we'll be talking about overlapping columns in elementary I suppose you all have seen these blocks of content with an image of left or right hand side and then text box on the opposite side well the text box is covering or hiding part of image you can see I have a couple of these on the screen right now one of which is having the text box on left and the other one on the right hand side so something like that will be the subject of today's tutorial these two example blocks of content on the screen were made by using elementary do their columns overlapped for real or not sure they do in a visual sense 100% but technically they actually don't from the common-sense point of view if you are about to achieve something like that in elementary you will definitely use columns one of which should house an image widget or use image as a column background while the other one should house the text box while having two columns side by side the goal is pretty much obvious to push or shift the text column box on top of image column in order to make them overlap the most likely that push includes usage of negative margin right well not exactly why well best way to answer is to create and see why exactly I'll open Elementor and show you step-by-step how to reproduce these two examples at this point you might be confused with what you see here but rest assured it'll all make sense very soon as a part of this tutorial I will demonstrate a couple of non-working mantas first all with an intention to provide embraced policies proof and rock solid solution that actually works properly first I'll create new section by clicking on that plus icon of my existing section that's how I can create section on top of it next step is to drag and drop what intersection widget on to the section the two columns are created by default which is exactly what we need now we don't want any spacing between columns so highlight intersection go to layout tab right there now from columns gap drop down select no gap we don't need gaps because we are about to make to create overlapping columns ok [Music] now I'll simply copy my existing text box column from the example below because no need to start from scratch and waste time on that I believe everyone knows how to do something like that my textbox is represented by the group of budgets that include adding widgets these two are heading widgets a couple of spacers between them and the bottom and bottom most is my bottom widgets so I'll just right mouse click on column icon I'll select copy now right mouse click on a column in my newly created intersection and paste let's delete one extra column obviously the empty one right mouse click and select delete attempt number one drag and drop image fit into our second column I'll select image from media library like this one you search let it be full width and a bummer the very first bummer why well as you can see text box is way taller than our image and it might easily become even taller if we narrow down the viewports for instance okay makes sense let's simply give it up right away because it obviously ain't gonna work as is it's a no-no for using image widget in the second column not yet now the next logical step might be to set our image as a column background by doing that we can ease the set image size to cover thus making it as tall as the text box regardless viewport size I'm gonna give it a shot first remove image widgets we don't need it anymore next highlight column be sure to highlight the color select style tab background panel already open I'm gonna select my image from media library search make it let's say top top top right position it says repeat you know repeat and size you cover we still cannot see the column background image because there is no content inside to come that's why I'll drag space and regi to it it's just to add a little something to the column and force it reveal the background spacer and there it is all right it doesn't look like a bummer at this point if we resize viewport it still performs fine as you can see [Music] now we can even make the image bigger than the text box in order to create that illusion of overlapping columns I'll highlight text box column highlighted by clicking on the column icon go to Advanced tab advanced panel and I'll add 50 pixels margin to top and bottom to unlink first 50 to top and 50 to bottom okay so all is left now is to make these two columns overlap right and do that by using a negative margin on right hand side of our text box in order to push it a little bit right over the edge okay let's give it a shot and see how it turns out right negative margin of 15 if we add negative margin of 50 pixels to write our left-hand side margin can't be 0 anymore it has to be 50 pixels as well positive 50 pixels you gotta think of it as a counterbalance because it simply doesn't work other way as simple as that don't forget to set C index set index to one or two let's see one it's gonna be fine in order to make text box column a top of image column by doing so it kind of works as you can see of course if you don't mind that not removable 50 pixels gap on the left-hand side of course if you are about to increase negative margin overlapping area the gap will become even bigger bummer now yep it looks like another bummer hopefully now you got a point why using negative margin doesn't word by trying to create overlapping columns now I'm going to show you something that works for you but first I have to clean the mess up Gabe remove these Marge's remove background image highlight my column style debate and removed us stay sir budgets okay first of all I'm not about to make the cops overlap in a technical sense but rather only visually that's what I said at the very beginning of this tutorial so instead of adding the background image to my second column I'll set it up as a section background more precisely intersection digit background may the intersection of edges highlighted mouse click mouse click on that bunch of dots or a grip icon or name it whatever you like open style tab expand background pal it's already there select background image from media library that's one image position image do whatever suits your needs I'll select centre-right of course no repeats and set aside to cover them now while intersections still highlighted open at last tab advanced panel already opened and adds I don't for am/pm 4e m padding to top and bottom unlink values for two top and 40 bottom again add as much as you want but I'll stick to 4 a.m. I don't know this will make our image taller than the text box thus creating illusion of overlapping columns in order to add some some white space underneath the text box or rather to be able to control the amount of white space area underneath the text box I'll do the following reopen style tab expand background or lay down and click on gradient icon now set the very first gradient color to white or whatever the background color of the rest of the page is mine is white so I'll use white a sample as their location option is what controls the amount of white space underneath the text box you can't see it yet but as you as soon as we are done with all other settings here you'll figure out what I am talking about so I'm gonna use 30% for the purpose of this tutorial 30% now make the second color fully transparent and be sure its location is 0 enter 0 gradient type should be linear so just leave as s an angle needs to be 90 degrees finally brings any capacity cept one leave everything else as is we don't need any CSS filter or bland mode or anything alike and there you go overlapping columns with no negative larges now if you move that location slider on the very first color you can see how it affects the amount of white space okay back to 30 let's check responsiveness I'll click responsive mode - or a button and select tablet first and it love it all looks good what if I select mobile oh no good as you can see this is due the fact that Elementor makes all the columns full width by default for mobile devices it's not a must but rather due to practical reasons at this point I just need to be sure how I want my image and text box look like on mobile devices and because there is no sense to keep them displayed as overlapping columns anymore nor one next to another I simply want to keep an image on top of my text box I suppose that's the most logical layout type for mobile devices due to the lack of horizontal space at this point we have our intersection background image completely hidden by the text box so it's pointless I cannot move it elsewhere nor delete it and if I try to delete it it'll be deleted for desktop and tablet devices too that's top and bottom padding actually makes things look really awkward so I'll just set them up due to zero for mobile devices okay I highlight my section advanced and I'm going to set panning to zero all I am left with now on a screen is my text box and an empty column below remember the second column I hope you do we didn't use it at all is just sitting there empty abandoned and alone but now it's time to bring it up and see its true potential open elementor's widgets library and drag image veget to that very common [Music] select identical image that we use for intersection backgrounds I'll make it full size few moments ago I said that I want to keep my image on top of the text box but right now it's sitting below how do I move it up with inner section highlighted be sure it's highlighted while still under Advanced tab expand responsive BAM they're non responsive columns mobile there you go as simple as that now you can see it sitting on top exactly as I want let's click responses hold button now and select desktop now hide elementor's panel now just a little digression before I move on by hiding elementor's main panel if I this is how you show in high elementor's main panel by hiding elementor's main panel all of responsive settings will take place otherwise you won't see much once again in order to be able to see response settings taking effect without leaving elementor's workspace you just need to hide elementor's main panel you see what I'm talking about okay as you can see our second column image widget is now visible for desktop and tablet devices this is desktop and this is tablet and it's still visible which is something that we don't want is there a way to hide image veget for desktop and tablet devices only sure there is make our image fidget highlight it first select Advanced tab expand responsive panel and make it hidden for desktop and tablet any that cool let's see how it works now hide elementor's workspace and the image widget is gone now let's switch from desktop desktop tablets hide Rick's face and still gone let's select mobile high-demand panel and it works just perfectly next step let's check ball out in Firefox Google Chrome and Safari update check in Firefox yep look good let's go to Google Chrome refresh good now Safari refresh yep that's it [Music] okay what if I wanna have image on left and textbox on right-hand side what if I want to switch position of my columns no problem let's do it right now I'll duplicate entire section the outermost section that's the one because I want everything to be duplicated as is right mouse click on that that grip icon that bunch of dots and I'll select duplicate there you go everything's duplicated perfectly now first I'll simply drag my second column and drop in place of the first one Elementor is that smart she knows what I am up to and columns content gets switched instantly that's the step number one now I'm going to highlight my inner section that's the inner section select style tab expand background overlay plow and do some magic my first color needs to become transparent not white anymore loquacious adding must be 70% instead of 30 as the fact I'm about to make the white space on the opposite side likewise I'll make my second color non transparent white and believe everything else SS maybe I'll select let's select different food background cert just be sure that inner Calla intersection and image fidgets photos match the reason is obvious okay let's test responsiveness desktop is okay if I find on winters nails main panel is OK now let's select tablets hide it oh right and finally move on whoops [Music] not quite okay our photo is below text but that's only because I switch comes position for mobile view before I copied my section while my text box was on the opposite side the side remember now in order to fix that highlight intersection by clicking death grip I can work bunch of darts board name it whatever you like hit Advanced tab expand responsive panel and of course disabled reverse columns mobile and that should be it check a lot once again yeah they're less okay now you finally know how to do overlapping columns in Elementor properly the right way and that's it for today girls and boys I hope you enjoyed this tutorial and learn something new if you did give me a thumb up subscribe spread the word share comment if you do that I'll make more elementary tips and tricks videos stay tuned

Channel: Oooh Boi

Views: 227,765

Keywords: 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

Id: 9hKnT_ahRxg

Length: 22min 58sec (1378 seconds)

Published: Tue May 07 2019