Image header and Menu bar

Hey,

You can use a combination of the Cover and Title blocks to achieve this.

Create a new empty custom template and insert the following:

<!-- wp:cover {"useFeaturedImage":true,"dimRatio":50,"minHeight":100,"minHeightUnit":"vh","isDark":false,"layout":{"type":"constrained"}} -->
<div class="wp-block-cover is-light" style="min-height:100vh"><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:post-title {"textAlign":"center"} /--></div></div>
<!-- /wp:cover -->

<!-- wp:post-content /-->

Customise and add any other design elements you need (like a header and footer). Then apply this template to any page you want to have a full-screen featured image. If you’d like to apply this effect to all pages, then you should edit your “Pages” template.

I hope this is helpful!

James

Hi @jameskoster ,

Thanks a ton for the quick response. When I include that on a new page, this happens:
https://barbarosyvikingas.es/474-2/

What am I doing wrong, and, how would I add a title?
There is an issue with that “template” I chose (I don’t have an option to create a custom one there, or I don’t see it) that it leaves a white space below the hero image and above the footer somehow.

If I need to create a new template from the server, is this how I would do it? https://www.cloudways.com/blog/creating-custom-page-template-in-wordpress/

Thanks again!
J

I’ve made a new template with the code you mentioned, adding this on the top (it wasn’t showing on the dropdown menu before) and this is what I get:

https://barbarosyvikingas.es/entrenamientos-2/ a blank page where not even the favicon shows for some reason.

The code:

<?php /* Template Name: PageWithHeaderbyJorge */ ?>
<!-- wp:cover {"useFeaturedImage":true,"dimRatio":50,"minHeight":100,"minHeightUnit":"vh","isDark":false,"layout":{"type":"constrained"}} -->
<div class="wp-block-cover is-light" style="min-height:100vh"><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:post-title {"textAlign":"center"} /--></div></div>
<!-- /wp:cover -->

<!-- wp:post-content /-->

• This reply was modified 1 year, 3 months ago by jorgesanh.

Hey.

Sorry I should have been more specific. First you need to create a new custom template in the site editor. Here’s how to do that:

1. Open Appearance → Editor
2. Click Templates
3. Click the + button
4. Choose Custom template, give the template a name, then click Create
5. You’ll be taken to the full screen editor. If a modal appears with design suggestions you can skip it.
6. Paste in the blocks from before and save the template.

Next, exit the site editor and open a page you want to apply this design to. In the Summary Panel of the settings sidebar you’ll find a template section. There you can switch the template to the one you just created. Save and view the page on the frontend – it should have the new design ??

James

Edit: I forgot to mention, if the page doesn’t have a featured image, you will just see an empty template on the frontend, so don’t forget to add one ??

• This reply was modified 1 year, 3 months ago by James Koster.