Hero Header Question

Hi there,

is this a static hero for a single page?
If so you I would use the GenerateBlocks plugin to create that layout:

https://wordpress.org/plugins/generateblocks/

If your page is a Full Width page then you can simply add it to the Page content.
Otherwise you can add it using a Block Element:

https://docs.generatepress.com/article/block-element-overview/

And set to Hook: generate_after_header

For either method you can merge the hero with your Site Header / Navigation, by creating a new Header Element:

https://docs.generatepress.com/article/header-element-overview/

Don't bother with adding anything to the header elements hero content, just go to the Site Header tab and select Merge with Content, with that enabled you can edit your site header / nav colors.

Thanks David,

is this a static hero for a single page?
My hero is a static one for the homepage only.

I am a new GeneratePress user, all the options are a bit overwhelming for me. Downloading GenerateBlocks made me confused even more. Is it better to use GenerateBlocks or the Header Element and some custom HTML/CSS? And if I use the Header Element option, how would the HTML/CSS look like to create the hero image/text like my example? (but then with the image on the right and the text on the left).

Is it better to use GenerateBlocks or the Header Element and some custom HTML/CSS?

There's no one definite winner of which is better between the two because both have their own specific perks.

If you create the Hero section with Block element. It allows you to use WP Blocks and any of your plugins that are added as Gutenberg Editor Block (like GenerateBlocks) which makes layouts much easier.

But this means you won't be able to use features that the Header element offers like dynamic template tags found here:
https://docs.generatepress.com/article/header-element-template-tags/

Or the other features here (dynamic featured image, etc):
https://docs.generatepress.com/article/header-element-overview/

But for your specific requirement, David's recommendation of using Header element to merge things seem to fit well.

Thanks Elvin,

I decided to use the Header element. I want to have a picture on the right, and a H1 slogan on the left. I have added the HTML in the header element, and added the CSS in the customizer like in this example but it is not working in GeneratePress.

I don't know what I am doing wrong? I want the H1 text overlaps the picture on small screen sizes. Do you have any suggestion what my HTML and CSS should look like? I am stuck here.

I don’t know what I am doing wrong? I want the H1 text overlaps the picture on small screen sizes. Do you have any suggestion what my HTML and CSS should look like? I am stuck here.

Consider adding the image as a background-image for the page-hero section instead of adding it in as a <img> so you don't have to play around with z-index values and position:absolute; property.

But if you really must add it in as <img>, create a CSS @media rule for smaller screens that adds position:absolute; and z-index: 10; to the h1 container element so it will overlap with the image.

Alternative to this, you can try playing with negative margins but I can't really tell which elements to apply it to if I don't see the whole HTML structure of the site.

My website is not online yet, so I can't give you a link. The OkDork website is the best example I can give. Only I want the picture on the right, and the text on the left. I have found this topic too, but the example here is not what I really want. On smaller screens the image is on the top, but I want the text to be on top and the image below that if viewed on mobile.

Similar topic here:

https://generatepress.com/forums/topic/unable-to-reduce-header-font-size-in-merch/#post-1600592

This method actually gets the featured image for that page.

You can modify the HTML:

<div class="hero-grid">
    <div class="hero-content">
        <!-- add your left hand content here -->
    </div>
    <div class="hero-image">
        <!-- display the featured images here -->
        {{custom_field._thumbnail_id}}
    </div>
</div>

Then for your CSS to set them as 2 column row on desktop:

@media(min-width: 769px) {
    .hero-grid {
        display: flex;
        justify-content: center;
    }

    .hero-grid>div {
        flex: 1 0 50%;
        padding: 40px;
    }
}

.hero-grid>div.hero-content {
    padding: 30px;
}

Thanks David!

I have the following code now:

<div class="header-wrap">
	<div class="column-single">
	        <h1 class="hb-title">My Title</h1>
	</div>
	<div class="column-single">
		<!-- My image -->
	</div>
</div>

.page-hero {
	background-image: url("<!-- My background image -->");
	border-bottom: 1px solid #c0c0c0;
}

	.header-wrap {
    	display: flex;
	justify-content: center;
}

.header-wrap .column-single {
    	flex: 0 0 50%;
    	box-sizing: border-box;
	
}

.header-wrap .column-single img {
	display: block;
  	margin-left: auto;
  	margin-right: auto;
}

@media (max-width: 768px) {
    	.header-wrap {
        flex-direction: column;
        justify-content: center;
}

    	.header-wrap .column-single img {
        width: 75%;
        max-width: 330px;
        height: auto;
    }

    	.header-wrap .column-single {
        text-align: center;
    }
}

	.header-wrap .hb-title {
    	margin-top: 25px;
    	font-size: 4.25em;
    	line-height: 1.125;
}

I still have a few problems with my code:

1) How do is get my text vertically centered inside the DIV? I tried: text-align: center; But the text stays on top of the div.

2) Where or do I need to set a width and height for my hero wrapper DIV?

3) How do I 'scale' my H1 text for smaller devices? It's too big now for mobile.

4) Are there more improvements needed with the above CSS/HTML code?

1. Align items, change this CSS rule to include the align-items property:

.header-wrap {
    display: flex;
    justify-content: center;
    align-items: center; /* Add this rule */
}

2. In the Header Element you can set the Inner Width to Contained to respect the width of the page content, you can add top and bottom padding here to adjust its height. Likewise you can add the background image in the Element.

3. For your H1 styling, you already have this rule which is applied to all device sizes:

.header-wrap .hb-title {
    margin-top: 25px;
    font-size: 4.25em;
    line-height: 1.125;
}

First move that Rule above your @media (max-width: 768px) CSS rule, then add a copy of the rule inside that media query where you can set the styles for mobile.

Thanks David,

That was helpful! I only have one small issue. How do I horizontally center the H1 DIV without centering the text itself?

I am not sure what you mean ? Is a link to the page available or maybe a screenshot ?

My question is resolved.

Thanks for all the help!

Glad to hear that!