[Support request] Different page hero for mobile

[Renske]

Hello 🙂

I want a different page hero for mobile.

I’m thinking about someone like this: https://gillandrews.com/ (on mobile the text is bewlow the header image).

[David]

Hi there,

is the hero built using a Block Element ?

[Renske]

Yup, I built one with block element this morning 🙂

[David]

Ok 🙂 Couple of options:

Option 1: Two separate hero container blocks in a single block element:

1. Edit your existing Block Element. That element will start with a Container Block. Immediately beneath that container add a new Container Block.

2. This new Container Block is where you can you create your Mobile specific Hero.

3. With your two container blocks ( top one desktop, bottom one mobile ) you can go to there Advanced > Additional CSS Classes and add the necessary GP Hide-on classes to show hide them:

https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

NOTE If you’re using GenerateBlocks Pro, then those hide-on classes are built in and have their own toggles under Advanced.

Option 2 – the same logic but we just show hide the image.

1. In your existing Container Block, you can add a GB Image Block before your text.

2. Use the hide-on-* classes as above to hide / show the image.

3. If you’re using GB Pro then the current Background Image can be set to only display on desktop / tablet. If your’re not using Pro then we can use some CSS to remove it on mobile.

[Author]

Posts