Site logo

Archived topic

Customizing grid background color on GeneratePress Blocks

7 replies · Started by Erin on April 20, 2021

Viewing posts 1–8 of 8

Hello!

I'm trying to re-create a certain type of image collage I had on my Squarespace site and I just about have it using the GP blocks but I just can't figure out how to make the color behind the text cover JUST the text and buttons, instead of the entire container, I've tried to play with margins etc and just can't get it. if that makes sense...

I'll leave the links and log ins below...

Hi Erin,

1. Select the Grid, change the Vertical Alignment to Center.

2. Based on your original design, I would recommend setting the left container to 60% in width, right container to 40% in width. Then add some negative left margin to the right container, for example -200px.

Let me know how it works :)

Thanks Ying!!
That part I've somehow managed, but I can't fully style it properly.
If you see on the Mexico City market example the text goes behind the photo instead of overlayed on top.
And on the first example for an Estancia it's what I want but I want the color block to be smaller, just under the text (header/paragraph/button) if that makes sense (instead of the whole container)

If you see on the Mexico City market example the text goes behind the photo instead of overlayed on top.

There's a setting called z-index in the spacing section. You could select the container, set the outer z-index to 1, it will bring the container up on top of the other.

I want the color block to be smaller, just under the text

Follow the step 1 in my last reply, select the Grid, change the Vertical Alignment to Center.

Btw it's better use Headline block from Generateblocks (blue icon) instead of the WP heading block, it gives you better control.
https://docs.generateblocks.com/article/headline-overview/

Thank you so much!! It worked perfectly!

Final (unrelated) question, I created two page heros in elements, one to apply to all pages except the front page, and another to the front page only.

The first one (for all pages) worked perfectly, but I can't manage to get the front page one to merge and go full screen despite having all the same settings, I'm not sure what I'm doing wrong, can you take a look?

Glad to hear that :)

For the page hero question, choose Frontpage as location instead of page > the specific page.

And also excludes Frontpage from the other header element.

Thank you!!!

No problem :)

This archived topic is closed to new replies.