[Support request] Different page hero for mobile

Home Forums Support [Support request] Different page hero for mobile

Home Forums Support Different page hero for mobile

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #2374265

    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).

    Customer Support

    Hi there,

    is the hero built using a Block Element ?


    Yup, I built one with block element this morning πŸ™‚

    Customer Support

    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:


    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.