Bento Grids - Big WordPress Design Trend for 2024 🔥

Подписаться 62 тыс.

Просмотров 12 тыс.

50% 1

How to create Bento Grids with the WordPress Gutenberg Block Editor, using no code, no plugins and no CSS 🔥
👉 FREE THEMES www.pootlepress.com/free-word...
👉 Stay in touch with WordPress news: www.pootlepress.com/sign-up-t...
👉 Get WordPress help : www.pootlepress.com/get-wordp...
👉 Channel Sponsorship opportunities www.pootlepress.com/youtube-v...
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.

Кино

Опубликовано:

27 ноя 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 66

@Hebhansen 7 месяцев назад

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

@jamiewp 7 месяцев назад

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 7 месяцев назад

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

@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 :)

@AdamWeeks610 7 месяцев назад

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

@jamiewp 7 месяцев назад

Thanks Adam 🙏

@ManassehElBey 7 месяцев назад

Beautiful! I love the look. Great tutorial!

@jamiewp 7 месяцев назад

thanks 👍

@SingaporeMathsAcademyUK 7 месяцев назад

So glad you've done this, thank you!

@jamiewp 7 месяцев назад

thank you

@StefanoFerro 7 месяцев назад

Amazing look and easy work Jamie. Great inspiration

@jamiewp 7 месяцев назад

thanks. Stefano

@JohnHelyar 7 месяцев назад

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

@jamiewp 7 месяцев назад

Thanks John 😊

@MeaganHanes 7 месяцев назад

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

@jamiewp 7 месяцев назад

thanks Meagan 😀

@wordpress-dt7xt 7 месяцев назад

I love that design

@jamiewp 7 месяцев назад

😊

@jamiewp 7 месяцев назад

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

@montyksycki4092 2 месяца назад

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

@jamiewp 2 месяца назад

🙏

@visualmodo 7 месяцев назад

Really good content! =D

@maxziebell4013 7 месяцев назад

Nice, one.

@jamiewp 7 месяцев назад

Cheers Max

@oliverreese272 2 месяца назад

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

@sevencaye 7 месяцев назад

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

@jamiewp 7 месяцев назад

Cool , share a link once you've done it

@iktech117 7 месяцев назад

Can we put single post per rid section ?

@oliverreese272 7 месяцев назад

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 7 месяцев назад

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

@oliverreese272 7 месяцев назад

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

@RediscoveredTruths 5 месяцев назад

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 5 месяцев назад

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) ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-yBA8x3qL32M.htmlsi=BX4ZsTgJiuvdAbnN

@RediscoveredTruths 5 месяцев назад

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

@lisastangroom67 7 месяцев назад

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 7 месяцев назад

Yes at the moment this would need a little custom dev

@antware 7 месяцев назад

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 7 месяцев назад

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

@lisastangroom67 7 месяцев назад

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

@thelongarmmarine 7 месяцев назад

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 7 месяцев назад

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)

@wordpress-dt7xt 7 месяцев назад

please do a full ecommerce store design

@jamiewp 7 месяцев назад

any specific ideas?

@wordpress-dt7xt 7 месяцев назад

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

@franciscojmorales2446 5 месяцев назад

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

@peternilsson2372 7 месяцев назад

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

@jamiewp 7 месяцев назад

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

@peternilsson2372 7 месяцев назад

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 5 месяцев назад

@@jamiewp news?

@susannalarsdotter1915 4 месяца назад

@@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 4 месяца назад

@@susannalarsdotter1915 i found this recently which solves the problem ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-yBA8x3qL32M.htmlsi=zwFs5hPSf1Yz1Mj2 :)

@PaulShadwell 7 месяцев назад

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 7 месяцев назад

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

@jamiewp 7 месяцев назад

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 7 месяцев назад

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 7 месяцев назад

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 7 месяцев назад

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.

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