Header Text

[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

[Tom]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Cristina]

Thank you very much Tom! 🙂

[Tom]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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?

[Tom]

You can do something like this:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Cristina]

Thank you so so much! 🙂

[Tom]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts