[Support request] GP Hero Elements, buttons and arrow

[Daniel]

I’m trying to create a hero header like this Quiet Parks Using the page hero in GP elements.
Is there any easy way to add a fade in to the BG image and an arrow at the bottom of the full page hero section to indicate there is content below?
Also, how do you guys add buttons to the page hero element in GP?

[David]

Hi there,

Fade in effects would requires some CSS or even Javascript – but as the GP Hero adds the image as a CSS background that method would not work as you can’t manipulate a background image in that way. But you could apply a CSS anim like this Stackoverflow provides to the entire hero element:

https://stackoverflow.com/a/16188533

For the Header Element you can give it an Element Class to which you could apply the animation property.

The arrow is effectively a button – so to cover that first we would use this HTML to add a standard button.

<a class="button" href="url">button</a>

Same applies to the arrow but would contain an image instead of text, an #ID link and another class for positioning:

<a class="button more-arrow" href="#page"><img src="url_to_your_arrow_image"></a>

Then its case of some simple CSS to position the arrow at the bottom.

.page-hero {
    position: relative;
}
.page-hero .more-arrow {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
}

[Korhan]

Hello, thank you for the codes. I need to place an arrow down on my hero page and above code works fine but it inherits my button colours, background and borders. I just need the arrow to show just as itself, transparent background (its already) and white.

Thank you.

[Tom]

In that case, you can just do this:

<a class="arrow-button" href="THE URL HERE"><img src="URL TO YOUR ARROW" alt="" /></a>

[Daniel]

I was wondering, in this hero header how they included the logo. It seems to me it is not in the primary menue. How can I add a logo this way?

[Elvin]

Hi Daniel,

Header Element has an option to add logo if you set the header to “merge” on the Site Header tab.
https://docs.generatepress.com/article/header-element-overview/#site-header

[Author]

Posts