Sticky Sections

Now paste(CTRL + V or cmd + V) the content into the page

Best with:‎

Twentig

<!-- wp:group {"metadata":{"name":"Sticky Sections"},"align":"full","style":{"spacing":{"padding":{"right":"var:preset|spacing|small","left":"var:preset|spacing|small","top":"var:preset|spacing|large","bottom":"var:preset|spacing|large"},"blockGap":"var:preset|spacing|xx-large","margin":{"top":"var:preset|spacing|medium","bottom":"var:preset|spacing|medium"}}},"layout":{"type":"constrained","contentSize":"100%"}} -->
<div class="wp-block-group alignfull" style="margin-top:var(--wp--preset--spacing--medium);margin-bottom:var(--wp--preset--spacing--medium);padding-top:var(--wp--preset--spacing--large);padding-right:var(--wp--preset--spacing--small);padding-bottom:var(--wp--preset--spacing--large);padding-left:var(--wp--preset--spacing--small)"><!-- wp:group {"style":{"position":{"type":"sticky","top":"0px"},"spacing":{"padding":{"top":"var:preset|spacing|small","bottom":"var:preset|spacing|small"}},"color":{"background":"#fffffffa"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center"}} -->
<div class="wp-block-group has-background" style="background-color:#fffffffa;padding-top:var(--wp--preset--spacing--small);padding-bottom:var(--wp--preset--spacing--small)"><!-- wp:heading {"textAlign":"left","level":1,"className":"tw-text-gradient","style":{"layout":{"selfStretch":"fixed","flexSize":"60%"},"color":{"gradient":"linear-gradient(135deg,rgb(77,52,250) 0%,rgb(173,52,250) 98%)"}}} -->
<h1 class="wp-block-heading has-text-align-left tw-text-gradient has-background" style="background:linear-gradient(135deg,rgb(77,52,250) 0%,rgb(173,52,250) 98%)">A Big and Bold Title</h1>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This is a fixed section. Some text. Lorem IpsumSome text. Lorem IpsumSome text. Lorem IpsumSome text. Lorem IpsumSome text. Lorem IpsumSome text. Lorem IpsumSome text. Lorem IpsumSome text. Lorem IpsumSome text. Lorem IpsumSome text. Lorem IpsumSome text. Lorem IpsumSome text. Lorem Ipsum</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":43,"width":"363px","height":"auto","sizeSlug":"full","linkDestination":"none","className":"is-style-rounded tw-sm-hidden"} -->
<figure class="wp-block-image size-full is-resized is-style-rounded tw-sm-hidden"><img src="https://unique-paprenjak-39be6f.netlify.app/wp-content/uploads/2024/07/brooke-cagle-uHVRvDr7pg-unsplash.jpg" alt="" class="wp-image-43" style="width:363px;height:auto"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"position":{"type":"sticky","top":"0px"},"spacing":{"padding":{"top":"var:preset|spacing|small","bottom":"var:preset|spacing|small"}},"color":{"background":"#fffffffa"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center"}} -->
<div class="wp-block-group has-background" style="background-color:#fffffffa;padding-top:var(--wp--preset--spacing--small);padding-bottom:var(--wp--preset--spacing--small)"><!-- wp:heading {"textAlign":"left","level":1,"className":"tw-text-gradient","style":{"layout":{"selfStretch":"fixed","flexSize":"60%"},"color":{"gradient":"linear-gradient(135deg,rgb(77,52,250) 0%,rgb(173,52,250) 98%)"}}} -->
<h1 class="wp-block-heading has-text-align-left tw-text-gradient has-background" style="background:linear-gradient(135deg,rgb(77,52,250) 0%,rgb(173,52,250) 98%)">A Second Big and Bold Title</h1>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This is a fixed section. Some text. Lorem IpsumSome text. Lorem IpsumSome text. Lorem IpsumSome text. Lorem IpsumSome text. Lorem IpsumSome text. Lorem IpsumSome text. Lorem IpsumSome text. Lorem IpsumSome text. Lorem IpsumSome text. Lorem IpsumSome text. Lorem IpsumSome text. Lorem Ipsum</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":44,"width":"363px","height":"auto","sizeSlug":"full","linkDestination":"none","className":"is-style-rounded tw-sm-hidden"} -->
<figure class="wp-block-image size-full is-resized is-style-rounded tw-sm-hidden"><img src="https://unique-paprenjak-39be6f.netlify.app/wp-content/uploads/2024/07/brooke-cagle-LCcFI_26diA-unsplash.jpg" alt="" class="wp-image-44" style="width:363px;height:auto"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"position":{"type":"sticky","top":"0px"},"spacing":{"padding":{"top":"var:preset|spacing|small","bottom":"var:preset|spacing|small"}},"color":{"background":"#fffffffa"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center"}} -->
<div class="wp-block-group has-background" style="background-color:#fffffffa;padding-top:var(--wp--preset--spacing--small);padding-bottom:var(--wp--preset--spacing--small)"><!-- wp:heading {"textAlign":"left","level":1,"className":"tw-text-gradient","style":{"layout":{"selfStretch":"fixed","flexSize":"60%"},"color":{"gradient":"linear-gradient(135deg,rgb(77,52,250) 0%,rgb(173,52,250) 98%)"}}} -->
<h1 class="wp-block-heading has-text-align-left tw-text-gradient has-background" style="background:linear-gradient(135deg,rgb(77,52,250) 0%,rgb(173,52,250) 98%)">A Third Big and Bold Title</h1>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This is a fixed section. Some text. Lorem IpsumSome text. Lorem IpsumSome text. Lorem IpsumSome text. Lorem IpsumSome text. Lorem IpsumSome text. Lorem IpsumSome text. Lorem IpsumSome text. Lorem IpsumSome text. Lorem IpsumSome text. Lorem IpsumSome text. Lorem IpsumSome text. Lorem Ipsum</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":37,"width":"363px","height":"auto","sizeSlug":"full","linkDestination":"none","className":"is-style-rounded tw-sm-hidden"} -->
<figure class="wp-block-image size-full is-resized is-style-rounded tw-sm-hidden"><img src="https://unique-paprenjak-39be6f.netlify.app/wp-content/uploads/2024/07/mimi-thian-jxUuXxUFfp4-unsplash.jpg" alt="" class="wp-image-37" style="width:363px;height:auto"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->