 All right. So yes, these online workshops is a safe space for all of us to learn. And as you will see our topic before today is building a page with only patterns. So, and before I do that, welcome to my co-host as well. I don't know if you want to say a word Laura or just wave, but you're welcome to introduce yourself as well. Hi everyone. I'm glad you're all here and I see a lot of returned people and I didn't know if you hit record yet and I hit record so I don't know if I over did you so. Perfect. We are recording and we are ready to go. Thank you Laura. All right. So Laura will be handling the chat. But yeah, I am. I'm ready to start. So block patterns are a collection. I thought let's start with a bit of a description. So block patterns are collection of pre-designed blocks that you can insert into pages and posts and then customize with your own content. And using a block pattern is an easy way to create beautiful layouts that combine different blocks. And of course, as I said, you can customize these and you can change it as you want. So the two things that stand out for me. Number one, block patterns, it saves you time. And secondly, it inspires creativity. And hopefully you'll see that today in action. So there's two ways to add patterns to your postal page. So let's talk about the theme first. So patterns that come with your theme can be inserted from within your post or page when you click. Sorry, I accidentally clicked too quickly. So patterns that come with your theme can be inserted from within your post or page when you click on the insert or you can browse through the pattern directory to search for any type of pattern and then merely copy and paste it into your site. So let's go and explore. I am going to go to my test website. So let me first go to my dashboard. So what I've done is I have created a fake website, a test website. It's a horse riding school. I've called it Lance Bridge Equestrian Academy. And if I go to appearance, you will notice I've installed the 2023 default theme. And I have created two pages today on my, it's a business website. You will notice if I go to the front page, I haven't done anything to the home page. But I've created a business website and I have created an abad page using only block patterns and I've created a services page only using block patterns. And something else that I'm going to do with you all today is I'm going to create a header and a footer for my website as well using some of the patterns that are actually part of call now. So you would have seen with 6.2 and there are also some built in footer and header patterns that's there to use. And it doesn't really, it doesn't matter which theme you are using. Okay, so let me show you my services page. You'll notice my header is not set up yet but we'll get there. But let me just show you my services page. I've started here with like horse specialists connecting with nature one stride at a time. And then of course you'll see a lot of dummy text, right? Okay, so and everything you see here, there's only one place where I didn't use a pattern and I just use the cover block. So I thought you will forgive me for that. But all of what you see now are patterns that I've added and I'm not that I modified and we are going to go through that step by step now. So let me go through my services page. Yeah, our services, riding lessons, horse trekking, birthday bodies, holiday programs. And then I've broken them up individually. So we've got riding lessons with my call to action. I decided to even add some prices for private lessons and group lessons. And then for my horse trekking, I also added some prices. And then we do birthday parties and we do holiday programs. Now, see if I look at this page, if I had to kind of plan this from the start with no patterns, you know, it would have taken a lot more time and brain energy. But of course, as I said, patterns, it saves you times. It saves you time, but it also inspires creativity. Okay, so this is my services page. Let's go to my about page. So here's my bar page, 18 years of experience. Our passion is all things equine. We are community centered, dedicated team. And then I've added a testimonial. What our riders say. Okay. And here's my cover block. I just wanted to add something else in between. So I added a cover block with a parallax effect. And then our story with another call to action. And then meet our team of instructors. And of course, it's a horse riding school. So the horses are probably the most important. So meet our horses. Great. So there's my two pages that I created only using patterns. And of course, I want to show you how I did that today. But first things first, let's go and fix our header and footer. So to do that, of course, I'm using a block beam. So I'm going to make my way to my dashboard. And we are going to set up our header and footer template part in the site editor. Okay. So I'm going to create. Oh, let me, I'm going to go to my page template. Right. So let's go to templates. Let's go to my page template. Because my page template is the default template. So pages pages will be all my, my pages here will be assigned to my bar page, my contact page and my services page will be assigned to the page template. And we are now going to click on the screen here and it will take us directly into our template. And now we can open up our list view. We can select our header. And I'm actually just going to remove this header from my pattern. All right. So I'm going to remove my header here. And then I'm going to click on the group block and say insert before. And I'm going to add a new, a new header. But of course, I'm going to use a pattern provided by the theme or provided by course. So if I click on header, it says choose an existing header or create a new one. So I'm going to choose an existing header. And yet says existing template parts. So that's the existing one. But now you will see there are various patterns to choose from, which you can then modify. All right. So simple header with tagline. And now you can scroll through them. And you'll see as you hover over one, there's a border that, that goes around it. Okay. And I think I'm going to go for this one now. All right. So I'm just going to click on it. And it will insert into my, into my template. And all I have to do now is of course add my site logo. So what I've done is I've already added a logo to my media library. I just created that in Canva. And then I, and then I added it to my media library. And yes, Jerry, this will be, will be available on WordPress TV, the recording. Okay. So let's go to my media library. And you'll see here is my logo that I've already added. So I'm going to select that and then enlarge that. And there we go. We have our header in two clicks using a header pattern. Now, the one thing I still want to do if you, if you click on your, your navigation block, sorry, let's just go up again and say undo. Okay. So if we click on our navigation block, you will notice that if you use your list view, you will see this is still a page list. But we want to edit this because I want to actually move my about page and project page around. So I'm going to click on edit. Now it says edit this menu. Now it says this menu is automatically kept in sync with pages on your site. You can manage the menu yourself by clicking edit below. And yes, that's what I want to do. I want to move them around. So I'm going to say edit. And now you will see they're not part of a page list anymore. And you can move them around. You can move them around here or you can just use your, your movers or your little arrows here. So let's move about there. Let's take the homepage to the left homepage to the left and let's bring the services page second and the contact page last. There we go. And I'm going to click save. And there's my, my header pattern. All right. So now I can go down. Let's go to my footer. I'm going to do the same thing. I'm going to remove my footer. And then I'm going to say insert after this group. But now this time I'm not going to use. So I can, if I say forward slash footer, I can of course choose some of the patterns as well. And then change it. But I would actually want to use, I want to use a completely different one. So therefore I'm going to say undo. And I want to use a pattern from the pattern directory. All right. So I'm going to keep it empty there. And now I am going to make my way to the WordPress.org website. Hover over download and extend and click on patterns. And then I will type in footer while search for a footer pattern. And now you can scroll through the various options here. And this is actually the one that I want to use. It doesn't look the way I want it to look now, but it will. So I'm going to say copy. And then just come back to my template and please enter. And now we can start editing it. So let's say we want our background to be white. I'm actually going to remove this. So I'm going to remove these blocks. And let's call this quick links, quick links. And then below that, I'm going to add my navigation block. Right. And let's just go and change the text color so that we can see it. It is. If you go to settings below layout, there's an option for the orientation. Horizontal or vertical. We want this to be vertical. Right. So now our navigation block is vertical. And we can just change the color of our text here. Because this is just dummy text. So let's remove that and add our logo on the left as well. Let's enlarge that. Right. And the one thing I still wanted to do is I just wanted to change the color of these headings as well. So let's make it that blue. Okay. And then, of course, my social links. Now you will add your link to your social media page here. For now, we just have some dummy text as well. So it's like the parent block. You'll notice then the list we list view. I've selected the parent block. And now I can change the icon color to the same blue. And there we have our footer. And I'll press save. So for my header, you saw I used a pattern that's part of call. And for my footer, I used a footer pattern from the pattern directory. And I was able to quickly modify that. So our header and footer is ready. Any questions before I move on to my services page? Okay. So, okay. Great, Eliza. Thank you. Now, yes, agreed. Jerry says a lot of simple WordPress has made this. Absolutely. Okay. So let's make our way back to our dashboard now. Oh, let's first click on the front end. Let me just go and see if everything went according to plan. So let's click on our services page. Remember, I didn't touch my home page. So yes, there's my header and there's my footer all in place. Cool. Okay. So let's start with my services page. I'll make my way to pages. Now, for this online workshop, I just created a draft page to work from. Yeah. So let's start with my services page. Now, all of these. Okay. So first of all, if you want to add a pattern, you click on the insert top left and you click on patterns. And here you have a list of categories that you can search by. And if you click on the featured one, you will see a preview of the available patterns. Or as I said, we can make our way to download and extend. When we go to WordPress.org, you can come patterns and you can browse through hundreds of patterns and find the one that you are looking for. So I just wanted to mention something. The way I go about it is if you find a pattern that you like, you can add it to your favorites. So let's say, for example, you scroll through some patterns. And let's say you, you like this pattern. Then you just add a, a heart to it. And now I can go to favorites and I can see all the patterns which I have, have liked. And I've added to my, my list of, of favorite patterns. Because it can be quite intimidating going through all those patterns in the pattern directory. And what I've done is I've, I've basically, I just come to favorites because these are all the ones that I've, that I've identified that I want to use. So it's, it's way simpler that way. And then if you go to all patterns again, you, you can search by category year as well, or you can search there. Okay, so for today's session, I have already identified as you saw the patterns that I want to use. I created a, I created a Google Doc, and I've already actually pasted all my, the links to my patterns here just to make things easier. Okay, so let's start with my services page. Right. We are first going to create this. Okay, so let's click on. Let's say new tab to the right. Okay. And let's go and search up that pattern. Okay, so there's the pattern. It is, as you can see, I've already liked it. So it was part of my list. And I will share, I can share my Google Doc with you at the end so that you can see all the patterns that I've used. Okay, so I am going to just click on copy pattern. Go to my page. And let's first create this. So I'm going to paste that pattern. So here's the pattern. Right. So let's first change the images. We are merely going to go to our media library. As you've seen, I've already added all my media for my content. So now I'll just select the images. I will replace these images. So this is important to kind of plan ahead and have all your media ready. And of course, knowing what content you want to add as well. Okay, there's my other image that I wanted. So something else that I wanted to do on these websites is I want to add a slide border to my images. So I will open my sidebar settings. You'll see with 6.2, these are split settings and styles. So I'll go to styles. And I'll say I want a border of five. Sorry, not a border. Border radius. My apologies. Border radius of five. And for this image as well, we'll go to styles and a border radius of five. And here, I wanted to say or specialists and here to save time. Of course, we want to say connecting with nature once tried at a time. Okay. So now, of course, we can add our, you can change the content here, et cetera. But we also said, we want to use this blue in our website. So we're going to change the color of the text. And then, of course, we need to modify our buttons block as well. So let's make sure I've selected my buttons block. You can always see that in your list view. Let's change that as well. And throughout our website, we will change, we'll have a border radius of 100 for our. So there we go. First pattern done. And as I mentioned, we can add our content there. So there we go. So let's move on to our services. So here's the pattern that I found for services. Let's see what that looks like. One thing I did want to mention as well. If you find a pattern from a patent creator or a person and you like their patterns, it's really cool. If you scroll down, you will see more from this designer. And you will notice this is actually a WordPress.org design. So now I can click on WordPress.org and I can see all the patterns designed by this patent creator. So this is something I use a lot as well. If I see a person's pattern that I really like, I'll go and check out if they have more patterns that interest me. Okay. So let's copy this pattern. Right. So insert after. All right. So I want to add it. I want to change it to full width. But now when I change it to full width, you will see there's no padding. That's fine. Let's fix it now. So let's select our block. Let's make sure we've selected our group block. I'll go to styles. You'll notice there is padding. So I think the problem here lies with the columns block. No, the columns block. Let's see. It is the right and the left. So you'll see there's padding for the top and the bottom and the bottom, but not for the left and right. So let's make that 60 as well. And let's make the left 60 as well. Right. So now we've got some padding. Let's select our group block again. You will notice when you go through my website, we've got a bit of a contrast between the background colors. So you'll have the white and then a different color, white, different color. So to do that, I just changed the background color of my group block. So I've selected that color. And now we can just go ahead and say riding lessons, horse trekking, birthday parties and holiday programs. And I'm done. So now, of course, we can just change all of this dummy content. And then we can move on to our next one. Riding lessons. So let's copy that. Enter. Here's the pattern. Copy the pattern. I just want to select that and say open up my list view. Let's say insert after. All right. So again, we are going to make this full width. Again, let's go and change our padding. So let's say we want padding four. And then you will see the padding looks the same as at the top. And now we can just start modifying our content. Here's that cute photo of the girl kissing the horse. Now, yeah, you'll notice everything's in capital letters to change that. I'm going to click on topography and I'm going to say font resize or reset. Or you don't have to. So let's change. Let's leave it like that for now. But for the capital letters, I'm going to say typography and I'm going to go to letter case. And now the letter case option will be then I'm going to say none. So now I can change it and it won't be in capital letters. And I'll say begin it to advanced. And this is, of course, writing lessons. And then we want to change our buttons block and say, we don't want an outline. We want default, but we want our background to be this blue. Sorry. The text is white. The background is blue. And we'll change our radius to 100 as well. And we didn't want any background. We didn't want any background color for this section. So there we've created that part. Now, I have to say I wouldn't move on now. The pricing one I struggled finding the right pattern for, but I think I did at the end of the day. And I just modified it. So let me show you the pricing one, the pricing pattern. So when you search for patterns, I typed in pricing. But then I got a lot of pricing tables. So something you'll see when you sign up for internet, like the different packages. So then I found this table data, which was great. This is what I wanted. So I'm going to copy this pattern. So as you can see, it doesn't look anything like I have now, but it gave me an idea. It inspired my creativity and said, okay, well, I can create this using that. So let's say in set after, right, we are first going to remove the background. I know we'll do the background a bit later. So let's first select this. And as you will notice, it's not full width either. So I'm going to say full width. And I am going to remove the radius and then change the background to what I want. Okay. So now we want to say that these are the prices for our lessons. This is headed three. So this should actually be headed two. So I found that because I just copied the, so I realized I should have done that year as well. Okay. Cool. And now we can say, all right, this is the duration, the type of lesson, the price. And now we can just go ahead and add the minutes. What type of lesson it is. It is a private as a group and the price. And then you have your, your pricing section. And of course, one, two, three, four, there's actually more years. So one, two, three, one, two, three, four. So for the last one, when you click on, if you say, if you select that and you click on the three vertical dots. No, I'm trying to remember your edit table. Oh yeah. If you click on edit table, you have an option to delete a row. So then you can just delete that row, but you don't want. Okay. I see there's a question. Could you use the duplicate? Ah, yes. Of course you can use the duplicate button. Yes, the duplicate button is a wonderful way of, of saving time. But if you, I would assume that you have to do it before you add a hyperlink to that button. Because then the hyperlink would attach to it too, wouldn't it. So if you wanted to duplicate just the colors in the styling. So I'm just going to publish this for a moment. I know we're just going to save draft. So, technically. So I'm just kind of going through these things one by one. And technically, if you, if you go to your, your editor, and if you open a template. And you go to styles. You can of course go to your style book. And for example, for design, you can, you can change your, your buttons here. Or the design of your, your buttons here, or the design of your columns block here. And it will update globally. But of course these patterns I'm adding, I'm adding into my, into my page. So technically what you could do, I think, is if you, you add all your patterns. And then you can go to your style book and then make your changes and it will update, it will update there. But something else that I wanted to show you. And I think that's also worth pointing out. If you go to pages again, and if you go to your services page. Let's say I select this buttons block. And I click on the three vertical dots. There's an option now since 6.2 you can say copy styles. So I'm going to say copy styles. And then I've already changed that now. So it's just, for example, let's just copy that again. I'm just going to paste this into, to show you, I hope this will work. Okay. So this is a buttons block, right? But I am going to copy the style from this buttons block copy styles. And let's see what happens if I say paste styles. Yeah. So now if I say paste styles, it will update there as well. So that's another option that you have. Okay. Cool. But yes, the duplicate button that you can find the duplicate button. It's always, it's always a time saver and very helpful. So this one, I want to delete this one. Move columns. Okay. All right. So yes. So there's my, my pricing table. Okay. Let's move on to the next one. Also checking. So what I've done here is I've added some content as well. So let's see what my original pattern looks like. Nope. That's not the one. Is it? It is. So this is actually, this is what the pattern looked like. It doesn't look like what I have now, but I realized, oh, I just want to change something. So copy the pattern. Okay. Say insert after and paste your, your pattern. It's going to change our padding. It's a foregain. Here we go. And I'm going to remove this image. And now I'm going to say, let's say what happens if I say duplicate now? Okay. So if I open up my list view, we can say, so this is part of a gallery block. So there's two columns. So if I go to my sidebar settings, I'll say I want three columns. Oh, that's not working there. Oh, two columns. Sorry. I still want two columns. Let's say, hmm, I'm trying to remember what I did. Yeah, no. Oh, yeah. Sorry. I only have two images. I actually thought that I, that I had three images, but I realized I only have two images. So I, I deleted the image at the bottom. And now I will just add my two images. Okay. So where are they? That's the one. That's the one. And just a reminder to everyone as well. Please remember to add your alt text for screen readers and for SEO purposes to images when you add them. Now, yeah, is something I can do now. Remember, I added some, like a five border radius. So let's see if that happens. That works now. I added like a five pixel radius to, to my images. So if I say copy styles, let's see if that works now. And I say base styles. Yes, you'll see it changes. So I can just do that. Base styles. And now it's got that rounded effect. And of course, this is for all striking or striking, but you would have noticed below this, I wanted to add prices. So let's just make that bold. And what I did is I typed in forward slash table. And yeah, I wanted two columns and two rows. I created the table. And now I can just say for two hours, for three hours, for two hours, it will be $120. And for three hours, it will be 150. And then of course, I want to change that. This is a link. So I'll have to change the link color. I've already added my link. So we'll add that. So there we go. We, we've got our horse tracking horse tracking section as well. And now we've got our birthday party section. So let's remove that. So this one is three images and text. Okay, so I'm going to copy this pattern. Okay, let's say insert after. Let's make sure we select the parent block. Let's make this full width. And let's add our padding. Let's make that four again. And let's change the background color. So we're almost there. So now let's change our images. I love this photo. It really looks like the horse is laughing. Okay, we've got our birthday party images. Okay. So images are in place, but you'll see the, that looks a bit different. So, um, so what I did here as well is I selected the text. If you select the text and you go to typography, I just said font size reset. And then I added my heading, which was birthday parties. And you can, I'll just copy that text for now. You add the text that you wanted to. And then below that, and this is where we said we can duplicate or let's just say, let's copy block. That's another option. Right. And let's say, let's try that again. I'm going to open up my list view. So I'm just actually going to select the parent block and say copy block and then say paste. And it's pasted. So there we go. And then lastly, we have our holiday programs. I'm not, I'm not going too fast. Okay. Just please stop me if I'm, if I'm going too fast. Um, um, uh, Jean had a question about, um, can you, uh, go into the style book and change the radius of the images, uh, the border radius. Uh, she, I think she wants to save you some time and cause you keep clicking on each of the individual pictures to do that. So could that be something that you could do? So then it was automatic. Um, yeah, but I'm still wondering. So let's try that. That's a, that's a good one. So, so let's try that. Let's try that with the next one. Cause you'll see. Okay. No way. Let's, let's try that now. So I'm going to copy this pattern. Right. Let's save drop. So let's first go and add that radius to the images in the style book. Ooh, I like the way you think, Jean. Okay. So let's open up our pattern. I mean our template. Let's go to styles style book. Um, let's go to media. So when you, let's see what I can add here. Border radius. We set five, right? So now we've got a, let's save that. And let's say for our gallery block as well. You do that or will it, is it just the images that hopefully that will happen because I've changed the, um, I've changed it here. So let's just double check that. Back to the gallery and, um, Yes. Go back to the gallery and click on the layout. And click on the three dots under dimensions. Is there anything else? No. Okay. It's just double talking. So I was just thinking these, these images because I've already updated them here in the style book, when it's part of a gallery, it will hopefully happen. Okay. So let's see now. I've changed that. I've saved it. It's just double check. If it's there again. Yes. It's there. So now let's return to our pages. The services page. Okay. So let's say insert. Oh, it's already there. So I just want to try this one. So copy pattern. Now let's say paste. I don't see, I don't see that. I don't see it's that it's happened here. Um, unfortunately. So I will still need to, um, need to publish it or save it. Yeah, that's. Yeah. I think you still need to, I think you still, when you add a pattern, um, you still need to go in and change it manually. It doesn't seem like when you add the pattern. That the style book, um, applies, um, it's changed the. But yeah, it was cool to, to have a look at it. So let's look at my, my last one for the holiday program. Okay. So this is actually where I got the idea because this pattern had that little rounded effect. And then I was like, oh, but that looks better. I want all my images to, to have that five. Um, so that's, this is actually the pattern that made me realize I want to add that radius. Okay. So let's add that here. Okay. So you'll see. Sorry if I, let me just select this block. Let's make sure we select the parent block in the list of you. Let's make that full width. And let's see. Our padding is out. I just want to see what the padding was for, for this one. Let's go to styles and see the padding was actually five. I remember it was a bit larger. So yeah, we select this block. We'll say padding. Let's just drag. Oh, you can of course, um, play around with that. Let's, let's first change our images and then we can, can look at the padding again. So let's add this image. There we go. And now you'll see the, the border radius is already there because it was part of the pattern. As I said, okay. Um, holiday program. I'm just looking at what image I need to add. Where are you? Why am I not seeing it? That's odd. Am I missing it? Let's just go ahead and select this one. Okay. And now of course we'll change the text to black and say, this is holiday program. And now we can say, okay, but we want that. So let's say copy styles, base styles. And let's make that bold as well. And for the text, we're going to say, reset the font size. Or again, we can say, I realize this should also be black, these styles and pastes styles. Oops. I don't know why that's happening. Sorry. Let's just remove that. And let's add our dummy text there. I see it actually still adds it like that. So let's go to typography again, appearance, sorry, appearance, default. And then I wanted to add this type of pull to action. So I'm just going to copy the block as well, going to paste it there. And let's just duplicate that as well. They are duplicated. Sorry. I don't know what's happening while it's jumping around like that. Okay. Your images are a little bit bigger too. Yes. So let's select column. So let's actually select our columns block. And let's go to padding again. I wonder if I change the padding. Let's see if that changes it. Nope. That's not what I wanted to do. So it's my parent block. So let's just add a bit more padding there, a bit less, or maybe it should be a bit more, because when I open it up this way. But yeah, you can play around with it. So as I said, I did all of this with, so now we can publish. As I said, if I go to the front end of my website, we go to services. We have all of this because of patterns. Okay. Anything else that somebody wanted to add or ask, you're more than welcome. And as I mentioned, what I'll do is I'm going to turn this Google doc into a PDF document and then I will, I will share it with the group in, I'll even, oh yeah, I don't think this is going to work, to share this website as I'm going to use this for, for other types of online workshops and I'll make changes. So, but yeah, I will share my, my list of patterns. Yeah, you're welcome. You're welcome, Jerry. Yeah. And as I said, if you, if you go to the WordPress directory, the way I've made it easier for myself is to, to find one, find ones that I like and then, and then like it. Because of course you'll see if you start scrolling through, through patterns, there are, I mean, you can already see this 82 pages. So if you go through it once, slowly and you like all the ones you, you add the heart to all the ones that you like, you'll be able to go through all your favorites. Well, thank you for, for joining us today. And yeah, I hope patterns will make your life easier as well. Awesome. Thank you, Laura. You're welcome. Thanks everyone. Have a, have a great day wherever you are, and we'll see each other next time. Bye-bye.