ฝัง
- เผยแพร่เมื่อ 4 ก.ค. 2024
- This tutorial teaches you how to create overlapping columns in Elementor. I suppose you all have seen something like that already. Block of content having an image on the left or right-hand side, and then text box on the opposite side, while the text box is covering part of the image.
How to do that in Elementor? Maybe you already know how-to but you just do it the harder way. Maybe you don’t and wanna learn. Either way, I’ll show you how I do it. I’m sure it’s the easiest one because it doesn’t include any additional CSS code, negative margin hack, or whatsoever.
Do these Elementor columns overlap for real or not? Sure they do - in a visual sense, but technically they actually don’t. As a part of this tutorial, I will also demonstrate a couple of non-working methods, all with an intention to provide a responsive-proof and rock-solid solution that actually does work for all.
-------------------------------------------------- EXTRAS!
OoohBoi Steroids for Elementor plugin page:
wordpress.org/plugins/ooohboi...
Visit my Gumroad shop for more cool stuff:
gumroad.com/ooohboi
You might consider buying me a coffee if you find my work helpful for your business:
www.paypal.me/ooohboi
![[Quick & Easy] Overlapping Columns in Elementor](/img/n.gif)
This tutorial was WILDLY helpful!!! I learned so much and it helped me feel confident in completing the Sales Page I was working on - excellent teaching style and very thorough. I'll definitely look to you for more tutorials when I need them for Elementor - thank you so much for this tutorial!
You are a FANTASTIC teacher my friend! Please keep them coming! I never comment on TH-cam videos, but you deserve more subs! Keep that content coming, please don’t get discouraged!
8:50 Tutorial
Thank you
th-cam.com/video/j4hWAFFjuY4/w-d-xo.html
Excellent tutorial! I've been pulling my hair out trying to get my columns to overlap. Thank you so much. Love your humour too!
This tutorial basically teaches you not just giving you methods, first he does it wrong, we all think its right then he explains what was wrong in doing that and shows the right method.. good
Thanks for avoiding the audio background complaints!
AKA a waste of time.
You are one helluva an explainer. I haven't seen someone handhold someone through why something doesn't/ wont work.
The utility value of this particular tutorial may be small... but big up to you friend !
The best video ever. The amount of things I have learned from just this one video. Thank God for you. I will definitely be checking out your other videos.
Not only have you shown us a brilliant method of doing this...but (for me) even more brilliant is that you first showed us the "obvious" methods that just don't work. That's the icing on the cake. Thank you. Oh yes...also thank you for being so detailed in your explanation and in your visuals...not glossing over any steps. Great!!!
Wow, thank you!
This was so helpful! I loved how you showed us why the other ways didn’t work.
Probably the best tutorial I've watched. I think too often people try to teach too much at once, and you don't really learn why you have to do things a certain way. I will be subscribing. Keep up the good work!
Glad you enjoyed it!
This was a great tutorial. I really appreciated learning things from scratch, doing things the right way. My design skills are no great shakes but are getting better. And after this video they have taken a big leap forward. Thanks, Ooh Boi!
Great tutorial! Best one I've watched in awhile. Your style of teaching, and pace is nice. In the last step, where you duplicated the section to reverse the order of columns, I was able to do that by just changing the angle from 90 degrees to 270 degrees. That worked just as well as the way you showed it.
Yes Steve, that seems like a nice alternative. Thanks for sharing a tip!
One of the best tutorial I have watched. Well explained and detailed. Please keep sharing more. Thanks 👍🏻👍🏻👍🏻
Excellent trick! I’ve been a WordPress designer for 10 years but I’m brand new to Elementor and you taught me a lot of things during this tutorial. Especially about closing the panel to be able to see the actual view. Great job and thank you!
Great to hear from you, I hope that my other tutorials may be helpful too!
Another amazing video! I just keep watching, and learning. Everything you teach works like a dream, and makes me look like I know what I am doing!
Wow! I was looking for a simple padding and margin video and found this clinic. VERY helpful! Thanks!
You saved my life. I was looking for a way to master this complexity of layout styles for a long time. Just today I steped into a project in which I had to work with this type of background divisions and also columns overlapings. thank you so much.
Glad I could help!
I'm 5 minutes in to this video and let me tell you, showing examples of what does NOT work is SUCH a great approach, esp. for someone like me who new to Elementor and not very good with it.
Thank you for going to the effort of making this tutorial, it is much appreciated and very helpful!
Excellent tutorial! Thank you! But please get rid of that background noise.
Yeah the music's louder than the tutorial
Yesterday I was wondering how overlapping can be achieved and today your video was in recommended videos. I am amazed by YOU+TUBE. Keep up the good work. This video has more views than others. Definitely you did something right, no wonder.
Thank you for this excellent tutorial. This little trick improves the overall look dramatically.
Loved the detail in this tutorial - this was just what I was looking to do and now I have!! Followed along step-by-step and learned a couple of 'golden nuggets' along the way 😁
Really did appreciate the detail and thorough explanation of what doesn't work and why Vs what does and how...awesome job and thank you!
Thank you very much, I really appreciate your feedback! Hopefully, you also enjoy my other tutorials.
This is an excellent tutorial but your voice is competing with the obtrusively loud background music for the entire video. The music adds nothing - it just makes it harder to concentrate on what you are saying.,
Too late bro. Can't replace audio without video re-upload. Which means ... oh God, I don't even wanna think about. I might even die 💀
Oooh Boi I agree about the music. If you don’t change this one, can you just reduce the volume on future ones?
@@OoohBoi just use music for intro and then dont use anymore till the outro
@@OoohBoi Please Don't as music doesn't even come into it with your voice - keep up the great work as you have opened up New Horizons for me :)
I love your voice and the music was nice.
Goof tutorial. You explained all in details why use this and not that. So perfect. Not just "please copy what i am doing" i like this!! 💪
You are a great teacher and waiting for lots of new tips and tricks from you.
Love the tutorial. Very well explained. Easy to understand! Superb!
I love your tutorials and your plugin. Please keep up the good work.
Thank you Thank You, brilliant clear and concise tutorial. I just spent 2 days messing about with margins, padding etc. only to F*/? everything up. As a complete beginner to Elementor you are now my Elementor GOD!!!!
I don't often comment under TH-cam instruction video's, but I really need to complement yours! I have been struggling with this for ages. Always wondering how I could get these overlapping boxes and be neat on mobile. You have learned me some interesting stuff, such as the mobile reverse columns and by putting the text over the image by using the index (always wondered what it was for haha). Thank you so much! I feel like a leveled up in Elementor in just a few minutes. Keep it going!
Glad it helped and not complain about the musing being too loud!
VERY HELPFUL. I especially like the "setting image to background image" when it wouldn't fit in the "inner section" Thank you!
This is a fantastic tutorial. I achieved the overlap with a negative margin and though that I had to live with it, because i didn't have the pro version. Thank you so much...
Glad it was helpful!
Great video! I loved you showing what doesn’t work and why. I learned much more this way than just showing what does work. Great!
Glad it was helpful!
Re-watching this after 2 years (and really glad I found it again!), and just want to note you really don't need that background music it's quite distracting! Great video, so thanks again!
This is one of the very best tutorials I've seen on TH-cam on ANY subject. You have a great teaching style and this tutorial has helped me immensely. Please keep making tutorials like this. The Elementor folks should hire you! Thanks for taking the time to share your knowledge and skills.
Fantastic tutorial, very useful and straight to the point. Thank you!
Oh you've made me so happy and given me a massive cheesy smile on my face. I've been struggling over the last 4 weeks trying to get my Elementor/WP site up and going - I've started and restarted and given up and started again and become really downhearted about failing at everything and it all looking rubbish. I followed your brilliant tutorial and learnt so much in general about editing with Elementor AND got a really fabulous looking professional effect with the overlap. Thank you so much - you've got a new loyal subscriber. PS, please lower bg music - had to follow with subtitles on. ;)
Thanks for the feedback buddy, really glad to read it helped!!!
Excellent! Just what I needed to know and explained beautifully. Thank you.
Excellent presentation. You are a gifted teacher with, apparently, years of experience. You have a keen mind with great logical progression. Greatly appreciated is showing the "wrong" way of doing something. This strengthens justification of your point. This is my first visit. I will be viewing more.
Thank you for sharing your knowledge and great style!
Glad it was helpful, thanks for watching!
@@OoohBoi You are very welcome! What is your teaching background?!
@@born2bbald12 I have no teaching background, I started this channel to help people better understand Elementor, that's all.
@@OoohBoi Well, my friend, you have a natural gift for communication and especially for teaching! I compliment you! Also, I appreciate your desire to share and serve others!
Have been waiting for these kinds of Elementor tutorials for a long, long time. I appreciate the way you actually create examples of possible ways to do something but show why they may not work. Then you demonstrate the proper way to accomplish the task in step-by-step-fashion. Just excellent. And seeing it done makes a huge difference. I hope you'll keep these videos coming. I think the length is just fine. Too often important details are skipped in the interest of shaving off a few minutes. Thank you, thank you, thank you.
Exellent tutorial, and Very big heart behind your voice !!!!!! thank you boi !
Oooh Boi, thank you! I'm learning so much with your channel. You got a new subscriber. Greetings from Colombia!
Welcome aboard!
Love the tutorial. Easy to understand! VERY helpful! Thanks!
Congrats and thanks for sharing, amazing solution, way better than negative margin approach.
Thank you so much for this video...it was beyond helpful!!! And it was super analytical comparing to other videos. So, it is way better for beginners! Appreciate your time and help!
Glad it was helpful!
I love you for making this video! It is so so so awesomeeee ❤
Thanks dude keep up good work, there should be more tutorials like this, Elementor is kinda yet-to-be-explored thing.
Agreed! Will do my best to get more.
Amazing video! Thanks so much for making it very clear and easy to follow! Legend!
Thank you soooooooooooo much for this tutorial!! I am brand new to Wordpress and just found Elementor but have been going crazy trying to figure out how to create using both. This was a great help to me (except for the music, ha ha. That was very distracting to my already scrambled thought process.)
Thanks for the feedback, hope you gonna enjoy other vids too. All of my new tutorials have no background music.
Excellent tut! You really do great video tutorials. Great voice, pace and easy to follow. Music was OK and I know you have toned it down in your newer vis, this is 1 year old. A lot of people play TH-cam (and Podcasts) at higher speed so music is a bit annoying then. I actually really appreciated that you showed approaches that do not work first, that is a great unique approach. Adding some bookmarks to where the "action" begins is a great way of making everyone happy! Apart from learning something new that I immediately could implement in my own site I for the first time found the use of Inner Sections... Ended up using the BG photo in the outer section BG instead, and as a Slide Show, since Elementor has evolved in the year since this vid was made. Looking forward to your next tut! //Matthias
Aww, thank you for the kind feedback, I really appreciate it!
your logo animation is mind blowing!
Thanks man! Amazing tutorial, saved me a lot of time and effort. Keep up the good work. Cheers!
Thanks for the feedback!
The tutorial is amazing. Thank you
thanx a lot brother i absolutely have no problem with anything (like voice or ant other thing) . i understood each and every thing crystal clear lots of love from india and my side as well continue the great work
Thanks, buddy, glad you read someone had a positive audio experience too!
Checked through ur other videos too and u definitely deserve more subscribers and views. ✅
Brilliant tutorial, thanks learned loads. Appreciate you.
Well explained concepts for Columns and Sections. Very helpful.
This awesome trick also works in Divi. Do the same thing with a two-column, 50/50 row, instead of the inner section. It looks great on the desktop, especially, but on mobile, I prefer to make a "tall" version of the image that looks better on phones. You use it in the same place as the image widget for mobile. I love this channel! So many impressive tricks and ideas.
Oh really?! Thanks for the info mate!
@@OoohBoi, yes! It's the same idea as what you show here. The method works overall, it's only a matter of how to tweak it for other page builders.
Thank you for a great tutorial! and I wouldn't care if you were playing metal. I would just listen over and over until I got the rock solid knowledge you so freely shared.
Thanks for watching with the inner peace on mind...
Thank you so much for this amazing tutorial, my friend! :)
My pleasure!
Great tutorial, you're an amazing tutor!
Thank you so much ❤️🙏I was looking for exactly this 💖
Glad it was helpful!
Ok ... your videos are going to be very useful!! Good work.
WOW this was an amazing tutorial. I really feel like I learned a lot. Thank you!
Glad it was helpful!
Well explained i enjoyed it nobody explain in this detail
Thanks a lot
Keep it going
Glad you liked it
Excellent tutorial! Thank you!
You're very welcome!
Ooooh Brother you are not human, you are an alien. Mind blowing technique
Really helpful and to the point. Will implement this exactly on my website! Thanks
Fantastic tutorial thank you so much, keep up the good work
Great tutorial, THANK YOU!!!
Thank You So Much Man It's Really So Much Needy For Me Today.
Glad I could help, thanks for watching!
fantastic video!! thank you for your help!!
Very good. I'm a beginner, and I like that you show alternate approaches that DON'T work before showing the one that does. Too many tutorials are just "push this button, drag this thing, etc" without explaining WHY. Also, I had no trouble understanding your voice, and I like the energy the music adds. Boring, monotone tutorials put me to sleep.
Thank u Soo Much Sir😍🌹
Really this tutorial help me alot✨
Hey, you are an awesome teacher and an awesome designer. Great work. i follow you.
Very informative, good job
This is amazing bro and this was very helpful for me, thank you thank you thank you soo much, I just subscribed you and watching your all videos. Hope you will make more & more this types of videos for us, thanks again❤️
Oh, thank YOU for watching!
Great Video. I didn't find any problem with the background music. I could hear you perfectly.
What?!? I can't believe someone wrote that! You must be using Beats by Dre 🎧
WHAT A HACK! Brilliant, thank you! Except for 14:07 you said that there's no way to delete the image because it'll go away on Desktop. If you wanted, you could always just go to Responsive and 'Hide on Mobile.' Great video, thanks!
All righty, thanks for the feedback Petia!
awesome tutorials, helped me a lot!
Glad I could help!
AMAZING!!!!! much love !
Thank you very much for this great tutorial !!
Glad it was helpful!
Really a great tutorial. It's amazing!!!!
I like the didactic way you explain things.. and made me visualize. I use beaver builder and this video made think that is possible to port this to BB. Thanks!
Glad it helped, good luck with the Beaver tho!
The video is so so so good, the music is loud, but is so good
Very excellent tutorial, thank you.
Glad you enjoyed it!
Very Nice Tutorial. Thank You :)
Thank you very very much - that was really helpful - keep up tha great support work here on youtube.
Thanks! And thanks for not landing another complaint about the music being too loud.
Amazing! Thank you!
man good tutorial all around
This was a very good tutorial. Thanks
OoohBoi Steroids for Elementor can help you do the effect way easier! th-cam.com/video/HMkazBFTpkE/w-d-xo.html
Thanks for the tutorial !!!
Happy to help!
Thanks for sharing your great knowledge.!!
My pleasure!
Simply great. Thank you.
Fantastic vid! Thank you.
Glad it helped!
Muchas gracias! tu tutorial me ayudo mucho!...
Again a great job
Very good, I learned a lot. Thanks
Thank you! Great job.
Glad it was helpful!
Oooh Boi, great and ingenious soutions (or tricks), and I'm agree with turn the music volume down for next videos.
Any way, now, I'm another suscriber or fan of your channel and techniques.
Thank you