How to create Split homepage

Hi there,

you can create the Page Hero with a Block Element:

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

In the Block Element you set its display rules - to show it only on the homepage you would select the Front Page location.

The content is built with GenerateBlocks.
Starting with a Container Block for the Background color, and within a Headline and Buttons Block:
The free version of GB will suffice. Each of the block has full styling controls built in.

Hi David,

Thanks! Should be able to build it now :)

Kind regards,

Robin

Glad to hear that

Hi David,

I took me a while to find time, but I am currently working on this.
I have a question regarding the content blocks. Is it possible to make them "float" with CSS or a different feature?
Example can be found on homepage of this url -> https://www.hardloopzone.nl/. If you scroll a bit down then you can see content blocks.

Is that possible with free version of Generate Blocks? If not, is it possible with paid version?

Thanks.

Kind regards,

Robin

Hi Robin,

I have a question regarding the content blocks. Is it possible to make them “float” with CSS or a different feature?

I believe you're pertaining to this part? https://share.getcloudapp.com/p9uXOm4P

If yes, it is possible to replicate w/ GB but you'll need a bit of custom CSS.

First, you'll have to set the arrangement of blocks to this:

[main container block]
>[container block for image]
>> [ image block inside the containerblock ]
>[ container block for content/excerpt ]
>> [ block for excerpt itself ]

You'll then have to set position: absolute; for the [container block for image] and set padding top to the [main container block].

Hi Elvin,

Thanks for your response!

Good to know how that works :). I actually meant the blocks that are above the 3 blocks that are included in the image that you shared.
So the 6 container blocks with titles in them such as "beste running belt", "beste sporthorloge dames", etc.

Hope it is clear what I mean.

Thanks!

You want to apply it on specific columns, consider having them share a common class selector.

You then apply position: absolute; and padding-top: through this common CSS class so all the columns get the same style in one go.

About applying a common class:

All Blocks have an "Advanced" tab. In this advance that, you should see a "Additional CSS class(es)" as shown here -
https://share.getcloudapp.com/mXuJxeoZ