FSE Website Editor - how to make for each Page a different hero header

Question

I use a custom WordPress Block Theme. Now i wanted to make different hero headers in the Website Editor. Website Editor - Templates - Header - + new template . Then i wanted to assign each new Header to a special Page. Like Contact : header 3 About: header 2 etc.

But : it ist not possible to assign different headers to different pages in the Website Editor. I only can assign one header to the Home page, and one header to all Pages. that's it. I can say in classic wordpress themes it was possible to assign to each Page a different header. https://woostify.com/wordpress-different-headers-per-page/

Do i miss something ? Is there a different way ?

Answer 1

I know how to do it. Here is the code from the page template.

<!-- wp:template-part {"slug":"header-uebung","theme":"blanktheme07-15 (2)","tagName":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group"><!-- wp:post-content {"align":"full","layout":{"inherit":true}} /--></main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer-2","theme":"blanktheme07-15 (2)","tagName":"footer"} /-->

now duplicate the code from the page template or go in the Website Editor search for page template and click duplicate.

Then rename the page template to contact. So you have a new page template with the name contact.

Then go in the Website Editor - you have to have a Block Theme ! - go, to Template Parts > Header. Create a new Header Template Part, eg. i named it header-contact.

Then go to the new page template contact. And now you rename the code to:

<!-- wp:template-part {"slug":"header-contact","theme":"blanktheme07-15 (2)","tagName":"header"} /-->

header-contact.

And now you have in the frontend a new header under the specific page contact. And so, if you want to have on every page a different header image, you have to create for every page your own header template and your own page template.