Block Patterns

On this page you will find block patterns that you can copy and use on your WordPress website.

The patterns have been designed with placeholder images and neutral colors so that they will look mostly the same in any theme. Add your own content and adjust the colors to make the patterns match your personal style and preferences. Gutenberg 10.7.1 or newer is recommended.

You do not need to know code to use these patterns, only copy and paste:

Copy the code by clicking the “Copy pattern” button, and paste the code into the editor on your website. If the block pattern has images, you need to replace them with your own.

Want more patterns? The Official WordPress pattern directory has opened! At wordpress.org/patterns you can now browse close to 70 patterns.

Designers can submit patterns via GitHub, and more features will be added soon.

Media & text with two images

Pattern category: Page section

This text was added to show how you can create designs using block patterns.

Replace the text with your own image description.

View full size preview

Media & Text with colored section

Pattern category: Page section

Replace the image & text with your own content.

Heading

Sample content. Replace the text with your own content.

View full size preview

Site footer with call to action, social links, contact information and latest posts

Pattern category: Site footer

View full size preview

Site footer with 3 columns, latest posts, call to action, social media links and copyright

Pattern category: Site footer

View full size preview

Section with circular images and buttons

Pattern category: Page section

Heading

Sample content. Replace the text with your own content.

Heading

Sample content. Replace the text with your own content.

Heading

Sample content. Replace the text with your own content.

View full size preview

Columns with circular images

Pattern category: Page section

Sample content. Replace the text with your own content. This text was added to show how you can create designs using block patterns.

Sample content. Replace the text with your own content. This text was added to show how you can create designs using block patterns.

Sample content. Replace the text with your own content. This text was added to show how you can create designs using block patterns.

View full size preview