WORDPRESS PATTERNS, READY TO USE

WordPress patterns.
A beautiful head start.

Beautiful blocks. Ready-made layouts. Browse WordPress patterns, copy the code and make them your own.

Explore the patterns How it works ↗

Built with WordPress blocksFree to use · Easy to customise · Ready to copy

LESS BUILDING FROM SCRATCH

Find your next starting point.

Patterns to make your own

From the WordPress.org community

About

Intro area with heading and image

By WordPress.org

Source ↗

View Gutenberg code

<!-- wp:group {"metadata":{"name":"Intro"},"align":"full","style":{"spacing":{"margin":{"top":"0","bottom":"0"}}},"className":"alignfull","layout":{"type":"constrained","justifyContent":"center"}} -->
<div class="wp-block-group alignfull" style="margin-top:0;margin-bottom:0"><!-- wp:spacer {"height":"var:preset|spacing|20"} -->
<div style="height:var(--wp--preset--spacing--20)" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:group {"metadata":{"name":"Contents"},"align":"wide","layout":{"type":"default"}} -->
<div class="wp-block-group alignwide"><!-- wp:columns {"verticalAlignment":"top","align":"wide","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|30"}}}} -->
<div class="wp-block-columns alignwide are-vertically-aligned-top"><!-- wp:column {"verticalAlignment":"top","width":"","layout":{"type":"constrained","justifyContent":"left","contentSize":"450px"}} -->
<div class="wp-block-column is-vertically-aligned-top"><!-- wp:heading -->
<h2 class="wp-block-heading">Uncover a realm of opportunities.</h2>
<!-- /wp:heading --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top","width":"40%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:40%"><!-- wp:paragraph -->
<p>Exploring life's complex tapestry, options reveal routes to the exceptional, requiring innovation, inquisitiveness, and bravery for a deeply satisfying voyage.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Get Started</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":"var:preset|spacing|20"} -->
<div style="height:var(--wp--preset--spacing--20)" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:image {"aspectRatio":"16/9","scale":"cover","sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://pd.w.org/2023/07/44364b18862589f06.53436652.jpg" alt="" style="aspect-ratio:16/9;object-fit:cover" /></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->

<!-- wp:spacer {"height":"var:preset|spacing|20"} -->
<div style="height:var(--wp--preset--spacing--20)" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:group -->

Banner / Images / Text

Centered image with two-tone background color

By WordPress.org

Source ↗

View Gutenberg code

<!-- wp:cover {"minHeight":66,"minHeightUnit":"vh","customGradient":"linear-gradient(90deg,rgb(35,74,20) 50%,rgb(225,137,116) 50%)","isDark":false,"align":"full","style":{"spacing":{"padding":{"top":"5vw","right":"5vw","bottom":"5vw","left":"5vw"},"margin":{"top":"0"}}}} -->
<div class="wp-block-cover alignfull is-light" style="margin-top:0;padding-top:5vw;padding-right:5vw;padding-bottom:5vw;padding-left:5vw;min-height:66vh"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim has-background-gradient" style="background:linear-gradient(90deg,rgb(35,74,20) 50%,rgb(225,137,116) 50%)"></span><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"spacing":{"blockGap":"0px"},"layout":{"selfStretch":"fill","flexSize":null}},"layout":{"type":"constrained","contentSize":"600px","wideSize":"1200px"}} -->
<div class="wp-block-group"><!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:image {"sizeSlug":"large","style":{"color":{"duotone":["#000000","#ffffff"]}},"className":"is-style-default"} -->
<figure class="wp-block-image size-large is-style-default"><img src="https://pd.w.org/2022/03/3866241b433db4ee2.96648572.jpeg" alt="" /></figure>
<!-- /wp:image -->

<!-- wp:spacer {"height":"48px"} -->
<div style="height:48px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:heading {"textAlign":"center","align":"wide","style":{"typography":{"fontSize":"50px","fontStyle":"normal","fontWeight":"400","textTransform":"uppercase","letterSpacing":"32px","lineHeight":"1"},"spacing":{"padding":{"left":"32px"}}},"textColor":"white"} -->
<h2 class="wp-block-heading alignwide has-text-align-center has-white-color has-text-color" style="padding-left:32px;font-size:50px;font-style:normal;font-weight:400;letter-spacing:32px;line-height:1;text-transform:uppercase">Etcetera</h2>
<!-- /wp:heading -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

Banner

Fullwidth Dark Banner with Heading Top Left

By WordPress.org

Source ↗

View Gutenberg code

<!-- wp:cover {"url":"https://pd.w.org/2022/07/87262c92d42acd1c3.73206444.jpg","dimRatio":90,"customOverlayColor":"#141414","focalPoint":{"x":0.5,"y":0},"minHeight":50,"minHeightUnit":"vh","contentPosition":"top left","align":"full","style":{"spacing":{"padding":{"top":"5vw","right":"5vw","bottom":"5vw","left":"5vw"},"margin":{"top":"0"}}}} -->
<div class="wp-block-cover alignfull has-custom-content-position is-position-top-left" style="margin-top:0;padding-top:5vw;padding-right:5vw;padding-bottom:5vw;padding-left:5vw;min-height:50vh"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-90 has-background-dim" style="background-color:#141414"></span><img class="wp-block-cover__image-background" alt="" src="https://pd.w.org/2022/07/87262c92d42acd1c3.73206444.jpg" style="object-position:50% 0%" data-object-fit="cover" data-object-position="50% 0%" /><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"spacing":{"blockGap":"0px"},"layout":{"selfStretch":"fill","flexSize":null}},"layout":{"type":"flex","orientation":"vertical","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"align":"left","style":{"typography":{"fontSize":"160px","fontStyle":"italic","fontWeight":"900","lineHeight":"0.8","letterSpacing":"-4px","textTransform":"none"},"color":{"text":"#d8a557"}},"fontFamily":"source-serif-pro"} -->
<p class="has-text-align-left has-text-color has-source-serif-pro-font-family" style="color:#d8a557;font-size:160px;font-style:italic;font-weight:900;letter-spacing:-4px;line-height:0.8;text-transform:none">bud!</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

Banner / Text

Fullwidth cover with repeating gradient text

By WordPress.org

Source ↗

View Gutenberg code

<!-- wp:cover {"url":"https://pd.w.org/2022/01/95161f850d22f0c06.37817431.jpg","dimRatio":60,"customOverlayColor":"#c2b7a4","focalPoint":{"x":0.5,"y":0.05},"isDark":false,"align":"full","style":{"spacing":{"padding":{"top":"5vw","right":"5vw","bottom":"5vw","left":"5vw"},"margin":{"top":"0"}},"color":{"duotone":["#36345d","#abaaaa"]}}} -->
<div class="wp-block-cover alignfull is-light" style="margin-top:0;padding-top:5vw;padding-right:5vw;padding-bottom:5vw;padding-left:5vw"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-60 has-background-dim" style="background-color:#c2b7a4"></span><img class="wp-block-cover__image-background" alt="" src="https://pd.w.org/2022/01/95161f850d22f0c06.37817431.jpg" style="object-position:50% 5%" data-object-fit="cover" data-object-position="50% 5%" /><div class="wp-block-cover__inner-container"><!-- wp:spacer {"height":"48px"} -->
<div style="height:48px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"flex","orientation":"vertical","flexWrap":"nowrap","justifyContent":"center"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"align":"right","style":{"typography":{"fontSize":"148px","textTransform":"uppercase","fontStyle":"normal","fontWeight":"300","lineHeight":"0.8","letterSpacing":"-4px"},"color":{"text":"#c8c4d3"}}} -->
<p class="has-text-align-right has-text-color" style="color:#c8c4d3;font-size:148px;font-style:normal;font-weight:300;letter-spacing:-4px;line-height:0.8;text-transform:uppercase">DJANGO</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"right","style":{"typography":{"fontSize":"148px","textTransform":"uppercase","fontStyle":"normal","fontWeight":"300","lineHeight":"0.8","letterSpacing":"-4px"},"color":{"text":"#ac94b2"}}} -->
<p class="has-text-align-right has-text-color" style="color:#ac94b2;font-size:148px;font-style:normal;font-weight:300;letter-spacing:-4px;line-height:0.8;text-transform:uppercase">DJANGO</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"right","style":{"typography":{"fontSize":"148px","textTransform":"uppercase","fontStyle":"normal","fontWeight":"300","lineHeight":"0.8","letterSpacing":"-4px"},"color":{"text":"#71689c"}}} -->
<p class="has-text-align-right has-text-color" style="color:#71689c;font-size:148px;font-style:normal;font-weight:300;letter-spacing:-4px;line-height:0.8;text-transform:uppercase">DJANGO</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"right","style":{"typography":{"fontSize":"148px","textTransform":"uppercase","fontStyle":"normal","fontWeight":"300","lineHeight":"0.8","letterSpacing":"-4px"},"color":{"text":"#444178"}}} -->
<p class="has-text-align-right has-text-color" style="color:#444178;font-size:148px;font-style:normal;font-weight:300;letter-spacing:-4px;line-height:0.8;text-transform:uppercase">DJANGO</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:spacer {"height":"48px"} -->
<div style="height:48px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:cover -->

Banner / Call To Action

Fullwidth, vertically aligned headline on right with description on left

By WordPress.org

Source ↗

View Gutenberg code

<!-- wp:cover {"customOverlayColor":"#e68b14","isDark":false,"align":"full","style":{"spacing":{"padding":{"top":"5vw","right":"5vw","bottom":"5vw","left":"5vw"},"margin":{"top":"0"}}}} -->
<div class="wp-block-cover alignfull is-light" style="margin-top:0;padding-top:5vw;padding-right:5vw;padding-bottom:5vw;padding-left:5vw"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim" style="background-color:#e68b14"></span><div class="wp-block-cover__inner-container"><!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap","verticalAlignment":"top"}} -->
<div class="wp-block-group"><!-- wp:group {"style":{"layout":{"selfStretch":"fixed","flexSize":"320px"},"spacing":{"blockGap":"24px"}},"layout":{"type":"default"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"layout":{"selfStretch":"fixed","flexSize":"330px"},"typography":{"fontSize":"17px","fontStyle":"normal","fontWeight":"300","lineHeight":"1.4","textTransform":"none","textDecoration":"none","letterSpacing":"0px"}}} -->
<p style="font-size:17px;font-style:normal;font-weight:300;letter-spacing:0px;line-height:1.4;text-decoration:none;text-transform:none">Let 'em Roll is an album by American organist Big John Patton recorded in 1965 and released on the Blue Note label.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"black","textColor":"white","style":{"typography":{"fontSize":"17px","fontStyle":"normal","fontWeight":"700","textDecoration":"none","textTransform":"uppercase","letterSpacing":"0px"},"spacing":{"padding":{"top":"14px","bottom":"14px","left":"36px","right":"36px"}},"border":{"radius":"0px","top":{"radius":"0px","width":"0px","style":"none"},"right":{"radius":"0px","width":"0px","style":"none"},"bottom":{"radius":"0px","width":"0px","style":"none"},"left":{"radius":"0px","width":"0px","style":"none"}}}} -->
<div class="wp-block-button has-custom-font-size" style="font-size:17px;font-style:normal;font-weight:700;letter-spacing:0px;text-decoration:none;text-transform:uppercase"><a class="wp-block-button__link has-white-color has-black-background-color has-text-color has-background wp-element-button" style="border-radius:0px;border-top-style:none;border-top-width:0px;border-right-style:none;border-right-width:0px;border-bottom-style:none;border-bottom-width:0px;border-left-style:none;border-left-width:0px;padding-top:14px;padding-right:36px;padding-bottom:14px;padding-left:36px">Shop Now</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"blockGap":"0px"},"layout":{"selfStretch":"fill","flexSize":null}},"layout":{"type":"default"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"align":"right","style":{"typography":{"fontSize":"148px","textTransform":"uppercase","fontStyle":"normal","fontWeight":"700","lineHeight":"0.8","letterSpacing":"-4px"}},"textColor":"black"} -->
<p class="has-text-align-right has-black-color has-text-color" style="font-size:148px;font-style:normal;font-weight:700;letter-spacing:-4px;line-height:0.8;text-transform:uppercase">Let<br>'EM<br>Roll</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"right","style":{"typography":{"fontSize":"148px","textTransform":"uppercase","fontStyle":"normal","fontWeight":"700","lineHeight":"0.8","letterSpacing":"-4px"}},"textColor":"white"} -->
<p class="has-text-align-right has-white-color has-text-color" style="font-size:148px;font-style:normal;font-weight:700;letter-spacing:-4px;line-height:0.8;text-transform:uppercase">Big<br>John<br>Patton</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

Banner

Fullwidth headline with links and gradient offset background

By WordPress.org

Source ↗

View Gutenberg code

<!-- wp:cover {"customGradient":"linear-gradient(180deg,rgb(0,0,0) 39%,rgb(83,80,123) 39%)","isDark":false,"align":"full","style":{"spacing":{"padding":{"top":"48px","right":"5vw","bottom":"48px","left":"5vw"},"margin":{"top":"0"}}}} -->
<div class="wp-block-cover alignfull is-light" style="margin-top:0;padding-top:48px;padding-right:5vw;padding-bottom:48px;padding-left:5vw"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim has-background-gradient" style="background:linear-gradient(180deg,rgb(0,0,0) 39%,rgb(83,80,123) 39%)"></span><div class="wp-block-cover__inner-container"><!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:group {"style":{"spacing":{"blockGap":"48px"}},"layout":{"type":"flex","flexWrap":"wrap","verticalAlignment":"top","justifyContent":"space-between"}} -->
<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"0px"},"layout":{"selfStretch":"fill","flexSize":null}},"layout":{"type":"default"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"align":"left","style":{"typography":{"fontSize":"172px","textTransform":"uppercase","fontStyle":"normal","fontWeight":"700","lineHeight":"0.7","letterSpacing":"-10px"},"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"textColor":"white"} -->
<p class="has-text-align-left has-white-color has-text-color has-link-color" style="font-size:172px;font-style:normal;font-weight:700;letter-spacing:-10px;line-height:0.7;text-transform:uppercase"><strong>MONK</strong>.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"layout":{"selfStretch":"fixed","flexSize":"400px"},"spacing":{"blockGap":"24px"}},"layout":{"type":"default"}} -->
<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"48px"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"fontSize":"17px","fontStyle":"normal","fontWeight":"700","textDecoration":"none","textTransform":"uppercase","letterSpacing":"0px"},"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"textColor":"white"} -->
<p class="has-white-color has-text-color has-link-color" style="font-size:17px;font-style:normal;font-weight:700;letter-spacing:0px;text-decoration:none;text-transform:uppercase">A new collection</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"17px","fontStyle":"normal","fontWeight":"700","textDecoration":"none","textTransform":"uppercase","letterSpacing":"0px"},"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"textColor":"white"} -->
<p class="has-white-color has-text-color has-link-color" style="font-size:17px;font-style:normal;font-weight:700;letter-spacing:0px;text-decoration:none;text-transform:uppercase">Learn More → </p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:spacer {"height":"260px"} -->
<div style="height:260px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:cover -->

Banner / Call To Action

Heading, Paragraph, Button with Two Images

By WordPress.org

Source ↗

View Gutenberg code

<!-- wp:cover {"customOverlayColor":"#eb4c77","contentPosition":"center center","isDark":false,"align":"full","style":{"spacing":{"padding":{"top":"6vw","right":"6vw","bottom":"6vw","left":"6vw"},"margin":{"top":"0"}}}} -->
<div class="wp-block-cover alignfull is-light" style="margin-top:0;padding-top:6vw;padding-right:6vw;padding-bottom:6vw;padding-left:6vw"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim" style="background-color:#eb4c77"></span><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"spacing":{"blockGap":"0vw"}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"center","verticalAlignment":"top"}} -->
<div class="wp-block-group"><!-- wp:group {"align":"wide","style":{"spacing":{"blockGap":"0px"},"layout":{"selfStretch":"fill"}},"layout":{"type":"constrained","justifyContent":"left","contentSize":"600px"}} -->
<div class="wp-block-group alignwide"><!-- wp:heading {"textAlign":"left","align":"wide","style":{"typography":{"fontSize":"100px","textTransform":"none","fontStyle":"normal","fontWeight":"500","lineHeight":"0.9"}},"textColor":"contrast"} -->
<h2 class="wp-block-heading alignwide has-text-align-left has-contrast-color has-text-color" style="font-size:100px;font-style:normal;font-weight:500;line-height:0.9;text-transform:none">Time for an adventure</h2>
<!-- /wp:heading -->

<!-- wp:spacer {"height":"24px"} -->
<div style="height:24px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:paragraph {"align":"left","textColor":"contrast"} -->
<p class="has-text-align-left has-contrast-color has-text-color">Explore our network of trails that lead through a variety of woodland habitats and observe the diverse flora that call this area home. </p>
<!-- /wp:paragraph -->

<!-- wp:spacer {"height":"60px"} -->
<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"left","flexWrap":"nowrap"}} -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"contrast","textColor":"base","style":{"spacing":{"padding":{"top":"24px","right":"48px","bottom":"24px","left":"48px"}},"typography":{"fontSize":"16px","fontStyle":"normal","fontWeight":"500","textTransform":"uppercase","letterSpacing":"0px"},"border":{"radius":"0px"}},"className":"is-style-fill"} -->
<div class="wp-block-button has-custom-font-size is-style-fill" style="font-size:16px;font-style:normal;font-weight:500;letter-spacing:0px;text-transform:uppercase"><a class="wp-block-button__link has-base-color has-contrast-background-color has-text-color has-background wp-element-button" style="border-radius:0px;padding-top:24px;padding-right:48px;padding-bottom:24px;padding-left:48px">Sign up</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"layout":{"selfStretch":"fit","flexSize":null},"spacing":{"blockGap":"24px"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"top","justifyContent":"right"}} -->
<div class="wp-block-group"><!-- wp:group {"style":{"layout":{"selfStretch":"fixed","flexSize":"50%"}},"layout":{"type":"default"}} -->
<div class="wp-block-group"><!-- wp:spacer {"height":"8vw"} -->
<div style="height:8vw" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:image {"sizeSlug":"large","style":{"layout":{"selfStretch":"fixed","flexSize":"50%"},"color":{"duotone":["rgb(0, 0, 0)","rgb(217, 88, 120)"]}}} -->
<figure class="wp-block-image size-large"><img src="https://pd.w.org/2022/01/84661f60659149cc8.02053291.jpg" alt="" /></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->

<!-- wp:image {"sizeSlug":"large","style":{"layout":{"selfStretch":"fixed","flexSize":"50%"},"color":{"duotone":["rgb(0, 0, 0)","rgb(217, 88, 120)"]}}} -->
<figure class="wp-block-image size-large"><img src="https://pd.w.org/2022/01/21261f60ba46147b0.97888240.jpg" alt="" /></figure>
<!-- /wp:image --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

Banner / Call To Action

Bold sale banner with geometric background

By WordPress.org

Source ↗

View Gutenberg code

<!-- wp:cover {"url":"https://pd.w.org/2022/01/2661f82cd1ba9172.16386413.jpg","dimRatio":90,"customOverlayColor":"#2c3066","minHeight":50,"minHeightUnit":"vh","align":"full","style":{"spacing":{"padding":{"top":"4vw","right":"4vw","bottom":"4vw","left":"4vw"},"margin":{"top":"0"}},"color":{"duotone":["rgb(44, 48, 102)","#ffb23d"]}}} -->
<div class="wp-block-cover alignfull" style="margin-top:0;padding-top:4vw;padding-right:4vw;padding-bottom:4vw;padding-left:4vw;min-height:50vh"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-90 has-background-dim" style="background-color:#2c3066"></span><img class="wp-block-cover__image-background" alt="" src="https://pd.w.org/2022/01/2661f82cd1ba9172.16386413.jpg" data-object-fit="cover" /><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"spacing":{"blockGap":"0px"}},"layout":{"type":"default"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"160px","textTransform":"uppercase","fontStyle":"normal","fontWeight":"700","lineHeight":"0.9","letterSpacing":"-2px"},"color":{"text":"#ffb23d"}}} -->
<p class="has-text-align-center has-text-color" style="color:#ffb23d;font-size:160px;font-style:normal;font-weight:700;letter-spacing:-2px;line-height:0.9;text-transform:uppercase">Enjoy</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"160px","textTransform":"uppercase","fontStyle":"normal","fontWeight":"700","lineHeight":"0.9","letterSpacing":"-2px"},"color":{"text":"#ffb23d"}}} -->
<p class="has-text-align-center has-text-color" style="color:#ffb23d;font-size:160px;font-style:normal;font-weight:700;letter-spacing:-2px;line-height:0.9;text-transform:uppercase">20% Off</p>
<!-- /wp:paragraph -->

<!-- wp:spacer {"height":"48px"} -->
<div style="height:48px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"#ffb23d","text":"#2c3066"},"spacing":{"padding":{"top":"32px","right":"48px","bottom":"32px","left":"48px"}},"typography":{"fontSize":"20px","textTransform":"uppercase","letterSpacing":"1px","fontStyle":"normal","fontWeight":"700"}}} -->
<div class="wp-block-button has-custom-font-size" style="font-size:20px;font-style:normal;font-weight:700;letter-spacing:1px;text-transform:uppercase"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="color:#2c3066;background-color:#ffb23d;padding-top:32px;padding-right:48px;padding-bottom:32px;padding-left:48px">Shop Now</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

Text

Offset bold paragraph text with varying opacity

By WordPress.org

Source ↗

View Gutenberg code

<!-- wp:cover {"overlayColor":"black","minHeight":66,"minHeightUnit":"vh","align":"full","style":{"spacing":{"padding":{"top":"4vw","right":"4vw","bottom":"4vw","left":"4vw"},"margin":{"top":"0"}}},"textColor":"white"} -->
<div class="wp-block-cover alignfull has-white-color has-text-color" style="margin-top:0;padding-top:4vw;padding-right:4vw;padding-bottom:4vw;padding-left:4vw;min-height:66vh"><span aria-hidden="true" class="wp-block-cover__background has-black-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"spacing":{"blockGap":"0px"}},"layout":{"type":"constrained","wideSize":"700px","contentSize":"700px","justifyContent":"left"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"align":"left","style":{"typography":{"fontSize":"120px","textTransform":"uppercase","fontStyle":"normal","fontWeight":"700","lineHeight":"1","letterSpacing":"-2px"},"color":{"text":"#ffffff61"}}} -->
<p class="has-text-align-left has-text-color" style="color:#ffffff61;font-size:120px;font-style:normal;font-weight:700;letter-spacing:-2px;line-height:1;text-transform:uppercase">Embark</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"right","style":{"typography":{"fontSize":"72px","textTransform":"uppercase","fontStyle":"normal","fontWeight":"700","lineHeight":"1","letterSpacing":"0px"},"color":{"text":"#ffffff73"}}} -->
<p class="has-text-align-right has-text-color" style="color:#ffffff73;font-size:72px;font-style:normal;font-weight:700;letter-spacing:0px;line-height:1;text-transform:uppercase"><strong>ON A HIKING</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"left","style":{"typography":{"fontSize":"72px","textTransform":"uppercase","fontStyle":"normal","fontWeight":"700","lineHeight":"1","letterSpacing":"0px"},"color":{"text":"#ffffffad"}}} -->
<p class="has-text-align-left has-text-color" style="color:#ffffffad;font-size:72px;font-style:normal;font-weight:700;letter-spacing:0px;line-height:1;text-transform:uppercase">adventure and explore the beauty of nature's best…</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"right","style":{"typography":{"fontSize":"148px","textTransform":"uppercase","fontStyle":"normal","fontWeight":"700","lineHeight":"1","letterSpacing":"-2px"},"color":{"text":"#ffffffd1"}}} -->
<p class="has-text-align-right has-text-color" style="color:#ffffffd1;font-size:148px;font-style:normal;font-weight:700;letter-spacing:-2px;line-height:1;text-transform:uppercase">In the</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"left","style":{"typography":{"fontSize":"162px","textTransform":"uppercase","fontStyle":"normal","fontWeight":"700","lineHeight":"1","letterSpacing":"-2px"},"color":{"text":"#fffffff5"}}} -->
<p class="has-text-align-left has-text-color" style="color:#fffffff5;font-size:162px;font-style:normal;font-weight:700;letter-spacing:-2px;line-height:1;text-transform:uppercase">WOODS.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

Banner / Text

Offset text with a brutalist design vibe

By WordPress.org

Source ↗

View Gutenberg code

<!-- wp:cover {"customOverlayColor":"#ffb43c","minHeight":66,"minHeightUnit":"vh","isDark":false,"align":"full","style":{"spacing":{"padding":{"top":"48px","right":"48px","bottom":"48px","left":"48px"},"margin":{"top":"0"}}},"textColor":"black"} -->
<div class="wp-block-cover alignfull is-light has-black-color has-text-color" style="margin-top:0;padding-top:48px;padding-right:48px;padding-bottom:48px;padding-left:48px;min-height:66vh"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim" style="background-color:#ffb43c"></span><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"spacing":{"blockGap":"0px"}},"layout":{"type":"constrained","wideSize":"1200px","contentSize":"800px"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"align":"left","style":{"typography":{"fontSize":"148px","textTransform":"uppercase","fontStyle":"normal","fontWeight":"700","lineHeight":"0.9","letterSpacing":"-2px"}},"textColor":"black"} -->
<p class="has-text-align-left has-black-color has-text-color" style="font-size:148px;font-style:normal;font-weight:700;letter-spacing:-2px;line-height:0.9;text-transform:uppercase"><mark style="color:#a65a00" class="has-inline-color">✴︎</mark> Walk</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"right","style":{"typography":{"fontSize":"148px","textTransform":"uppercase","fontStyle":"normal","fontWeight":"700","lineHeight":"0.9","letterSpacing":"-2px"}},"textColor":"black"} -->
<p class="has-text-align-right has-black-color has-text-color" style="font-size:148px;font-style:normal;font-weight:700;letter-spacing:-2px;line-height:0.9;text-transform:uppercase">In the</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"left","style":{"typography":{"fontSize":"148px","textTransform":"uppercase","fontStyle":"normal","fontWeight":"700","lineHeight":"0.9","letterSpacing":"-2px"}},"textColor":"black"} -->
<p class="has-text-align-left has-black-color has-text-color" style="font-size:148px;font-style:normal;font-weight:700;letter-spacing:-2px;line-height:0.9;text-transform:uppercase">Park</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"140px","textTransform":"uppercase","fontStyle":"italic","fontWeight":"200","letterSpacing":"0px","lineHeight":"0.9"},"color":{"text":"#a65a00"}}} -->
<p class="has-text-align-center has-text-color" style="color:#a65a00;font-size:140px;font-style:italic;font-weight:200;letter-spacing:0px;line-height:0.9;text-transform:uppercase">—01.03</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

Banner

Fullscreen image with right content area

By WordPress.org

Source ↗

View Gutenberg code

<!-- wp:cover {"customOverlayColor":"#376a23","align":"full","style":{"spacing":{"padding":{"top":"4vw","right":"4vw","bottom":"4vw","left":"4vw"},"margin":{"top":"0"}}}} -->
<div class="wp-block-cover alignfull" style="margin-top:0;padding-top:4vw;padding-right:4vw;padding-bottom:4vw;padding-left:4vw"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim" style="background-color:#376a23"></span><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"spacing":{"blockGap":"4vw"}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"left"}} -->
<div class="wp-block-group"><!-- wp:image {"sizeSlug":"large","style":{"layout":{"selfStretch":"fixed","flexSize":"50%"}}} -->
<figure class="wp-block-image size-large"><img src="https://pd.w.org/2022/01/84661f60659149cc8.02053291.jpg" alt="" /></figure>
<!-- /wp:image -->

<!-- wp:group {"align":"wide","style":{"spacing":{"blockGap":"0px"},"layout":{"selfStretch":"fill","flexSize":null}},"layout":{"type":"constrained","justifyContent":"left","contentSize":"600px"}} -->
<div class="wp-block-group alignwide"><!-- wp:heading {"textAlign":"left","align":"wide","style":{"typography":{"fontSize":"80px","textTransform":"uppercase","fontStyle":"italic","fontWeight":"700","lineHeight":"1.0"}},"textColor":"black"} -->
<h2 class="wp-block-heading alignwide has-text-align-left has-black-color has-text-color" style="font-size:80px;font-style:italic;font-weight:700;line-height:1.0;text-transform:uppercase">wAndering through the woods</h2>
<!-- /wp:heading -->

<!-- wp:spacer {"height":"24px"} -->
<div style="height:24px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:paragraph {"align":"left","style":{"typography":{"fontSize":"18px","fontStyle":"italic","fontWeight":"600"}},"textColor":"black"} -->
<p class="has-text-align-left has-black-color has-text-color" style="font-size:18px;font-style:italic;font-weight:600">Explore our network of trails that lead through a variety of woodland habitats and observe the diverse flora that call this area home. </p>
<!-- /wp:paragraph -->

<!-- wp:spacer {"height":"60px"} -->
<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"left","flexWrap":"nowrap"}} -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"black","textColor":"white","style":{"spacing":{"padding":{"top":"24px","right":"48px","bottom":"24px","left":"48px"}},"typography":{"fontSize":"18px","fontStyle":"italic","fontWeight":"600","textTransform":"uppercase","letterSpacing":"0px"},"border":{"radius":"0px"}},"className":"is-style-fill"} -->
<div class="wp-block-button has-custom-font-size is-style-fill" style="font-size:18px;font-style:italic;font-weight:600;letter-spacing:0px;text-transform:uppercase"><a class="wp-block-button__link has-white-color has-black-background-color has-text-color has-background wp-element-button" style="border-radius:0px;padding-top:24px;padding-right:48px;padding-bottom:24px;padding-left:48px">Sign up</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

Banner

Cover Image with Bold Heading and Button, Left

By WordPress.org

Source ↗

View Gutenberg code

<!-- wp:cover {"url":"https://pd.w.org/2021/12/12261b91fba359867.64939140.jpg","dimRatio":30,"minHeight":66,"minHeightUnit":"vh","isDark":false,"align":"full","style":{"spacing":{"padding":{"top":"48px","right":"48px","bottom":"48px","left":"48px"},"margin":{"top":"0"}},"color":{"duotone":["#094850","#f9644e"]}}} -->
<div class="wp-block-cover alignfull is-light" style="margin-top:0;padding-top:48px;padding-right:48px;padding-bottom:48px;padding-left:48px;min-height:66vh"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-30 has-background-dim"></span><img class="wp-block-cover__image-background" alt="" src="https://pd.w.org/2021/12/12261b91fba359867.64939140.jpg" data-object-fit="cover" /><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"spacing":{"blockGap":"48px"}},"layout":{"type":"constrained","contentSize":"75%","justifyContent":"left","wideSize":"75%"}} -->
<div class="wp-block-group"><!-- wp:heading {"textAlign":"left","style":{"typography":{"fontSize":"100px","textTransform":"uppercase","fontStyle":"normal","fontWeight":"700","letterSpacing":"0px","lineHeight":"1"}},"textColor":"white"} -->
<h2 class="wp-block-heading has-text-align-left has-white-color has-text-color" style="font-size:100px;font-style:normal;font-weight:700;letter-spacing:0px;line-height:1;text-transform:uppercase">Take a hike and wAnder through the woods</h2>
<!-- /wp:heading --></div>
<!-- /wp:group -->

<!-- wp:spacer {"height":"72px"} -->
<div style="height:72px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"left","flexWrap":"nowrap"}} -->
<div class="wp-block-buttons"><!-- wp:button {"textColor":"white","style":{"spacing":{"padding":{"top":"24px","right":"48px","bottom":"24px","left":"48px"}},"typography":{"fontSize":"16px","fontStyle":"normal","fontWeight":"600","textTransform":"uppercase","letterSpacing":"0px"}},"className":"is-style-outline"} -->
<div class="wp-block-button has-custom-font-size is-style-outline" style="font-size:16px;font-style:normal;font-weight:600;letter-spacing:0px;text-transform:uppercase"><a class="wp-block-button__link has-white-color has-text-color wp-element-button" style="padding-top:24px;padding-right:48px;padding-bottom:24px;padding-left:48px">Explore</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- /wp:cover -->

Patterns and screenshots from WordPress.org. Designs may vary with your theme’s fonts, colours and block styles.

HOW TO USE WORDPRESS PATTERNS

A new layout.
Just a copy and paste away.

Start with a layout you love. Bring it into your editor, then shape it around your content.

STEP 01
Find your starting point
Explore the library and open a screenshot for a closer look. Choose the layout that fits your page.
Browse patterns
STEP 02
Copy. Open. Paste.
Copy the Gutenberg code. Open a page in WordPress, click an empty paragraph block and paste your pattern.
⌘ + Vor Ctrl + V on Windows
STEP 03
Make every block yours
Add your own words and images. Adjust colours, spacing and typography in the editor, then publish when you’re ready.
Your content. Your style.

Find your next starting point.

Intro area with heading and image

Centered image with two-tone background color

Fullwidth Dark Banner with Heading Top Left

Fullwidth cover with repeating gradient text

Fullwidth, vertically aligned headline on right with description on left

Fullwidth headline with links and gradient offset background

Heading, Paragraph, Button with Two Images

Bold sale banner with geometric background

Offset bold paragraph text with varying opacity

Offset text with a brutalist design vibe

Fullscreen image with right content area

Cover Image with Bold Heading and Button, Left

A new layout.Just a copy and paste away.

Find your starting point

Copy. Open. Paste.

Make every block yours

A new layout.
Just a copy and paste away.