This is great, thanks for breaking down how achieve this hero layout. Incidentally, I'm focused on the automotive industry, thus this video is right up my alley.
Absolutely fantastic video! Your tutorial on creating advanced container layouts is both insightful and impressive. The way you explained the process step-by-step made it easy to follow along, even though it's an advanced topic. The practical examples with Porsche and the two sides were particularly helpful in visualizing the concepts. Plus, the mention of potential page speed impacts and the focus on desktop usability provided valuable context. Great job, and I'm looking forward to more advanced tutorials!
Dear Rino, thank you very much for this highly interesting and inspiring video. I think the German automotive industry will also be highly delighted with your examples 😉. Best regards from Stuttgart, the hometown of Porsche.
good job Rino. I think you have a really good understanding of Elementor and containers, and you use them very effectively (even without coding!). a lot to learn from you.
Hi Rino! Great tutorial as always. Could make a video showing which browser extensions you use for your everyday work? I've been experimenting with some myself, but I love to see what others use to boost their workspace and I think it might be an interesting topic for a video.
Awesome tutorial, a few months ago, I said you were wrong to keep using Elementor. Now I have to admit you were right. I still use it, and it's the one I like the most for creating web pages, but it urgently needs a class manager
Absolutely positioned content are not responsive even when you make them in different breakpoints. Negative margins stays the same in almost the same layout you left it from the previous breakpoint, while the absolute position don’t give chance for that.
Hi. Instead of vh for the height, I recommend you to use dvh (dynamic viewport) so it actually could creates that full-height experience on mobile with AND without the browser UI. More importantly, if the "side" containers are important enough to be shown above the fall, they should also be displayed on mobile. It's easy to put them above and under the main container by switching the parent container's direction (the full-height experience would remain).
Rino, regarding container heights - Have you played around with the custom height setting (the pencil icon) and then used "calc(100vh - 40px)"? I've used 40px as an example, but you could set the height to the height of the bottom container box. I find it works well when working with navigation bar heights etc too. Would love to hear your thoughts.
Rino de Boer, on your websites, there are auto-play videos, I know there are many website developers... beginners who have tried everything like I have to get my embedded video to auto-play in various browsers. There is no doubt the CSS code is somewhat complicated; however, once you get it, you got it, right? Exhausted trying everything, not a coder. Can you provide us with a CSS code for video auto-play in browsers? Thank you for your tutorials; they have saved me so much pain, and I turned my friends on to them.
Hello Rino, I love your videos, I'm learning a lot, both WordPress and English, I'm new to this, and I would like to know how you get clients, what is the best strategy you recommend. Greetings from Ecuador
Hello ! I am following step by step your instructions to have the nav bar with the central section of 1120 px full width but it cimes uo always smaller than that ! it's making me crazy !! Let me be more specific...measurement are correct if I view the full page ( hiding the menu on the left) , you instead got the right measurement even with the menu on the left on ! Where am I wrong? Thank you
That is probably because of the size of your screen. You will need a bigger monitor to see the website in the true width. You can also cheat a little by zooming out on your browser with CMD/CTRL -
Hello ! very good tutorial, thank you ! what kind of app or software o something like that do you use to measure pixel directly on the screen? thank you
Hey Rino! Hve you ever dealt with 4k resolution monitors? if yes, do you knwo if there's a way to make text "responsive" in that sense? Thank you and have a good one Designing for 4k monitors is the new responsive design 😂
Because the header is an transparent overlay header that also has a negative margin, so the content gets pulled under it basically. I have some (older) transparent header videos on my channel.
Thank you for the video! I've been looking for tutorials on how to move Adobe XD designs to WordPress Elementor but haven't found one that shows the actual process. Can the design be moved as a PDF or as individual files? A video of the actual process would be great. Can you please share how to do it? Or if anyone is familiar with this process, I would highly appreciate it. Thanks in advance!
There are web tools that make it so easy as Canva, but that almost always create problems for responsive devices. Canva doesn’t have to deal with responsiveness, that’s why it can stay easier.
I cannot express enough how helpful both of these videos were. I was spinning with the containers feature not clicking in my brain at first.
Thank you for sharing. These are tricks of the trade of the "no code designer". It is a great video, very practical. Keep them coming please.
Love the way you are always pushing Elementor beyond the basics. Very inventive. Well done and many thanks for sharing it with us.
Man!!! Please continue doing these Advanced Tutorials. It is so easy to understand it from you
This is great, thanks for breaking down how achieve this hero layout. Incidentally, I'm focused on the automotive industry, thus this video is right up my alley.
Great Advanced Tutorial. It was short and easy to understand if you're familiar with Elementor. It was refreshing to see something not so "basic."
I'm guessing you just gave me the starting point i was missing for a project. Great job Rino 😁
Absolutely fantastic video! Your tutorial on creating advanced container layouts is both insightful and impressive. The way you explained the process step-by-step made it easy to follow along, even though it's an advanced topic. The practical examples with Porsche and the two sides were particularly helpful in visualizing the concepts.
Plus, the mention of potential page speed impacts and the focus on desktop usability provided valuable context. Great job, and I'm looking forward to more advanced tutorials!
Dear Rino, thank you very much for this highly interesting and inspiring video. I think the German automotive industry will also be highly delighted with your examples 😉. Best regards from Stuttgart, the hometown of Porsche.
very simple yet so elegant. loved it!
good job Rino. I think you have a really good understanding of Elementor and containers, and you use them very effectively (even without coding!). a lot to learn from you.
Hi Rino! Great tutorial as always. Could make a video showing which browser extensions you use for your everyday work? I've been experimenting with some myself, but I love to see what others use to boost their workspace and I think it might be an interesting topic for a video.
Awesome. Been strugling myself aswell. Will save this video for a coffe break!
Awesome tutorial, a few months ago, I said you were wrong to keep using Elementor. Now I have to admit you were right. I still use it, and it's the one I like the most for creating web pages, but it urgently needs a class manager
Respect man, it takes balls to say that. And yes, absolutely. It urgently needs a class manager.
This is from his course, really great tutorial ⭐⭐⭐⭐⭐
Great use of Elementor. Have learned so much from you.
Try using position absolute to overlap your content, will save you a headache trying to work with negative margins on your overlapping content.
Absolutely positioned content are not responsive even when you make them in different breakpoints. Negative margins stays the same in almost the same layout you left it from the previous breakpoint, while the absolute position don’t give chance for that.
I'd take negative margins over position absolute any day...
100% agree that position absolute is the best way.
Good job...This is amazing tutorial you ever created!
Beautifully crafted! Thanks a lot mate
Hi. Instead of vh for the height, I recommend you to use dvh (dynamic viewport) so it actually could creates that full-height experience on mobile with AND without the browser UI. More importantly, if the "side" containers are important enough to be shown above the fall, they should also be displayed on mobile. It's easy to put them above and under the main container by switching the parent container's direction (the full-height experience would remain).
Rino, regarding container heights - Have you played around with the custom height setting (the pencil icon) and then used "calc(100vh - 40px)"? I've used 40px as an example, but you could set the height to the height of the bottom container box. I find it works well when working with navigation bar heights etc too. Would love to hear your thoughts.
That’s also a solution. Sounds like the result will be the same. Thanks for your input 🙏🏻
@@rinodeboer You are welcome man. Thanks again for the great content! Really liking the more technical Elementor stuff! Cheers 🙂
Very good suggestion
Thank you for sharing!
Hi Rino, Have you tried dvh instead of vh?
sbam !!! another milestone
amazing, thanks rino
Love the tut, but for the socials you can either use custom css instead to center the element
Thank you. I am curious how you do pictures. I could use a tutorial as how you find amazing pictures or do you make them yourself?
+1
Thats beautifull
Wat leuk man! Dank je wel vir dieze cool tutorial!
How about the responsiveness of the section?
Rino de Boer, on your websites, there are auto-play videos, I know there are many website developers... beginners who have tried everything like I have to get my embedded video to auto-play in various browsers. There is no doubt the CSS code is somewhat complicated; however, once you get it, you got it, right? Exhausted trying everything, not a coder. Can you provide us with a CSS code for video auto-play in browsers? Thank you for your tutorials; they have saved me so much pain, and I turned my friends on to them.
What is the tool you use to measure the width and height as in time 6:33?
You are Elementor GOD !
Please tell me what width of the main frame do you use?
THANK YOU>>>>>>!!!!
great learn alot from you
So awesome! And thanks for tips on containers and columns
Curious if you sell this layout and all of your best designs Rino?
I am not selling any of my designs yet. But I will think about it 🙏🏻
Hello Rino, I love your videos, I'm learning a lot, both WordPress and English, I'm new to this, and I would like to know how you get clients, what is the best strategy you recommend. Greetings from Ecuador
can i build my website design and added design in elementor wordpress????/
Hello ! I am following step by step your instructions to have the nav bar with the central section of 1120 px full width but it cimes uo always smaller than that ! it's making me crazy !!
Let me be more specific...measurement are correct if I view the full page ( hiding the menu on the left) , you instead got the right measurement even with the menu on the left on !
Where am I wrong? Thank you
That is probably because of the size of your screen. You will need a bigger monitor to see the website in the true width. You can also cheat a little by zooming out on your browser with CMD/CTRL -
@@rinodeboer thank you!
Should be proud !
Question: Why your Elementor bar looks like that? Thats a new version or old version? Mine looks diferent.
Hello ! very good tutorial, thank you ! what kind of app or software o something like that do you use to measure pixel directly on the screen? thank you
ruclips.net/video/Bs61HIjdOTg/видео.html
WOW ... good to see you. I thought you retired! LOL
Oh no, I have not. I am just changing up my channel content.
Amazing !!
perfect
Hey Rino! Hve you ever dealt with 4k resolution monitors? if yes, do you knwo if there's a way to make text "responsive" in that sense?
Thank you and have a good one
Designing for 4k monitors is the new responsive design 😂
Please create more designs like this but make them mobile friendly. What if you also sell these designs as a .json file for us to purchase.
i dont know how the header not pushing down the upper container? and how it is not counts in height percentage?
Because the header is an transparent overlay header that also has a negative margin, so the content gets pulled under it basically. I have some (older) transparent header videos on my channel.
@@rinodeboer interesting. Thanks a lot 👍
Thank you for the video! I've been looking for tutorials on how to move Adobe XD designs to WordPress Elementor but haven't found one that shows the actual process. Can the design be moved as a PDF or as individual files? A video of the actual process would be great.
Can you please share how to do it? Or if anyone is familiar with this process, I would highly appreciate it. Thanks in advance!
This video pretty much explains that. Its in Figma, but the process is almost identical to Xd:
ruclips.net/video/rrd91OK9YYI/видео.html
Wonderful ! Thank You so much@@rinodeboer I really appreciate it. Love your energy and channel! 🙏💫
Hoe toevallig ik zocht dit ook recent voor een klant maar kwam ik er met custom html en css uit
I Love Undersztand
😍😍😍
Are you getting older Rino?😄
div, div div div... display flex, align self center...
Didn’t you quit making videos?
Who said that?
you saved my sorry ass. thanks
Designing in figma to do the same thing in Elementor is pepega
This man still think he's a developer
not happy with 😂elementor and lining things up. horrible z should be as easy as Canva
There are web tools that make it so easy as Canva, but that almost always create problems for responsive devices. Canva doesn’t have to deal with responsiveness, that’s why it can stay easier.
very good video thank you Rino