Please make as many tutorials as you can! I have never ever watched such great explanation videos like yours! Thank you so much for all your effort :-*
Your channel deserves 1000x recognition at least. Your content is way better than most of other hundred-thousand-sub wordpress channels (including the official Elementor channel itself). Thanks for sharing your expertise with us, learned a lot from your video. I wonder if you have an one-on-one training or any course available somewhere, would love to learn your core foundation as well as advanced elementor design insight.
Thanks to you it's a pleasure to see something other than what's being done from all over the web. And thank you again for the originality you bring to your channel.
Aside from the great actual information that was provided.... I more appreciate the lack of jump cutting as well as real human speech rhythm......This is how functioning adults learn.........
Really elegant approach! And the Navigator is critically important to access and name items, even on plain websites like the one I manage. It's similar to the Layers palette in InDesign, etc. and (I work in the print industry) it's shocking to see how many files we get from "Design Agencies" where absolutely everything is on one layer...it's a sloppy and lazy approach to layout and design.
Need guidance .. I want to make E-commerce website in which registered buyers get the products in whole sale price and unregistered buyers get same products in retail price and admin panel wo manages clients and products updation , deletion and addition etc...how could i make it freely
@@OoohBoi positioning a background is easy enough for the desktop mode, but can be much trickier for tablets and cell phones. Is it possible to simply feature the background for one mode (desktop) only? I would prefer to eliminate the background in the other two modes. Any thoughts?
Another great video in this channel! Question though. Regarding filling the background with colors. Why not "just" stretch the section, full page, to fill the page instead of adding the gradient background?
This was really good and useful. What about if you have another background overlay on that page will that custom CSS also alter that background overlay?
Am i missing something? I just started with Elementor and webdesign. But is it not possible to just add transparent *.png image and move it with margin to the other box? So some parts overlap?
It is, however, the background overlay is absolutely positioned (extra) element and as such suitable for all kinds of manipulations (position, size, transformations, etc.). Negative margins affect surrounding elements, that's why I dislike using it.
@@OoohBoi This is an issue I ran into recently. I had figured out the gradient option, but you would think there would be an option (built into Elementor) to set background full width while still having content boxed. Maybe you could add that as an option to your addon, so we don't have to use gradients...? It might make it easier if someone wants to use an image as the background in one of the columns. Thoughts? Thanks for the great videos!
@@btc188 The Section background is always full width. Columns can be full-width or boxed and the Inner Section has the power to stay boxed even inside the full-width column. That should suffice. Or maybe I'm missing the point here. Am I?
Hey, Thanks for the tutorial. I have done all the things that you have shown here. But when I publish the page mobile view is not working. Will you please help me? Thanks, again for the tutorial.
Hello sir great tutorials as i am wondering..why dont you just choose the section to be full width instead of boxed? What is the difference with gradient ? I look forward to hear from you.😀
Hello Oooh Boi, great action! but what exactly the Height settings of the two columns section are? When you paste the text configuration into the example column never mention the new height configuration, i can't get it work =( It's mandatory to have installed the steroids? It's possible to download the json to understand how it works? Thanks for sharing! Awesome job!
The height might be controlled by the column padding! And yes, if you install Steroids it should be easier to handle the Background Overlay via the Overlaiz extension.
I really like that design of the header with the car there.. It looks great! How did you make the gradient button? Used a plugin for gradient button or custom css i guess?
@@OoohBoi I really like your videos bro.. I like that you show unconventional and professional techniques with Elementor and Elementor Pro.. You´re doing great too, with 3k subs with 14 videos :) That is very good for you and means you are showing the right things to us.
I just don't like negative margins coz they affect the surrounding elements. And what's the point of using negative margins with an absolutely positioned elements? So it's No-No.
@@OoohBoi I agree with you . I never liked using negative margins to position, but Elementor always uses that method in their own video tutorials which is very very wrong. i feel like it COULD destroy USA as we know it.
Very nice video! I have one question, I have an image on the right, when i set the width to 115%, it moves to the right, not the left. How can I fix that?
Negative margins affect surrounding elements - including their parent wrapping elements. Background overlay is "natively" absolutely positioned element and can be manipulated by the top, right, bottom and left CSS property. However, sometimes you just have to use negative margins due to the lack of other options. So, I tend to avoid them whenever possible.
Just place your image in an image widget, click on the image, go to advanced, adjust the margin (top, bottom, left, right) to a negative value in whatever direction you want the image to break out. No need for CSS at all in this case.
Well, I don't know how exactly you meant that, but splitting up the gradient background is used with the reason in this tutorial. If otherwise works for you as well - feel free to go for it.
Please make as many tutorials as you can! I have never ever watched such great explanation videos like yours! Thank you so much for all your effort :-*
I agree and this is, by the way, the very 1st comment I ever do on a youtube video :)
Even your coding tutorials are so easy to understand. thanks for all the knowledge man much love from Florida
Glad you like them, thanks for watching!
Excellent presentation, best of all the Elementor instructors.
As always, these videos ear worked through and explained flawlessly. The speed of them is just perfect!
Genius, generous and genuine. You are very rare kind. I wish the best for you.
Thanks a lot buddy, same to you!
You're a genius...Thank you good teacher.
Your tutorials are among the best there is to get the most out of Elementor, they are pro level, thanks Master OoohBoi
Thanks for watching mate, glad you like it!
I'd never have watched such a thorough explanation like this! Thanks
Glad you enjoyed it!
That background gradient trick is something i needed for a long time! Thanks!
Your channel deserves 1000x recognition at least. Your content is way better than most of other hundred-thousand-sub wordpress channels (including the official Elementor channel itself). Thanks for sharing your expertise with us, learned a lot from your video. I wonder if you have an one-on-one training or any course available somewhere, would love to learn your core foundation as well as advanced elementor design insight.
Best channel teaching elementor
A great Tutorial can never think of making it. A good piece of important information.
Glad you think so!
Thanks to you it's a pleasure to see something other than what's being done from all over the web. And thank you again for the originality you bring to your channel.
This channel has a great future ahead. You run it great. Thanks for the great advice!
Any chance you could create this same tutorial using Elementors NEW flex container feature they are moving to?
Sir, your Elementor tutorials will help me build a great business, thank you very much!!
Ohoho, wait for a minute! I'll take 5% in that case 🤑
@@OoohBoi Lol, I'll surely find a way to be thankful
Nice All your tutorials are awesome !!!!!
Glad you think so!
Great Tuts Man !!!!Want more CSS Videos Like this.
How have I only just found this channel? Great work. Thank you! 👍
Best elementor channel
Please keep up that videos! You are so helpful!
I'll give my best, thanks!
Very very cool. You are an excellent teacher. Thank You!
Thanks for watching!
Very clear and informative, I love it. Thanks for the help, and looking forward to seeing more tutorials.
Glad it was helpful!
Very nice man. I like the explanation of CSS uses!
You a great teacher keep the videos coming.
Another amazing tutorial, thank you for your hard work my friend.
Thank you for watching!
Love your tutorials man!!
Glad you like them!
Please don't stop. best on youtube
Looking forward for more creative tips and tricks.
Great idea, never thought about it before, thank you!
Thank You so much ❤️
Your every tutorial is unique ❤️
Will watch this over again
Ooooooooh BOY! That is just amazing. Thanks for the tutorials Oooh Boi!
Excellent tips !! Thank you for these great tips !!! Invaluable!!!
very smart to rotate 90 degree of the colors, really be magically fill the rest area.
of course very good example to adjust the mobile screen layout.
Glad you liked it!
Thanks for the Great tutorial, personally I use negative margins to achieve this result
Thanks for this wonderful tutorial
Aside from the great actual information that was provided.... I more appreciate the lack of jump cutting as well as real human speech rhythm......This is how functioning adults learn.........
Please make more videos. I'm a huge fan.
OK, will give my best.
Excellent! Very good video. Well done!
Excellent Video Tutorial Many Thanks
Glad you liked it
Thanks for the Great tutorial Please keep it up!
Thanks, will try!
Really elegant approach! And the Navigator is critically important to access and name items, even on plain websites like the one I manage. It's similar to the Layers palette in InDesign, etc. and (I work in the print industry) it's shocking to see how many files we get from "Design Agencies" where absolutely everything is on one layer...it's a sloppy and lazy approach to layout and design.
Great! Where to learn more of your CSS trix?
Thanks! I guess I'll do more with time but I also think that not each and every video tutorial is about to bring a new CSS trick.
This is awesome. I just learned something new
That's the whole point of these videos. Thanks for watching!
Another great vid and finally no awful background music.
As always brilliant video 👍🏾 😃 Keep up the good work sir, hope that you and the family are all well? 🙏🏾
completely awesome. loved this one.
Another great tutorial. I can do this now.
Have fun!
Thanks mate! Great video!
Glad you liked it!
Thank you very much for this video. I love your videos. ,,
Great explanation, totally complete, thanks
I have subscribed because your content is great. thanks
your videos are awesome men!
@4:42 my subtitles said, "we can make the dumbass work for us". Hahahaaaa, I know that's not what you said but it was so funny I had to share!
Awesome ! You're a genius. Thanks dude.
You could make a tutorial to explain how to use CSS with Elementor in depth? Thanks in advance
This is gold! Thank you.
Thank You this TUT is so perfect!
Need guidance ..
I want to make E-commerce website in which registered buyers get the products in whole sale price and unregistered buyers get same products in retail price and admin panel wo manages clients and products updation , deletion and addition etc...how could i make it freely
Thanks dude, that was smart trick!!
Excellent video!
Glad you liked it!
@@OoohBoi positioning a background is easy enough for the desktop mode, but can be much trickier for tablets and cell phones. Is it possible to simply feature the background for one mode (desktop) only? I would prefer to eliminate the background in the other two modes. Any thoughts?
Absolutely helpful... 😍
So glad!
Excelente! Great, gracias amigo
Thanks a lot sir. 👍🏻👍🏻👍🏻
Genius! Thanks dude.
Do you have paid course? You are the best instructor
Instead of the background gradient couldn't you just set the section to full-width instead or boxed? or will that mess things up?
But what if you wanna have a boxed content inside the full-width section?
Amazing! Thank you!
Thanks again for the tips Boi!
Another great video in this channel!
Question though. Regarding filling the background with colors. Why not "just" stretch the section, full page, to fill the page instead of adding the gradient background?
This is just in case you use the gradient in that fashion, but definitely not the rule of thumb. If the section stretch works for you - why not.
thanks for the very useful video bro :)
i love it. total brilliance
Luv your designs and tutorials sir! It would be great if you had your creations available for download 🙌🏻⚡️💪🏻💥💻📱🌎👏🏻
Very good tips Boi!
This was really good and useful. What about if you have another background overlay on that page will that custom CSS also alter that background overlay?
You can handle it by assigning greater (lesser) z-index value to the column. Hopefully I'm not missing the point...
Hello, How can I make the right part with the text and that button? I don't know how to make column to have same height with the section
The section doesn't have a height defined, its height depends on the amount of content.
Am i missing something? I just started with Elementor and webdesign. But is it not possible to just add transparent *.png image and move it with margin to the other box? So some parts overlap?
It is, however, the background overlay is absolutely positioned (extra) element and as such suitable for all kinds of manipulations (position, size, transformations, etc.). Negative margins affect surrounding elements, that's why I dislike using it.
Please do a new Tutorial with the new flexboxes
I'm not sure why you didn't just use negative margins without having to add CSS. It worked for me.
best channel ever!!!!
2022: This did not work for me. Did Elementor stop this?
Oooooh boi, that was goooood! Cheers just sub
Welcome! ...and thanks for watching!
@6:31 wouldn't it be okay to set Content Width as Full Width?
Well, if you plan to build the layout as full-width - YES. But the catch is to keep the layout boxed and the background full-width.
@@OoohBoi What about the option to stretch the background but not the layout?
@@lauraamayas Well, that's the catch, that's what I'm saying: "the catch is to keep the layout boxed and the background full-width".
@@OoohBoi This is an issue I ran into recently. I had figured out the gradient option, but you would think there would be an option (built into Elementor) to set background full width while still having content boxed. Maybe you could add that as an option to your addon, so we don't have to use gradients...? It might make it easier if someone wants to use an image as the background in one of the columns. Thoughts? Thanks for the great videos!
@@btc188 The Section background is always full width. Columns can be full-width or boxed and the Inner Section has the power to stay boxed even inside the full-width column. That should suffice. Or maybe I'm missing the point here. Am I?
Hey, Thanks for the tutorial. I have done all the things that you have shown here. But when I publish the page mobile view is not working. Will you please help me? Thanks, again for the tutorial.
Could you please provide more information, how exactly it's not working? Screenshots or a screencast might help a lot!
Hello sir great tutorials as i am wondering..why dont you just choose the section to be full width instead of boxed? What is the difference with gradient ? I look forward to hear from you.😀
I was thinking that as well. Can you clarify?
Hello Oooh Boi, great action! but what exactly the Height settings of the two columns section are? When you paste the text configuration into the example column never mention the new height configuration, i can't get it work =( It's mandatory to have installed the steroids? It's possible to download the json to understand how it works?
Thanks for sharing! Awesome job!
The height might be controlled by the column padding! And yes, if you install Steroids it should be easier to handle the Background Overlay via the Overlaiz extension.
@@OoohBoi Gracias Amigo!!!
I really like that design of the header with the car there.. It looks great! How did you make the gradient button? Used a plugin for gradient button or custom css i guess?
Thanks mate! Gradient buttons? Here's how to: th-cam.com/video/q3zyxGJUwpU/w-d-xo.html
@@OoohBoi I really like your videos bro.. I like that you show unconventional and professional techniques with Elementor and Elementor Pro.. You´re doing great too, with 3k subs with 14 videos :) That is very good for you and means you are showing the right things to us.
Do you have any course? 😂 I just want to buy any!!
What about using negative spacing to position the car?
I just don't like negative margins coz they affect the surrounding elements. And what's the point of using negative margins with an absolutely positioned elements? So it's No-No.
@@OoohBoi thanks, makes sense. Keep up the good work
@@OoohBoi I agree with you . I never liked using negative margins to position, but Elementor always uses that method in their own video tutorials which is very very wrong. i feel like it COULD destroy USA as we know it.
@@michaelhofby Hah! I thought that nobody else noticed a negative margin positioning by Elementor crew...
Very nice video! I have one question, I have an image on the right, when i set the width to 115%, it moves to the right, not the left. How can I fix that?
Nevermind, I found your css file on github. You are a legend
@@simonvanoordt9839 Can you share the code?
Wow, thank you!
Great insight!
outstanding...!
Ooooh boiii super usefullll
Glad you think so!
Nice tutorial, just a quick question, why not use negative margin?
Negative margins affect surrounding elements - including their parent wrapping elements. Background overlay is "natively" absolutely positioned element and can be manipulated by the top, right, bottom and left CSS property. However, sometimes you just have to use negative margins due to the lack of other options. So, I tend to avoid them whenever possible.
@@OoohBoi Great, thanks for the answer!
What a BANGER 🔥
Awesome video! Is it possible to break images vertically out of the parent container?
Sure it is. Top, right, bottom, left - be it a positive or negative - all of them ar the CSS properties that can be used to manipulate positioning.
Just place your image in an image widget, click on the image, go to advanced, adjust the margin (top, bottom, left, right) to a negative value in whatever direction you want the image to break out. No need for CSS at all in this case.
What if I don't have Elementor pro
Any add-on which can do this?
Yes, OoohBoi Steroids for Elementor. Video: th-cam.com/video/HMkazBFTpkE/w-d-xo.html Plugin: wordpress.org/plugins/ooohboi-steroids-for-elementor/
Why not just make the section full width instead of playing with the gradients?
Well, I don't know how exactly you meant that, but splitting up the gradient background is used with the reason in this tutorial. If otherwise works for you as well - feel free to go for it.