Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] Header Text

Home Forums Support Header Text

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #177890
    Cristina

    Hi Tom

    I would like to have a header with a small text with a button (for a lead magnet), like in this website,but for every post and page (not only for the homepage, like it is in the example), but I don’t know where I can edit it. I tried using the Hooks Add-on, in “After Header Content”, but it makes the background image bigger while the text appears above and in the center.

    I would like to know how can I put the text and the button like in that website that uses GP, on the left side of the image, and how can I avoid the background image to get bigger.

    PS. I have GP Premium

    #177913
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    You’re right that you’ll want to use GP Hooks. However you’ll want the “After Header” hook.

    To get your content to look like that, you’ll need some custom HTML and CSS.

    For example:

    <div class="main-feature-area">
        <div class="grid-container grid-parent">
            <div class="grid-50">
                Your left side column HTML in here
            </div>
            <div class="grid-50">
                Your right side column HTML in here
            </div>
        </div>
    </div>

    Then you would add your background image to the area using CSS:

    .main-feature-area {
        background-image: url('URL TO YOUR BACKGROUND IMAGE');
        background-repeat: no-repeat;
        background-size: cover;
    }

    Depending on the size and aspect ratios of your image and feature area, the whole image might not show – this is unfortunately just the way background images work in HTML.

    Hopefully this is enough to get you going 🙂

    #177986
    Cristina

    Thank you very much Tom! 🙂

    #178069
    Tom
    Lead Developer
    Lead Developer
    #178129
    Cristina

    One more question… it could be possible to change the background image of the header for mobile phones? Using the @media in the Style CSS or something like that?

    #178151
    Tom
    Lead Developer
    Lead Developer

    You can do something like this:

    @media (max-width: 768px) {
        .site-header {
            background-image: url('URL TO YOUR IMAGE');
        }
    }
    #178329
    Cristina

    Thank you so so much! 🙂

    #178370
    Tom
    Lead Developer
    Lead Developer
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.