 Great welcome everybody and as you saw the topic for today is creating a photography website with the block editor. So before I continue I did want to highlight that, especially for photography website where there's a lot of images and you want to optimize your images. So steps to take before uploading images to your site is number one, choose a good file format, for example PNG, JPEG, WebP, and then secondly you want to scale the image dimensions. If it's too large, scale it down. Thirdly, reduce the image file size. You definitely don't want to add too many large images to your server. And of course you can do all these things. You can change the file format, you can scale the image dimensions and you can reduce the image file size all in programs like Squish or Tiny PNG. We don't have time to really go into that but more of Andrew just shared some links to a tutorial that I created about a video tutorial about image optimization so you're welcome to go and have a look at that. And yeah the last thing is you also want to rename the image file before actually uploading it. That's also great for SEO because you describe what the image is about before actually uploading it to your media library. Okay so that is a bit of an intro so let me go and show you what the website I created and then I'll show you how I did that. Okay so welcome to my photography website. When I created this of course I told you I thought of my client, I thought of my user and my goal. So my goal is of course to share my services. I'll show you here. I take, when you click on galleries, I take sports photographs and commercial photographs. And you can kind of clearly see that as you open up my website. I've called myself on my website Extreme Photography. I think branding is also very important here. You'll notice I've used my logo in my header and in my footer but yeah I think when you look at this immediately you can see what my site is about and I've used a hero image to kind of pull you closer or to pull you in. Now I'll start on my home page and then I'll show you what else I've done. So yeah just before we continue I've got a home page. I've got a galleries page and then I actually have an action sports page and a commercial page. So kind of to show off the different photographs that I take. I've got a frequently asked questions page testimonials page about page and a contact page. And of course I added that via the navigation block. And also I've used the 2023 block theme. So I've used a standard block theme, the 2023 theme if you were wondering about that. But I'll show you more in the back end after this. Okay so here's my hero image and then if you scroll down I decided to add a bit of a quote or quotation here. And then actually another euro image and for this I use the cover block. Now remember the great thing about a cover block is that you can you can add text or color overlay over an image or a video with the cover block so action sports. And then on my home page I actually decided to add more about me. And for this I used a media and text block. And you'll see I also added my social icons. Another euro image. So I also take commercial photographs. And then yeah, I would love to collaborate and take your event or product to the next level. So more of my contact details. An image. Some more images here at the bottom. And then my my footer. Now one thing I wanted to mention about this is they say you always want to add the place you are the place you are in in your footer. And this is really good for for SEO as well, especially for local SEO so that people know in which area you work from. And of course the search engines will pick that up as well. So I've said Cape Town South Africa. I'm a traveling action sports and commercial photographer. So yeah, I think on the homepage, people already kind of see what I'm about. What type of photographs I take, etc. Then I just wanted to show you my gallery space. So let's go to action sports. So I've got an action sports page. And now I actually have a header that is different than my homepage and I'll show you. I'll show you how I did that but that's where templates come come to play. And where it's important to know how to use your templates and assign a different template to a different page. Let's get into that now. So there's my action sports page. And yeah, I've actually used the query loop to display all the events where I've been. So I've taken events at King of the Dunes, Namibia and all these other these other events. And now folks can say, oh, I want to see what type of photo photographs he took at the Red Bulls scale off so they can click on that. And then I added images via gallery blocks so that people can see these are all the images that I've taken. All right. So that is my that is my my website. Now also wanted to show you that if you look at it from the from mobile. It is responsive. So you will notice even on mobile. It looks great. So yeah it is responsive. And I just thought I'll show you that as well. Okay so let's make our way to the backing. But before we do that. I just wanted to show you I selected so here we are in the back in our dashboard. So the first thing I did if you go to settings I showed you already that I'm using the 2023 block theme. And I've also decided to use a static page on page. So if you go to reading settings reading. Yeah, I don't want my home page to display my latest posts. I created I've selected a static page. And then I said I want my home page to be my static page. And I clicked save. I don't have a blog page so I left that out. Okay now we are going to make our way to the site editor. Because if you look at my my front end, the header that you see here and the footer. Those are things that get repeated across your site. And those things you design in your templates because templates are for the design of a page. So I'm going to show you how I created a design for this page the header and the footer. And then I also created a different design for my other pages. Okay so back to our dashboard we're going to make our way to appearance and click on the editor. Now this will take you to this to your site editor where I just said where you can manage your templates and template parts. So if you click on your your site icon or the WordPress icon you will see templates and you will see template parts. And I'm on my page template. So all pages that have been assigned to this template will share this header and this footer. Now let's open my list of views that I can show you. This is a header template part. This is a footer template part which I created. And all of this all the content that you see here I actually created in pages so we don't add content to our templates. I did not add any of this that you see here in my template. I created that in my page. You see this because if you click on group you see this because it's being displayed through the post content block. So all our content will be displayed through the post content block but we create content in pages and posts and we create site structure or design in templates. So if you look at my page template I have used template parts a header template part to add the header and I've used a footer template part to add the footer. So let me show you how I did that. If you go to template parts and you click on add new you can create a new header. So I'm going to click on header and I'm going to call it online workshop photography header. And now I am in the template editing mode and now I'm just going to create my header. All right so let me show you how I created that that header that you saw I said forward slash cover block and then I selected an image from my media the one that I've already uploaded. And as you see I've already uploaded all these images to my to my media library. Okay, so now we can select the image. So that's been added to my cover block. Now remember as I said the great thing about a cover block is you can add text or color overlay over an image or a video. So I'm going to select make sure you select your parent block your cover block. I'm going to say I want to toggle it to full height. And I actually don't want any opacity. I want the opacity here in your sidebar settings I'm going to change the opacity to zero so that the image is more clear. And now I'm going to go ahead and I'm going to add my site logo and my navigation menu and to do that. I'm going to actually select a roadblock and in the roadblock I can put these two next to each other so I'm going to say forward slash row and I'll select a roadblock. And on the left side I'm going to add my site logo. Now remember I've already let's say for example I see replace and reset. So if I added my site logo from the start it will show you this right there's my site logo. Now I can upload it from here and I've already uploaded my my my site logo to my media library. So let's select that and there we go and now we can just enlarge that. Okay, so that's in again select your roadblock because now we want to add our navigation menu. So let's add a navigation block. Okay, at the moment it's selecting the navigation to your sidebar settings you can select a different one or you can create a new navigation navigation. So I'm going to select navigation because that's the one I already created and I've got my home page. I added a sub menu here. Right. Now I'm going to select my roadblock again. And say just below justification I want to say space between items. Now you can see they will one goes to the left one goes to the right. Now the reason I don't want to use the content position. Yes, if I send that to the top using this let's use this. It goes to narrow or if I do that it goes to narrow I don't want that. So what I'm going to do is below my roadblock. I'm going to enter and add a spacer block and a spacer block just creates extra space just empty space. And I will push that up and I might say let's make it 505. And now that spacer block pushes the content to the top and that's the way I wanted it. Now I can enlarge my site logo a bit more if I wanted to. And now if I select my navigation block. I can also change some of the topography if you go to topography. You can say okay click on appearance. And now I might say below appearance. I want extra light. But I want the text to be a bit larger so you can change the size or you can add a custom size and I'll just drag up a bit. And you can find a size that works for you. And there we are. The one thing that I wanted to change though is you'll see contact is quite close to the right there. So we're going to use padding. Padding creates space around our content between the border and the content. So let's just select the cover block and go down to dimensions. And let's say we want to create some more space to three. Again, you can set a custom size or you can just use the slider. And now if I close this, you will see my header. And now we can click save. Right. So I've created my template part. And now you can go back to templates because you add your template parts to your templates, right? So I'll go back to my page template. And I've already added it here. But for example, let's say there was nothing here. Let's say there was nothing here at the top. Sorry, let's just remove that. Let's say there was nothing there. I can now just say click on the three vertical dots. So insert before forward slash header. And you can click here and go to your headers, but you'll see I've already created one called photography. Then I can just click on that. Let me just quickly reload because I think I removed something. So just hold on one sec. Okay, let's do that again. So insert before forward slash header. And there's the one I just created. Or you can say photography header. And it will add the header that you created. Okay. Any questions about the header? The header template part. Before I show you the footer. So I've added my header template part. And now I will show you how I created my footer. Right. Do you welcome to unmute even if you have a question? All good? Yeah. Thank you, Wesley. Actually, yeah, let me throw in one question. Yes. So you said on your side, you have two different headers. How do you name them? Are they both called header? Or can I name them? So it's important to have a descriptive name. So for this one, I just called it photography. So I know it's my main one. And the other one I called a gallery header so that I know it was meant for my gallery's page. And yes, I will show you, I will show you that now. Okay. So, but yeah, good question. So now I've added my header. Now let's go to footer. So again, you go to template parts. Let's just save that. Let's go template parts. Now you'll notice I've already, I already have one called photography footer. But now for today, let's say add new. Now this time we're not adding a header. We're adding a footer template part. And let's say online workshop photography header. And as Mark Andrew highlighted, you want a descriptive name. All right. Now, again, we can start building. I'm going to say I want to add my site logo, right? Let's add my site logo for now. Let's just keep going. And just save a bit of time. I am to save a bit of time. I'm going to just copy some stuff. Okay. So let's say copy traveling action sports and commercial photographer. And below that it's Cape Town, South Africa. And below that we are going to add social icons. So let's say forward slash social icons. We're going to add a social icons block. And now we can say, all right, let's add. Oh, that's funny that it's kind of going over there. Let's add. So Instagram. So let's add Instagram with a remember always select your parent block. And let's add our Tumblr account. All right. Now, of course, we can start. Start editing. So we can make this a bit larger. We can say for the topography again, we want to change the appearance and have extra light. And for the size is changing to our EM at 1.5. And then for South Africa, Cape Town, South Africa, I'm going to make that bold. But I'm going to do something else. I'm going to click on topography and say for the owner at some later spacing between the letters. So I'm going to click on later spacing and say, let's say one pixel, or you can even say two. So when we select our navigation block, let's change that to large. And then you just add your, your, your link to your social media platform. And as soon as you add your, your link, it will change color to the correct color. Right. Now I'm going to say, let's change that to center, center, center. Let's group it, then align left or align center. And of course you can even enlarge this a bit. And there you go. And click save. So there I've created my, my footer, my footer template bot for my, for my page template. And then if you go back to templates, you click on page. You can of course just add your, your footer there. All right. So now I've created a design for my page template. And I'll show you as well. If you, if you go to pages now, and if you go to my homepage, you assign this page to a template in your sidebar setting. So in the sidebar settings, you'll notice that I've assigned this template to the page template, which is the default template. Okay. So this is very important because now all pages. Let's go to my about page. You will notice my about page has also been assigned to the page template. But my action sports page that I've shown you. Remember it had a different header. I created a custom template for that page. And I signed it to a different template. So it will have a different design. So if I go back to the editor, I want to show you something really cool. You can create custom templates. So if you go to templates, you can click on add new top right. And then at the bottom, it says custom template. And now if you can custom template now, again, you want to use a descriptive name. So I say online workshops, gallery template, for example. And now we can say create. And at the moment, my new template has got the same header and footer as my page template. But we don't want that, right? I want a new header. So we can quickly do that. Let's say I'm going to select discover block. Let's say copy block, right? So we've got a new custom gallery template. But now when we go to template parts, we first integrate the new header, right? So we can say add new header. And this is the gallery header. So header, let's create this. Now what I did is I just copied the cover block from earlier on. So let's say paste. And now it's easy. I've already done all the design part, right? The only thing I want to do now is select the cover block and actually replace the image. So now I can open my new media library. Select a new image. Select. And there you go. That is my new header template part for my custom template. So now I can click save. I've got this template part for my new custom header. I can go back to templates. Here's my new template that I created. As I mentioned, I don't want this header. And I don't want to touch this header because if I touch this header or change this header, it will change everywhere else it has been used. So just be warned. So I'm just going to say remove this header. So I'll open my list view so that I can ensure that I remove this header. And then insert before we can add a header, but we are going to use the online workshop photography header. Sorry, I selected the wrong one. The online workshop gallery's header. Here we go. So now this custom template has got a different header than my page template. And if you go to your dashboard again and I open up my action sports page, you will notice that I've assigned it to the gallery's template. Okay. Any questions before I create my home page about templates and template parts, but yeah, that's just quite important to know that you can create. You can of course change your home template or a page template, but also create custom templates. Let's talk about the action sports page. Let's go to our home page and I will show you how I say add new. Let me show you how I created my home page. So let's go to the dashboard. I'll open my home page. Okay, so remember you add your content to your home page. So let me show you how I created my home page. The first thing is I added a quote. And to create that design, I decided to use a pattern. And I actually went to the wordpress.org website. I went to download and extend and I went to patterns. And of course there's lots of different patterns that you can copy and modify. But I typed in I wanted a quote pattern. Now you can scroll through a pattern that you like. I said I want this one. Now it's really easy. You just click on copy. And I'll head back to your home page. And now I'm merely pasted the command V. And I'm going to say I don't want that image there. So I will remove the image. And yeah, instead of saying contributing makes me feel like I'm being useful to the planet. I will say taking photographs makes me feel useful. And let's say the person who said this was John Dorsey. And there you go. You've got your quote by just using a pattern. All right, so I've done that part. The next part is this banner. And I think you are right. Maybe I should ask everyone here which block will I use to create this? Anybody? Yes. Would you use a putter? What did you say, Catherine? The action sports. Yeah, so how do you think I created this? It seems like it could it be just a action, a simple. Which I'm not the header that the lower. I'm sorry. I think you're on the right track when you spoke about action sports. But yeah, I want to highlight action sports. And I see folks have already responded by cover block. And yeah, there's a cover block. So I use the cover block because you can add text over a couple of. Or you can in a cover block, you can add text over an image or video. Okay. Thank you. Yeah, great. Now let's go ahead then and type in cover. Thank you, Mark, Andrew and Robert. Then select the image from our media library and I wanted to add this one. So there it is. But now let's change the alignment to full width. Let's change the foggler to full height. So the whole image is there. And I'm going to use change content position and I want the content to be bottom left. And this is where I'm going to type in action sports in capital letters. But now of course we're going to change the opacity. Click on the past and the settings option. And then we are going to change the opacity to zero. All right. And now action sports is there. But of course we want that to be larger. All right. So first of all, let's make it bold and let's make that nice and large. Let's say like that. And again, we're going to add some space around the content using padding. So one, two, three on the slider. And now you'll notice there's some more space around the content. I think I might decide to make this even larger. Great. So now of course what you can do is you can highlight this, click on link, and then add the page that you want action sports to take you to. All right. So you'll take the URL from your action sports page and you will add it here so that if people click on action sports it will take them there. Okay. So we have done this part. Now let's get to the about me. And I think I told you this in the beginning for the about me. You can use the columns block, but I used a media and text block. So let's say media and text. And that is of course you've got media on the one side text on the other side. So on the left side, let's add an image. There you go. And on the right side, we add our content now to save time. I'm just going to copy this. And then of course here on the right, I'm going to add my my content. Now I've already showed you how I created a my social icons. And what I actually did before this, I created the social icons in my block and then I saved it as a reusable block. So if I now let's click on the insert. If I click on the insert at the top left, you will see its block patterns reusable. And I called it getting touch. So I've already created it. And now I've saved it as a reusable block. And I can insert it there. And there I've got my about section. The one thing I want to do though is I also want to change the alignment to full width. And I also want to change the padding. So I've selected the media and text block. And let's change the padding. So you go to dimensions. You can click on the plus and then it will give the options padding or margin. It said padding. And then let's also say we want the padding padding to be three. So that's how I created reusable blocks. Yes. When I put that reuse, if I use that block on another page now and I change the content, will it change it on this page? And that's really important. So reusable blocks change globally. So if you change anything here, it will change everywhere else where the reusable block has been added. So to ensure that does not happen, what you can do is if you click on the three vertical dots. Do you see there's an option that says convert to regular blocks? We can do that convert to regular blocks. And now I can modify it and change it and it won't affect my reusable block. But as I said, if this was if you if you create a reusable block and let's say get in touch online workshop. If it is on other pages and you updated, yeah, you change it here. It will update there as well. So yeah, as I said, if you want to make sure you only change it here, you have to convert it to a reusable block. Perfect. Thank you, Wes. Thanks, Mark Andrew. All right. So I've done this part. I've done my about me part. And now the great things I've already basically done all of this design. So I'm going to copy again. I'm going to steal again from you don't want to work harder. You want to look smarter. So I'm going to select this, select this cover block. Copy copy block. And then I'm going to say I want to add it after my about me section. So now I'm going to say command V. And the first thing I'm going to change is say, all right, I want the text to be top right. And I want, I'll change that now. I want a different image. So I will select my cover block, replace the image. And I'll select a new image from my media. And in this case, this one. And then I can change this to commercial. There we go. And then of course you want to highlight this and add a link to your commercial page. Right. Any questions before I move on about the cover block that I've used here, the media and text block. The quotes. Anything here that's unclear. All right. So if I show you this part, I'm going to just copy this text for now. No, wait. All right. So yeah, I've used a columns block. So let me first do the columns block. Let's add the columns block. And I'll save two equal columns. And then also change the columns blocks alignment to wide width. No, to full width. Sorry. Full width. Okay. So now I've added my columns block and now on the left, I'll just show you something what I did here to have the text here on the left. I've actually added another columns block inside the left column. Do you see there? There's the other columns block. So let me just copy this copy this text for now. Hold on. Let me just double check. Yeah. So I'm going to copy this text. Copy blocks. All right. So in the, in the left column, I'm going to add another columns block to equal columns and in the left one, I want to add the, this, this text. So now I know it's kind of pushed to the left. Right. So now, whoops, let me just undo my apologies. So there's my new columns block. And there's my, okay. So now I'm going to add the rest of the content below this columns block. So let me just, for some time to say, I'm just going to copy this again. You can actually do that in your list view, right? So I can say that and I'll hold and shift. And I select all of that. And then I say copy blocks. And then command V or just paste it there. All right. And on the right side, we want to add our image. So let's add an image block there. And select it from the media library. It was this one. And of course you can see we need padding is we need more space around the content. So again, we'll select our columns block, open our sidebar settings. And let's add some space around our content. Here we go. Now the cool thing I did here that I wanted to show you, you can see this has got a bit of a different design. Let's play it around with the radius of the image to do this. So this is quite a neat little feature. So if you select the image and you go to your sidebar settings and you go to radius, you can say unlink radius. And you can change the radius of the top left, bottom, bottom left, top right, bottom right. And let's say for the top, I want for the top left, I want a hundred pixel radius. And it will make that different edge or that rounded effect. And then for the bottom right, I also want it to be a hundred. So yeah, I just kind of change the way the image is displayed by changing the radius. Right. So that is the second last part. So yeah, any questions there? All right, let me show you how I created this. This was actually all created using a gallery block. So let me go to my page, select my columns block. And then instead of that, I'm going to add a gallery block. And then we are actually going to add, let me see how many images were there one, two, three, four, five, six. We're going to add six images. So one, two, there was the rugby one, there was a rugby one. Sorry. And I create gallery. Insert gallery. Okay, but we don't want our images to be displayed this way. So I will select my gallery block. And in the sidewalk settings, I'll say I actually want six columns. Here we go. Six columns. And I will change the alignment to full widths. Now, at the moment, did you see what happened there? At the moment, there was space in between these blocks. But if you select your gallery block below dimensions, you can change the block spacing, the space between blocks. And if you make it zero, you will notice there is zero space between these images now. And that is how quick you can do it. So again, I selected the gallery block I inserted six images. I said I want six columns. I changed the alignment to full width and then I just made the block spacing the space between the different image blocks. I said zero. And then it removed the space. And now we can kick publish. And that is our home page. Yeah, I'd use the pattern. I used a block block and media and text block cover block. Yeah, I've used a columns block again. And I said, yeah, I added another columns block into the left column to create that effect with the text. And yeah, I used, I played around with the radius to, to have the image displayed differently. So I'm creating a gallery block and I removed the space using the block spacing below settings. Right. I've got five more minutes, and I wanted to go through one more thing or over one more thing. But any questions about the homepage before I do that. Okay. So happy with my homepage. As I said, I applied my, I applied my page template to my homepage. Right. So the one thing I wanted to just highlight was how I displayed my action sports page. So on this side, let's say, here we go out of a gallery's page and then action sports page. And the way I displayed these is of course, I created posts for each of these events. Right. So if you go to posts, you will notice, remember, I don't have a blog page. So my, my posts are being displayed on my action sports page or my commercial page. So I created these posts. If you click on the readable scale off in my post, I added my images. Now you can display your images as you please. And the way I did it, if you open my list view, I add, I added a gallery block with portrait images, and then I added another gallery block with landscape images, portrait landscape images. So that's how I added my images to my post. But of course, you want your, your posts to display on your, on your action sports page. So let me just show you how I did that. So here's my post. And as I said, you are all the other posts or all the other events that where I've taken photographs. So if we go to my action sports page, and you'll remember that I, I add, I assign a gallery template to this page. How did I do this? Well, this is all done by the query loop block and the query loop block pulls in your posts. So let me show you that. So query loop block, you can choose a pattern. Right. What patterns to choose from. The way you want your posts to be displayed. I'm going to select this one. And then change it the way I wanted to be displayed. So let's say full width again. And now, when you change one post, it will update everywhere. Let me show you. So let's say, for example, I don't want the post excerpt to be there. So I'm going to say, remove post excerpt. And now it has removed everywhere else. And let's say below the post title. I want the post featured image to be displayed. So let's add the post featured image block. And there we go. All my posts have a post featured image. And now it will be displayed through the query block. But I don't want to have three columns. I want to have two columns. So let's select my query block and say I want two columns. And there you go. That's how I displayed my events where I've taken photographs. I've used the query block. So again, on the front end now, this is what it will look like. It has a different header because I've added a signed. I have assigned a different Robert. Thank you for the compliment. Robert says, you make it easy. But yeah, the more you play around with it, the easier it will get. But yeah, I've got a different header because I've assigned a different template. And then I'm displaying my events through the query loop block. And I showed you when you open up one of my posts, I added the images using different gallery blocks. And I know I've gone over one minute, but I'm happy to answer any more questions that have come up now. But yeah, that is my photography website. And I've shown you how I created my homepage. I've shown you how I assign templates and created template parts for my templates. I've also shown you how I display my posts by the query loop block and then adding images to my post to display that. So I'm going over it again just to kind of reiterate what has been said. I'm going to stop recording now and then you're welcome to ask any more questions. Thank you for joining us and we will see you next time.