Bento Grids - Big WordPress Design Trend for 2024 🔥

How to create Bento Grids with the WordPress Gutenberg Block Editor, using no code, no plugins and no CSS 🔥
👉 FREE THEMES www.pootlepres...
👉 Stay in touch with WordPress news: www.pootlepres...
👉 Get WordPress help : www.pootlepres...
👉 Channel Sponsorship opportunities www.pootlepres...
This tutorial demonstrates creating Bento grids using WordPress Gutenberg, using columns and cover blocks.
- Key steps include adjusting block size and layout, adding videos and text, and customizing text position, line height, and block radius.
- The video highlights features like making blocks reusable by saving them as patterns, locking blocks to prevent edits, and copying blocks between sites.
- I just use Gutenberg's core blocks without needing custom CSS or plugins.

[@Hebhansen]

Is there a way to magically query fx products into the grid. Such as new arrival or maybe random from a category?

[@jamiewp]

Hi, you could do it if you use the query loop block and a little css grid code , or you could use my Gutenberg Pro plugin :) www.pootlepress.com/2023/10/gutenberg-pro-gets-fancy-post-grids/

[@Hebhansen]

Ok thx. So query inside their respective cover block, and then css each cover for size/float. And then no columns/rows

[@mivibzzz]

What a great simple video... I wish it wasn't shown to me 2 hours into serching for it :)

[@jamiewp]

thank you :) Glad it was helpful

[@19mad92]

amazing! Thank you! It would be cool if you could cover 5 design trends of 2024 and recreate them in a video. One big trend is the off canvas menu with entry animation, another one is fixed floating navigation bars on the bottom or right side.

[@jamiewp]

Great idea

[@AdamWeeks610]

You are a machine! Another great video Jamie. Well done.

[@jamiewp]

Thanks Adam 🙏

[@cromrin]

Just learn css lol, but really was forced bcs of my clients to learn how to use Wordpress and your videos help a lot thanks!

[@jamiewp]

That's great to hear :)

[@MeaganHanes]

Another edutaitional WordPress vid! Thanks for continuing to be a thought leader and inspiration source in this space 💖

[@jamiewp]

thanks Meagan 😀

[@montyksycki4092]

THANK YOU!!! :) HAVE A GREAT DAY!!! ENJOY ~ PEACE :)

[@jamiewp]

🙏

[@StefanoFerro]

Amazing look and easy work Jamie. Great inspiration

[@jamiewp]

thanks. Stefano

[@jamiewp]

Hi Everyone....fyi I'm publishing a website recreation video this Thursday for procreate.com/

[@JohnHelyar]

Well done Jamie great video as per normal I love yor videos they are quick and straight to the point thank you.

[@jamiewp]

Thanks John 😊

[@tamamomumae]

Good

[@jamiewp]

Tks

[@oliverreese272]

Hi Jamie. Thanks for all your very good Tipps. How can I get more control like the size by cover blocks on mobile?

[@ManassehElBey]

Beautiful! I love the look. Great tutorial!

[@jamiewp]

thanks 👍

[@SingaporeMathsAcademyUK]

So glad you've done this, thank you!

[@jamiewp]

thank you

[@wordpress-dt7xt]

I love that design

[@jamiewp]

😊

[@sevencaye]

Ha! just in time as am about to start working on a bento website👍

[@jamiewp]

Cool , share a link once you've done it

[@visualmodo]

Really good content! =D

[@dwkillo]

You help us, we help you. Liked and suscribed

[@jamiewp]

wonderful - thank you 🙏

[@maxziebell4013]

Nice, one.

[@jamiewp]

Cheers Max

[@oliverreese272]

Hi Jamie. I've been following you for a long time and always love your tips. I have two questions that you could perhaps show in a video. In relation to twenty twenty four. 1) how do you get 4 columns on the mobile phone to 2 columns? 2.) How can you customise the mobile menu? E.g. full screen, centred, button I look forward to your answer. Best regards Oliver

[@jamiewp]

great ideas 👍here's an article i wrote about question. 1) www.pootlepress.com/2023/05/wordpress-gutenberg-responsive-columns/

[@oliverreese272]

thanks@@jamiewp but how do you get 4 columns on desktop into 2x2 columns on mobile?

[@thelongarmmarine]

Interesting & nice concept, but cell phones reduce it to one column view…still nice tho…might be useful for an e-commerce store too…

[@jamiewp]

Yup good point 👍 Gutenberg uses Flexbox for the columns block, so you could maintain the columns on mobile (but it's probably better if they stack)

[@peternilsson2372]

A really cool and visual idea! I wonder! Is it possible to make the blocks clickable?

[@jamiewp]

Good question- theres no out of the box way to do this , but i will do some digging

[@peternilsson2372]

I think this would be great for example photographers to direct the customer to different services. Like having one box for wedding and one for portraits, one for prices etc. It would be pleasing for the eyes and an easy way for the customer to click on the boxes and be directed to the service they are most interested in. There are of course the nav menu but this is more direct and connected to what you see in front of you.@@jamiewp

[@gaetano2435]

@@jamiewp news?

[@susannalarsdotter1915]

@@jamiewp This is an often wished for feature in issues as well as in support but no PR has gotten there yet. A few css tricks have been provided but they lack easily made hover-effects (so for your example the ".full-link" css trick would work nicely.

[@jamiewp]

@@susannalarsdotter1915 i found this recently which solves the problem kzbin.info/www/bejne/r3OkaatpprFmaK8si=zwFs5hPSf1Yz1Mj2 :)

[@franciscojmorales2446]

Could you put a template for download? a child for example

[@RediscoveredTruths]

Great video! I have made the switch from Elementor to Gutenberg for my site and future client sites after watching your videos. Once I wrapped my head around Gutenberg, I can build the same style of site in less time and with less bloat. The only question I have is in Twenty Twenty-four, where do I change the accent color for hover on the navigation menu in the header? I've looked everywhere but I don't think it's there..

[@jamiewp]

Thank you 🙏Check out this video about a free plugin that makes accent colours easy for the navigation block with the twenty twenty four theme (and lots of other cool stuff) kzbin.info/www/bejne/r3OkaatpprFmaK8si=BX4ZsTgJiuvdAbnN

[@RediscoveredTruths]

Thank you for leading me to that video. I watched it and I clicked the link to your demo and found the issue. It was the style I picked that didn't have the accent color as an option. Why doesn't every style include accent color? Strange.@@jamiewp

[@iktech117]

Can we put single post per rid section ?

[@wordpress-dt7xt]

please do a full ecommerce store design

[@jamiewp]

any specific ideas?

[@wordpress-dt7xt]

actually I want to learn more about the e commerce plugins and how to setup them correctly....anyway now adays many people are launching course playlist that how to start web design agency from scratch..I think it will be good for you since your design skills are out of this world you will get more viewers and subscribers @@jamiewp

[@lisastangroom67]

As I already said below, many thanks for this video. I've already started trying it out on my site. However, I can't see how to create a link from a cover to another page, only from the text or a button within the cover. Any suggestions about the best way to make the whole cover a link?

[@jamiewp]

Yes at the moment this would need a little custom dev

[@imeshkoff]

Hi Jamie! I'm working on a portfolio now and I have a question - can I somehow build a bento block so that pictures and titles are automatically pulled from my works (posts or pages)? I will be grateful for your help😎

[@jamiewp]

Check out my Gutenberg pro plugin or you can also do with some fancy css grid magic 😉

[@antware]

Nice. Gutenberg coming along nicely (slowly) but nicely. If I wanted to add some custom CSS what would you recommend? I don't want a child theme.

[@jamiewp]

A few options - but maybe just add in the. normal custom place for css in global styles (if using a block theme)

[@lisastangroom67]

Hi Jamie @jamiewp, Thank you for yet another concise and useful video. With regards to this particular question, can you confirm that by "normal custom place for css in global styles" you mean the "ADDITIONAL CSS CLASS(ES)" box that is provided in the "Advanced" section of each individual block we add to a page? Or can we only add custom CSS in the Global Styles part of the site in order to avoid having to create a child theme? I've been avoiding adding any custom CSS to my site out of fear that everything will be reset when my theme updates! Thank you, Lisa

[@mobad_life]

what kind of builder is that?

[@jamiewp]

Its just WordPress

[@mobad_life]

@@jamiewp of course it is , but what is the best drag and drop builder inside wordpress it is kinda confusing for a beginner like me , thanks for the reply😊

[@jamiewp]

@@mobad_life 👍

[@PaulShadwell]

How do I get the Border option to show up under Cover block style? I only see Dimensions and under there is only the Minimum height of cover.

[@jamiewp]

What theme are you using? That might be the issue.

[@jamiewp]

ps you can turn on settings in theme.json file - here's a quick primer www.pootlepress.com/2023/11/understanding-the-theme-json-file-in-a-wordpress-gutenberg-theme/

[@PaulShadwell]

Ok, I see the problem. It is very much theme-dependent. Running 2024 works perfectly but change to anything else, and it's very hit or miss as to what you can do.

[@jamiewp]

it's a core setting, but the theme just needs to turn on the setting in theme.json - be interested to know which themes aren't doing this for you?@@PaulShadwell

[@PaulShadwell]

Thanks @@jamiewp the information on your website is very useful. It's actually a theme I had been working on that is using the classic theme method. I have been working on a Block Theme equivalent and after reading your blog I see where the problem is. The classic theme, of course, is not using theme.json but the new one is and was missing the relevant entries. I have now added them. I clearly need to study new block theme development.