[Resolved] Hero header of generatepress website

Home Forums Support [Resolved] Hero header of generatepress website

Home Forums Support Hero header of generatepress website

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2143301
    Adrien

    Dear Team,

    Could you please give me a detail tuto on how did you do on GP website hero welcome page to display a container with a background image under the main two columns grids and the mobile image.

    While studying you code I saw this but im unable to replicate:

    .gb-container.background-right:before {
    left: 42%;
    width: 100vw;
    max-width: 900px;
    background-size: 100%;
    background-position: center bottom;
    }


    @media
    (min-width: 1025px)
    .gb-container-e4e1973e:before {
    content: “”;
    z-index: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url(https://generatepress.com/wp-content/uploads/2021/04/home-hero-background.png);
    background-size: 50vw;
    background-position: right bottom;
    background-repeat: no-repeat;
    background-attachment: scroll;
    }

    IMO, everything on generatepress site should be replicable through a detailed tuto because your website follows all the trendy design standards which aren’t offered on any of your templates.

    Appreciate your assistance. Kind regards, Adrien

    #2143656
    Ying
    Staff
    Customer Support

    Hi Adrien,

    The layout can be easily replicated using GenerateBlocks.

    The structure would be:

    
    - Container (has an a background image and additional CSS class: background-right)
      -Grid
        - Container
           - Headline blocks 
        - Container ( using CSS to hide it on mobile)
           - Image block (the mobile phone image)

    Then you can add this CSS to your site to position the background image of the parent container:

    .gb-container.background-right:before {
        left: 42%;
        width: 100vw;
        max-width: 900px;
        background-size: 100%;
        background-position: center bottom;
    }
    #2143739
    Adrien

    Dear Ying,

    Thank you so much for your precious help. You are an amazing skilled teacher!

    another 10/10 for GP/GB team. Kind regards, Adrien

    #2143823
    Ying
    Staff
    Customer Support

    Glad to hear that 🙂

    You are very welcome!

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