[Support request] Landing – apply header to all pages

[Ketil]

Hello. How can I apply the header style to all pages without having to use the container block on every page?
I can’t get the “arrow” at the bottom to work if I try to make a header based on what I can see from the current element.
I want to keep the layout, but apply to all pages, and use featured image with a fallback-option. Any tips?
What makes the downward white “arrow” at the bottom of the image?

[Tom]

Hi there,

It’s not possible to use the featured image as the background at the moment. This is an option we’ll be adding to the next version of GenerateBlocks.

As of right now, global page heroes using blocks like this are difficult, as you can’t add dynamic text into the hero that will change depending on the page you’re viewing.

We’re working on adding Template Tags (like the ones in Header Elements) to Block Elements. Once we add that functionality and GenerateBlocks has the option to use the featured image, you’ll be able to build site-wide page heroes like this.

This kind of functionality is our #1 priority right now – we’re almost there.

The “arrow” is a separate container with an SVG background that is displaying under the main container. It’s using negative margin-top to move itself up on top of the container above it.

[Ketil]

Is this container with the svg-object a part of the reusable container that makes up the header?

[David]

Hi there,

no.
The way Landing is constructed is as follows:

1. A Header Element – this is purely for setting the Site Header to Merge with Content.
2. The hero container is part of the page.
3. The SVG is set as a background to another container that has negative top margin added to it which pulls it over the hero container.

If you want a dynamic Header you will need to edit the #1 header element and add your content and background to it.

Then edit the home page and Copy the Container Block with the SVG.
Add this to a temporary page – so you can remove the Top Negative margin. As this will need to be removed or it will cause issues in the next step.
Create a new Block Element and paste in your edited SVG Container.
Once there select the Container > Settings > Advanced –> Additional CSS field and add: overlap
And select the after_header hook with a Priority of 40

Then add this CSS to apply the negative margin:

.gb-container.overlap {
    margin-top: -200px !important;
}

[Author]

Posts