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?
in your original Page Hero you will need to set its Display Rules to Exclude the pages the other hero is set to.
Thanks, managed to do that.
How can I edit the background image of each hero?
If you edit the Element.
Open the List view in the editor to make it easier to navigate the blocks:
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
All Pages( or like your global header set to everywhere ), then the header will show the relevant pages featured image.
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?
If you edit the Container Blocks, Background -> Background Position and type:
That will align the top of the image to the top of the container
That did the trick.
Glad to hear that
- You must be logged in to reply to this topic.