Copy this hero design?

Hi there,

Just to confirm, you want something like this?
https://app.screencast.com/bICDvv2BcPWOr

Let me know 🙂

Hi there,

That would require custom CSS. Have you managed to position the title at the bottom left of the container? If so, you can share the page so we can identify the appropriate selector for the CSS.

The strcutre would be:

- container A
  -- container B
   --- container C
     ---- Headline 

Settings：

Container A:
– background image
– overflow-x: hidden

Container B:
– max-width to match the rest of the page
– margin-left:auto, margin-right:auto
– padding-top: 300px, depends on how tall your want the hero to be
– padding-left and padding-right: 40px or match your site’s global setting

Container C:
– display:inline-block
– position: relative.

Container C:before:
– position: absolute
– content: ""
– left: -100vw
– right: -80px
– bottom: 0
– top: 0
– border radius top right: 20px
– transform > skew > 12deg
– background-color: #fff

Headline:
– display: inline-block
– padding-top:20px
– pdding-right: 0
– padding-bottom:20px
– padding-left:0
– position: relative

Here’s the code, you can switch your editor to code mode, paste it and exit the code mode:

<!-- wp:generateblocks/element {"uniqueId":"33df9431","tagName":"div","styles":{"backgroundImage":"url(https://new.local/wp-content/uploads/2024/12/0304WedgeML_Snow_LS_004.png)","backgroundSize":"cover","backgroundRepeat":"no-repeat","backgroundPosition":"center","backgroundBlendMode":"normal","overflowX":"hidden"},"css":".gb-element-33df9431{background-blend-mode:normal;background-image:url(https://new.local/wp-content/uploads/2024/12/0304WedgeML_Snow_LS_004.png);background-position:center;background-repeat:no-repeat;background-size:cover;overflow-x:hidden}"} -->
<div class="gb-element-33df9431"><!-- wp:generateblocks/element {"uniqueId":"93834d8b","tagName":"div","styles":{"maxWidth":"var(\u002d\u002dgb-container-width)","marginLeft":"auto","marginRight":"auto","paddingTop":"200px","paddingLeft":"40px","paddingRight":"40px"},"css":".gb-element-93834d8b{margin-left:auto;margin-right:auto;max-width:var(\u002d\u002dgb-container-width);padding-left:40px;padding-right:40px;padding-top:200px}"} -->
<div class="gb-element-93834d8b"><!-- wp:generateblocks/element {"uniqueId":"44e40ce5","tagName":"div","styles":{"\u0026:before":{"content":"\u0022\u0022","position":"absolute","top":"0px","left":"-100vw","bottom":"0px","right":"-80px","backgroundColor":"var(\u002d\u002dbase-3)","borderTopRightRadius":"20px","transform":"skew(12deg)"},"position":"relative","display":"inline-block"},"css":".gb-element-44e40ce5{display:inline-block;position:relative}.gb-element-44e40ce5:before{content:\u0022\u0022;position:absolute;top:0px;left:-100vw;bottom:0px;right:-80px;background-color:var(\u002d\u002dbase-3);border-top-right-radius:20px;transform:skew(12deg)}"} -->
<div class="gb-element-44e40ce5"><!-- wp:generateblocks/text {"uniqueId":"b07ea9ee","tagName":"h1","styles":{"marginBottom":"0px","paddingBottom":"20px","paddingTop":"20px","position":"relative","display":"inline-block","paddingRight":"0px"},"css":".gb-text-b07ea9ee{display:inline-block;margin-bottom:0px;padding-bottom:20px;padding-right:0px;padding-top:20px;position:relative}"} -->
<h1 class="gb-text gb-text-b07ea9ee">{{post_title}}</h1>
<!-- /wp:generateblocks/text --></div>
<!-- /wp:generateblocks/element --></div>
<!-- /wp:generateblocks/element --></div>
<!-- /wp:generateblocks/element -->

Simply select Container A and set its overflow-y to hidden as well.

You’re welcome!