[Resolved] Elements Header like on generatepress.com

Home Forums Support [Resolved] Elements Header like on generatepress.com

Home Forums Support Elements Header like on generatepress.com

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #872151
    Markus

    Hi there,

    I’m new at GeneratePress and I’m playing around a bit. I wonder how to create a header like the front page on generatepress.com?

    When I take a look at the CSS then I can see a parent class called “inside-article” and inside there is the “page-hero” class. I’m not able to do something similar. The only way I can see is to add some custom html code to the Page Hero’s content area. But then my header isn’t responsive in a way I want.

    So my question is: how to build a header with text, buttons and images like on genereatepress.com?

    Would you be so kind and share how you did it?

    Thanks a lot ๐Ÿ™‚

    GeneratePress 2.2.2
    GP Premium 1.7.8
    #872314
    David
    Staff
    Customer Support

    Hi there,

    The site is built by Tom using Gutenberg and the HTML Block. So is very bespoke. You could create a 2 column grid in your Hero with some HTML and CSS. This would get you started:

    HTML:

    <div class="hero-grid grid-container">
        <div class="hero-column">
            <h1>Title</h1>
            <div class="inline-row">
                <a class="button" href="#">Button 1</a>
                <a class="button" href="#">Button 2</a>
            </div>
            <div class="inline-row">
                    <p>some content</p>
                    <p>some content</p>
                    <p>some content</p>
                    <p>some content</p>
            </div>
        </div>
        <div class="hero-column">
            <img src="url">
        </div>
    </div>

    CSS:

    .hero-grid,
    .inline-row {
        display: flex;
    }
    
    .hero-column {
        flex: 1 0 50%;
        padding: 2%;
        box-sizing: border-box;
    }
    
    .inline-row {
        padding: 10px 0;
    }
    
    .inline-row > a, .inline-row > p {
        margin-right: 1em;
    }
    
    @media (max-width: 768px) {
        .hero-grid {
            flex-direction: column-reverse;
        }
    
        .inline-row {
            flex-direction: column;
        }
    }
    #877122
    Markus

    Hi David,

    Thanks a lot, it works for me ๐Ÿ™‚

    #877218
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.