Bento Hero Banner WordPress Tutorial - Elementor

[@Joseleocol]

Imran, I don't know if your middle name is Banner, but you're definitely my hero!

[@Mr_Kenneth]

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.

[@thomasbjohnston]

11:30 An alternative way to align CTA buttons to the bottom of the container is set the element above it to 'grow'

[@konstantinosntamadakis9439]

or margin-top: auto

[@kennyconfidence7567]

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

[@steala]

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.

[@websquadron]

Yup I set to Grow :) I’ve left explaining that for a separate video

[@Thailand-Divers-Phuket]

Nearly 50K - Congrats Imran :) :)

[@websquadron]

Thanks! 😃

[@paultitmuss]

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.

[@websquadron]

Agreed as it depends on the context and what follows on the page.

[@ar_dani_]

If you have a huge site, user can go directly where he needs

[@mdasikresources]

This was cool. Definitely trying this in my website🙌

[@shawnjolly4717]

thanks for adding the mobile look.. i like this style.. thanks for doing a tutorial on it.

[@katod5056]

Thank you for this SUPER helpful video!

[@websquadron]

Glad it was helpful!

[@TheKini1989]

Definitely trying this one on my new website ❤

[@websquadron]

Please do!

[@lancegfoin9117]

Lovely stuff! 🙂

[@daveden2]

Nice! Bento is the most popular layout these days

[@websquadron]

It sure is!

[@MelTaylor]

Excellent tutorial on bento design using flex box.

[@websquadron]

I'll do one for Grid soon too.

[@simon_vann]

Great video Imran. Are there any reports on how the Bento style affects conversion from the hero section vs traditional? Good or bad.

[@websquadron]

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.

[@Munhu]

Another good one.

[@trafficzombie23]

Great video again. How would you layout this on mobile?

[@websquadron]

Fast forward and you’ll see the mobile view. In that scenario it should just be containers stacked rather than side by side

[@romeldiaz7796]

When you reversed the gradient background, did you apply the gradient individually on each child container?

[@websquadron]

Yup :( Manually :( :(

[@honeypeadigital]

I like this!

[@websquadron]

More to come!

[@WP_Wolfs]

Nice idea

[@DonDiablo_US]

You are the best

[@kevinj4862]

This is probably a dumb question, but how do you get the plus sign in each container?

[@websquadron]

Do you mean the icon or the mask?

[@AngelicaCamargo-u1k]

My elementor doesnt show the flex container structure. Can someone help me find this structure? Thanks!!!

[@websquadron]

Go to Elementor > Settings > Features And then make sure that Flexbox is set to Active

[@xsiete25x]

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"

[@websquadron]

As in display:none

[@xsiete25x]

of course but for the editor,@@websquadron

[@Jim.Hummel]

Nicely done, but there's a small problem...now I'm hungry!

[@websquadron]

Yum, yum.

[@todayinsingapore]

Someone should A/B test this for conversion.

[@websquadron]

This is just an example of using Bento :)

[@istiquritconsultant]

Lovely

[@tonychan9062]

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.

[@websquadron]

This is just an example

[@jtisaks8569]

very nice

[@websquadron]

Thanks

[@t.t.2977]

bento grids are the cancer of webdesign in 2024.

[@websquadron]

Or another way of designing.

[@shibupandit24]