IMO on mobile you can just change the design , just put the image way lower to have a sort of cascade effect , the green box , the image , the arrow , 1 , 2 , 3 , top middle bottom , the main reason behind that is that we don't see the image content anymore another solution is to add transparency and blur to the green container. adjust the opacity then , to add blur these can do ( just to be able to read the text and and have a nice glass effect ) backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); great tutorial I got a lot from this keep it up !
18:46 You don't have to set the height of that container to 0 Just go to user preferences and uncheck "show hidden elements" When you hide an element with the responsive settings it will be gone. Not that grey box anymore.
@@rinodeboer I don't see a purpose on mobile, but I use it on desktop sometimes. Imagine you want a padding or margin of 250px when your screen width is 1920px wide and 25px when your screen width is 430px wide. When you can use clamp, you can make this gradual from desktop to mobile. You can also store a clamp function in a CSS variable and then use that variable as the padding or margin value via the custom unit options.
Adding containers doesn’t impact performance that much, containers are actually a lot lighter than many widgets. Especially what I am doing in this layout where the containers are mainly empty, only used for layout creation.
Hey! This is a great design and and it fits this website of interior design very well. 👍But do you think this massive mobile optimisation over 6 devices is really necessary? Which break points are you setting up (with), can you comment? Is a lot more work I think. I ask me if the browsers can work with these multiple device settings... Merry christmas and a happy new year for you! 🎄🎉
Thank you and Yea, it is more work, but layouts like this are not for people who don’t like custom and pixel perfect designs. And its just the hero section that’s more custom mostly. And the modern browsers works fine with this because Elementor is optimised for them. Merry Christmas to you too 🎄🎅🏼
I would do this different. With only 3 containers and this calc function in custom CSS :root { --boxed-width: 1120px; --margins: calc((100% - var(--boxed-width)) / 2 ) } It's a simple calculation to define the margins: 100% - (1120px divided by 2) As for your container structure: Main container (parent) Ribbon container (child) Image container (child) Main container - Full width 100% and min-height of 80vh -Padding and margin set to 0 Image container - Full width : 1000px (this is 1120px + 110px) - Go to the margins and don't use px, %,... but the custom unit selector (the pencil icon) and add these values: Top: 0 Right: var(--margins) bottom: 0 Left: auto Ribbon container (add all text inside) - Full width: something like 50% (doesn't really matter, what looks good to you) - Go to the padding and once again don't use px, %,... but the custom unit selector (the pencil icon) and add these values: Top: 50px Right: 50px bottom: 50px Left: var(--margins) - go to position and set the ribbon container to position absolute Horizontal offset, left : 0 Vertical offset, top : 50% Go to transform > offset > offsetY : -50% (this will vertically center the ribbon container in the main container) DONE. On smaller devices you need extra breakpoints and you can use normal values for the padding and margins.
IMO on mobile you can just change the design , just put the image way lower to have a sort of cascade effect , the green box , the image , the arrow , 1 , 2 , 3 , top middle bottom ,
the main reason behind that is that we don't see the image content anymore
another solution is to add transparency and blur to the green container.
adjust the opacity then , to add blur these can do ( just to be able to read the text and and have a nice glass effect )
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
great tutorial I got a lot from this keep it up !
18:46 You don't have to set the height of that container to 0
Just go to user preferences and uncheck "show hidden elements"
When you hide an element with the responsive settings it will be gone. Not that grey box anymore.
Oh great, I didn't know this. Thank you
Great to know 👍 this annoys me a lot
Awesome tip. I did not know that either. The grey box is sometimes annoying when you hide an element
Lol, what? Best thing I learnt today.😅
Hoewel ik het meeste wel wist heb ik toch enkele dingen geleerd. Top video Rino. Dankjewel!
I just started watching this video, and I wanted to say before that I would like you to produce more content.
This is great, thank you! I understood another dimension of using containers watching this tutorial.
Brill Rino, always keen to learn more about container possibilities
I’ve learned so much from your tutorials. Thank you 🙏
Excellent tutorial! Well done Rino 🥳
Thank you! 😁
21:17 Use the custom unit selector (the pencil)
Than you can use px, %,... where ever you want. You can even paste clamp functions.
I am aware of that, but how would clamp help me there align that green box?
@@rinodeboer I don't see a purpose on mobile, but I use it on desktop sometimes.
Imagine you want a padding or margin of 250px when your screen width is 1920px wide and 25px when your screen width is 430px wide. When you can use clamp, you can make this gradual from desktop to mobile.
You can also store a clamp function in a CSS variable and then use that variable as the padding or margin value via the custom unit options.
I see, great idea. Thanks for your input
Here we go!
nice, thanks for this, lots of hidden tips :)
Man, you are brilliant 😊
Wow Excellent Broo 💞💕
Your videos come so late! We love u.
What do you mean? Is it too late to learn Elementor?
@ No, please make at least one video in a week! Also we we will happy to learn crocoblock from you!
And also bricks if you’re working with bricks
I will try in 2025 to make more videos, its one of my goals 💪🏼
@ and our goal will be to learn a lot from you
Layouts like this are best created with css grid. Just use a grid container and add some custom css for positioning the elements on the grid.
Great tutorial as always, but kill the background music :-)
Hey, awesome tutorial and great design! FYI, the download link does not work on any of my emails?
even though i select full width for my containers it doesnt show in full width ...Need help in this one
I've just register on your site, but I cannot find this template...
Great knowledge as usual. As I came to understand clamp a little bit more, can we clamp more things like the design instead of adding 5 breakpoints?
Thank you. And Yes, you can use clamp for many other things like Typography, padding, margin, etc.
cool, tyvm!
You have made a very good effort to explain. I have one question: Will installing so many containers have any impact on the speed of the site?
Adding containers doesn’t impact performance that much, containers are actually a lot lighter than many widgets. Especially what I am doing in this layout where the containers are mainly empty, only used for layout creation.
In mobile version (or everywhere) you could give some transparency to the green box, so we can see the image below…
Hey! This is a great design and and it fits this website of interior design very well. 👍But do you think this massive mobile optimisation over 6 devices is really necessary? Which break points are you setting up (with), can you comment? Is a lot more work I think. I ask me if the browsers can work with these multiple device settings... Merry christmas and a happy new year for you! 🎄🎉
Thank you and Yea, it is more work, but layouts like this are not for people who don’t like custom and pixel perfect designs. And its just the hero section that’s more custom mostly. And the modern browsers works fine with this because Elementor is optimised for them.
Merry Christmas to you too 🎄🎅🏼
what are the responsive screens/sizes you use?
Just the default settings from the extra breakpoints Elementor provides.
I would do this different. With only 3 containers and this calc function in custom CSS
:root {
--boxed-width: 1120px;
--margins: calc((100% - var(--boxed-width)) / 2 )
}
It's a simple calculation to define the margins: 100% - (1120px divided by 2)
As for your container structure:
Main container (parent)
Ribbon container (child)
Image container (child)
Main container
- Full width 100% and min-height of 80vh
-Padding and margin set to 0
Image container
- Full width : 1000px (this is 1120px + 110px)
- Go to the margins and don't use px, %,... but the custom unit selector (the pencil icon) and add these values:
Top: 0 Right: var(--margins) bottom: 0 Left: auto
Ribbon container (add all text inside)
- Full width: something like 50% (doesn't really matter, what looks good to you)
- Go to the padding and once again don't use px, %,... but the custom unit selector (the pencil icon) and add these values:
Top: 50px Right: 50px bottom: 50px Left: var(--margins)
- go to position and set the ribbon container to position absolute
Horizontal offset, left : 0
Vertical offset, top : 50%
Go to transform > offset > offsetY : -50% (this will vertically center the ribbon container in the main container)
DONE.
On smaller devices you need extra breakpoints and you can use normal values for the padding and margins.
Frist view🎉
Yo dawg we heard you like dom element bloat so we put containers in your containers in your containers
Frist like bro
Maybe it's too much work and headhache for a not so much amazing result. I mean, it looks great but a full screen is maybe great too.