When Twenty Seventeen came out it broke out from the ‘blog’ format starting to see default themes as options for other content. This pattern draws on the key features of this theme, the sticky nature, photographs and scrolling. It keeps it functional though – because at the core this theme was about delivering a message in a fresh way.
Pattern
A simple plant
Some text underneath that plant
Some text that will go under the top as it scrolls.
Look at me I am moving.. isn’t this fun! There is so much scrolling going on in this pattern it’s amazing…. wheeeeeeeeeeeeeeeee.
A Glass of Coffee
Some text underneath that glass
<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"0px","bottom":"0px","left":"0px","right":"0px"}},"border":{"width":"1px"}},"backgroundColor":"base","textColor":"tertiary","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide has-tertiary-color has-base-background-color has-text-color has-background" style="border-width:1px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:group {"align":"wide","style":{"position":{"type":"sticky","top":"0px"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide"><!-- wp:cover {"url":"https://patternspiration.com/wp-content/uploads/2023/07/header.jpg","id":1288,"dimRatio":40,"focalPoint":{"x":0.4,"y":0.57},"minHeight":500,"isDark":false,"align":"wide","layout":{"type":"constrained"}} -->
<div class="wp-block-cover alignwide is-light" style="min-height:500px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-40 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-1288" alt="" src="https://patternspiration.com/wp-content/uploads/2023/07/header.jpg" style="object-position:40% 57%" data-object-fit="cover" data-object-position="40% 57%"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"left","placeholder":"Write title…","style":{"spacing":{"margin":{"top":"clamp(1.5rem, 5vw, 2rem)","bottom":"0","left":"clamp(1.5rem, 5vw, 2rem)","right":"clamp(1.5rem, 5vw, 2rem)"},"padding":{"top":"var:preset|spacing|80"}},"typography":{"fontStyle":"normal","fontWeight":"700","textTransform":"uppercase"}},"textColor":"base","fontSize":"large"} -->
<p class="has-text-align-left has-base-color has-text-color has-large-font-size" style="margin-top:clamp(1.5rem, 5vw, 2rem);margin-right:clamp(1.5rem, 5vw, 2rem);margin-bottom:0;margin-left:clamp(1.5rem, 5vw, 2rem);padding-top:var(--wp--preset--spacing--80);font-style:normal;font-weight:700;text-transform:uppercase">A simple plant</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"textColor":"base"} -->
<p class="has-base-color has-text-color">Some text underneath that plant</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:group -->
<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"clamp(1.5rem, 5vw, 2rem)","bottom":"clamp(1.5rem, 5vw, 2rem)"},"margin":{"top":"0","bottom":"0"}},"position":{"type":"sticky","top":"0px"},"dimensions":{"minHeight":"300px"}},"backgroundColor":"base","textColor":"contrast","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide has-contrast-color has-base-background-color has-text-color has-background" style="min-height:300px;margin-top:0;margin-bottom:0;padding-top:clamp(1.5rem, 5vw, 2rem);padding-bottom:clamp(1.5rem, 5vw, 2rem)"><!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"700","textTransform":"uppercase"}},"fontSize":"large"} -->
<h2 class="wp-block-heading has-large-font-size" style="font-style:normal;font-weight:700;text-transform:uppercase">Some text that will go under the top as it scrolls.</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Look at me I am moving.. isn't this fun! There is so much scrolling going on in this pattern it's amazing.... wheeeeeeeeeeeeeeeee.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:group {"align":"wide","style":{"position":{"type":"sticky","top":"0px"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide"><!-- wp:cover {"url":"https://patternspiration.com/wp-content/uploads/2023/07/espresso.jpg","id":1292,"dimRatio":40,"focalPoint":{"x":0.13,"y":0.48},"minHeight":500,"contentPosition":"center center","isDark":false,"align":"wide","layout":{"type":"constrained"}} -->
<div class="wp-block-cover alignwide is-light" style="min-height:500px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-40 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-1292" alt="" src="https://patternspiration.com/wp-content/uploads/2023/07/espresso.jpg" style="object-position:13% 48%" data-object-fit="cover" data-object-position="13% 48%"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"left","placeholder":"Write title…","style":{"spacing":{"margin":{"top":"clamp(1.5rem, 5vw, 2rem)","bottom":"0","left":"clamp(1.5rem, 5vw, 2rem)","right":"clamp(1.5rem, 5vw, 2rem)"},"padding":{"top":"var:preset|spacing|80"}},"typography":{"fontStyle":"normal","fontWeight":"700","textTransform":"uppercase"}},"textColor":"base","fontSize":"large"} -->
<p class="has-text-align-left has-base-color has-text-color has-large-font-size" style="margin-top:clamp(1.5rem, 5vw, 2rem);margin-right:clamp(1.5rem, 5vw, 2rem);margin-bottom:0;margin-left:clamp(1.5rem, 5vw, 2rem);padding-top:var(--wp--preset--spacing--80);font-style:normal;font-weight:700;text-transform:uppercase">A Glass of Coffee</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"textColor":"base"} -->
<p class="has-base-color has-text-color">Some text underneath that glass</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->Screenshot:
