Create a pattern

With patterns, you can save customized blocks to reuse across your site. If you’re repeatedly adding the same groups of blocks to new pages, patterns will save you a lot of time. In this guide, you will learn how to create and use patterns.

First, create the content you plan to reuse. A pattern can be a single block or a group of multiple blocks. In our example, we’ll use an image, header, text, and a call-to-action button that looks like this:

Once you’ve created your content, follow these steps to turn it into a pattern you can use anywhere on your site.

1. Select all the blocks you’ll want to reuse. There are multiple ways to select blocks:
   • You can highlight multiple blocks next to each other with your mouse.
   • Using List view, click on the first block, then hold the shift key on your keyboard and click on the last block. This will select all blocks between the first and last block.
2. Click on the ellipses menu (⋮) that appears in the block toolbar (or next to the first block selected in the List view).
3. Click on the “Create pattern” option.

4. Give it a name to help you remember what the pattern is for. The name is only visible to you.
5. Optionally assign the pattern to a category, which is useful if you have several patterns that you wish to keep organized.
6. Toggle the Synced option on or off:
   • Synced: Any edits you make to the pattern will apply everywhere the pattern has been inserted. Ideal for reusing blocks.
   • Unsynced: Any edits you make to the pattern will apply to one instance of the pattern only. Ideal if you want to use the same layout on multiple pages but change the content in the pattern on each page.
7. Click the Create button.

When creating a pattern, you can make it a synced or unsynced pattern. Here, we’ll explain each option and how to work with both types of patterns.

A synced pattern is a pattern that remains the same everywhere you use it on your site. When you edit the synced pattern in one place on your site, that change will be applied to everywhere the pattern is used. For example, if you create a synced pattern for your business hours, you can change those hours in one instance of the pattern, and it will be updated throughout your site.

Synced patterns are identified by the pattern symbol that looks like a diamond with another diamond behind it. You will also see the name of the pattern in the following places in the editor:

You can disconnect a single instance of a synced pattern to modify that one instance, or use pattern overrides to make specific customizations across synced patterns.

An unsynced pattern is a collection of blocks you’ve designed and want to use again but also want the freedom to change the content in the blocks after you’ve added them to a page or post. For example, you might have a consistent layout that includes images and text for your blog posts. You can create a pattern, turn off the sync option, and then be able to modify the images and text using the same layout on each blog post.

Unlike synced patterns, once an unsynced pattern is added to a page, it behaves like a regular collection of blocks. You can change the content of the unsynced pattern, which will only apply to that single page or post.

Related guides

In this guide