Different page hero for mobile

Hi there,

is the hero built using a Block Element ?

Yup, I built one with block element this morning :)

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.