The Bento Box web design trend has been all the rage and is a great way to showcase content – so let’s build it in a WordPress Block Theme!
It’s pretty easy to do with regularly Gutenberg blocks but back at the start of the year I was wondering could you do it with a Post Query Loop block?
The answer is… yes!
And thanks to Ashish in the comments last week for the nudge I needed to finish that up and get it released.
There’s a ton of good stuff you’ll learn in this WordPress Tutorial, including:
- The essentials of the Query Loop Block, and Post Template Block plus top tips
- Advanced use of the Cover Block
- How to design a CSS grid using an easy online tool
- The fundamentals of CSS grid and using that in a WordPress Block Theme
How to create a Child Theme for 2024 vid is here: https://youtu.be/oRRQQHoP_b4
Download my the Bento Box CSS and other goodies here: https://jakson.co/freebies/
00:00 The Bento Box web design trend
01:03 Review of he set up and what we’ll be making
01:50 Create the Page and basic Query Loop
02:36 Using the Cover Block in the Post Template
04:47 Intro to CSS Grid
06:20 Create a CSS Grid with a grid generator!
07:45 A brief explanation of CSS grid and “grid-area”
10:07 Get the CSS woking with our Query Loop
15:05 We have a Bento Box!
15:25 Make the whole Cover Block link to the post
18:45 Add the hover background colour
20:29 Making the CSS Grid responsive
22:22 Congrats, here’s your Bento Box!
Ciao!
Jakson
wordpress #blockthemes #pagebuilder #wordpressdevelopment