Shadow around the block/box?

How is it possible to design such a block with GB? Including the shadow around the block/box?

Layout and styling is pretty easy - a container with a grid (5 columns - which adds 5 inner containers), adjust the percentage widths for each one as they vary - style the content of each one.
As for the shadow if your using Pro - see this:

Hello @davep

Thanks a bunch for your reply.

This is what I have been able to design:

I have a few questions.

1 - I was not able to apply a shadow to the grid.
So, I had to recreate a Parent Container to insert my whol grid into it, like this:

Is there a better way to avoid making the page heavier and slower to load because of this extra Container? Just imagine a page where you would have a dozen of such grids…

2. How can I have add a “visual tag” such as the Best Choice, Hot Price and Popular ones:

I tried using a Container but this is the best I was able to do:


With those settings:

(link to the whole page here)


  • Is there a better way than using a Container to design such a tag?
  • How to align the tag to the left?
  • How to reduce the margin above and below so that it looks like this in the end:

Thanks again for this great community and the amazing Generate Blocks.

A lot to unpack here, not sure I understand everything ?
Have you seen the premade Query Loop blocks ?
You don’t apply shadow effects to Grids.
And the page is not going to be ‘heavier’!

Thank you. I was able to do what I want.
But I created everything manually with Container and grids.

The expression “Query Loop” is scary for a French speaker like me. What does it mean? Where could it help me, as opposed to having designed my box manually?


Query means to access data, loop means to go through each one the query finds and display them.
So in the case of Blog Posts, let say you choose to have the most recent 4 news items on your home page, and you only want from a category called ‘Wordpress News’, then you create the Query Loop for that catgegory, and tell it to only access 4 and order them by date Descending (so they are in the order of most recent) - then that Query Block (along wtih the other blocks that it needs to display the posts) are added to where you want it on the home page.
Note sure if this helps, but Query Loop translates into French as:
boucle de requête
Hope that helps, Dave

1 Like

@davep , the Frecnh translation does NOT help.

BUT your explanation in plain English is gold! Crystal clear! Thank you so much.
Do I need to be a programmer to create such a loop with GP?

Also, why have you come up with Query Loop with respect to my initial request? How can they help?
Also, I’m not what the difference is between Query Lool and Block Element – Post Meta Template - Documentation, and which ones I Should use to define the layout of my blog page?

Good question :slight_smile:
Because your initial image looked like an item to sell.
So I assume you would need a number of them.
A query loop to display a number of products to sell would be why you would use this feature rather than manually creating them one by one.
But maybe that is not your case ?
That is why it is always good to explain why you want to do something, as well as how !
Best regards, Dave