Have you paid attention to the newly added block template directory on the official WordPress website. In this article, we will discuss how to use the WordPress Block Pattern directory to accelerate website development. Whether you are a WordPress novice or an experienced developer, getting close to WordPress block templates may seem a bit strange. However, if used properly, they can build complex page layouts faster.
Today, we will discuss some benefits of using templates, provide detailed information about which block templates exist, and then show you how to use the block template catalog to create truly charming designs.
Article Catalog
What is a WordPress block template?
6 reasons to use block templates
What types of block templates are available?
Using Block Inserter Panel
How to use the block template directory
How to preview block templates
summary
What is a WordPress block template?
Block Pattern is a predefined block layout. You can access them in the WordPress Block Editor by clicking on the ‘Templates’ tab.
The mode allows you to insert the complete layout into your post or page with a simple click. Block templates do not add individual elements (usually over and over again), but are composed of multiple blocks and allow you to insert them as a unit. In this way, block templates allow you to select (or design and save) layouts that you will use multiple times. Once you enter your content, you can add text, images, or other layout elements to it.
6 reasons to use block templates
Before we enter the tutorial section of this article: What’s the big deal with block templates? What makes them so attractive compared to using plugins or small tools? Let’s quickly take a look at the benefits.
Save time and energy. Block templates are an excellent way to save time when building WordPress websites. This is especially true if you expect to reuse the same layout.
Allow you to reuse (and save) design elements. The ability to select from prefabricated block templates or create one’s own block templates and reuse them is very valuable in relation to the above.
Can be used for multiple themes. Any block theme can support the block templates you choose or create.
Provide professionally designed patterns. Just like the benefit of using WordPress themes is that there is no need to build a professionally designed website from scratch, so are block templates and layouts.
Customizable. You can easily adjust block templates using global styles, full site editing, and block editors.
The basic components of full site editing. Since Gutenberg joined the WordPress world, block templates have been a useful tool. But now they are heavier because the full site editing feature allows you to apply block templates to the entire site, not just individual pages.
What types of block templates are available?
Before starting to design a project, let’s quickly review which block templates are available by default:
Column: As you expected, the column block template provides multiple layout options to configure the content in the column. You can also choose from multiple user generated column block templates.
Library: These block templates utilize several block types to achieve a cohesive appearance, including columns, tables, titles, and buttons.
Call to Arms: CTA’s block template allows you to easily insert call to arms arms arms at any position on a post or page.
Header and Banner: Once you find your favorite header or banner layout, you can use it to create a block pattern. Alternatively, choose a pre made combination that typically includes a title, image, and button.
Recipe cards: These block templates are the preferred elements for food bloggers.
Hero images and sliders: Similar to title and banner block templates, templates for hero images and sliders can easily add visual interest to your content with just one click.
Pricing Table: Building a table in a classic editor is not difficult, but it can be tedious. Using block templates simplifies the process and saves a lot of time.
Social media subscriptions or footers: These block templates make it easy to add fully customizable social media subscriptions to your content, including the placement of traditional footer widgets.
Timeline and portfolio combination: Finally, these block templates can easily add works or timelines to your website. This allows you to highlight your past work or company history.
Some WordPress themes that have enabled Block Editor and/or support full site editing may contain unique block templates not mentioned here. It is always a good idea to thoroughly read the description of the theme before installation to ensure that it includes all the features and block templates you need.
Using Block Inserter Panel
Before learning to use the WordPress template directory, you need to be familiar with how to add templates to your design. This occurs through an insertor panel.
To access it, please log in to your WordPress website and select the page or post you want to edit. Click on the big plus sign in the upper left corner from there. Then select the Template tab. You can also enter this interface through the plus sign ‘Browse All’ in the editor.
How to access block mode in WordPress editor
You should now see multiple available templates. You can also use the dropdown menu to select categories to narrow down the visible list. Alternatively, you can simply click the ‘Explore’ button to open the template browser.
Block Mode Browser
Here, you can also choose to filter and search for available templates. After finding the content you like, clicking on the block template will add it to the post or page you are currently editing. Repeat this process multiple times to build the full page or post design you want.
Block mode on the page
To modify a block template, all you need to do is click on each block and edit it as needed. You can change the content within each block, adjust colors, images, and other settings – just like you would for any individual block that does not belong to a block template.
If you like the final result, you can click on the three-point symbol in the toolbar and save the template as a reusable block.
Add block patterns to reusable blocks
Afterwards, it will appear in the Reusable column of the block inserter for insertion where you need it.
You can delete the block template just like deleting any other block. Use the options in the toolbar, press Ctrl+Alt+Z, or use the Del button on the keyboard.
How to use the block template directory
Okay, now that you understand what block templates are and how they work, let’s talk about the block template catalog. This free resource includes a large number of layout options that you can immediately insert into your WordPress website. It couldn’t be simpler to use.
WordPress mode directory
Use the search bar and filter options at the top to narrow down the selection. The current directory categories include buttons, columns, features, galleries, titles, images, and text. You can also sort the items in the directory by latest or most popular.
Filter block patterns in the directory
Click on any template you like to access its separate page. It will show you a preview of the pattern, including options to test it at different screen widths.
Block Mode Page
To use this template on your website, simply click the ‘Copy Pattern’ button. Then, return to the editor screen on your website and paste the block template where you want it to appear.
Copy block mode to WordPress editor
Alternatively, you can also copy templates from a directory by hovering the cursor over the directory on the search screen. When you do this, a blue Copy button will appear, allowing you to directly copy the template.
Copy block mode in directory during hovering
That’s it, adding a block template to WordPress from the template directory couldn’t be simpler. Please note that even if a template is removed from the template directory, its display on your website will not change.
How to preview block templates
Usually, the best choice for previewing block templates is to insert them into your page or post. If you don’t like its appearance, you can delete it at any time.
However, if you plan to use block themes and full site editing, you should definitely check out the WP Block Patterns website. It provides a convenient way to preview popular block templates and several WordPress themes in real-time.
Test block patterns in wpblockpatterns
To use this convenient tool, simply click on the block template you want to preview from the options provided.
Preview block patterns in wpblockpatterns
Change the theme of the block template through the dropdown menu in the upper right corner of the screen.
Change the theme in wpblock patterns
Then the page will automatically change to display the selected block template in the selected theme.
Block pattern testing in the selected theme
At the time of writing this article, there are over 50 WordPress themes to choose from for previewing block templates. You can also view the page or publish layout in the upper right corner again.
Switch between post and page views
Although this is not a comprehensive option, it is a useful reference tool. It allows you to quickly understand the appearance of the selected template in your theme. You can also see how it transforms various layout elements before inserting it into your own page or post.
summary
Block templates are a great tool that can make building and developing websites faster and easier. They allow you to add complex layouts with just a few clicks and freely reuse them.
Understanding how to use the WordPress block template directory allows you to add more options to the available block templates. Additionally, you must admit that it is really easy to use with just simple copying and pasting.
English 
简体中文 
Website Builder Online
Leave a Reply