Hero with Heading and Cover Image

[onuro]

Header pattern from Appleton theme which I'm revisiting the imagery and layout.

While this is a header pattern, I don't have the nav and site title here. Do you think I should include it?

Screenshot:

<!-- wp:group {"align":"full","style":{"spacing":{"blockGap":"20px","padding":{"bottom":"0px","top":"0px","right":"0px","left":"0px"},"margin":{"top":"0","bottom":"0"}}}} -->
<div class="wp-block-group alignfull" style="margin-top:0;margin-bottom:0;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:group {"align":"full","layout":{"contentSize":"1070px","type":"constrained"}} -->
<div class="wp-block-group alignfull"><!-- wp:columns {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|40","right":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40"}}}} -->
<div class="wp-block-columns alignwide" style="padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)"><!-- wp:column {"style":{"spacing":{"padding":{"right":"80px"}}}} -->
<div class="wp-block-column" style="padding-right:80px"><!-- wp:heading {"style":{"typography":{"textTransform":"uppercase","fontSize":"47px","fontStyle":"normal","fontWeight":"200","letterSpacing":"6px","lineHeight":1.3}},"textColor":"primary"} -->
<h2 class="has-primary-color has-text-color" style="font-size:47px;font-style:normal;font-weight:200;letter-spacing:6px;line-height:1.3;text-transform:uppercase">THE EARTH, ONE SHOT AT A TIME.</h2>
<!-- /wp:heading --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"400px"} -->
<div class="wp-block-column" style="flex-basis:400px"><!-- wp:group {"style":{"spacing":{"padding":{"top":"0.7rem"},"blockGap":"2.5rem"}},"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group" style="padding-top:0.7rem"><!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"300"}}} -->
<p style="font-style:normal;font-weight:300">Welcome to the photography portfolio website of a nature photographer, <strong>John Appleton</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:separator {"style":{"color":{"background":"#dedede"}}} -->
<hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background" style="background-color:#dedede;color:#dedede"/>
<!-- /wp:separator --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

<!-- wp:cover {"url":"https://dotcompatterns.files.wordpress.com/2022/10/mountain-top-1.jpg","id":7854,"dimRatio":40,"focalPoint":{"x":0.5,"y":0.53},"minHeight":60,"minHeightUnit":"vh","customGradient":"linear-gradient(-180deg,rgba(0,0,0,0) 67%,rgb(0,0,0) 100%)","contentPosition":"bottom left","isDark":false,"align":"full","style":{"spacing":{"padding":{"left":"40px","bottom":"30px"}}}} -->
<div class="wp-block-cover alignfull is-light has-custom-content-position is-position-bottom-left" style="padding-bottom:30px;padding-left:40px;min-height:60vh"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-40 has-background-dim wp-block-cover__gradient-background has-background-gradient" style="background:linear-gradient(-180deg,rgba(0,0,0,0) 67%,rgb(0,0,0) 100%)"></span><img class="wp-block-cover__image-background wp-image-7854" alt="" src="https://dotcompatterns.files.wordpress.com/2022/10/mountain-top-1.jpg" style="object-position:50% 53%" data-object-fit="cover" data-object-position="50% 53%"/><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|50","right":"var:preset|spacing|50","bottom":"var:preset|spacing|30","left":"var:preset|spacing|50"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--50)"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","style":{"color":{"text":"#ffffffcc"}},"fontSize":"small"} -->
<p class="has-text-align-center has-text-color has-small-font-size" style="color:#ffffffcc">Mountain Top, France</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:group -->

Preview: https://dotcompatterns.wordpress.com/?p=7814&preview=true

@iamtakashi @alaczek

[iamtakashi]

Nice. A few thoughts:

• Does the heading need to be in primary colour?
• I don't know if it needs the separator below the paragraph.
• I think if we want it to be a header pattern, it should have the usual header elements. Otherwise, it can be an about pattern.

[onuro]

Thanks @iamtakashi.

The heading color was supposed to be foreground, but somehow it assigned primary since they're both the same in the Dotcompatterns site theme. I've replaced it with foreground in code.

I was skeptical about the separator as well. Removed.

Category reassigned to about.

[iamtakashi]

The heading color was supposed to be foreground, but somehow it assigned primary since they're both the same in the Dotcompatterns site them

No worries. I also find it annoying when the editor assigns something to theme colours.

I looked at it on a small screen, and I think we can improve a few things.

• The side paddings seem really small.
• It might make sense to reduce the top part of the image so that the text is closer to the top of the mountain. I didn't mind it at first because I looked at it on a large window, but there seems to be a bit of space we can reduce. This is how it appear on 1440px.

[onuro]

Thanks @iamtakashi. It was really trick to adjust the focal point of the mountain to work well both in desktop and mobile. I readjusted it now.

Also added paddings.

[iamtakashi]

Nice! Thanks for the update. LGTM! 👍

[onuro]

Thanks! Published!

[iamtakashi]

@onuro I've noticed this pattern creates a horizontal scroll bar at the moment. I've changed it to draft for now, but can you take a look to see if you can fix it? Thanks in advance!

[onuro]

Somehow the 0 margin value of the parent block caused a horizontal scroll. Fixed it, but needs checking with other themes as well

[iamtakashi]

I can confirm it's fixed on the Dotcom Patterns site. Thanks for the quick fix!