Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

GeneratePress GenerateBlocks

Duplicating Page Hero Elements

  • MoleculeMarketer
    November 15, 2023 at 4:30 am

    Hi Guys,

    I am working on a site where I want to have separate images on Page Hero elements.

    I cloned the original Global Page Header element and named it About Us Header but when I look at it, there are now two header images showing.

    How can I edit that to make it one?

  • David
    November 15, 2023 at 5:00 am

    Hi there,

    in your original Page Hero you will need to set its Display Rules to Exclude the pages the other hero is set to.

  • MoleculeMarketer
    November 15, 2023 at 5:29 am

    Hi David,

    Thanks, managed to do that.

    How can I edit the background image of each hero?

    Cheers

  • David
    November 15, 2023 at 5:58 am

    If you edit the Element.
    Open the List view in the editor to make it easier to navigate the blocks:
    https://wordpress.org/documentation/article/list-view/

    Select the top Container Block.
    In the block settings ( sidebar ) Background is where the image i set.

    BUT … You can set the Background image dynamically.
    In the block settings activate the Dynamic Data and set the Background Source to Featured Image.
    Now if you’re element were set to Pages -> All Pages ( or like your global header set to everywhere ), then the header will show the relevant pages featured image.

  • MoleculeMarketer
    November 20, 2023 at 1:15 am

    Hi David,

    I have managed to fix that in terms of the image but I cannot seem to align the image correctly.

    At present the About Us hero element is set to COVER. I tried CONTAIN but that does not fix the issue.

    If you look at my image the heads of the group of people are cut off.

    I want to make sure they are centred vertically.

    I tried using padding and margin but that did not work.

    Could you point me in the right direction please?

    Regards

  • David
    November 20, 2023 at 3:53 am

    If you edit the Container Blocks, Background -> Background Position and type: center top

    That will align the top of the image to the top of the container

  • MoleculeMarketer
    November 20, 2023 at 4:44 am

    Thanks David,

    That did the trick.

  • David
    November 20, 2023 at 4:59 am

    Glad to hear that

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