[Support request] GP Hero Elements, buttons and arrow

Home Forums Support GP Hero Elements, buttons and arrow

  • This topic has 3 replies, 2 voices, and was last updated 3 months ago by Tom.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1282272
    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?

    #1282710
    David
    Staff
    Customer Support

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

    #1335812
    Tom
    Lead Developer
    Lead Developer

    In that case, you can just do this:

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

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