How to make the homepage like this

Hi Vidyut,

Yes, you can use GenerateBlocks to build that.

To learn how to use GenerateBlocks, here's a video you may watch: https://www.youtube.com/watch?v=R7fwJECtgSg

Also see: https://www.youtube.com/watch?v=yq6VcgU3Ufg

I just unable to create after trying a lot. Can you breakdown how do they made the homepage?

Here are a few steps.

1. Add a 2-column Grid Block: https://docs.generateblocks.com/article/grid-overview/
2. On the Left column Container Block, add a Background image: https://docs.generateblocks.com/article/container-overview/#backgrounds
3. On the right side, add Headline and Button Blocks for the texts and button:
https://docs.generateblocks.com/article/headline-overview/
https://docs.generateblocks.com/article/buttons-overview/

Okay, but see the containers are not full width. As I think I've used the code

.page.separate-containers .inside-article,
.page.one-container .site-content {
padding-left: 0px;
padding-right: 40px;
}

So how to do it

Try adding it through a Block Element - Page Hero. That should make it full-width.

Reference: https://docs.generatepress.com/article/block-element-page-hero/

I just excluded the css on the homepage and it is now good. Is it a good way?

Yes, that's fine. You could also set the page to full width through the settings: https://docs.generatepress.com/article/content-container/

great. Now the last issue is with the posts on the homepage. How can I make them look like. Here is the example. I think they are using showbox?

You can use a GenerateBlocks Query Loop Block: https://docs.generateblocks.com/article/query-loop-overview/

There are already videos as well by YouTubers which should help you in creating one: https://www.youtube.com/watch?v=KnIOfBYAZ8Q

ok, and will it allow me to add shadow and movement animation?

You would need GB Pro or a custom code for that.

Reference to GB Pro effects: https://docs.generateblocks.com/article/effects-overview/

Also in query loop, I want to add 3 posts per column, and remove the meta like date, and also want to customize to title size etc.

Do you have the css?

You shouldn't need CSS for those. It's all in the Block settings. If you don't want the date appearing, just delete the Block.

If you want 3 columns, set the Post Template Block width to 33%. Example: https://share.getcloudapp.com/o0u9Wz8e

Wow, that's done. But, how to make the featured image set full to its container?