Building a page with only patterns


In this session, we will use various patterns to create a Services Page. Patterns allow you to add beautifully designed, ready-to-go layouts to any WordPress site with a simple insert or copy/paste. Learn how to add and modify patterns to suit your design needs.

Learning outcomes

  1. Searching for patterns via the Inserter and Pattern Directory.
  2. Adding patterns to your favourite list.
  3. Preparing and planning a page built with patterns.
  4. Copying, inserting and modifying patterns.

Comprehension questions

  1. What are the advantages of using patterns?

Resources

Using block patterns

Transcript

Hi, and welcome to Learn WordPress. In today’s session, I’m going to show you how you can build an entire page by only using patterns. Block Patterns are a collection of pre-designed blocks that you can insert into pages and posts and then customise with your own content. Using a block pattern is an easy way to create beautiful layouts that combine different blocks. Unlike reusable blocks, you can modify patterns you have pasted into your website without affecting the original copy. Patterns will not only save you time, but it will also inspire creativity.

To add a pattern that comes with your theme, click on the Inserter top left and make your way to patterns. Browse the patterns by category and see a preview on the right. If you can’t find a pattern that you’re looking for, you can make your way to the Pattern Directory by going to wordpress.org, hovering over Download and Extend and selecting Patterns. Here you can search through hundreds of patterns. I would suggest going through all your patterns and liking the ones that appeal to you. Once you click on the heart, that pattern will be part of your list of favourite patterns. When you go to favourites, you’ll be able to view all the patterns that suit your design needs.

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

Firstly, I planned out my page in a working doc. Then I went through all the patterns that I’ve marked as favourites. Then I copied the URL of the pattern and pasted it below the relevant section. Now that the groundwork is done, we can go ahead and open each pattern one by one. 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 the pattern of our services. And then, of course, make our way down the list. I’m using my computer’s shortcut for paste: command v.

Now that I’ve added all my patterns to my page, we can start editing. As you can see, we now have our page structure in place. Let’s start with the first section and replace the relevant images. 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, and I also want to change the background colour 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 and then change the wording as well as the colour 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, and then I’ll change the background colour to tertiary. Then we can add the services that we provide: riding lessons, horse trekking, birthday parties and holiday programmes.

For the next section, I will change the Columns block to full width and then change the padding to four on the slider. I’ll replace the image and 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 font size of the dummy text and add some 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 this Buttons block. 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 colour to tertiary and change the radius of the block to zero pixels. Thereafter I will modify the heading and ensure it’s Heading 2, write Prices and remove the text below. Then I will 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 then replace the two images next to the content. I will change the padding of the Columns block to four and then this section is also completed.

Next is the birthday section. Once I replace the images, I will select the Columns block and change it to full width, change the padding to four 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 colour of the Columns block to tertiary.

In the last section, I will change the Columns block to wide width in this case and then remove the content in the right column and add a new heading, content and call to action. Finally, I will replace the images. Once I’ve replaced all four images, my Services Page is done. To finish everything off, I will add alt text to all my images and also check my content, headings, styles and ensure that my page or website is mobile responsive.

May you use patterns to your advantage and visit Learn WordPress for more tutorials and training material.

Workshop Details


Presenters

Wes Theron
@west7

I am an Instructional Designer for the WordPress open-source project sponsored by Automattic. I am a strong supporter of the open-source movement. I have a background in education and content development. I am a husband, father, dreamer and lifelong learner.