Building a page with only patterns

Transcript

Introduction

In this lesson, I’m going to show you how you can build an entire page only using patterns. Block patterns are a collection of pre-designed blocks that you can insert into pages and posts and then customize with your own content. Using a block pattern is an easy way to create beautiful layouts that combine different blocks. Patterns will not only save you time, but it will also inspire creativity.

Adding and selecting patterns

To add a pattern that comes with your theme, click on the Inserter top left and make your way to Patterns. Then you can browse the patterns by category and see a preview on the right. If you can’t find the pattern that you are looking for, you can make your way to the Pattern Directory by going to WordPress.org, clicking on Extend, and then selecting Patterns. I would suggest going through all your patterns and liking the ones that appeal to you. Once you click on the star, that pattern will be part of your list of favorite patterns and when you go to favorites, you’ll be able to view all the patterns that suit your design needs.

Example page

Let me show you a Services page I’ve created using patterns for a horse riding school. At the top, we have an introduction, a list of our services, and then separate sections for each service. First, we have riding lessons with a list of prices, followed by horse trekking, birthday parties, and holiday programs. Let’s see how we can achieve this by only using patterns.

Planning phase

Firstly, I planned out my page in a working doc. Then, I went through all the patterns that I’d marked as favorites. Then, I copied the pattern’s URL and pasted it below the relevant section. Now that the groundwork is done, we can go ahead and open each pattern one by one.

Building the page

Then, we will copy our pattern, and once copied, we will make our way to our website and paste our first pattern. Then we can copy and paste our services pattern and then make our way down the list. I am literally just using my computer shortcut to paste command V. Now that I’ve added all my patterns to my page, we can start editing. So, as you can see, we now have our page structure in place.

Let’s start with the first section and replace the relevant images. As you can see, I’ve already added all my images to my Media Library. Then, we can start changing the content on the right. I’ll update my heading. I also want to change the background color of my Buttons block or call to action. The text at the top is not a heading, so I will change that to a paragraph. Then, we change the wording as well as the color of the text. That is our first section completed.

For my services section, I will change my Group block to full width and change the padding of the right and the left to 60 pixels, the same as the top and the bottom. Then, I’ll change the background color to Tertiary, and then we can add the services that we provide: Riding lessons, horse trekking, birthday parties, and holiday programs.

For the next section, I will change the Columns block to full width and then change the padding to 4 on the slider. I’ll replace the image, reset the font size of the text at the top, and write Beginner to Advanced. Then, I will change the heading of the section to Riding Lessons and remove the bold. I will also reset the dummy text’s font size and add more text to the section. Lastly, I will copy the style of my previous Buttons block or call to action and paste the style of that Buttons block to the other. Then I will change the call to action to say “Book Now,” and then we’re done.

For the pricing table, I will select full width for the Group Block and then change the background color to Tertiary and the radius of the block to 0 pixels. Then, I will modify the heading, ensure it is Heading 2, and write Prices. Then, we can remove the text below and start adding my content to the table. Now, our pricing table is ready.

For the horse trekking section, I will update the content in the left column, remove the image at the bottom, and replace the two images next to the content. Lastly, I will change the padding of the Columns block to 4. Then, this section will also be completed.

Next is the birthday section. Once I replace the images, I will select the Columns block and change it to full width. I will then change the padding to 4 using my slider. Then, I will remove the content in the right column and update it with a header, dummy content, and a call to action. Lastly, I will change the background color of the Columns block to Tertiary.

In the last section, I will change the Columns block to wide width in this case, remove the content in the right column, add a new heading, content, and call to action, and finally, replace the images. Once I have replaced all four images, my services page is done. In the end, I will add alt text to all my images, check my content, headings, and styles, and ensure that my page or website is mobile responsive.

Practical

Use WordPress Playground to test your knowledge.

1. Make your way to the Patterns Directory: https://wordpress.org/patterns/.
2. Select two patterns of your choice and paste them into a page.
3. Adjust and modify the patterns to match your design goals.
   • Use Global Styles to change color and typography settings.