Grids in a section

Hi Chintan,

It's totally doable with GB, but you need to get familiar with GB's blocks first.

Here're the documents for GB's block:

Container block: https://docs.generateblocks.com/article/container-overview/
Headline block: https://docs.generateblocks.com/article/headline-overview/
Grid block: https://docs.generateblocks.com/article/grid-overview/
Image block: https://docs.generateblocks.com/article/image-overview/
Buttons block: https://docs.generateblocks.com/article/buttons-overview/

A quick guide on the blocks you should be using:
https://www.screencast.com/t/xLw9qy6u66fx

Thanks much, Ying!

So I managed to add the elements as you suggested in the screencast. It looks all over the place right now.

1. I guess majorly because of the images being of different sizes?

2. Also should I add the two grids inside a container because right now they seem out of place on the page.

Additionally I want the border defined by the image (in the background) just like the example I shared. And the list of blog posts demarcated by a line and clickable on a scroll — again like the example. Will I need to use CSS for this?

Grateful for the help :)

Hi Chintan,

You’re currently using a WP Image Block, and the Images are aligned left which make is float left.

Try using a GB Image Block instead. You can set a specific image size there as well.

Align the image to center.

Align the Container Blocks within the Grid to center as well.

With regards to the borders, you can add borders through GB Blocks. Try adding bottom border size in the spacing section of your GB Blocks.

Hope this clarifies!

Hi Fernando,

Tried doing everything you said and things seem to have improved. But not completely in shape...What am I missing?

I'm still seeing the images are output by WP image block, not GB image block, if you've changed them, can you make sure the cache is cleared?

Okay I am not sure what's the difference between WP Image block and GB. I tried searching for a visual difference and documentation but can't find it. Can you please share their difference and how can I distinguish between them?

Hi there,

see here:

https://docs.generateblocks.com/article/image-overview/

For assistance when you Add new Block, theres an option to browse all, you will see the GB blocks under its own heading.

Thanks much David. So I am actually already using this block after your prompt, and I now cleared the cache. Can you please visit the page again and tell me if all's good :) And the next steps for me to come closer to the layout I mentioned!

Set the image width to 100%, height to 300px, and object fill to cover.

Awesome looks so much better, thanks a lot :) How can I avoid the grids to fill the full page? Also is there a way to separate every line under every container with a grey line and make the line clickable?

Hi Chintin,

You can do so by placing the Grid Block within a GB Container Block. Then, set the Container Block to contained width. Example: https://share.getcloudapp.com/12uLlXZZ

Reference: https://docs.generateblocks.com/article/container-overview/#layout-%E2%80%93-standalone-block

Hope this clarifies!

Thanks a ton, Fernando. I managed to do that. There are three more changes I would like. I have shared those in the screenshot.

1. Some spacing between the two sections. Should I change individual container widths for this?
2. Grey border lines for every headline element. I can't find the option to add borders here.
3. Make the whole horizontal line on every item clickable on a scroll.

1. The vertical space can be set by selecting the Grid block and entering a value for its horizontal gap.

2. There's a border option under the spacing tab of the headline block, the border color can be defined under color tab > border.

3. Not sure I understand this question, can you explain what it means by on a scroll?

Hi Ying,

Thank you so so much! For the last one, I mean is there a way to make a whole horizontal line (or a container or a headline/another GP element) clickable on a scroll to that specific section...Does that make sense?