jakson-wordpress-development-and-courses

Bento Box Web Design in WordPress with the Query Loop Block & CSS Grid

YouTube video

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