Bento Hero Banner WordPress Tutorial - Elementor

Ever wanted to show more in a great way. Let's explore some Bento.
Bento Hero Banner WordPress Tutorial - Elementor
Elementor Hosting - managed wordpress hosting :
be.elementor.c...
Elementor Pro - The builder that will make you a pro
be.elementor.c...
Get our Awesome 'How to Build an Elementor Website Course' - Lifetime Updates and access to New Modules at no extra cost: learn.websquad...
Join our 'How to Start a Web Design Business' Course - and use strategies to grow, get clients, and generate recurring income: websquadron.co...
Book your 1-2-1 Consultation: websquadron.co...
We love to create - share - respond - and deliver.
🧐 Learn with our Mastery Modules: websquadron.co...
🔗 All of our Important Links: websquadron.co...
😃 Join our Facebook Group: / 3309523509284305
😃 Get Code Snippets Pro: r.freemius.com...
😃 Get Elementor Pro: be.elementor.c...
😃 Boost your KZbin Analysis: www.tubebuddy....
👕 Get our Merchandise: websquadron.co...
🥹 Support us: paypal.me/Webs...
Hire us to work on your Website!
💌 [e-mail]
👩‍💻 Visit websquadron.co.uk

[@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.

[@Joseleocol]

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

[@mdasikresources]

This was cool. Definitely trying this in my website🙌

[@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

[@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

[@shawnjolly4717]

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

[@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

[@Thailand-Divers-Phuket]

Nearly 50K - Congrats Imran :) :)

[@websquadron]

Thanks! 😃

[@katod5056]

Thank you for this SUPER helpful video!

[@websquadron]

Glad it was helpful!

[@MelTaylor]

Excellent tutorial on bento design using flex box.

[@websquadron]

I'll do one for Grid soon too.

[@lancegfoin9117]

Lovely stuff! 🙂

[@TheKini1989]

Definitely trying this one on my new website ❤

[@websquadron]

Please do!

[@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

[@Munhu]

Another good one.

[@daveden2]

Nice! Bento is the most popular layout these days

[@websquadron]

It sure is!

[@Jim.Hummel]

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

[@websquadron]

Yum, yum.

[@WP_Wolfs]

Nice idea

[@AIisMyBff]

Someone should A/B test this for conversion.

[@websquadron]

This is just an example of using Bento :)

[@honeypeadigital]

I like this!

[@websquadron]

More to come!

[@DonDiablo_US]

You are the best

[@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

[@istiquritconsultant]

Lovely

[@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.

[@romeldiaz7796]

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

[@websquadron]

Yup :( Manually :( :(

[@jtisaks8569]

very nice

[@websquadron]

Thanks

[@user-ln4jz5gz2e]

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

[@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?

[@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

[@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

[@t.t.2977]

bento grids are the cancer of webdesign in 2024.

[@websquadron]

Or another way of designing.

[@shibupandit24]