[Support request] Page hero not applying

[Mark]

I have a GP site at GeneratePress.michianait.net

I have created a Page Hero and applied it to the page About Aspire Clone.

However, another page here is there instead – maybe generated by Elementor?

Does Elementor Pro override the GeneratePress page hero?

Thanks

Mark

[Tom]

Hi there,

Aspire uses a global page hero for pages which is being displayed instead of the one you created.

You’ll want to open that existing Header Element and exclude the About page in the Display Rules (or draft/trash the entire Header Element if you don’t need it).

Let us know if you need more info 🙂

[Mark]

Thanks Tom, I will try that. I assume that “global” header is listed under the header elements page, along with the other ones?

BTW, how do you managed to provide such fast support time? I was thinking of switching to Astra because they have so many more starter sites, but the incredible quality and response time you provide, keeps me coming back to generatepress.

Mark

[Mark]

Tom, I was able to make a. header for that page appear, but it it way too large. Padding problem?

Thanks,

Mark

[Elvin]

Tom, I was able to make a. header for that page appear, but it it way too large. Padding problem?

That could be the case. I’ve checked your site and you have 180px for both top and bottom padding. If that’s too large, you can always change its values to something smaller. 🙂

[Mark]

I think I used the same padding values as the homepage hero for aspire. So I thought that would be OK.

[Mark]

In fact, is there discussion about how to use padding with images (for page hero) in the GeneratePress docs? (I couldn’t find any)

I am used to thinking of the CSS box model where margin are the space outside the element, and padding is the space between the image and the border. I don’t understand how padding can make the image appear larger. Can you point me to an article that explains this, or tell me the thinking process?

Thanks

Mark

[Elvin]

padding is the space between the image and the border.

While yes, padding is the space between its content and its border, page-hero’s case is quite different.

page-hero’s image is applied through CSS background-image property, it is not a content.

I don’t understand how padding can make the image appear larger.

Since the image is applied as a background image of the container div.page-hero, its size is dependent on it.

That said, adding padding to an element increases area size. And since we’ve added top & bottom 180px to the div.page-hero, its the same as adding top and bottom 180px padding to the image.

Here’s a brief documentation of the page hero: https://docs.generatepress.com/article/how-to-create-a-page-hero/

[Mark]

Elvin,

Thanks for your explanation. That helps quite a bit. However, I am still confused about the size aspect.

Again, in reference to my site at generatepress.michianait.net:

For example, if I have an image that is 1200×500, and I use a COMBINED vertical (top and bottom) padding of 300px, does that mean that the image that appears will be exactly 300 px tall? And if the combined vertical (top and bottom) padding is 0, does that mean that the background image will not show at all?

It seems that different rules apply for horizontal padding, because even with the left and right padding set to 0, I still see (at least) some of the image.

Is there a 1-1 correspondence between the displayed image size and the padding?

Thanks,

Mark

[Elvin]

For example, if I have an image that is 1200×500, …

The image size is irrelevant since the background-image is set to scale to fit the container.

…and I use a COMBINED vertical (top and bottom) padding of 300px, does that mean that the image that appears will be exactly 300 px tall?…

Not exactly. div.page-hero‘s content adds to the height. Say, if you have 300px padding + a text of 100px height and a button of 50px stacked below the text. That gives you a total of 450px height for the div. And that 450px is the height of the background-image.

…And if the combined vertical (top and bottom) padding is 0, does that mean that the background image will not show at all?

If the combined top and bottom padding is 0 and there’s no content, then yes, the whole div won’t be visible but it’s still in the DOM structure.

If the combined top and bottom padding is 0 but if there’s a content, say a 100px text, the height of the background image will be equal to the text.

It seems that different rules apply for horizontal padding, because even with the left and right padding set to 0, I still see (at least) some of the image.

This is irrelevant when the div.page-hero height is 0.

Is there a 1-1 correspondence between the displayed image size and the padding?

No because as mentioned previously, the content also adds to the height.

[Author]

Posts