[Support request] Individual blocks/blurbs creation

[Adarsha]

Hi.

I have a website on divi. I am trying to move it completely on generatepress.
Did this for another website and it went great.

But this particular website which I am converting has divi blurbs used on home page.
So each blurb I have linked to different page with a image at top and title below image and some basic info on the page it is linking to.

How can I achive the same with GP or GB?

The queryloop which i used on another website only fetches information and creates the blocks.
I just want to manually create these and link to a page.

I have attached the main website link below. Please check homepage for the blurbs I am mentioning.
thank you 🙂

[David]

Hi there,

you can use a GB Grid Block to build your layout:

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

I would suggest you select the single column grid. Then:

1. in the Grid blocks -> Layout set the Horizontal and Vertical Gap.
2. Select the Container Block that was automaticlly added in the grid.
2.1 in its Layout Tab set its width to 33% for Desktop and whatever % widths you require on Tablet and Mobile
2.2 in spacing set some padding eg. 20px and set the Border Radius.
2.3 from the blocks toolbar set the Text Alignment to center.

3. inside that container add a GB Image Block and as many headline blocks for the text.

Once happy with the design of one card, in the Grid Blocks Toolbar you can click the + to duplicate that block as many times as you require it. Adjust each width and blocks content as you need.

Question do you have GenerateBlocks Pro as it has the Container Link option built in. Let me know.

[Adarsha]

Hi.

Thanks for the detailed steps. This worked really well and am almost able to do it.

The issue is, the main container or whatever it is adds a white card as base for all of these blurbs.
Even if I create each blurb with different container, it all comes inside 1 box (base).

I also tried make 3 different grids in a row. That would make the 2nd grid go below the first.
I also tried adding border, padding to container assuming it would isolate each blurb, that also did not work.

I have attached 3 screenshots of each scenario.
Hope you can direct me the proper way.

Thank you

[David]

Ok, so lets set the page up first.
1. in the post editor, sidebar set the layout metabox > Content Container to Full Width:

https://docs.generatepress.com/article/content-container/

2. for the first block on the page add a GB Container Block.
2.1 in its Layout set the Container to Full Width and the Inner Container to Contained.
2.2 Set its background color to what you require eg. NOT white.

3. Move your Grid Block inside the Container Block.
NOTE: Use 1 x Grid Block, if you continue to duplicate more columns then the Grid will automatically generate new rows.

[Adarsha]

That worked well. Thanks a lot David 🙂

[Adarsha]

Hey. Was able to do it fine on home page.
But when I replicate same thing on other category pages, I get a outer White border. I tried to check every container and see from where it may be getting it. But could not find it.

I will attach how the original page is and what I am getting now.
Hope you can help. As I am building on staging site on rocket.net, I ain’t able to link to page I am building. So will attach a screenshot.

[Adarsha]

I tried the same layout for my posts page aswell. (Using query loop)
Have similar issue there.

Have attached a screenshot.

[David]

Did you set the Container Width for the page to Full Width?

https://docs.generatepress.com/article/content-container/

[Adarsha]

I had missed that. X_X

Thanks 🙂

[David]

As a note, if you need to make Archives or other uneditable places ( Search results, 404 etc. ) Full Width, then you can use a Layout Element:

https://docs.generatepress.com/article/layout-element-overview/

It has all the editor metaboxes in one Element,

[Adarsha]

Interesting. So I could make it site wide one time and don’t have to change on any pages then?
I can use this for many other things aswell Nice.

[Adarsha]

Hi David.

How can I make footer stick to bottom of the page? I don’t mean it to show always “syicky”
Rather, in short pages where there is not much content, I don’t want the footer to come to top.

I have attached a page which has this issue.

The issue is on all devices.

Thank you

[Ying]

Hi Adarsha,

Try adding this CSS:

body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
}

.site-footer {
    margin-top: auto;
}

[Author]

Posts