Master Bento Box Layouts with Kadence Blocks | Create Stunning Designs Easily!

Creating a stunning Bento Box layout has never been easier! With Kadence and Kadence Blocks, you can bring your design ideas to life effortlessly. In this video tutorial, you'll learn how to create and craft a stylish and organized bento box grid layout for your website or blog. This step-by-step guide will help you make the most of the Kadence Blocks' Row Layout Block and Section Block.
🔹 **What You'll Learn:**
- How to install the Kadence Theme, Kadence Blocks and leverage the CSS Grid capabilities of the Row Layout Block and the Flex box capabilities of the Section Block.
- Techniques to create a Bento Box grid layout that's both functional, visually appealing and responsive
- Tips for organizing your layout with labels, colors and spacing
- Best practices for responsive design to ensure your bento box grid layout looks great on all devices
🔹 Why Bento Box Layouts?
Bento Box layouts are perfect for showcasing content in a clean and organized way. They're ideal for portfolios, product showcases, and blogs, offering a unique and modern design aesthetic.
👉 Don't forget to like, comment, and subscribe for more tutorials!
Hit that play button and let's get started! 🎨
Timestamps and resources are below!
Enjoy!
Timestamps:
0:00 Intro: How to create Bento Box Grid Layout with Kadence Blocks
02:14 Getting Started: Installing Kadence Theme, Kadence Blocks
05:25 Kadence Blocks: Row Layout Block and Section Block Explained
20:42 Bento Box Grid Wireframe: How to Create Bento Box Containers Row and Section Blocks
32:58 Bento Box Grid Wireframe: How to add placeholder content to Bento Box Containers
39:00 Bento Box Grid Wireframe: How to use flexbox layout settings in Section Blocks
55:12 How to recreate an existing Bento Box Grid Design with Kadence and Kadence Blocks
01:15:29 How to add autoplay video to a Kadence Section block in a Bento Box Grid Design
01:24:23 How to make your Bento Box Grid Layout Section Mobile Responsive
01:29:10 Conclusion and Thank you!
🙏SUPPORT & THANK YOUS?
✅ Buy me a Coffee - www.buymeacoffee.com/cliftonwp/extras
✅ Leave a Super Thanks in KZbin Comments
🔗 RESOURCES MENTIONED
✅ Bento Box Grid Inspiration: bentogrids.com
✅Replicated/Recreated Grid Inspiration: dji.com/global/mini-4-pro
🧰TOOLS AND LINKS I USED IN THIS TUTORIAL
✅ WordPress CMS: FREE
✅ Bento Box Grid Inspiration: bentogrids.com
✅Replicated/Recreated Grid Inspiration: dji.com/global/mini-4-pro
✅ Gutenberg Block Editor: FREE
✅ Kadence Free Theme: FREE
✅ Kadence Blocks: FREE
🧰PRO VERSION OF TOOLS I USE
✅GiveWP Pro Addons - cliftonwp.com/give
✅ Kadence Theme Pro Addon - cliftonwp.com/kadence
✅ Kadence Blocks Pro - cliftonwp.com/kadence-blocks
✅ Kadence Shop Kit Addon - cliftonwp.com/kadence
✅ InstaWP - cliftonwp.com/instawp
✅ Domain & Hosting by Siteground: cliftonwp.com/host
🧰 FAVORITE WEBSITE BUILDING TOOLS
✅ Kadence Theme Pro - cliftonwp.com/kadence
✅ Kadence Blocks Pro - cliftonwp.com/kadence-blocks
✅ Kadence Conversions - Kadence Pro Bundle - cliftonwp.com/kadence
✅ Domain & Hosting by Siteground: cliftonwp.com/host
✅GiveWP Pro Addons - cliftonwp.com/give
✅ WordPress CMS: FREE
✅ Gutenberg Block Editor: FREE
✅ Kadence Free Theme: FREE
✅ Kadence Blocks: FREE
🏆RECOMMENDED EMAIL MARKETING PROVIDER
✅ Mailerlite: cliftonwp.com/mailerlite
🏆 BEST HOSTING COMPANY
✅ Siteground: cliftonwp.com/host
✅ WP Engine (Premium managed hosting): cliftonwp.com/wprocket
🏆 BEST PRO GUTENBERG BLOCK PLUGINS
✅ Kadence Blocks: cliftonwp.com/kadence-blocks
⭐ RECOMMENDED PRO WORDPRESS THEMES
✅ Kadence Premium Theme: cliftonwp.com/kadence
✅ Astra Pro: cliftonwp.com/astra
⭐RECOMMENDED PRO FORM PLUGINS
✅ Gravity Forms cliftonwp.com/gravityforms
✅ Fluentforms : cliftonwp.com/fluentforms
🏆 BEST SPEED PLUGIN
✅ WP Rocket: cliftonwp.com/wprocket
⭐ BEST WORDPRESS PAGE BUILDER
✅ Beaver Builder: cliftonwp.com/beaver-builder
⭐ BEST COMING SOON PLUGIN
✅ SeedProd: cliftonwp.com/seedprod
AFFILIATE DISCLOSURE
Please note that any links within this video and its description may contain affiliate links which means that if you click on one of the product links and purchase a product, I may receive a small commission. The commission does not increase the price you pay for the product and you can always purchase directly from the source. By using my affiliate link, you are supporting the work of the channel and I thank you for that.
Lastly, All of the opinions in this video are my own. I did not receive any compensation for making this video. Thank you for watching and thank you for your support!
#cliftonwp #kadencefree #kadencepro #kadencetutorials #bentobox #bentoboxgrids #Kadence #KadenceBlocks #WebDesign #BentoBoxLayout #WordPressTutorial #ResponsiveDesign #cliftonwp

[@Line49Design]

In this presentation, Clifton demonstrates what makes him a strong teacher: * Plans out the lesson in advance, so he is not stumbling through it on the fly (as so many others tend to) * Lays out the rationale for what he is presenting * Thoroughly covers the underpinning fundamentals * Shows WHY things are done a certain way, by first viewing what happens otherwise * Does it at a pace that ensures the viewer won't miss the points I think many might miss these strengths if they don't have the patience to just play the video. I'm glad I let it play. Also, today's topic is interesting because it follows on other WP block videos about Bento Boxes that used a Grid CSS + Subgrid approach. Here we get to see what happens with a Flex approach...which is pretty flexible! So Kadence users who don't have a subgrid method to use can do cool things this way instead. Clifton, did you come up with this topic (and flex approach) on your own, or did the folks at Kadence tap you on the shoulder? They should be doing that all the time!

[@CliftonWP]

Wow!!! Thank you so much! Your kind words mean a lot to me. My goal is always to help everyone who watches my videos to really grasp and easily apply what I'm teaching. I am honored and humbled knowing that you find value in my work. This particular video was actually inspired by a suggestion from a subscriber in a previous comment. I truly appreciate all my viewers and subscribers, and I love hearing what you'd like to learn. If there's something I can teach, I'll always do my best to create content around it. Thanks again for your support! I appreciate you and your viewership!❤

[@roamingtheamericas]

Totally agree. Every time I think, "Hmm...what about this?" he ends up covering it within a few minutes. "Now you might be wondering..." Yes, yes I was. 😆

[@charliegerson7570]

Yeah, here comes again the Master with something great again, Bento Box, something I've been longing to know more about. Thanks for keeping your promise of more Kadence videos. Your almost 7-hour Comprehensive Kadence Guide has demystified Kadence, at least for me, and I'm still working on it; a great reference source! I don't know how to thank you, Clifton. God richly bless you!!!

[@CliftonWP]

Thank you so much Charlie! I so appreciate you! More to come my friend!

[@UpperValleyWeb]

Wow! Came for the Bento Box, stayed for the master class in sections and flex settings.

[@CliftonWP]

Thank you!

[@karl-ford]

Thank you for the great video! Best Kadence channel in KZbin!!

[@CliftonWP]

Thank you so much! I appreciate you watching!

[@roamingtheamericas]

🔥🔥🔥 Oh my goodness, mind blown and I'm only halfway through. You are so skilled at teaching. I appreciate that you don't just share steps 1,2,3 but you really help me understand the concepts. I built it along with you but will definitely be watching this again to grasp things more. Huge thank you, Clifton.

[@CliftonWP]

Thank you so much! I appreciate your kind comments and I thank you for watching!🙏

[@danielschutzsmith9399]

Wow, I rarely comment on YT videos but this was great! I’ve been using Kadence for about 2 years now but hadn’t done something like this before. Fantastic! Thank you!!!

[@CliftonWP]

You are very welcome! Thank you and I appreciate you watching!

[@Skills_Geek]

Great tutorial once again

[@CliftonWP]

Thank you very much! I appreciate you watching!

[@eBYTEmedia]

Thanks Clifton for another awesome tutorial! You are a true Kadence Guru 😊

[@CliftonWP]

Thank you very much! I appreciate you watching!

[@celinedaumesnil7329]

Thank you for this high-quality content, much appreciated

[@CliftonWP]

Glad you enjoy it! Thank you and I appreciate you!

[@carsxstreeet]

Great tutorial 💥

[@CliftonWP]

Thank you 🙌 I appreciate you watching!

[@SabbirSEO1]

This is awesome! Thank you so much.

[@CliftonWP]

You're very welcome! Thank you very much!

[@KaiBuskirk]

Wonderfull! So Very Cool! Danke! have a great day!!

[@CliftonWP]

Thank you Kai! You too!

[@FiranGros]

Such a informative and helpful video, thanks CliftonWP for sharing this ❤❤❤

[@CliftonWP]

Thank you! I appreciate you watching!

[@paulwright4765]

Great video! I think I'll be watching this a few times to get my head round it 🙂

[@CliftonWP]

Awesome! Thank you and I appreciate you watching!

[@mdakashtube]

Thank you so much.

[@CliftonWP]

You're very welcome! Thank you for watching!

[@IshfaqAhmed-g1g]

Valuable content, Thank you Clifton.

[@CliftonWP]

You are very welcome! Thank you for watching!

[@WestbrookAds]

Fantastic! Thanks for the great content

[@CliftonWP]

My pleasure! Thank you for watching!

[@achimgener4085]

Great! Exactly what I needed 😃

[@CliftonWP]

Thank you and happy to hear it!

[@victort.1122]

Hello from Russia! Thank you Clifton for the useful tutorial. Could you please make another one with a more complicated Bento structure? 1 tutorial is good but 2 tutorials of the same topic would be much better! It's a very needed and practical thing. What would you say? :)

[@CliftonWP]

Thank you and thanks for watching in Russia! Send me a link to a Bento Box Grid layout that you would like to see me replicate and I will make a video of the buildout and explain how to achieve it. Thanks again!

[@get2sri]

Thanks!

[@CliftonWP]

Wow! Thank you so much! I appreciate your support!

[@RodrigoMartinez-w6n]

Awesome work Clifton!

[@CliftonWP]

Thank you kindly! I appreciate you watching!

[@tomfraser3086]

Clifton you are amazing....thank you. If I would like to fill all the containers with images how do I determine the pixel size of each of the varied boxes

[@CliftonWP]

Thank you Tom! In the video you'll see where I recreate a Bento Grid with this very same attribute, using images. You'll want to place your images in the sections as background images set to "cover" and then choose the minimum height that best suits the design your are going for. To get to the minimum height for a section, select the section, then the Advanced Tab, then the Structure Tab and enter your desired minimum height. I hope that helps!

[@monkis2793]

Nice. Thanks again!

[@CliftonWP]

You are welcome! Thank you and enjoy!

[@Peter-w3k]

Hello Clifton, thank you for this great tutorial! I have a question for the second bento box: Why are the last two sections 100% width in the tablet view instead of 50%? When I create a 4x4 grid, all sections are 50% in the tablet view, but with a 3x3 grid, the last 3 sections appear at 100% width.

[@CliftonWP]

Thank you Peter, you can change the width setting in Tablet view to 50% if you like. There are 3 sections so you'll have one hanging section or you can choose to set it to 100% for the third section to keep everything uniform in mobile view. I hope that helps!

[@internetmarketing4133]

Can you please make a video on crocoblock and kadence for hotel booking website?

[@charliegerson7570]

Hi Clifton, thanks for the Super Awesome step-by-step Bento Box Grid video. Just want to know: 1. Is it possible to have the Bento Box grid layout on Mobile view as in Desktop and Tablet view instead of items being stacked vertically in responsive Mobile view? 2. Will they be too small to view in Mobile? 3. Does it depend on the kind of layout one chooses? 4. What adjustments can one make to achieve a Bento Box grid layout and look in Mobile view as in Desktop and Tablet view?

[@CliftonWP]

Thank you Charlie, technically, you could have a mobile bento box layout, however depending on the content and use case, there may be some challenges with seeing it clearly on mobile. It really depends on the layout and the content. For instance a bento box comprising mainly of images would do well in a 2 column bento box, however once you add texts and headings, you want to stack the containers vertically to see the content. I hope that helps!

[@charliegerson7570]

@@CliftonWP Thank you very much for the explanation. This clarifies everything for me. Thanks for the prompt response.

[@johnsitjar4521]

good day do you have tutorial regarding About us page using kadence? thanks

[@CliftonWP]

Thank you, I don't have a specific tutorial on About Pages. What would you like to know about them?