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?
@@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.
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%.
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!
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!
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.
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
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.
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 🤗
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 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??
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!
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.
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!
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.
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! ❤️
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
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?
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.
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!
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.
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.
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?
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.
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!
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.
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?
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; }
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.
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.
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?
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/
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.
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...
@@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.
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.
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?
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.
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.
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!
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
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 :)
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.
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 )
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!
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.
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.
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.
@@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.
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.
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.
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?
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...
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!
Here's a NEW VERSION of this tutorial WITHOUT BACKGROUND MUSIC and less than 9 minutes long: th-cam.com/video/TpLS6L5sVlc/w-d-xo.html
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?
THIS version is better for beginners because it is more informative AND slower paced, so it is easier to follow and comprehend the information.
merci !
@@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.
In my humble opinion, this guy is easily the best tutorial producer for Elementor. Superb.
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%.
i believe so.
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!
I'll second that !
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!
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.
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
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.
i tried almost all tutorials about sections and columns, almost all of them frustrative. your is the best
thanks
Glad it helped!
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 🤗
Aw, thanks for the lovely feedback!!!
Absolutely great content. To get the right Column with has caused me so much headache, until now. Cool tricks. Thanks 🙏
Happy to help!
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.
Thanks for a kind feedback buddy, glad you didn't land another complaint on the volume of music!
@@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??
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!
This was a FANTASTIC tutorial! Thank you for teaching me some valuable CSS code. You are a true Elementor JEDI.
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.
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!
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.
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! ❤️
I've watched this video 10 times and still learning to master columns. oooh boi! Good tutorial.
I enjoyed every single second of your video... good work man !
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
The most informative way I could find online, thanks for your help.
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
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?
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.
Fabulously well explained, and utterly useful. What more to say than: Ooooh Boi, this is cool!
After struggling with the f*cking columns I think you have saved my day. Thanks.
Glad to read if I did :)
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!
I just used your guide to fix the lengths of icon boxes, thanks mate!
Glad it helped!
I learnt a lot of things from your videos, Sir. So, keep making videos, please...
Hey Oooh Boi, I don't speak English, but I understand everything you said.
Keep it up! ♥
Saludos desde Perú.
Thank you my Jedi Master! Finally the force is with me again.
Great tutorial! You teach very well. Saw it by accident, then had an instant use-case! :-) Keep on doing this 👍🏻
I always enjoy your tutorials!
Glad you like them, buddy!
You born to teach, so Yoda in your thumbnail is pretty accurate my friend, great tutorial
Thanks for your great tips and tricks for Elementor! I hope you bring more of these informative and helpful tips and tricks.
Dude, big help. Thank you. You also solved my problem of how to stack colomns on tablet view.
Great to hear!
No, you don't talk too much. Actually you explain all of this very well.
You're awesome my friend! Thank you for all the tutorials! Keep it up!
Thanks for watching!
that was great. really saved me a lot of hassle. thanks man
You're a champion of elementor 👍
You are the best we need more freedom from elementor 's column and rows
Best Elementor tip everrr!
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.
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.
Beautifully explain man! Can you please make one about the sticky header. Thanks in advance
Yes, the sticky header is second on the list. The upcoming one will be about custom post types and taxonomies in Elementor :)
@@OoohBoi awesome man!
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.
Does that method allow fixed value column width and columns vertical alignment?
Keep it up man, your videos are very informative and helpful!
This is very helpful! Love it! Thanks so much! I do have control now!
Glad it helped!
Informative and entertaining. Thank you.
Glad it was helpful!
Awesome tutorial, thanks a lot for sharing!!!
In a word: F'inn-Epic!
Very Very Good! I really like this. Thank you
Happy to hear that!
btw, this is a rocking video. Super useful. Thanks so much! I'll look at your next video.
Thanks for a feedback!
Is the scrolla
Is the scrollable column no longer in the plugin? I'm using containers and I didn't find it here.
I love the way you talk!
Ps. Yes we should think smart and make things productive - not repetitive.. stupid 🖐️😊
Please give a shot to my plugin "Steroids for Elementor", it's free, just ask Google.
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?
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.
thank you. Very good video
WOW !! I've learned so much :D
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!
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.
Awesome tutorial!
Wow! What value. Thank you.
This video exposes the fact that Elementor is no way near a comprehensive visual web design tool. Webflow rocks!
How can I do the same in Elementor Free?
Great work boi, good work!
Thank you so much for your help! You were very helpful :)
Thanks for watching!
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?
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;
}
WoW 😍 elementor master
For the latest version of Elementor you just need to update the CSS to
selector .elementor-container {
flex-wrap:wrap;
}
Hi
How to center a section? It is always to the left.
Thank you
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.
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.
Excellent 👌 Thanks my friend:)
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?
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/
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.
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...
@@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.
Awesome video. Columns has been my achilles. When do you choose px, REM or ‰. Is there a preferred preference
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.
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?
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.
@@OoohBoi Thank you
Thank you. Thank you! THANK YOU!
This was good.
Flex wrap doesn’t seem to work with the css
What am I doing wrong?
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.
👍I got my solution thank you very much
Happy to help
badass Boi!! Thank you for the great tut!!
Two things ... yes, you talk too much 😆 ... but your information is sound and very useful so,
Good Job!! I’ll subscribe
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.
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!
Pls tell elementor that you should be hired in their core team :)
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
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 :)
@@OoohBoi thanks man!!!, did not knew i could use math functions!!!
and thanks for the super fast reply!!!
Thanx. Great tips!
You’re funny. Thank you for these great tips,
Coooooolllll thanks bro!
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.
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 )
@@OoohBoi Thank you very much!
Ohhh boy, elementor should pay salary to this guy....
It's useful for me, tks a lot!
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!
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.
Grate, informative 👌👌
mind_blown.gif
keep up these awesome tutorials man!
Subscribed!
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.
Well, you might give it a shot...
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.
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.
@@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.
@@bennguyen750 Well, if there's no other choice, just take the path of least resistance 👍
@@OoohBoi Will do thanks a bunch man.
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.
Go work boy, tks so much!
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.
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?
thanks, matey, just a comment custom CSS is for paid only
Who's your container daddy! great tutorial
Thanks
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...
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!
@@OoohBoi I'll try that, thanks again...
nice one
Thank a lottttttttt
You're welcome!