ไม่สามารถเล่นวิดีโอนี้
ขออภัยในความไม่สะดวก
Bento Hero Banner WordPress Tutorial - Elementor
ฝัง
- เผยแพร่เมื่อ 6 ก.พ. 2024
- 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.com/visit/?bta=2...
Elementor Pro - The builder that will make you a pro
be.elementor.com/visit/?bta=2...
Get our Awesome 'How to Build an Elementor Website Course' - Lifetime Updates and access to New Modules at no extra cost: learn.websquadron.co.uk/
Join our 'How to Start a Web Design Business' Course - and use strategies to grow, get clients, and generate recurring income: websquadron.co.uk/how-to-star...
Book your 1-2-1 Consultation: websquadron.co.uk/socials
We love to create - share - respond - and deliver.
🧐 Learn with our Mastery Modules: websquadron.co.uk/web-design-...
🔗 All of our Important Links: websquadron.co.uk/socials/
😃 Join our Facebook Group: / 3309523509284305
😃 Get Code Snippets Pro: r.freemius.com/10565/3304295/
😃 Get Elementor Pro: be.elementor.com/visit/?bta=2...
😃 Boost your TH-cam Analysis: www.tubebuddy.com/websquadron
👕 Get our Merchandise: websquadron.co.uk/merchandise
🥹 Support us: paypal.me/Websquadron
Hire us to work on your Website!
💌 info@websquadron.co.uk
👩💻 Visit websquadron.co.uk
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.
Imran, I don't know if your middle name is Banner, but you're definitely my hero!
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
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
Nearly 50K - Congrats Imran :) :)
Thanks! 😃
thanks for adding the mobile look.. i like this style.. thanks for doing a tutorial on it.
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
Lovely stuff! 🙂
Another good one.
Thank you for this SUPER helpful video!
Glad it was helpful!
Excellent tutorial on bento design using flex box.
I'll do one for Grid soon too.
Nicely done, but there's a small problem...now I'm hungry!
Yum, yum.
Definitely trying this one on my new website ❤
Please do!
Nice idea
You are the best
Nice! Bento is the most popular layout these days
It sure is!
Someone should A/B test this for conversion.
This is just an example of using Bento :)
I like this!
More to come!
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
Lovely
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
very nice
Thanks
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.
When you reversed the gradient background, did you apply the gradient individually on each child container?
Yup :(
Manually :( :(
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
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?
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
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
bento grids are the cancer of webdesign in 2024.
Or another way of designing.