overlay behind text on page header

Hi Mark,

the content sits inside this div .inside-page-header - the size of which is defined by the page header padding, so you can style it like so:

.generate-page-header .inside-page-header {
    background-color: rgba(255,255,255,0.5);
}

If you want more control over it then you could wrap your content in a div and style that, something like this:

<div class="my-class">
    HTML Markup
</div>

.my-class {
    display: inline-block; /* Will fit to size of content */
    padding:  10px;
    box-sizing: border-box;
    background-color: rgba(255,255,255,0.5);
}

Hi David,

Thanks for your response. One question - how do you differentiate which page you are on? So, for example, I might have text on the home page, but also some different text on some other pages?

Mark

David,

And btw, how do I add HTML to the text? I know how to add CSS.

Mark

Sorry, I meant "add HTML to the page."

If you want to re-use the page hero but with different texts on different pages, template tags is the easiest solution:
https://docs.generatepress.com/article/header-element-template-tags/#custom_field-name

You need to use the HTML editor to add that.

Or simply copy and paste as it is in the page hero content box.