>> Wonderful. Welcome everyone.
As I said, today's topic is creating an about page using patterns.
So we are going to create an entire page only using patterns.
Of course, the focus will be on an about page.
But I thought I'll do a bit of an introduction before we get to the practical side.
So for those folks who are not as familiar with block patterns or what patterns are,
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
a beautiful layout that combine different blocks.
Of course, you can modify those blocks.
As you please, you can remove some,
add some and of course style them.
So the advantages of using block patterns,
I would say is number one, it saves you a lot of time and number two, it inspires creativity.
So sometimes when I'm a bit stuck or when I've got writer's block,
I'll just go and look through some patterns.
Maybe I'll see an idea and it will inspire me to create something myself or I can just
grab the pattern and then change it as I want it to look.
Now as mentioned, you can modify patterns.
You have based into your website without affecting the original copy.
So of course, you can grab that pattern, you can change it as you like and you can use
that original pattern again and modify it as you please.
So there are two ways to add patterns to your page or post.
Number one, your theme usually comes with patterns.
So patterns that come with your theme can be inserted from within a post or page when
you click on the insertor.
But if you don't find a pattern or if you can't find a pattern you like, that spot of
your theme, you can go to the pattern directory or the patterns directory to search for any
type of pattern and then you can just copy and paste it into your site from there.
I also wanted to touch base on synced and non-synced patterns.
So when you have created a special design, you want to keep and reuse, you can save it
as a pattern and then you can specify whether to sync it or not.
So if you sync it, it means that you can take that pattern that you've created and of course
you've saved it as a sync pattern and then you can add it to multiple places on your site
and then you only have to update it in one place and it will update everywhere else and
it has been added.
And of course, if it's not synced, it basically works like any other pattern.
It won't, when you make modifications, it won't affect the original pattern.
Okay, and then just a shout out to WordPress 6.5 and we are not going to get into this
today at all, but something to look forward to is partially synced patterns.
And I told Tracy before we started, this is going to be a whole online workshop by itself,
but basically it's building on sync patterns.
So partially sync patterns will allow you to sync the layout and style of a pattern,
but you will be able to customize the content in each place it's used or to put it differently.
It's creating reusable designs with a style and structure stay in sync, but the content
can be unique.
So as I said, yeah, it's something exciting to look forward to and a topic we'll dig
into a bit later, but I just wanted to mention that this is on the horizon for 6.5.
Okay.
So let's go ahead, I'm going to leave my slideshow now and we can start building my test website
or in my test website, the page, the about page that we are here to see, of course.
All right, I just want to drag this to the bottom a bit.
Okay, first things first, let's jump to my test website and let's just look at how we
can add patterns.
So let's open a page.
We'll create a new page and we can say adding patterns.
Okay, so if I want to see the patterns that come with my theme, I can click on the inserter
and next to blocks you can click on patterns.
And there is a list of categories that you can choose from.
Now, if you see my patterns, those will be your synced or non-synced patterns.
So the custom patterns that you have created.
Now you will notice here is a non-synced pattern and here is a synced pattern.
If you see the little purple icon, you will know it's a synced pattern.
So these are my custom patterns that I've created.
And then of course, the ones that come with my theme, banners, call to action and then
you can scroll through.
But as you can see, they are limited.
So you might not find what you are looking for.
So what do we do then?
Well, then of course, we will make our way to the .org website.
So let me just make my way there.
And if you have a over download and extend or click on download and extend, you will see
there is an option to click on patterns.
So if we click on patterns here, it will open up the patterns directory.
Now year you have patterns that have been curated.
You will notice there in this little block.
So these are curated patterns and you can search for patterns by also using the categories
or you can search up here.
But if you want to see patterns that have been added by the community, you can click
on community and year you will actually find hundreds of patterns that you can use on your
site.
Now what I usually advise you to do is to actually add them to your favorites.
So that because you can sit here for a long time looking for patterns.
But let's say for example, you find a pattern that you like, you can click on the little
heart and then we will be added to your list of favorite patterns.
And then at the top, you will notice you can click on favorites.
And then I will see all the ones that I have liked and that I might want to use again.
But now the cool thing and I'll show you this in a minute, but you can add any of these
patterns to your site and then you can save it as a synced or non-synced pattern.
So then you actually don't have to come back to the pattern directory.
So let me show you how to do that for a moment.
So let's say for example, I like this pattern.
I will copy and then we will return to our page.
And now we can literally just paste.
So I'm going to say command V and here we have the pattern pasted into our page.
And now we can of course change it as we want it.
But one thing you can do is, okay, let's just grab both of them.
I'm going to highlight both and I'm going to group them.
And now that they've been grouped, I want to save it as a non-synced pattern.
So let's say create pattern, you can name it.
So I'm just going to call it numbers.
You can add it to a category.
This is also something that they've added to 6.4.
So you can choose one of the pattern categories that's already available or you can just create
your own, or let's call it stats.
And then you can choose, do you want it to be synced or do you want it to be non-synced?
And in this case, I should say I want it to be non-synced and then we can create.
So next time if you click on the insertor and you go to patterns and you go to my patterns,
you will see that the pattern is actually part of your website now because you've saved
it as a custom pattern.
All right, great.
Tracy, any questions before I actually start building my site?
We've had a couple of people ask about whether or not you're sharing the screen.
And in the past, we have found that if you're using an Apple, if you have entered the workshop
after it has started and the screen has been shared, sometimes it won't show.
And the fix to that is usually West, if you'll stop sharing and then re-share the same page
and it'll work.
Okay.
Let me do that.
Yeah.
For those people that are having problems.
Okay, let me just stop sharing for a moment.
Okay, and she's screen.
Okay.
Can you all see my screen again?
Everything's fine so far.
There were just a couple of people that have that problem.
Okay, cool.
Well, thanks for flagging that.
All right.
I hope that sorted the issue.
So let's go and build an entire page using patterns.
Now, of course, we can use the patterns from within our theme.
We can use the pattern directory and we can, of course, use synced or non-synced patterns.
And then in future, we can use partially synced patterns.
So, let me just go to the front end of my website to just give you a bit of context.
Go to my dashboard.
I'm using a block theme, of course.
So if we go to appearance, you'll notice I'm actually using the 2023 block theme.
When I go to settings and reading, you will notice that I've got my home page display
set to your latest posts.
And if we go to appearance and click on the editor, the site editor, I just wanted to
note that I have already added a header and a footer to my page template.
And this is the header and footer we'll be using for today's example.
Now, the great thing is I, of course, created my header and footer using a pattern as well.
So I'm not going to focus on the header and footer today.
We're just going to more focus on the content, but I just wanted to remind you, if you select
a header and you click on the three vertical dots, you can say replace header.
And that's what I did when I created my header.
And then you can scroll down to patterns.
And depending on your theme, you will see a list of available patterns.
And this is the one that I selected.
And then I just modified it to look the way it's looking now.
And then for my footer, I actually used a footer from my patterns directory.
Okay.
All right.
So how did I get here?
Well, I went to the patterns directory, of course.
And I went to, I clicked on footers and I searched for a footer that I liked.
Now, I actually know where it is.
I saved it already.
So let me jump to my word doc and I can open that specific one year.
So here's the footer pattern that I found.
I copied it.
I pasted it into my template and then I modified it.
All right.
So I just wanted to mention my header and footer are in place and they were also created using
patterns.
And as I mentioned, the header pattern or the header template part was used or was created
by using a pattern that came with my theme.
And the footer template part was created by using a pattern from the patterns directory.
Okay.
Now, let me show you my about page that we are going to recreate today.
So here is my about page that I have created.
You'll notice my header is in place.
Here, we have our story.
We are horse riding school with a difference.
Now, when I ran an online workshop about patterns using this test website and then we
actually created a services page.
So today we're going to create the about page.
So we've got our first section at the top and then we've got a testimonial section.
So what our riders say, people that come to our riding school and then I've added some
aesthetics and then of course we want to introduce our team and horse riding instructors
or people that work on the farm, some more aesthetics.
And of course, when you add a horse riding school, the most important people or the most
important things are actually the horses.
So we want to meet our horses as well.
You'll notice I've added their names and then at the bottom of my about page, I've added
a frequently asked questions section.
Okay, and then we have our footer in place with some quick links.
And of course, everything you see is dummy content.
Okay, so I'm going to show you how we can create this page by using patterns.
So the first thing I would suggest is actually opening a Word doc or a Microsoft Word document
and finding all the pages, all the patterns that you want.
So of course, when you create a page, you've got a plan.
So what I went or what I did is I created this Word doc and I planned out my page and
I knew what I wanted where, so then I went to grab those patterns from the pattern directory
and I added them and I actually bought the page in a Word doc like this.
So now I've got all my patterns in place and now I'm going to create a new page, my
part page and I will first add all my patterns one by one.
And once they've all been added to my page, we can start editing.
Okay, so let's do that together.
Okay, I'm going to make my way to the dashboard again and I'm going to go to pages and it's
open up a new page and we can call this, sorry, this keeps popping up.
This will be about us.
And now we're going to start adding our patterns.
So literally one by one.
So I'll open this one up.
Of course, we click on copy pattern and you'll notice that this is one of the patterns that
I've already liked and that's been added to my, my favorites list.
So copy pattern, head back, paste.
Click on the three vertical dots say add after.
So next we have our testimonial pattern, copy pattern, paste.
I can just press enter as well and we'll head to the next section.
The window effect, copy pattern, paste, add after.
Okay, meet the team.
Copy, paste, and meet the horses.
Okay, so this is the last one we're going to copy from here.
Okay, I just quickly want to change this because I know this is very dark.
So it's open up our, sorry, let's just open up our side.
I just want to remove the opacity here.
There we go.
And let's just change the color of the text so that we can actually see it.
There we go.
Okay, so I just wanted to kind of get that in place.
Okay, and then the last one add after.
I am actually going to add a non-sync pattern, but it is a pattern that I stole from the
pattern directory.
So for this one, I'm going to click on the insitter, click on patterns, go to my patterns,
and you'll notice I've saved it as a custom pattern and I can insert it from here.
Great.
So now my page is built.
The next step is, of course, to modify and change it so that it all fit together and
that my site or that my page is set up correctly.
Okay, so let's start at the top with the first pattern.
So the first thing, all my sections I'm going to put in wide width on my page or full width
I mean, going to put them in full width.
So that's the first thing.
You'll notice that I've added some styling to this image.
I'm going to remove the styling.
So I'll open up my sidebar settings, go to styles, and we can scroll down to radius and
you'll see that I've added 100 pixel radius to the top, left and bottom right corner.
So I'll just click on borders and I'm going to say reset all.
And then we can add our own picture from my media library and image that I've already
added from my media library.
Okay.
Then I want to select the left column because I want to push the image to the right.
All right.
So the image is pushed to the right.
Again, when I select this image, let's open up my styles or sorry, my settings.
I'm just going to change the focal point picker here because it's a cover block.
I want to make sure that the face is the center point of the image.
Okay.
So our text is on the left, this is our story.
And then here we can change it to we are also writing school with a difference.
Okay.
And I also want to reset the appearance.
And I want to actually make the size of this heading 50 pixels, the same as the other ones.
Then I will select the paragraph and I'm actually going to make this the same color,
the text color as the other parts of my site.
And I also want to reset all because for the pattern that they've added some styling
and I'm just removing that.
Then there's a number year that's part of a row block.
I just want to remove this number.
So let's delete the number.
And for learn more, I want this to be capital letters.
So we can actually use our sidewalk settings for that as well, go to typography and then
select letter case.
And of course, we can select uppercase.
And then we need to add the link to where we want that call to action button to go.
Okay.
So let's select our columns block and let's go and add some padding.
So I want some padding.
Let's make it two at the top and bottom.
And let's add a padding of four to the left and the right.
So there we have the first section done.
Let's move on to our next section, which is what our writers say, our testimonial and
area.
Okay, let's make it all worth.
Let's go and add some padding now.
So let's also add some padding to top and four on the sides.
Okay, then we can go ahead and add our images.
And of course, these people will would have given their permission.
This image is too high or elongated.
So I'm actually going to go to aspect ratio and sit it one one to one square.
Great.
Let's add the other one.
And let's do the same change the aspect ratio to square.
Okay, I'm going to remove CEO, EJ solutions because these people are not working for a
company.
They are writers from our writing school.
And I'm just going to change this surname to be a bit longer.
Okay, make that bold as well.
Happy with that.
Now, of course, yeah, you are going to add their review or their feedback.
So this is of course just dummy content, but I'll keep that there for now.
You'll notice I'm using a blue in my site.
So I actually want to change this color to the same blue as the call to action.
So it is this one, the vivid fine blue.
So I'm just going to change the color of the text here as well.
All right.
Now one thing we have not done is we have not added a heading.
So I will select this section and I'm going to say add before and we are going to add
a heading.
And it will say what our writers say.
I want to make sure this is center.
So I'm going to align center.
And then I actually want to group my heading and the testimonial section together.
So I will select open my list view.
Select my heading.
Holding shift and select my group.
I noticed I've selected both and we will group them together.
Okay.
There we go.
So now they are group and I just want to add some more padding to that group as well.
So I'll open my settings, my sidebar settings, styles.
And I'm just going to add some padding at the top and bottom because I've already added
some padding to the sides of the group here.
Okay.
So let's see what that looks like.
Yep.
There we go.
So our first section is done.
Our testimonial section is completed.
And now we are going to get to the aesthetic.
So this is called a window effect.
Now, at the moment, I think it's maybe sorry.
Yeah.
Is there any questions?
Yeah.
Let's talk from Sue.
So pasted patterns don't pick up colors, fonts from the main site styles.
Yes, no, no.
And from Lydia, once you remove the styles that came with a pattern, can you style the
page using global styles instead of having to style each individual element?
So as far as I know that if you add a pattern, you have to style the pattern.
But maybe there's somebody here that can give me some more context.
So yesterday I played around with global styles.
But I found that if I set my global styles and then I've added a pattern, it doesn't
pick up the global styles.
I'll have to go and modify the pattern.
Because if you look at the hierarchy, I think the hierarchy of the pattern is kind of at
the top there.
But yeah, maybe there's somebody else here that can give us some more insight there.
But if like you did with one of those blocks up above, you just reset all of the styles
from a block, then it has to default to something.
So it must go to the global style.
So yeah, that's probably true.
So let me just save this for a moment.
So I'm going to save draft.
So I think some part you can set in global style.
So let's just go to appearance and click on editor.
Let's go to styles and let's open our style book.
So I think once I've added all my patterns and then I go to, well, let's try and see
this in action.
Okay, so, okay, hold on.
So we have added, so let's just open that page again.
So let's look at this one.
This is a group block.
Now, I assume then if you open your style book and I just want to go to design media.
So you will notice that my text is already, for example, set.
But when I add a pattern, it doesn't pick up the paragraph text, for example.
And what did you say, Tracy?
What we were saying is if you remove the style from the block that you got with a pattern
within a pattern, if you remove the styles from it, you know, by resetting, it has to
default to something.
So it either defaults to what the theme is setting up or what the global styles are set.
Yes.
So that's true, so that's what I did here when I reset the text here.
It resets to global styles.
Yeah.
Right.
Correct.
So if you're in a block within a pattern, if you remove the styles and the block itself,
I mean, the pattern itself has not set a global pattern style that it has to revert back to
the global style for the theme or the site.
Okay.
So let's use the buttons block, for example, quickly, and then we can move on.
So let's go to the buttons block and see.
So let's make, let's just change the background to blue.
Okay.
Let's just save that for a moment.
Okay.
So now we've updated it there.
So if I then reset this buttons block, you're saying that this should then pick up the global
styles, right?
It's my guess.
Okay.
So color.
Where would I?
Hmm.
Right.
Refreshing the page.
Okay.
Ah, you're right.
There we go.
So yes, you can set it in global styles and then it picks it up.
So yeah.
Thank you for clarifying that.
Cool.
Anything else, Tracy, before I move on?
No, no other questions.
Okay.
Thank you, Sue, for bringing that up.
I think that's very helpful.
Okay.
Yeah.
I think the focus that I actually wanted to focus on is just kind of the process of
building the page.
But yeah, global styles will save you lots of time and you can set it up all there.
Okay.
So I've added this window effect pattern.
So what I'm going to do is now change it a bit.
So you will notice that there's actually a lot of work that went in here.
But of course, the work has already been done for me.
So now I can just change it.
So I actually don't want nine blocks.
I just want six blocks.
So I am going to remove the bottom.
Let me just open everything here in my list view.
I'm going to remove the bottom row.
So I'll just have to remove this cover block from each column.
There we go.
And now I will wait.
Let me just select this column and change it to full width.
And now we can change the image.
Now the cool thing is the way it's set up and the cover block, these blocks all work
together.
So if I start changing the image of each cover block, they will create this beautiful window
effect.
Okay.
So I'll select, save time, I will select both in this column, say replace and select
and for the middle one, replace and of course, select the same image.
And for the last column, select both cover blocks, replace.
And there we go.
That is all done.
Now I want to use the same style again.
So what I'll do for now, I'm going to duplicate this.
And for the next one, we want to do the same thing.
You just want to quickly replace this image because I want to use that again.
But a bit further down on the page.
Okay.
And then the last one from my media library.
Now of course, it's great.
It's important to add all your images to your media library in advance as well.
So you can just start selecting those ones that you want to start using.
Okay.
So I want to add it here.
So I see something that I just did wrong here.
This I'm just going to drag this out.
I don't want that to be part of that group.
So let me just see if that works.
There we go.
Sorry, it somehow went into the cover block.
Okay.
So I've got that section there, that section there.
And I want this group block.
So I can just use a little arrow or you drag and drop.
Now at the moment, this happened.
I don't know why.
I think it's maybe something to do with theme.
But don't be concerned.
It does appear correctly on the front end.
But technically, of course, it should look this way.
Okay.
So those two sections are done.
Let's move on to the meta team.
So it is already full width.
So let's go ahead and add the images of our team.
There we go.
And of course, you will add the correct names.
You will change the dummy content, etc.
Okay, let's add some padding.
So we open up our styles again.
And here we go.
We've added our padding.
So let's add our heading.
And we want to say meet our team.
Center it as well.
We can open up our list view again, select both of these and group them together.
Group.
And we'll add some padding at the top and bottom again of this group block.
I have padding of two at the top and bottom.
Just to create a bit more space there around the content.
All right.
Now my.
My meet our team section is finished.
So enough got this section and as I mentioned, don't worry, it will appear correctly on the
front end.
And then we want to introduce our horses.
So you'll notice there's a gallery on the side.
So I just want to grab some dummy content from here.
Okay.
So let's change this heading to say, meet our horses.
Right.
We can add some dummy content there.
For now, as mentioned, we said we're going to use global styles in future.
So for now, let's just change it so that it looks like the rest of the content.
So background and blue.
Oh, something else that you could have done.
I could have just selected this block and say, copy styles.
And I could have selected this block again and say, paste styles.
And it picks up the styles from that, that button's block.
Okay, if you know that, I actually want to add an image.
So we'll start in our left column, media library.
And there we go.
And now we can start adding the images of our horses.
Okay.
So they all look the same.
So I'm just trying to find the right one.
There we go.
And then I will click on add caption and this horse's name is chestnut.
Midnight.
Ghost.
You'll notice I've selected images with different widths and heights.
Gambit.
We've got Hollywood.
And the last one.
And caption.
So Bay.
All right.
So we've added all our images.
We've added the names of the horses.
And now we can select the main block, the parent block.
And we can also add some padding.
Here we go.
And then in our last section, I just want to check something.
Yeah.
Okay.
Now our last section is the frequently asked question section.
And as mentioned, I've actually added the pattern as a non-synced pattern.
So when I change this, it won't affect the original pattern because it's not synced.
And for this one, I will go ahead and I will change the background color to the same as
the other sections.
And now we can start adding dummy content.
So what type of horses do you have?
We can add some dummy content there as well.
And then of course, we can update all of that.
We can update that section.
Now if I select this heading, yep, just want to double check that the size is correct.
And let's just make this a bit less.
It's too much padding there.
All right.
So we've added our padding.
And then I think we are basically done.
I just want to have a look at the padding the year.
Yeah.
So the padding was not correct here.
So let me just double check.
This is actually the columns block.
So we can remove the padding here because we've already added padding to our cover block.
Right?
Yep.
Okay.
So let's just start at the top again.
We've added our story section, what our riders say, meet our team, meet our horses, and our
frequently asked questions.
And now we can save the draft.
If we open up our sidebar settings, just want to check something.
You will notice if we open up the pages, sidebar settings, this has been assigned to
the page template and we already set the head and footer.
So now let's view preview in a new tab.
And our about page is done.
And it was created using only patterns.
Okay.
Now, we have a few minutes left for questions or comments.
So yeah, please go ahead.
No questions in the chat.
Oh, is there a screen resolution size you recommend when building pages so it looks good
on most monitors?
Oh, I don't know how to answer that question, but I'm sure there's some folks maybe attending
today that will be able to, yeah, maybe knows that off by, off by heart.
That's something I would have to go and research as well, Ed.
Yeah, Neil says big.
What does it look like on mobile?
Well, I just want to double check something here because I haven't set everything up for
mobile, but if we, I just want to double check something here and see if that helps or this
row block, just want to see a lot to wrap.
Yeah, I just want to do that and see if that helps for the row block because if it's not,
then we can check it out on, on mobile now.
So everything might not.
Okay, save draw.
And you can, yeah, preview.
Okay, so.
It's okay.
So this is on mobile.
So as you can see, most of the blocks stack.
And then all the horses, of course.
Yeah, so looking pretty good on mobile.
Yeah, the only, the only challenge there.
So was that window effect.
Just, yeah, so repeats, repeats.
So for the window effect, yeah, it does, it takes a bit along to go through on, on mobile.
You are right.
Yeah, and, and, so is there a visibility option to hide that one on mobile?
I think you would have to add some code.
You won't be able to do that from, from right here.
Yeah.
There is a plugin called visibility, well, you can search visibility.
It's like block visibility by, by one of the team developers that would probably work
with that sort of situation.
I assume we can, for example, let's say we remove this one and then, which is publish
or save.
We didn't have to have so many blocks.
So, so if it's this way, right?
Okay, let's just do.
Yeah, it's still going to end up with three.
Yeah, but even if it's three, it's not.
Yeah, half as many as it was.
Yeah, let me just check.
Yeah.
It looks nice, I think.
Yeah, yeah, three.
But yeah, good point.
One comment about the list view now.
Yes.
With a page that is this complicated.
Yes.
Just remember that you can name the groups.
Ah, very important.
Okay, so, so let's choose this section first.
That's a very good point.
I thought about it and then I forgot about it.
So let's just group this, our first column and then click on the three vertical dots.
And now there's an option to rename.
So let's say we call this our story.
And then we can save it.
And the next ones, we can say rename testimonial.
And then for this one, we have to group it again.
Let's rename it and call it window one.
Can I do window one?
Yeah, window one, save.
Yeah, so we can quickly do that.
And then there's actually a lot of structure to our page.
But yeah, keep talking or asking something else while I quickly do this.
Anything else that you wanted to mention?
So this is a window two.
Yeah, it was mentioned that you can use media queries in the custom CSS to handle the display
of one thing or another.
That's a little past what we can do in this particular workshop.
But you can add your own custom CSS to the page.
Yeah, we'll just show folks the way to do that.
Or blocks.
The other thing, I was going to mention this particular section right here, the FAQ section
is a great place you could use the details block.
And so that is actually, you will notice if you go, I chose this one.
But yes, so let's, I wonder if you select this if you can change it to a details block.
It doesn't look like it.
But there is actually a pattern available.
If you go to, yeah, if you go to patterns, the curated patterns and let's type in FAQ,
this one actually see if it's there.
Yeah, you will see there's a few options there.
I think that one's is using the details block.
That one is using the details block.
But yeah, you can use the details block.
And for those folks who, so let's just do that for a moment.
Let's say add off the details block.
We can take that text and cut it.
Oops.
My fingers are too fast.
And now we can of course add the text there.
Did I add it in the right place now?
No, I did not.
So I think you need to add it there.
When the question goes on the time.
Yeah, the question is there.
So it's a read more or whatever.
And then you can click on it and it will open up.
So yeah.
All right, I'm just going to stop the recording for now.
And then we can stay for another minute or two if there are any more questions.
But yeah, thanks everyone for joining and watching the recording.
We'll see each other next time.