Super-easy Overlapping Columns in Elementor (PRO)

[@edwards9845]

Great video! What I really like about your videos is that they are clear, easy to follow. But most importantly you show how to check / configure for responsiveness! Thank you!

[@fz6yamaha]

I usually never take the time to comment,---my friend, you are a life saver, I was stuck in my "no cannt do, cannot be done" -- then I humble myself to "I do not know how to do it - lets learn - someone had to have done it" instead, and then I came across your video, long story short, I liked it, I commented on it, I subscribed to it, and I thank youuuuuu!! - Thanks for putting the time and work on this video that help many of us out there.

[@OoohBoi]

Thanks for the feedback! If you want to make it one step further... my advice is to download the "Steroids for Elementor" add-on and use the Breaking Bad extension to create all kinds of overlaps via the user-friendly interface. Just ask Google about "Steroids for Elementor", it's 100% free, and there are over 20 different extensions included in the package. I've made that add-on a while ago in order to make everyone's life with Elementor easier. No PRO needed!

[@bigtek1537]

Excellent Tutorial! Thank you, So clear and easy to follow

[@brunovincent1969]

No more music, bravo, you listened to the feedback, excellent ;)

[@dynamic-homepages]

Thanks again, a week ago, this was the very first Video that i watched from you. But all that CSS stuff, i never heard of it. So i watched more of your Videos. Even the last one about the Columns and those 2 Pictues to make it responsive. But now i'm watching this Video again and i could understand everything and do it by myself. thanks to you Oooh Boi =)

[@OoohBoi]

Thanks for the feedback Timo, I'm glad to read that my videos helped you learn the CSS!

[@roicarl]

Excellent job - clear, concise, and complete!

[@mattinikcube]

you really fixed what's wrong on the previuos: the double load. you gained a subscriber here. but I have to search it, if you put a reference on the previous video I think it would be better so anyone else could easilly reach this better solution. keep going like that.

[@raphaelkassim1124]

ur channel deserved shout out from elementor this tutorial is too good! thank you oooohhboiii

[@OoohBoi]

Thanks for watching and the feedback!

[@lakenanj]

Good stuff. Thanks very much. I like that you explain things that might seem similar but give a result that is not so good. You are a good instructor.

[@design126]

Excellent tutorial! Subscribed in a heart beat! So informative and simple to understand. Keep up the great work! You've got a new fan! 😊

[@danyyu2641]

I like so much your tuto. So concise !! And no background music Thanks.

[@OoohBoi]

Your welcome, thanks for watching it!

[@djmwebsites1529]

Excellent. Many ways to get this effect but this one is definitely the best. Thank you

[@Mikewcfl]

Great tutorial. Thank you! Instructions were clear and easy to follow. Well-done!

[@OoohBoi]

Thanks! Go for "OoohBoi Steroids for Elementor" add-ons library which can be downloaded from the WP's official plugins repo. There's an extension named "Overlaiz" inside (as a part of the package/library) and which helps you do all kinds of overlappings easy way.

[@avigailomichael]

He's back, he's back! Yaaaay!!!

[@franktielemans6624]

Yeah, he doesn't make lots of tutorials, but all of them are top notch, unique and super usefull for every Elementor user.

[@papayawebmedia]

From Mexico... excellent tutorial!

[@OoohBoi]

Glad you enjoyed it!

[@1001traviswong]

Subscribed with notification on! Please keep it going👍🏻👍🏻

[@Randomguy23818]

Thanks for the videos. They are helpful. Did you have a video where you show how you set up the section with the colored background and button?

[@OoohBoi]

Thanks for watching! I don't have a video on that topic, I guess it's pretty-much basic stuff...

[@IanBursill]

Superstar! Great tutorial, thanks so much for sharing. You've a new subscriber!

[@karenmillstraining]

Fantastic, explained so well it is so easy to follow. Thanks

[@MrNMertens]

This really helped me out, thanks so much!

[@jeremykoch3148]

you're the elementor goat.

[@OoohBoi]

OK, if you say so...

[@abelm3972]

With the new Elementor updates now using flex and grid, this method is not working anymore... Do you have an updated tutorial? Thanks!

[@md.shamsuzzaman3691]

It's really an amazing video. This video content is very much clear and understandable. Thanks for sharing this video.

[@muchadesign]

Good technique! Thank you!

[@fifty095]

great tutorial, can’t wait to see the next one! Good job

[@rakibmridha8508]

Your videos are very helpful. Please keep making this kinda video. And obviously thank you very much.❤

[@OoohBoi]

Thanks, mate! I'll keep the things rolling as long as there's someone to watch it.

[@shulapedida]

Life-saver! Had a little difficulty at first because my css panel shows an error icon whenever I type the word selector and the color-coding isn't the same as what shows on your panel. I thought there was some bug or sth. It turns out I just have to ignore those and continue as you teach.

[@OoohBoi]

It looks like you have to switch the Browser. Use Firefox with Elementor and keep it up to date.

[@shulapedida]

@@OoohBoi Helpful! Thanks.

[@muehle16]

Thank you very much for the nice tutorial. Is it possible to insert a slider instead of one picture?

[@OoohBoi]

Yes. Video file too.

[@muehle16]

@@OoohBoi Thank you very much, I will do a try out 😉

[@alvaro_bueno]

Amazing tutorial. Really thank you for share this knowledge. Without your help, I would have spent many hours investigating. Playing with the z index and the width offset for columns and background overlay options you can deal with all you imagin.

[@OoohBoi]

Glad it helped!

[@gonzaloprado6659]

Thanks for the video. Can you please explain me what is the real difference of choosing backround overlay instead for the column instead of tradicional backround? I think you can so the same setting an image for backround. Thanks

[@OoohBoi]

As I mentioned ... Background Overlay is ABSOLUTELY positioned element (on its own) while the Background refers to the column or section itself. And both of these are NOT ABSOLUTELY positioned. You can move them around by using negative margins which sux. Hope it makes sense 🤗

[@OoohBoi]

​@Jim Conroy I dislike negative margins, I use them only in case there's no other choice or the alternative 🤗

[@karinaelias8124]

In the Custom CSS panel I'm getting an error that selector. elementor-background-overlay {width:140%;} is overqualified. There is a yellow triangle icon with an exclamation point.

[@pietrogreco4809]

Hi, i'm having trouble applying your css code with the image on the right column. How can i extend the image width to the left? Thank you!!

[@OoohBoi]

Here's the training file that I made for another user: cutt.ly/QucpKW9 Download, unzip, then import to Elementor as any other template file. You'll find the required CSS code too. Just to mention that the second example involves the usage of "Steroids for Elementor" add-on so be sure to install if the things don't look right or you are about to go for this method.

[@nowucme4149]

selector .elementor-background-overlay{ width: 140%; } @media(max-width: 767px) { selector .elementor-background-ovelay { width: 100%; } }

[@iwotube]

thanks!

[@sirchopper3844]

IMPORTANT: Hi Carmi, you have MISSED the letter 'r' from the word 'overlay' in the media query.

[@edwards9845]

Not sure why the code doesn't work. Had to amend it to this for it to work. Hope it helps someone out. @media screen and (min-width: 768px){ selector .elementor-background-overlay {width: 140%} } @media screen and (max-width: 767px){ selector .elementor-background-overlay {width: 100%} }

[@ferdianlie]

Hi great video man. Can I ask what is the CSS code to make the column overlap to the left? Thanks in advance

[@OoohBoi]

My advice is to download "Steroids for Elementor" add-on and use the Breaking Bad extension to create all kinds of overlaps via user-friendly interface. Just ask Google about "Steroids for Elementor".

[@ferdianlie]

@@OoohBoi thanks man for the advice. gonna try it. amazing tutorial btw.

[@rukkyneel2174]

again, as always..great work, awesome tutorial..thanks.

[@OoohBoi]

My pleasure!

[@ianforestsussexdj]

Great tutorial. Can you tell me what fonts you used in the text boxes?

[@OoohBoi]

Montserrat (title) + Rubik (text). Nice combo. You should try Fontjoy: fontjoy.com/

[@ianforestsussexdj]

@@OoohBoi thank you :)

[@wd_online]

Nice tuorial I really love it, I tried tot do the same. Great success. Only one minor problem. Responsivenes works in Elementor view, but not on my phone. Am I doing something wrong?

[@OoohBoi]

Not sure what exactly is not working ... I suppose that the columns don't overlap properly, correct? The screenshot and device info (model, browser, Android or iOS) might help to resolve the problem.

[@wd_online]

@@OoohBoi solved the problem by increasing the height of the spacer (was 50px). Have to see the video again, to see how you did that. But anyway compliments for your video's. Looking forward to the new ones.

[@juanra.ortizp]

Great tutorials dude. Amazing channel.

[@laura.exigua6205]

Thank you so much for this tutorial! You deserve way more likes and subs. You really saved me with this one.

[@OoohBoi]

Awesome! Thanks for a feedback!

[@niosys]

Cool! Thx for sharing. Keep going

[@OoohBoi]

Thanks for watching!

[@kerry-leerodighiero6182]

Thank you!! Your videos are amazing!

[@OoohBoi]

You are so welcome!

[@mylesformby3205]

This is AWESOME and exactly what I was looking for! Thank you thank you!

[@twbashar]

Wow. You're just awesome bro.

[@nicholasaguirre2558]

How did you style the header text? Like the bold word inside the thinner typography? I am sure I could figure it out with some CSS but I was wondering how you achieved it.

[@OoohBoi]

You can use STRONG or B (outdated) html tags to wrap the word or a chunk of text if dealing with Heading widget. Or... simply highlight the word then chose "B" (as bold) from the context menu (open automatically upon selection) if dealing with Text editor widget.

[@nicholasaguirre2558]

@@OoohBoi I figured it out after I posted this message. I guess I had to change the weight of the font. The default font and weight was making everything bold for headers. Not sure how easy it is for you to go but could you post the live examples you do in the videos? Sometimes I like to look at the source code of pages and just see live examples I can interact with. I am sure I am not the only one. Thank you again for the video!

[@dineshkaushish5636]

Why use custom CSS if this can be achieved through using margins?

[@OoohBoi]

It's good to have the alternative... for instance; I have a wife and the neighbouress.

[@joebalingit]

Man, you're AWESOME!!!

[@destromania]

Has anyone else encountered the following problem? I have designed 3 successive overlapping sections on a page like Oooh Boi above. It looks good until I preview (and live) when only the first section looks as it should and the following 2 it's as if it ignores the CSS codes and just puts both colums beside eachother. Can't figure it out.

[@destromania]

OK just read that Elementor will ignore the 2 Custom CSS instances after the initial one.

[@OoohBoi]

How about this one: kzbin.info/www/bejne/rWmupZZ_ZaaKorc

[@leodinnissen3329]

where can i find the template who is used?? Thanks

[@OoohBoi]

No template but since recently overlapping thing is a part of Steroids for Elementor add-on.

[@tjveach]

Good job, great points

[@tracyleeds909]

HI great video- I cannot see the CSS very well as my resolution isn't very good- would you mind typing it into the comments?

[@OoohBoi]

Please use my plugin "Steroids for Elementor". With the Breaking Bad extension the custom CSS is not needed, everything works via the user-friendly interface.

[@Wooshka_DB]

dang the left CCS part isnt working for me.

[@OoohBoi]

Go for "Steroids for Elementor" add-on. It exists of 20+ extensions for Elementor widgets and elements. One of them is named Overlaiz, and it can be used for making all kinds of overlaps. I've made it a while ago, it's free, just ask google about "Steroids for Elementor".

[@DickieLim]

Hi Oooh Boi, when I set the CSS code they tell "Tell me the rule is empty" what does this mean?

[@OoohBoi]

Mate, I've almost spent the night trying to figure out your question 🤕

[@DickieLim]

@@OoohBoi Sorry now ok except the custom CSS @media still not working on mobile

[@future-flips]

Thank you sooooooooooooooo much buddy!!!!!!!!!!!!!

[@OoohBoi]

You're welcome!

[@clevanpollard]

Hey how can you make the columns overlap in mobile ?

[@OoohBoi]

Yes, you can if you omit that media query.

[@clevanpollard]

Just the same way you show how change the high and with?

[@OoohBoi]

@@clevanpollard no, simply don't define any media query - it starts with @media (max-width: 767px) { ... }

[@clevanpollard]

Okay thanks I’ll try that awesome video by the way keep it up do some more I just subscribe to your channel 👍🏾

[@clevanpollard]

Can you make a video about pre-load page, page transitions with different colors and last but not least how to make page fade out examples of this site even it’s not WordPress the-goonies.webflow.io/

[@elisael8654]

super helpful!

[@rodgreen2449]

I love it man

[@mustafamohsen]

Great stuff man! Thank you, keep it up! There's something in the sound, maybe an AC or fan or something. Maybe reducing it will give even better quality

[@OoohBoi]

I was in the server room 😳

[@mustafamohsen]

@@OoohBoi lol it's ok :) . Content is the king, everything else is extra ;)

[@edwards9845]

Brilliant!

[@samuelowolabi3124]

Thank you

[@dynamic-homepages]

OMG duplicated it, but on the Tabletdisplay it was soooo weird, i was searching for the mistake, in the end my webbrowser was minimized by 30%, so better always check you page while you work with 100% view in the webbrowser xD

[@OoohBoi]

Please use "Steroids for Elementor" plugin that I made a while ago. There's an extension named "Overlaiz" (one of 22) that helps you create all kinds of overlaps via the Elementor interface instead of the custom CSS. Just ask Google about Steroids for Elementor...

[@dynamic-homepages]

Actually, after i watched dozens of your videos, then one video was about "Steroids for Elementor", i downloaded it before, because i was using some of your awesome templates. then i realised that i could use your "Steroids for Elemetor" to do the same, but much easier. Thanks for that one

[@maksym9228]

I did it with margins 😂 Thank you!

[@websitepiec2019]

You're awesome :)

[@marknasri1201]

thanks, the best

[@nabeelahmed979]

great

[@wgm247]

Amazing

[@NarasimhaB]

Missing the background music, it is just not the same anymore ;)

[@OoohBoi]

It's getting even worse when it comes to fresh tutorials...

[@Tphod]

Thanks

[@annebovelett]

Yayy!!!!! Thank you :-)

[@misterdj7232]

This doesn't work anymore.

[@OoohBoi]

That's why you should use my plugin "Steroids for Elementor". With the Breaking Bad extension, the custom CSS is no longer needed.

[@banglabeastfr]

thanks for removing background music.

[@OoohBoi]

No problem!

[@techtalks003]

Amazing