A little trick I use when working with a few containers, is to assign a temporary colours to the parent and each child. This makes it easy to resolve any layout and padding issues on multiple devices.
This is beautiful for an e-commerce website that deals with different types of products, client will click on the type of product they are visiting the site for
Personally, I think this works well as an internal section, but doesn’t have the impact of a traditional hero section. Just my opinion, and I respect others’ view on this.
Great videos as always! this has nothing to do with the video but do you know a way to add css to the elementor editor? to hide certain things? 😅 let's say intrusive "alerts"
What's the point to turn a beautiful hero banner looking like mid section? Just to save a little bit of rolling-down to get other information? A banner in full size Image always give the best impact and help tell your story. You new arrangement just doesn't catch eyes.
![Lp. Сердце Вселенной #60 РОЖДЕНИЕ ЛОЛОЛОШКИ [Финал] • Майнкрафт](http://i.ytimg.com/vi/YoR0pAV9FVQ/mqdefault.jpg)
Imran, I don't know if your middle name is Banner, but you're definitely my hero!
A little trick I use when working with a few containers, is to assign a temporary colours to the parent and each child. This makes it easy to resolve any layout and padding issues on multiple devices.
This is beautiful for an e-commerce website that deals with different types of products, client will click on the type of product they are visiting the site for
11:30 An alternative way to align CTA buttons to the bottom of the container is set the element above it to 'grow'
or margin-top: auto
A trick that I often use @ 12:43 is instead of absolute positioning, I set the previous immediate element to "flex expand". Also a bit simpler too.
Yup I set to Grow :)
I’ve left explaining that for a separate video
This was cool. Definitely trying this in my website🙌
thanks for adding the mobile look.. i like this style.. thanks for doing a tutorial on it.
Nearly 50K - Congrats Imran :) :)
Thanks! 😃
Personally, I think this works well as an internal section, but doesn’t have the impact of a traditional hero section. Just my opinion, and I respect others’ view on this.
Agreed as it depends on the context and what follows on the page.
If you have a huge site, user can go directly where he needs
Definitely trying this one on my new website ❤
Please do!
Excellent tutorial on bento design using flex box.
I'll do one for Grid soon too.
Nice! Bento is the most popular layout these days
It sure is!
Thank you for this SUPER helpful video!
Glad it was helpful!
Great video again. How would you layout this on mobile?
Fast forward and you’ll see the mobile view. In that scenario it should just be containers stacked rather than side by side
Lovely stuff! 🙂
When you reversed the gradient background, did you apply the gradient individually on each child container?
Yup :(
Manually :( :(
Great video Imran. Are there any reports on how the Bento style affects conversion from the hero section vs traditional? Good or bad.
It very much depends on the content/appeal. For instance, when it's a 'must have' product, the more we see - the more we want it.
Great videos as always! this has nothing to do with the video but do you know a way to add css to the elementor editor? to hide certain things? 😅 let's say intrusive "alerts"
As in display:none
of course but for the editor,@@websquadron
This is probably a dumb question, but how do you get the plus sign in each container?
Do you mean the icon or the mask?
Another good one.
Nicely done, but there's a small problem...now I'm hungry!
Yum, yum.
Nice idea
My elementor doesnt show the flex container structure. Can someone help me find this structure? Thanks!!!
Go to Elementor > Settings > Features
And then make sure that Flexbox is set to Active
Someone should A/B test this for conversion.
This is just an example of using Bento :)
I like this!
More to come!
You are the best
very nice
Thanks
What's the point to turn a beautiful hero banner looking like mid section? Just to save a little bit of rolling-down to get other information? A banner in full size Image always give the best impact and help tell your story. You new arrangement just doesn't catch eyes.
This is just an example
Lovely
bento grids are the cancer of webdesign in 2024.
Or another way of designing.