Crosswinds Framework

Adding Patterns to Your Content

As the WordPress block editor has progressed and gotten better, one of the cool new features that might have gone under your radar is block patterns.

Block patterns are a great tool to quickly create wonderful pages that look the way you want them to. And once you harness their power, you can really do some amazing things on your website without touching any lines of code.

But what exactly are block patterns? And, more importantly, how can you use them on your website to craft beautiful pages that will convert?

Let’s take a deep dive into WordPress block patterns so you can start to use them like a pro today!

What are Block Patterns?

So first off, what exactly is a block pattern in WordPress?

To put it as simply as possible, block patterns are a group of blocks arranged in some sort of way.

For example, one of the default block patterns included in WordPress is a pricing table pattern. This is essentially a column block but the blocks in each of the columns are already set up to show something that resembles a pricing table.

And you can go in there and edit the text and colors, but you don’t have to worry about adding all of the individual blocks. It’s all been done for you already.

They save you a ton of time from having to do everything by hand. And you can use them over and over and customize them each time.

Generally, block patterns are contained within a group or columns block.

And I just want to note that they are not a singular block; again, they are a group of blocks.

Adding Patterns to Your Content

The good news is that adding block patterns to your post or page is really simple for blocks that are already on your website — either the default patterns or ones added by your plugins or theme.

You can get started by clicking the “plus” icon at the top left side of the page like you would for a block. Then you can select patterns to display the tab containing all of the patterns.

All of the patterns are grouped into categories to make it easier to navigate. Then when you find the pattern that you want to add, you can click on it and it will be inserted into the content.

Once it’s been inserted, you can change the content and the styling to match what you want it to say and look like. And now you’ve added a block pattern to your post or page.

See, that wasn’t too hard.

Using the Patterns from the Crosswinds Framework

The Crosswinds Framework comes with a number of different block patterns that you can use, depending on which theme you’re using for your website.

There are general patterns, such as for call to action sections, cards, headers, footers, page headers and the like.

And then there are what’s called element patterns. These patterns are elements that will make up larger patterns. For example, in this category you’ll find patterns for a single service or feature or a single pricing column or a single testimonial. You can use these elemental patterns to create your own services, features, testimonials or pricing table sections if you want.

Also there are fully built section patterns, such as services sections, features sections, testimonials sections and the like that you can use if you want.

Finally, there are full page patterns if you want to create a complete page quickly. You’ll see these in the modal that pops up when you create a new page, but you can also find them in the “Page Patterns” category of the patterns selector.

Adding a Pattern from the WordPress Pattern Library

​​One of the great places to find other block patterns that people have created is the WordPress block pattern library. And importing them to your website is super easy.

First, you’ll want to check out the block pattern directory and find the pattern or patterns that you want to add to your page.

Then you can select “Copy Pattern” to copy the pattern to your clipboard.

Finally, you can paste the block pattern where you want it to appear on your post, page or even custom post type (if it uses the block editor).

And that’s it! That’s all you need to do to import a block pattern from the pattern directory. No need to download extra plugins.

Your theme or some plugins might add block patterns through the same area that the default block patterns are located. But adding in ones from the directory are as simple as copy and paste.

So see what you can do on your website with block patterns.

What to Look for in a Pattern from the Pattern Library

Finally, here’s what you should be looking for in a block pattern to use on your website. This can help you narrow down your options until you find exactly what you need.

First, you need to only look for block patterns that you need. I know that seems quite self explanatory, but it is true. You don’t need to look at block patterns that you don’t need to use for your website. So if you’re looking for a services pattern or maybe a pattern for a pricing table, don’t worry about blog posts.

Next, make sure that it can be changed to match your branding. Most of the patterns in the pattern directory are built with core blocks, and with the color controls that are currently available, should be able to work with your brand’s colors and typography. But just make sure to double check that. You don’t want to be stuck with a pattern that has a yellow background when your business’ colors are blue and green.

Finally, check the pattern for responsiveness. Make sure that it looks good as you go down in screen size so that it looks good on your phone and your desktop computer. The good news is that the pattern directory allows you to play with the screen size for the block pattern in the browser, so it’s really easy to check that.