Easy Bento Grids With Advanced Themer

I recently stumbled upon a stunning design on one of the new starter sites for Blocksy Pro. The design featured a trendy bento grid layout, and I thought, “How easy would it be to recreate this myself?” That’s precisely what I set out to do, and in this post, I’ll walk you through the process step-by-step.

Tools You’ll Need

• Bricks Builder: A powerful visual builder for WordPress.
• Advanced Themer: This makes working with bento grids super easy. If you don’t have Advanced Themer, don’t worry. I’ll include the settings in the description so you can achieve the same result.

Step 1: Setting Up the Container

First, create a new page and insert a section with a container. This container will hold your entire bento grid. Give your container a meaningful name like “bento container” for better organization.

1. Background Colour: Set a background colour for the container. I chose a dark blue-grey colour.
2. Border Radius: Round off the corners of the container. A large border-radius works well here.

Step 2: Adding Padding

Ensure that the content inside the container doesn’t sit flush against the edges. Add some padding around the container. I used a variable for spacing to keep things consistent.

Step 3: Creating the Grid

Switch the container’s display from “flex” to “grid.” Use the visual grid builder in Advanced Themer to create a 4×4 grid. This will allow you to position your elements exactly where you want them.

Step 4: Adding Blocks

Insert five block elements inside the container. These blocks will form the individual items in your bento grid.

1. Padding: Add padding inside each block to ensure content doesn’t sit flush against the edges.
2. Background Images: Add background images to the required blocks.

Step 5: Responsive Design

Adjust the grid settings for different screen sizes. For mobile views, stack the blocks vertically to ensure they display correctly. Use the responsive mode icons to switch between views and make adjustments.

Step 6: Adding Content

Now, start adding content to your blocks. For text blocks, insert headings and paragraphs. For image blocks, add images and any additional content like small cards.

1. Classes: Use global classes to make sweeping changes easily. For example, create a class like bento-container__image for image blocks and bento-container__card for cards inside image blocks.
2. Styling: Style your elements consistently. Use variables for spacing, font sizes, and colours to maintain uniformity.

Step 7: Final Touches

Add any final touches, like drop shadows, to make your design pop. Advanced Themer’s box shadow generator can help you quickly apply shadows to your elements.

CSS Code

If you’re not using Advanced Themer and still want to recreate the effect covered in the tutorial, I’ve included the raw CSS below. Add this to the bento-container container in Bricks.

%root% {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-auto-flow: unset;
}

%root%>* {
  grid-row: unset;
  grid-column: unset;
}

%root%>*:where(:nth-child(1)) {
  grid-row: 1 / 2;
  grid-column: 1 / 3;
}

%root%>*:where(:nth-child(2)) {
  grid-row: 2 / 5;
  grid-column: 1 / 3;
}

%root%>*:where(:nth-child(3)) {
  grid-row: 1 / 3;
  grid-column: 3 / 5;
}

%root%>*:where(:nth-child(4)) {
  grid-row: 3 / 5;
  grid-column: 3 / 4;
}

%root%>*:where(:nth-child(5)) {
  grid-row: 3 / 5;
  grid-column: 4 / 5;
}

Conclusion

Creating a bento grid layout may seem daunting, but it’s quite manageable with Bricks Builder and Advanced Themer. Here’s a quick recap of what we covered:

• Set up the container and add padding.
• Creating a grid layout.
• Adding and styling blocks.
• Ensuring responsiveness.
• Using global classes for consistency.