Master the Columns in Elementor

[@OoohBoi]

Here's a NEW VERSION of this tutorial WITHOUT BACKGROUND MUSIC and less than 9 minutes long: kzbin.info/www/bejne/iqGvhGmCatiJosU

[@susanngigi7599]

Oooh Boi I am really enjoying your tutorials and purchased them all under singwa email. Question: The css code for flex wrap can one set it at customize and then go to CSS so it can work for the whole site other than setting it on a page to page basis?

[@Lorant1984]

THIS version is better for beginners because it is more informative AND slower paced, so it is easier to follow and comprehend the information.

[@leonispublishing7130]

merci !

[@clintongallagher]

@@leonispublishing7130 You're using the term "idiot proof" backwards. It means "preventing" an idiot from messing things up. The English language is --*not*-- idiot proof ROFL Your videos are groovy and save us all time thanks.

[@gerardpatrick8960]

In my humble opinion, this guy is easily the best tutorial producer for Elementor. Superb.

[@susanngigi7599]

Gerard Patrick you can say that again. I have watched so many Elementor videos and his are just the best. Straight to the point. Doesn't waste time he just dives in and gets your attention 100%.

[@nubenegra809]

i believe so.

[@harbourdogNL]

I'm pretty much an Elementor newb and even though his videos are really for people who know their way around it, I find them really informative and helpful, and they'll will most likely save me hours of frustration. Big thumbs up!

[@elcondorito8823]

I'll second that !

[@thebostonartist]

Indeed, Gerard! I mean, geez, I'd have figured out this section, wrap problem in half the time it took him... NOT! Truth be told, the only reason I shy away from "some" of his tutorials is because I know at the outset I'm not going to understand half of it. Talk about the Elementor Yoda!

[@marridesign4108]

I can just imagine how you would be such a great teacher to grade school kids. You always explain the right way, then the more convoluted solution and back to a better solution. Keep teaching like this.

[@josbogers8609]

For me, your videos are fantastic. your way of telling is calm, not talking too fast and clearly articulating. Very good to follow for a non-native boy. Thank you ! Jos

[@avigailomichael]

Thank you so much. More, more, more! Please don't condense videos, some of us like tuts in detailed format. We need to know the logic behind what you do. That's what sticks.

[@marknasri1201]

i tried almost all tutorials about sections and columns, almost all of them frustrative. your is the best thanks

[@OoohBoi]

Glad it helped!

[@madshendriksen1795]

Absolutely great content. To get the right Column with has caused me so much headache, until now. Cool tricks. Thanks 🙏

[@OoohBoi]

Happy to help!

[@prajaktagodse4051]

OH MY GAWWWWWD!!!!! You are AMAZING! This is hands down the most mind blowing video I have watched regarding elementor. The way you have explained the solution as well as the importance of maintaining site health is true passion. THANK YOU for your videos!! I am truly grateful. You’re guiding me through unchartered waters and helping me achieve my dreams 🤗

[@OoohBoi]

Aw, thanks for the lovely feedback!!!

[@susanngigi7599]

I just love the way you do your tutorials. Very engaging and you are very knowledgeable in what you are teaching.. 👏 You make everything so clear, easy and memorable. I would love to see a master class in css for elementor. Thank you.

[@larryfroot]

Brilliant. I am learning so much. A lot of good design never happens because of not being aware of the tools at our disposal. It's like you come along and fill our toolbox with all these wonderful techniques! It is a pleasure to be a subscriber to your excellent channel, thank you so much for sharing this wonderful content.

[@OoohBoi]

Thanks for a kind feedback buddy, glad you didn't land another complaint on the volume of music!

[@danielmpay6365]

@@OoohBoi man how to a learn design, structure and color.. I am having a big problem with coloring Where to get information. Or what book shall I read??

[@markm8090]

This has been a royal pain in the backside for me for months now! Have no problem hand coding css flex outside of WP but Elementor out-of-the-box just wasn't having it. Thanks for tutorial!

[@jasonsvalenzano]

This was a FANTASTIC tutorial! Thank you for teaching me some valuable CSS code. You are a true Elementor JEDI.

[@annebovelett]

Wow, man, you are so rocking these tutorials!! Sorry for my comment on the previous video about the loud music. This one is cool, with that being so soft in de background. And the content is just great!! Thank you! ❤️

[@changarocc]

wow. thank you for putting me onto the flexbox issues with columns. Been racking my brain on this trying not to use custom CSS because I didn't know what I would break.

[@OoohBoi]

No problem! In case you wanna be able to manage columns and sections via the user-friendly interface, install "Steroids for Elementor" add-on that I made a while ago. It's free!

[@fluttersheesh8884]

Damn, youre the new equivalent of what master yoda was for me back when i was 7 years old. I will be a jedi master of columns

[@MattyPod27]

The most informative way I could find online, thanks for your help.

[@wawanMW]

I enjoyed every single second of your video... good work man !

[@joshdthomas89]

I've watched this video 10 times and still learning to master columns. oooh boi! Good tutorial.

[@michaelhofby]

love you for pointing this out .. I think Elementor has implemented it this way, to make it more "intuitive" for newbie designers to be honest because then they dont have to think about column width unless they start to fiddle with it when entering tablet/mobile mode.. But yeah, of course it does create a ton of bloated code, with sections with inner sections, with rows, with columns.... I am going to implement this into my Elementor setup, so thanks again for pointing it out

[@michaelhofby]

Btw, i think im going to write all this css for column width and media queries into a main css file and then i just assign classes like for example "50-col" for 50% column in advanced tab as a class.. Im just not sure if its possible to give more than 1 css class inside the advanced tab to a column, but if it is i will put the media queries codes into main css file and then call them via a css class i set, like for example "tab-100" and "mob100" for executing the media query that is assigned via class to that column in the elementor page.. You think this will work bro?

[@capitanchorizzo]

Fabulously well explained, and utterly useful. What more to say than: Ooooh Boi, this is cool!

[@BD-hy8bl]

Fantastisch man. I like to see a video from you what you can not do with Elementor and CSS! I guess there will never be one right? Keep up the Show. Thank you.

[@bjen57]

After struggling with the f*cking columns I think you have saved my day. Thanks.

[@OoohBoi]

Glad to read if I did :)

[@chafaon]

I just used your guide to fix the lengths of icon boxes, thanks mate!

[@OoohBoi]

Glad it helped!

[@ethelkeller6814]

Thank you my Jedi Master! Finally the force is with me again.

[@heikodietze4983]

Great tutorial! You teach very well. Saw it by accident, then had an instant use-case! :-) Keep on doing this 👍🏻

[@giuliodreosto]

Thank you very much!! I HAVE A QUESTION... Is it possible to change column order in mobile version compared to desktop version? Thank you for your support!

[@OoohBoi]

Please use "Steroids for Elementor" plugin that I made a while ago. There's an extension named "Breaking Bad" (one of 22) that helps you manage Sections and Columns via the Elementor interface instead of the custom CSS. By using Breaking Bad you can change the column order per device.

[@donsbullock9514]

I always enjoy your tutorials!

[@OoohBoi]

Glad you like them, buddy!

[@capitanchorizzo]

Well done, Mister Ooooh Boi, some very fine ideas presented to be perfectly easy to follow. You are the Original CSS Entertainer! Thanks, and keep it up!

[@eweba]

Thanks for your great tips and tricks for Elementor! I hope you bring more of these informative and helpful tips and tricks.

[@bernardhild2420]

Dude, big help. Thank you. You also solved my problem of how to stack colomns on tablet view.

[@OoohBoi]

Great to hear!

[@yanaunghein3900]

I learnt a lot of things from your videos, Sir. So, keep making videos, please...

[@robertoamarillas]

You born to teach, so Yoda in your thumbnail is pretty accurate my friend, great tutorial

[@thediaryblogofseanoconnor629]

No, you don't talk too much. Actually you explain all of this very well.

[@smithbenites5409]

Hey Oooh Boi, I don't speak English, but I understand everything you said. Keep it up! ♥ Saludos desde Perú.

[@karimsahraoui7216]

You are the best we need more freedom from elementor 's column and rows

[@rodalvareznieves3893]

You're awesome my friend! Thank you for all the tutorials! Keep it up!

[@OoohBoi]

Thanks for watching!

[@muhammadsharjeel1491]

You're a champion of elementor 👍

[@ShabahangZ]

that was great. really saved me a lot of hassle. thanks man

[@TheTechBear]

This is very helpful! Love it! Thanks so much! I do have control now!

[@OoohBoi]

Glad it helped!

[@YasienSarlie]

Awesome video. Columns has been my achilles. When do you choose px, REM or ‰. Is there a preferred preference

[@OoohBoi]

I guess there's no strict rule. Elementor allows you to change column width per device (viewport size) so it can be any unit that suits your needs. But with regards to responsiveness, a percentage is what makes the most sense.

[@albertoestevezdecastro4699]

Best Elementor tip everrr!

[@davivilela]

Is the scrolla Is the scrollable column no longer in the plugin? I'm using containers and I didn't find it here.

[@HenrikHarrell]

Great tutorial, sometimes Elementor give us hard times just to meke simple things... By the way, I followed your tutorial but when I add the "flex-wrap: wrap;" it didn't work for me and I don't get why. I found a workaround to it: I added the 100% width for all the columns, as you shown in the video, then I added a CSS ID (cstm) in the section and finally I added this CSS: #cstm.elementor-section .elementor-container{display: block;} Doing this way worked for me, do you know why?

[@OoohBoi]

Just use "Steroids for Elementor" and the Breaking Bad extension, it brings a whole lot more to the Section, Column and Widgets, and you don't even need the Elementor PRO. Ask Google about "Steroids for Elementor" if you want to learn more about.

[@nubenegra809]

Beautifully explain man! Can you please make one about the sticky header. Thanks in advance

[@OoohBoi]

Yes, the sticky header is second on the list. The upcoming one will be about custom post types and taxonomies in Elementor :)

[@nubenegra809]

@@OoohBoi awesome man!

[@bxtrades]

Keep it up man, your videos are very informative and helpful!

[@anirudhachakrabarty2050]

Thnx for this tutorial... There is a prblm with elementor while taking a section and making it from default to minimum height it never goes below 400px.. How can i reduce that? If i wish to make it 300px or 200px? Any solutions?

[@OoohBoi]

The Section is like an outer-most wrapper and its height depends on the tallest child element. Is there any other element inside that prevents you from setting the height? What if you use the "!important" clause when setting up the height of your Section? Something like: selector { height: 200px !important; }

[@michaelschoenbeck1405]

Informative and entertaining. Thank you.

[@OoohBoi]

Glad it was helpful!

[@openmindeddrumming]

Hello, I'm sure you noticed that in Elementor 3 they got rid of some DOM elements, is it possible now to adjust the css for the flex layout to display correctly again?

[@OoohBoi]

They didn't remove anything for real, they have added the option to WP Admin to allow people to turn the DOM optimized output ON or OFF. See, Elementor > Settings :: Advanced (tab), Optimized DOM Output. "Steroids for Elementor" add-on is DOM optimized ready and you can use its Breaking Bad extension to manage the columns in the DOM optimized output if you like.

[@openmindeddrumming]

@@OoohBoi Thank you

[@VeganManiac]

Awesome tutorial, thanks a lot for sharing!!!

[@roadtoprogramming8856]

MAN, you really are a great Tutor. You should just work on how to get more subscribers. With the knowledge and information you have, you should have hit 100k by now.

[@OoohBoi]

Oh thanks, buddy, I hope it'll "materialize" one day! At this point, I'm like battling to find some spare time and create a new video.

[@franktielemans6624]

You can also create a grid container from a section selector .elementor-row { display: grid; } selector .elementor-column { width: 100% !important; } With this custom CSS the row become a grid container and all direct child-elements become grid-elements.

[@dameerdj5403]

Does that method allow fixed value column width and columns vertical alignment?

[@nubenegra809]

dude you are awesome!!! quick question... how can i solved the situation were the columns are not a whole number(35.6 or 60.8 or whatever)? this happens a lot to me and i have a mild ocd problem and i hate that i cant have a perfect column (whole number 33%, 56% no .xx) Thanks in advance

[@OoohBoi]

Just type in the integer for column width, like: selector { width: 305px; /* or 30% or 25em or whatever you like */ } Then the one next to it: selector { width: calc(100% - 305px); /* if you mix and match % and px */ } ...and the column should be of exactly the same size. OCD rocks. I am in too bro :)

[@nubenegra809]

@@OoohBoi thanks man!!!, did not knew i could use math functions!!!

[@nubenegra809]

and thanks for the super fast reply!!!

[@kemmyoluwo4732]

Hello! Thank for the help last time, I'm trying to adjust the columns and for mobile using the Astra theme and I've been having difficulty, because I forgot to make sure that my pages were responsive in the first place. I was just wondering as to where you would add the adjustment within this CSS so that it can be mobile responsive please? .elementor-top-section-element-5ff1dac, .elementor-section-full_width , .elementor-section-stretched , .elementor-section-height-default , .elementor-section-height-default I've noticed that when I change one of them then the whole it is effected, when really, I just want to focus on certain parts so that it can be mobile friendly.

[@OoohBoi]

Mate, I don't think I'm getting the point. Did you try to use Breaking Bad extension to manage your columns and sections in Elementor? Breaking Bad is a part of "Steroids for Elementor" add-on that I have made a while ago, you can download it from the official WP plugins repo, it's free. Ask Google if you want to know more!

[@ocratest]

In a word: F'inn-Epic!

[@technomage116]

btw, this is a rocking video. Super useful. Thanks so much! I'll look at your next video.

[@OoohBoi]

Thanks for a feedback!

[@matthewdufty606]

Very Very Good! I really like this. Thank you

[@OoohBoi]

Happy to hear that!

[@NinjOdir]

Great video! You really go the extra mile! Thank you so much for taking the time to get this type of content out! I hope you’re reaping the deserved fruits of your labor! I ran into an issue with one of those extra divs just yesterday, specifically that second “elementor-row”.. I was trying to create a form to capture email addresses by serving some whitepaper pdf’s. Thing is, on the wireframes i got from the client I have a bunch of accordion tabs, one per product. Inside those, a list of details and then the lead capture forms. To avoid having the users inputing an email address each time their want to download a pdf, i put together a cookie script, some js and css to hide the forms after submission and show a download button instead. My problem is, my code works by adding a class to the parent container and visibility is applied to child divs.. Do you know how can I apply another class to the elementor-row div? Sorry for the long comment...! 😅 All the best for you! Thank you!

[@OoohBoi]

Great to read that you found it useful! If you download my plugin "Steroids for Elementor" (it's free, just ask Google) it'll be much easier to handle both sections and columns by using one of its extensions "Breaking Bad". As for how to target the first row only, use the greater symbol. For instance: selector > .elementor-top-column { ... } ...or... selector > [data-element_type="column"] { ... } ...or... selector.custom-class-name > .elementor-column { .../* if the section uses custom class name */ } ...any of these will work fine.

[@LizbethLeeds]

I love the way you talk! Ps. Yes we should think smart and make things productive - not repetitive.. stupid 🖐️😊

[@OoohBoi]

Please give a shot to my plugin "Steroids for Elementor", it's free, just ask Google.

[@mnburch]

Awesome tutorial!

[@fabsdesignjp]

hi Oooh Boi I tried it on my website it works well in one site but the other site it shows perfectly at the backend but on the frontend it shows messy, what am I missing!!? Does updates interfere on it?

[@OoohBoi]

Well, most likely you made a mistake. Where exactly? Can't speak for you buddy, you gotta figure it out on your own. I'm sure that all works fine. You may want to install Steroids for Elementor add-on that I made recently, it does include an identical feature of handling the Columns by using the Elementor interface instead of custom code. wordpress.org/plugins/ooohboi-steroids-for-elementor/

[@walterwiniana]

Thank you so much for your help! You were very helpful :)

[@OoohBoi]

Thanks for watching!

[@rejeanpion460]

Hello, I have a 3 columns section, the left column is a google map, the right one is a contact form and the middle one is a text editor with the address. Now I want the middle column to overlap a little both left and right column adding to it a box shadow so it kind of stand above the left and right column. I have use the z-index to 1 to the middle and negative margin on all four direction. somehow it never get the negative margin on the contact form (right) section. Can you help with this. thanks in advance.

[@OoohBoi]

Does it help if you set the z-index of the map column to 1, z-index of the text-editor column to 3 and the contact form column to 2? That's how the middle column becomes the one with the highest stacking order which in turn makes all of its elements (widgets) atop everything else. By the way, did you set the negative margin to the Text Editor widget or the column? It should be the Text Editor widget...

[@rejeanpion460]

@@OoohBoi Hello, actually I have solved it by putting the middle section at 1 for z-index and the used the padding to increase its size on up, down and left. Then, I use the margin on the right element to moved it left under the middle text column. Finally I moves the whole section using padding to the center by increasing the left padding. But after reading your solution, I tried it if found that it was more elegant this way so....change it to your solution. So now, we have 2 ways of doing it...hahaha...thanks to your help.

[@senegalcom]

Good video, thank you. There's a lot to discuss, but consider condensing this type of issue down to 8 to 10 minutes, unless it's some kind of major tutorial. But interesting.

[@PaulAnabellaLewin]

Hi How to center a section? It is always to the left. Thank you

[@OoohBoi]

Center the Section or center the column? Sections are always centered, but in order to center the columns inside the section, do something like: selector .elementor-container > .elementor-row { flex-wrap: wrap; justify-content: center; } By the way, I've made a library of Elementor add-ons under the code name "OoohBoi Steroids for Elementor" which can be downloaded from the WP's official plugins repository. There's a Breaking Bad extension (as a part of the library) that helps you manage the Columns better way so you won't need to mess up with the code any more.

[@Sele81]

Thank you for this great tutorial! I tried it and it works good. But when I use this method, I can not staple widgets above or before right? What I mean is, I use two columns like you described instead of a inner section with two columns. Now on the left column I have a widget with a long text. On the right column I want to place a text widget, a icon list and a button. So I have two columns, left 1 widget and right 3 widgets. And at the end it the right side should have the same height as the left side. Hard to describe what I mean. But with inner sections I can add 3 widgets on the right while 1 widget on the left. I really want to do it properly by using least widgets as possible because of SEO purposes.

[@OoohBoi]

Columns inside the section will stretch vertically to fit the amount of content. The same goes for the Inner Section columns with no exception. So the two (or more) columns side by side will always be sharing the height. However, if you want to have height-independent columns, you gotta use 2 Inner Sections side by side instead, something like this cutt.ly/PtlZWGR . ( Download and import as any other Elementor template )

[@Sele81]

@@OoohBoi Thank you very much!

[@sparkypainkiller]

How can I do the same in Elementor Free?

[@CapitaineWEB-FR]

WOW !! I've learned so much :D

[@MyDistortedWorld]

This video exposes the fact that Elementor is no way near a comprehensive visual web design tool. Webflow rocks!

[@shadetreeprofessor5723]

Wow! What value. Thank you.

[@Spasoff_]

thank you. Very good video

[@patrickvalmont]

When I drag the spacer, i do not get columns actually. Strange stuff. Trying to create a layout of 12+4+4+4.

[@robmiles3845]

You’re funny. Thank you for these great tips,

[@MichaelFidelis]

badass Boi!! Thank you for the great tut!!

[@disciplinedxmotivation]

Great work boi, good work!

[@MrChrisJ74]

For the latest version of Elementor you just need to update the CSS to selector .elementor-container { flex-wrap:wrap; }

[@sarmadali77771]

WoW 😍 elementor master

[@CustomSneakers]

This was good.

[@wgm247]

Pls tell elementor that you should be hired in their core team :)

[@KeithChastain-YouGotKeith]

Excellent 👌 Thanks my friend:)

[@BurlingtonPress]

Thank you. Thank you! THANK YOU!

[@cuongnguyenduy7933]

It's useful for me, tks a lot!

[@atosupriyanto6990]

Coooooolllll thanks bro!

[@tomekmar7517]

Ohhh boy, elementor should pay salary to this guy....

[@viaccodesign1762]

Thanx. Great tips!

[@bennguyen750]

Hi Boi, is there a code to reverse columns? It's for more complex when you have 4 columns that are all 50%. 2 of those columns have text, and the other 2 have images. When I collapse it to mobile the text are separated and the images are next to each other. So right now the order looks like this text, image, image, text. How would I go about switching those columns on mobile so that the order would be text, image, text, image? Thank you. ** Edit** I tried messing with it by adding in "flex-direction: column-reverse" to the custom class we made for mobile, but found our that it should be in the section code, which then that wouldn't really work either. **Edit** Solved. Just make a new class similar to the mobile version, but have "order :1;" in it so it looks like this: @media (max-width: 768px) { .elementor-element .make-me-full-width-reverse { width: 100% !important; order: 1; } } Add that new class to the column you want to reverse.

[@OoohBoi]

4 columns, each column is 50% wide, right? Why don't you just insert 2 sections, each section with 2 columns, 50% wide? If you do so, you'll be able to use Elementor's "Reverse Columns" options.

[@bennguyen750]

@@OoohBoi Haha it's because I think you said too many section = more code. So i've just been using 1 section and multiple columns. I'll start using 2 now if it makes more sense.

[@OoohBoi]

@@bennguyen750 Well, if there's no other choice, just take the path of least resistance 👍

[@bennguyen750]

@@OoohBoi Will do thanks a bunch man.

[@BrightWhiteSmiles]

Grate, informative 👌👌

[@harbourdogNL]

Wow, I wish I could hire him to build my very simple website. He could do in a couple of hours what will take me days and days.

[@OoohBoi]

Well, you might give it a shot...

[@captainchinar]

Flex wrap doesn’t seem to work with the css What am I doing wrong?

[@OoohBoi]

flex-wrap: wrap; IS THE ONLY THING that works! And believe me, there's no replacement. Maybe your currently active WP theme is shutting it down.

[@ALMBusinessInstitute]

Two things ... yes, you talk too much 😆 ... but your information is sound and very useful so, Good Job!! I’ll subscribe

[@laerciocivali]

Go work boy, tks so much!

[@mperritoz]

mind_blown.gif keep up these awesome tutorials man!

[@freshprinceofsolair]

Who's your container daddy! great tutorial

[@joebalingit]

Subscribed!

[@clintongallagher]

You're using the term "idiot proof" backwards. It means "preventing" an idiot from messing things up. The English language is --*not*-- idiot proof ROFL Your videos are groovy and save us all time thanks.

[@rajalakshmie8210]

👍I got my solution thank you very much

[@OoohBoi]

Happy to help

[@anikar7730]

Sir, I would like to request your little urgent help for a strange issue, for which I am not able to get any solution anywhere on the internet. I know it sounds strange. Problem - I have created a TWO Columns PAGE in Elementor by using INNER SECTION tool item. I have put necessary heading, texts and images within both columns. Upto this all good. *** PROBLEM - I am trying to accomplish addition of two button images inside the RIGHT COLUMN of the page by Dragging & Dropping another INNER SECTION item, which is not happening. But without doing that I am not able to add two different button images SIDE BY SIDE inside the RIGHT COLUMN. *** Could you please HELP ME with a solution to this problem?? I would like to add two button images SIDE BY SIDE aligning both toward right side under RIGHT COLUMN of the page & then add a customer HTML Elementor item under those buttons. Could you please HELP ME with a solution to this problem?? I spent many hours finding a solution to this strange issue, I did not find any solution to this strange issue. I am carrying out a project currently, and your little urgent help today would save me a lot. Hope to hear from you and any kind person reading my request a solution to this issue.

[@OoohBoi]

Hence I'm not quite sure what exactly is the problem, you could make a sketch (hand-drawn is fine too) and send it to me ( oooh(dot)boi29(at)gmail(dot)com ). Be sure your sketch depicts all the elements and their positions. I'll turn your sketch into the Elementor layout and send it back to you in the form of the Elementor importable template. How about that?

[@christosdaglis5987]

Wonderful video but "Idiot proof way" is an understatement! I am just getting acquainted with Elementor Pro and web design in general and this confused me even further.

[@OoohBoi]

Some people like it and some of them don't. But in general I got rid of such "practice" in my videos.

[@KevsGuide]

thanks, matey, just a comment custom CSS is for paid only

[@oswaldosola6300]

Thank you Master Oooh Boi... Great Tutorial. I need your help. When I write the code corresponding to the section "Define Media Query Globally": .elementor-element.make-me-full-width I get a warning from the elementor: "Don't use adjoining classes", I have looked for a way to correct it but I can't find it. Please could you help me with that?... Thank you again...

[@OoohBoi]

That's awkward! Chaining multiple CSS class names exists ever since. And I don't think that the warning is coming from Elementor, it must be your current theme. Switch to "Hello Elementor" WP theme and see if it helps!

[@oswaldosola6300]

@@OoohBoi I'll try that, thanks again...

[@achinidelpitiya3262]

Thanks