Directory

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.

To add a pattern that comes with your theme, click on the Inserter top left and make your way to Patterns.

And now you can browse the patterns by category and see a preview on the right.

If you can't find a 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.

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 programs.

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 my patterns that I've marked as favorites.

Then I copied the URL of the pattern and I 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 our services pattern and then of course make our way down the list.

And I am literally just using my computer shortcut for paste command V.

And 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.

And as you will 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.

And I also want to change the background color of my buttons block or call to action.

And 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 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 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.

Then I will also reset the font size of the dummy text and add some more text to the section.

And 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 color to Tertiary.

And change the radius of the block to 0 pixels.

Then I will modify the heading and ensure it is Heading 2 and write Prices.

And remove the text below.

And 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.

And lastly, changing the padding of the Columns block to 4.

And then this section is also completed.

Next is the birthday section. So once I replace the images, I will select the Columns block and change it to full width.

Change the padding to 4 using my slider.

And then removing the content in the right column and updating 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.

And then remove the content in the right column.

And add a new heading, content and call to action.

And finally, I will replace the images.

Once I have replaced all 4 images, my services page is done.

At the end, 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.