[Resolved] overlapping component

[ken]

Hi there,

I am wondering what’s the best way to create a overlapping component something like this – the “connecting the dots on what we do..” part. Could you advice? Would it be more complicated if i use element to create the hero part?

Thanks!

[David]

Hi there,

can you resupply the link to the example site – that link has no URL.

[ken]

http://gemmarosefoundation.org/wp-content/uploads/2020/11/Screenshot-2020-11-16-at-2.11.17-PM.png

[David]

In the first container of that page ( the one with the grid inside it ) add a new Headline block above the grid.
Simplest way to do that is to select the Parent Grid Block, and from the Tool Bar 3 dot menu select Insert Before.
Select the new block and + Headline Block.

With the Headline Block selected, in Settings > Spacing toggle Inline Width and then give it some padding. Then add some Negative Top margin e.g -60px to pull it up over the container above it.

You can also change its background and text colors in the settings.

[ken]

It doesn’t seem to be working the overlap, can you tell me what I have done wrongly? https://gemmarosefoundation.org/

Besides, is it also possible to make the containers below full width? Like this ?

[Tom]

Try changing it so the -60px margin is set to the bottom instead of top.

For the full width page, try this: https://docs.generatepress.com/article/content-container/

[ken]

It works! Thanks!

[Tom]

You’re welcome 🙂

[Author]

Posts