[Resolved] Need help configuring Page Hero

[John]

I’ve started the process of trying to convert my existing site, built in Divi, to GeneratePress. (I want to do this now, before I have too many posts, since I know I’ll need to manually copy and paste all the content.)

I’m starting with the home page and have hit a roadblock at Step 1. 🙂 On my current site (linked below in the private area), I have a hero image with a slider that displays some text. (This uses Slider Revolution.) I don’t want a slider but I would like to display basically the same thing in non-sliding form: my background image, three lines of text, and some color overlay under the text to make it more visible.

If you check out the link to my dev site, you’ll see how far I’ve gotten. The whole image is not displaying; it only displays under where I have content. How can I specify that the full image displays? And how can I position my text and overlay so that it’s in the right spot? Thanks.

[John]

This doesn’t seem to be getting a reply, so let me rephrase in case my original question wasn’t GP-specific enough: when using a Header element to display a full-width page hero image, what do I need to do to make the entire image display? Currently, I’m only seeing the top part of the background image.

[Ying]

Hi John,

You could try this CSS for desktop, adjust the numbers:

@media (min-width: 769px) {
    .inside-page-hero h1 {
        margin-left: auto;
        width: 50%;
        font-size: 70px;
        line-height: 1.5;
        padding: 80px;
        background-color: rgb(0, 0,0, 0.5); /*replace it with your color*/
    }
}

And this for mobile, you could adjust the numbers:

@media (max-width: 768px) {
    .inside-page-hero h1 {
        margin-left: auto;
        width: 50%;
        font-size: 20px;
        line-height: 1.5;
        background-color: rgb(0, 0,0, 0.5); /*replace it with your color*/
        padding-bottom: 50px;
        padding-left: 20px;
        padding-top: 50px;
    }
}

But I do recommend to use block element and Generateblocks instead of hook element if you are not familiar with code. Block element is like the visual version of hook element, paddings colors typography etc. are easier to control in that way.
https://docs.generatepress.com/article/block-element-overview/

Let me know 🙂

[John]

That worked great; thank you very much!

[Ying]

No problem John 🙂

[Author]

Posts