How to frame every post in the homepage and category page like this website?

Hi there,

1. Set the Columns in Customizer > Layout > Blog to 3 if thats required.
2. Use a Block Element Content Template to design your own post card:

https://docs.generatepress.com/article/block-element-content-template/

You can start with one of the built in templates or if you create your own begin with GB Container Block which can have the border added to it.

Hi David, thanks for your help again.

When I create an element, in the display rule > location >blog: this is only for homepage?

When the location is blog, only the homepage reflects the element for the content template.

After the display rule > location > all archives, the content template can be used on category pages.

Am i right?

Thats correct - the Blog will be wherever your latest posts are displayed, and if you include ALL Archives then it will cover any taxonomy archives eg. Categories and Tags.

Thanks again David!

But how to make the picture grow when put the mouse on the picture like that website?

Hi James,

It requires custom CSS and a proper HTML structure to make the animation behave this way.

The image basically must have its own container so we can use that to restrict the space used by it when the image scales up when the mouse hovers on it.

It's basically having the image block on your Block element - Content template have its own wrapping Container block inside the main container block holding all the contents.

Basically:

Main container > Container block > image block.

Thanks Elvin,

It is a little complicated to me.

It's basically something like this arrangement.

[Main Container block]
> [Another container block]
> > [Image block inside the another container block]
> [other blocks inside the main block]

You then add CSS for the [Another container block] like overflow hidden so the scale up of the image doesn't cover the rest of the contents. :D

Consider hiring a developer if this is too complicated. :)