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%);
}