Breakout of images in Elementor PRO

[@mietcasino2393]

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

[@DaAliZee]

I agree and this is, by the way, the very 1st comment I ever do on a youtube video :)

[@borisnieminen677]

Excellent presentation, best of all the Elementor instructors.

[@youssefbauer1776]

Even your coding tutorials are so easy to understand. thanks for all the knowledge man much love from Florida

[@OoohBoi]

Glad you like them, thanks for watching!

[@hericapung8058]

Genius, generous and genuine. You are very rare kind. I wish the best for you.

[@OoohBoi]

Thanks a lot buddy, same to you!

[@Fubeman]

As always, these videos ear worked through and explained flawlessly. The speed of them is just perfect!

[@oswaldosola6300]

Your tutorials are among the best there is to get the most out of Elementor, they are pro level, thanks Master OoohBoi

[@OoohBoi]

Thanks for watching mate, glad you like it!

[@melodyconcept2857]

I'd never have watched such a thorough explanation like this! Thanks

[@OoohBoi]

Glad you enjoyed it!

[@theviralshot]

Any chance you could create this same tutorial using Elementors NEW flex container feature they are moving to?

[@bennguyen750]

You're a genius...Thank you good teacher.

[@MIlyas-hv7ic]

Looking forward for more creative tips and tricks.

[@kenny1394]

Best channel teaching elementor

[@fathipereira]

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.

[@robertinnis3717]

Please don't stop. best on youtube

[@ravindersharma1604]

A great Tutorial can never think of making it. A good piece of important information.

[@OoohBoi]

Glad you think so!

[@triryuzaki4948]

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.

[@TheWoodyTiger]

This channel has a great future ahead. You run it great. Thanks for the great advice!

[@victorrenevaldiviasoto9728]

Sir, your Elementor tutorials will help me build a great business, thank you very much!!

[@OoohBoi]

Ohoho, wait for a minute! I'll take 5% in that case 🤑

[@victorrenevaldiviasoto9728]

@@OoohBoi Lol, I'll surely find a way to be thankful

[@CarletonM]

That background gradient trick is something i needed for a long time! Thanks!

[@youssefbauer1776]

Please make more videos. I'm a huge fan.

[@OoohBoi]

OK, will give my best.

[@SantiagoDigitalDesign]

@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!

[@ashikurrahman5668]

Great Tuts Man !!!!Want more CSS Videos Like this.

[@AntGeezer]

How have I only just found this channel? Great work. Thank you! 👍

[@kevganhiga]

Very very cool. You are an excellent teacher. Thank You!

[@OoohBoi]

Thanks for watching!

[@BradK02]

You a great teacher keep the videos coming.

[@smarthustlersclub6375]

Will watch this over again

[@dantedelcastillo9815]

Nice All your tutorials are awesome !!!!!

[@OoohBoi]

Glad you think so!

[@rodger2009]

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.

[@OoohBoi]

Glad you liked it!

[@paulmetcalfe6855]

Another great vid and finally no awful background music.

[@slaxjan]

Very nice man. I like the explanation of CSS uses!

[@per-ericnilzen1966]

Great! Where to learn more of your CSS trix?

[@OoohBoi]

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.

[@CheckTesting1]

As always brilliant video 👍🏾 😃 Keep up the good work sir, hope that you and the family are all well? 🙏🏾

[@ventoroverso]

Thanks for the Great tutorial, personally I use negative margins to achieve this result

[@jeremymurphy7475]

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.........

[@harbourdogNL]

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.

[@barryhickman9470]

Excellent Video Tutorial Many Thanks

[@OoohBoi]

Glad you liked it

[@aliwaheed2912]

Very clear and informative, I love it. Thanks for the help, and looking forward to seeing more tutorials.

[@OoohBoi]

Glad it was helpful!

[@MsKat444]

Please keep up that videos! You are so helpful!

[@OoohBoi]

I'll give my best, thanks!

[@rahadianputra3745]

Great idea, never thought about it before, thank you!

[@sumansamanta330]

Thank You so much ❤️ Your every tutorial is unique ❤️

[@ismardidiel9442]

Another amazing tutorial, thank you for your hard work my friend.

[@OoohBoi]

Thank you for watching!

[@amiraziz8165]

Best elementor channel

[@ventoroverso]

You could make a tutorial to explain how to use CSS with Elementor in depth? Thanks in advance

[@HullioGQ]

Ooooooooh BOY! That is just amazing. Thanks for the tutorials Oooh Boi!

[@MDALAMGIR-hg8lr]

Thanks for the Great tutorial Please keep it up!

[@OoohBoi]

Thanks, will try!

[@michaeljenner]

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?

[@OoohBoi]

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.

[@isaacchukwuemeka9183]

Thanks for this wonderful tutorial

[@janinehague5779]

Excellent! Very good video. Well done!

[@davidw717]

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?

[@OoohBoi]

You can handle it by assigning greater (lesser) z-index value to the column. Hopefully I'm not missing the point...

[@judekadiri]

This is awesome. I just learned something new

[@OoohBoi]

That's the whole point of these videos. Thanks for watching!

[@amatuer2]

Excellent tips !! Thank you for these great tips !!! Invaluable!!!

[@russelllogan9305]

Another great tutorial. I can do this now.

[@OoohBoi]

Have fun!

[@DendySutrisna]

Thanks a lot sir. 👍🏻👍🏻👍🏻

[@sayedhridoy5756]

Do you have paid course? You are the best instructor

[@Overblazeinnitmate]

Love your tutorials man!!

[@OoohBoi]

Glad you like them!

[@DenisRautu]

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

[@OoohBoi]

The section doesn't have a height defined, its height depends on the amount of content.

[@brobocops]

Instead of the background gradient couldn't you just set the section to full-width instead or boxed? or will that mess things up?

[@OoohBoi]

But what if you wanna have a boxed content inside the full-width section?

[@bySterling]

Luv your designs and tutorials sir! It would be great if you had your creations available for download 🙌🏻⚡️💪🏻💥💻📱🌎👏🏻

[@akhilashokan704]

Thank you very much for this video. I love your videos. ,,

[@maksym9228]

Do you have any course? 😂 I just want to buy any!!

[@michu9375]

I have subscribed because your content is great. thanks

[@MisterX-77]

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.😀

[@iutiubdotkomm]

I was thinking that as well. Can you clarify?

[@rodrigobassi3274]

Great explanation, totally complete, thanks

[@NOALNOM]

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!

[@OoohBoi]

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.

[@NOALNOM]

@@OoohBoi Gracias Amigo!!!

[@dimitridehouck9506]

Nice tutorial, just a quick question, why not use negative margin?

[@OoohBoi]

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.

[@dimitridehouck9506]

@@OoohBoi Great, thanks for the answer!

[@jamesarmstead8875]

Thanks mate! Great video!

[@OoohBoi]

Glad you liked it!

[@simonvanoordt9839]

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?

[@simonvanoordt9839]

Nevermind, I found your css file on github. You are a legend

[@TimeLord69]

@@simonvanoordt9839 Can you share the code?

[@apatehomer154]

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?

[@OoohBoi]

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.

[@edwards9845]

@6:31 wouldn't it be okay to set Content Width as Full Width?

[@OoohBoi]

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.

[@lauraamayas]

@@OoohBoi What about the option to stretch the background but not the layout?

[@OoohBoi]

@@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".

[@btc188]

@@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!

[@OoohBoi]

@@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?

[@JewelAstrology]

Awesome video! Is it possible to break images vertically out of the parent container?

[@OoohBoi]

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.

[@IliaTabere]

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.

[@kaziobaidulalam6735]

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.

[@OoohBoi]

Could you please provide more information, how exactly it's not working? Screenshots or a screencast might help a lot!

[@YasienSarlie]

What about using negative spacing to position the car?

[@OoohBoi]

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.

[@YasienSarlie]

@@OoohBoi thanks, makes sense. Keep up the good work

[@michaelhofby]

@@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.

[@OoohBoi]

@@michaelhofby Hah! I thought that nobody else noticed a negative margin positioning by Elementor crew...

[@kimjohnson313]

I'm not sure why you didn't just use negative margins without having to add CSS. It worked for me.

[@qureshiqureshi4489]

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

[@NazmulNahidStudio]

Awesome ! You're a genius. Thanks dude.

[@michaelhofby]

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]

Thanks mate! Gradient buttons? Here's how to: kzbin.info/www/bejne/p2Tdqqt9f7qqprc

[@michaelhofby]

@@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.

[@jlnichauthorsff]

completely awesome. loved this one.

[@dennissomook9070]

thanks for the very useful video bro :)

[@anthonyenamu1430]

your videos are awesome men!

[@sayyidabbas3281]

What if I don't have Elementor pro Any add-on which can do this?

[@OoohBoi]

Yes, OoohBoi Steroids for Elementor. Video: kzbin.info/www/bejne/fn7Okq14e7mjoac Plugin: wordpress.org/plugins/ooohboi-steroids-for-elementor/

[@WagnerDeCampos]

Excelente! Great, gracias amigo

[@teuccio73]

its possible to do the same with absolute position image ? Thanks !

[@OoohBoi]

I guess it is but it's gonna be waaay harder to make image absolutely positioned. Background Overlay is in my humble opinion the best candidate since it's an absolutely positioned element "by nature".

[@teuccio73]

@@OoohBoi ThankS

[@ayodolanan0268]

Thanks dude, that was smart trick!!

[@AngeloGuardia]

hey man! your tutorials are kick-ass, could you do something about creative grids like showing products and services with some hover effects and so on? :)

[@OoohBoi]

Thanks! Not sure about "creative grids" but if you're referring to custom post types then the video on that subject is soon to come - as a part of Dynamic Series.

[@AngeloGuardia]

@@OoohBoi I was thinking more about a masonry grid style with collums to show case services but also to have some interactions like hovering, links and text

[@OoohBoi]

@@AngeloGuardia OK...we'll see, we'll see...

[@Kakira1234]

Please do a new Tutorial with the new flexboxes

[@eftiaralam7365]

Absolutely helpful... 😍

[@OoohBoi]

So glad!

[@Bardesigners]

Excellent video!

[@OoohBoi]

Glad you liked it!

[@Bardesigners]

@@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?

[@joelvallebarocco7754]

Thank You this TUT is so perfect!

[@laerciocivali]

Thanks again for the tips Boi!

[@ChitlinsLaundry]

Oooooh boi, that was goooood! Cheers just sub

[@OoohBoi]

Welcome! ...and thanks for watching!

[@liammackenzie1737]

when i type the code in nothing happens :( I followed your steps 5 times my upper bracket has a box around it! Any help would be appreciated (y)

[@OoohBoi]

It can't be that you're the only person who can't use it, I think you're doing something wrong all the time. You could send me your file for review if you like...

[@Anhommis]

This is gold! Thank you.

[@abelm3972]

It's not working anymore with Elementor containers. But this is very nice tutorial. Thanks for it!

[@Bukoappl]

Amazing! Thank you!

[@alvindcaesar]

Were you recording in a server room? I feel very familiar with the surrounding noise. 😆 By the way, awesome tutorial as usual!

[@AllesPat]

I asked that myself also; it sounds like a serverroom or something :-D

[@OoohBoi]

Hah! Busted!

[@michaelhofby]

He is in his secret server bunker yes

[@whynotyt5855]

Well done

[@Wookierabbit]

2022: This did not work for me. Did Elementor stop this?

[@MarceloMarconcini]

Very good tips Boi!

[@sarazubac8680]

Why not just make the section full width instead of playing with the gradients?

[@OoohBoi]

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.

[@michelebrusutti9465]

Ooooh boiii super usefullll

[@OoohBoi]

Glad you think so!

[@claygaming3932]

good one