WordPress Block Patterns

What are WordPress block patterns?

Patterns are composite Gutenberg elements. This means they are built from several simpler blocks and organized into one bigger layout block. Patterns are usually created with a specific purpose一to invite a user to contact you on the Contact page; to invite a user to take action on a particular section of your website, etc. So, many different types of patterns are available, some of them being contact patterns, call-to-action patterns, etc.

Patterns can speed up page setup, as well. Adding and editing a pattern is quick and simple. To edit a pattern, all you need to do is replace a placeholder text and images and set preferred colors for elements included in the pattern. With patterns, you don’t have to spend much time working on the layout, and you don’t have to worry about your site’s design一patterns look good on desktop/laptop computers and mobile devices.

Inserting patterns

Patterns can be inserted as any other WordPress block.

To insert a pattern:

1. Enter Post or Page edit mode.
2. In the editor, click on the button in the top left corner.
3. Click on the Patterns tab.
4. From the dropdown, select the desired patterns category. If you click the Explore button, a large modal window will appear, where patterns can be viewed in a grid mode, like a gallery.
5. Click on the desired pattern, and it will be added to your post or page.

Editing patterns
Once the desired pattern is set, it’s easy to replace default text and images. After clicking on any part of the pattern block, the appropriate tool will show up. You can always insert additional elements in a pattern一button, image, text, or whatever you need at the moment.

Pattern types

In the Themes Kingdom, we have developed patterns that are grouped in several categories:

1. TK Text
2. TK Contact
3. TK About
4. TK Testimonials
5. TK Gallery
6. TK Headers
7. TK Call to Action

TK Text Patterns

Text patterns are designed to make specific text sections outstanding and different from the rest of the text. These patterns can come in handy when you want to highlight quotes or particular sentences in the text, add outstanding headings, or create a summary of the text section.

In the following video, you can see how a text pattern can be customized:

There is a total of nine TK text patterns: Intro with two columns, Two rows with headings, Heading and text in two columns, Large heading text with a short paragraph, Heading with two text columns, Heading with three columns, Heading and paragraph in two columns, Heading with three columns and buttons, and Heading and paragraph in two columns.

TK Contact Patterns

Contact patterns can be used to create a Contact page or present contact information quickly. Contact patterns usually combine elements like short introduction text with links to email, social networks, phone numbers, and physical addresses.

Links for social icons or text links can be easily changed within a contact pattern:

There are seven TK contact patterns: Email link with social icons1, Contact text with email, Email with social links menu 1, Email with social links menu 2, Contact details with address, Two-column boxed pattern with a single image and text, and Two-column boxed pattern with two images and text.

TK About Patterns

About patterns combine text and image blocks to create a short story about a specific person, team members, company, or even product.

Here’s how you can edit one of the About patterns:

There are ten TK about patterns: Full-screen section with image and text, Boxed pattern with image and text, Full-screen section with single columns, Two-column pattern with images and a longer text, Full-screen section with large image, About section in two columns, Two-column pattern with images and texts, Team pattern 1, Team pattern 2, and Shuffled team pattern.

TK Testimonials Patterns

Testimonials patterns are used to display customer stories, present clients or partners, and share your success stories. Please note that they are not dynamic一they are not pulling content (text and images) from any post type.

Here’s how you can edit a testimonial pattern:

There are four TK testimonials patterns: Full-screen testimonial, Single testimonial with large image, Logos with two column testimonials, and Three column testimonials.

TK Gallery Patterns

Gallery patterns are an excellent option when you want to create a Gallery page manually. Images in gallery patterns are inserted manually.

Gallery pattern setup:

There are six TK gallery patterns: Four columns gallery1, Four + three columns gallery, Mosaic gallery, Two-column gallery, Shuffle gallery, and Two-column gallery with text.

Tips for editing TK gallery patterns:

1. Images in gallery patterns can be linked to original images. Prepare two sets of images一a set of smaller images can be used in the pattern, and later linked to the original images. That way, your page will be smaller and load faster.
2. If you decide to use a third-party plugin, you can set to open images in the lightbox mode一an image will be opened without leaving the current page.
3. Images in a gallery pattern can be used to create links to other gallery pages. For example, you can create a page “Works” where images in a Gallery Pattern 1 will be linked to specific categories, like people, nature, night&sky, etc…
4. Using WordPress image tools, you can apply text over the image, duotone filter, or crop images using the predefined ratios.

TK Headers Patterns

Header patterns combine large image blocks with text blocks. They are usually used to create the first section on the page, the intro for the post, start of the new section in the middle of the text. Buttons in the header patterns can be used as a call to actions, to help you increase conversions.

Here’s how you can edit header patterns:

There are six TK headers patterns: Full-screen header pattern with headline, text, and button, Full-screen header pattern with centered headline, text, and button, Two-column header pattern with an image, headline, text, and button, Full-screen header pattern with headline, text, button, and image, Full-screen header with a text and a button, and Two-column pattern with a headline, images, and text.

TK Call to Action

Call to Action patterns are designed to increase conversion, by inviting site visitors to take some sort of action on your website. Call to Action patterns always combine button(s) with colorful background or background image.

Here’s how you can edit a call-to-action pattern:

There are five TK call to action patterns: Call to action pattern with a headline and two buttons, Two-column call to action pattern with headline, text, and button, Two-column call to action pattern with headline, text, and button, Call to action pattern with a headline and a button, and Call to action pattern 5.