 Right, great, welcome everyone. As I said, today's topic is a building a homepage. So of course the homepage is your site's main hub and serves as the face of a brand. And your homepage helps site visitors to get to different areas of your site. And it is the place where you should grab the visitors attention. I think one of the important things to highlight here is that you want to take people deeper into your site. You want them to delve deeper into your site from your homepage. So just a few tips to consider when you start creating your homepage. And number one, keep the design simple and uncluttered. Consider easy readability. You don't wanna add too many words. And of course a lot of these tips actually apply to the rest of your website as well. Number two, use easy navigation and call to action buttons. Number three, ensure high quality images that resonates with your brand and your message. And number four, keep accessibility at the top of mind. Remember to add alt text to your images. Number five, also remember to optimize images and media to ensure better loading speed. We don't have time to really get into optimization but it is important to do that for media. Number six, use attention grabbing headlines. You wanna of course grab the attention of visitors that land on your homepage. And then seven, instill trust and credibility. You wanna show off your achievements. You wanna maybe highlight client feedback, et cetera. And then lastly, ensure that your homepage or website is mobile friendly because more than half of website traffic comes from mobile phones. So let's just talk about my plan for today. So number one, I'm going to set a static homepage. Number two, I'm going to choose between using a page template or the front page template. And for today, I'm actually going to select a page template for my homepage. And then I'm going to create a header and footer template part. I'm gonna create a header and footer for my homepage. Then I will remove the title block from the relevant template that I'm going to use. And then I will build a page using the block editor and patterns. All right, so let's go. Let's jump to my test website. Let me just first show you what I am going to, the page I'm gonna build today. I haven't created my header and footer yet but let me just show you what I am going to try and achieve in today's session. So this is my homepage that I'm gonna try and build. As I said, using the block editor and using patterns. So I've got a featured image here at the top and I use the cover block here. And here I'm instilling trust with clients or folks visiting my website, mentioning I've got any experience with one awards, something about my dedicated team and of course, clear call to actions. And then I've used a media and text block here to highlight our services. Then I've also added a query loop block. So I'm not going to have a block page but I'm gonna add my block posts to my homepage. Using query loop block. And then I just have another cover block here for aesthetics and here I also want to highlight what I've achieved or what my business has achieved, some contact details and then a gallery. So this is what we are going to build in the next hour or 15 minutes. And then of course, also my head and footer. But let's start at the beginning and that is of course, which theme am I using? So you will notice here on my dashboard, we go to appearance, themes. And I've installed the 2023 block theme. And of course, when we use a block theme, we have access to the editor where we can actually create and edit our site cohesively. So first things first, I am going to set a static homepage. So at the moment, let me just show you, if I go to the editor, you will notice that my homepage displays my latest posts. So you will notice this is actually the blog home template is actually the default homepage set when I started this new website and I've installed the theme. So I actually don't want that. I want to have a static homepage. So therefore we're going to go back to our dashboard and we need to go to settings and select reading. Now here you will see your homepage displays your latest posts and that is what we just saw. And as I said, that's the default setting, but I'm going to select a static page for my homepage and I have already created these pages. I've created an about page, a contact page, a homepage. We've got the privacy policy page and then I've got a sample page and a services page. So I'm going to select my homepage as my static page. You can also then, if you have a blog page, you can set that year as well, but for my website, I've decided not to have a blog page. As I mentioned, I'm going to add my query new blog to my homepage actually. But yeah, so that's it. It's save our changes. And now if we go to pages, you will notice that my homepage, it says front page next to my homepage because that is my front page now. That is my homepage of my website now. The next question we want to answer is, so what template has been assigned to this page? Now you will notice when I selected my homepage as a static, as my static page, this theme, if I open up my sidebar settings, you will notice next to template, this theme actually assigns this page to the page template, which is the default template. So all your pages, your general pages will be assigned to the page template, but now your page template has also been assigned. And what that basically means is that all your pages and your homepage will share the same header and footer. But if you wanted to create a custom template for your homepage, you can do that. It all depends on your theme and what's available, but let's make our way to appearance and then go to the site editor. And let's select templates. Now, I just wanted to show you at the moment, you'll see here's your homepage. And if we click on that, it says home at the top. So we are actually in the page now, not the template. And when you are on a page, you won't be able to edit your header and footer right. So let's click on header. It says here at the bottom left, edit your template to edit this block. So we can't touch the header and footer here. If you go to edit template on the right in your sidebar settings below, you can say edit template. And now you will see when I edit the template of my homepage, I actually came to the page template because it is assigned to the page template. All right, so just wanted to clarify that, but if we go back to templates, we can now next to templates click on the plus icon and it says add new template. So now we can add a new template. And as I said, if I select the front page template, that will now replace the page template for the homepage. So if I select front page, you will notice you can choose a pattern or you can skip. And then if you select skip, you will actually get a blank page, a blank template. And then you have to add your header template part, your post content block, your footer template part, et cetera, or you can just select a pattern and then open your list view and say, all right, I'm going to remove the query loop block from here. And then you can, for example, set the header, set the footer, et cetera. So let's just save that for a moment. Just wanted to show you, I've created this front page template. So now it already assigned itself to the home template. So let's see that. Let's go to pages. You will remember earlier on when I selected the homepage, it was assigned to the page template. So let's open our homepage. And now you will notice it has been assigned to the front page template. And only the homepage will be assigned to the front page template. So that is some of the options that you do have. But for today, I actually just want my homepage to also be assigned to the page template as my other main pages like my about page, my services page and contact page. So for today, I'm just going to go back to the editor. I'm going to go to templates, select the front page template, and I'm just going to delete that for now. And now again, if we return to the homepage, we will notice it has been assigned to the page template. All right, the next step is we want to create a header and footer for our page template. So of course, we don't add content to a template, we only add structure to a template. So we'll add our content here in the homepage, but for now, let's go and edit the template. And we can do that here in the template editor. So you can go to Appearance Editor and go to your templates from there, or you can just go here and say, all right, I want to edit this page template. So let's edit template. Now again, all pages that has been assigned to this template, the page template will have this header and footer that we're gonna set now. Okay, so let's open our list view and select our header. Another great thing is you can actually just use the patterns that come with your theme or with call. So I'm going to click on the three vertical dots and say, I want to replace this header. And of course to do this quicker, I'm just gonna select one of the patterns as I mentioned. So let's go ahead and say, all right, I want to select simple header with tagline. Great stuff. And if I open that up, you will notice that we've got our site logo, which I've already added. Let's make that a bit larger. And then in the stack block, we've got the site title and then the site tagline. I've already set my tagline. I said, you're indoor weather experts. And then my navigation menu on the right. So I've already created a navigation menu. As you can see here, if you click on the three vertical dots, you can create new menus. Right, so that was an easy step. I've just selected one of my patterns and I actually like what I see here. Maybe I just want to add some padding around the content. So let's select this group block and I just want to add some more padding. There we go. All right, so I'm happy with that. Let's move on to our footer. We're going to follow the same process. Select the footer, click on the three vertical dots, say replace footer, and then select one of the patterns that come with your theme. Now, of course, this might differ. You might have more options depending on what theme you're using. So let's select a different footer pattern. I'm going to select left align footer. So let's select that, right. I actually want to remove my site title. So now we can modify it. So I'm just going to say I want to remove that and say insert before, no, not that one. Let's make sure I select the paragraph. Okay, sorry, let's just go, there we go. Okay, let's make sure we select the paragraph there and say add before. So now we know it's part of that stack block. And I also want to add my logo here. Let's make that a bit larger as well or maybe a bit smaller. And now, of course, we can modify the address. My address is 100 Main Street Cape Town, all right. And then I also wanted to add some padding around this row block. So maybe on the sides a bit more, there we go. And now, of course, you also want to add the URLs to your social media platforms. And then, of course, we can say, oh, let's select this. You just open my list view, select the navigation. Let's say we want this to be medium, a bit larger. All right, so there is my footer. Maybe we can also make that bold. Let's make that bold and that bold just to... There we go. There is our footer in place, ready to go. So now let's update. The one thing that I actually want to do is I notice that sometimes there's too much space between my footer and the content above. So maybe let's just remove some of the padding at the top so you can actually unlink the padding, select top, and let's say for the top part, we actually want less padding. Cool, update, save. And now our template is ready. I've added my header, I've added my footer. Now the one thing I mentioned earlier on, one of the goals for today is I want to remove the title block and I'll show you what I mean. So if I go and look at my example again, you will notice, sorry, there we go. I can actually update this page now and let's see what happens because I've updated the template, right? So let's update this page. Boom, my new header and my new footer. And now if I look at this, I actually want to add some more padding. So let's just select this row block again, there we go. Let's add some more padding here and actually remove that top part and update. Let's just, there we go, that looks a bit better. But now you will notice at the top, it says sample page. And for example, for the home page, it will say home for the context page, it will say contact. But I actually want to remove this and to remove that you need to remove it from your template. So if I return to my template, I can select the title block and now I'm going to say delete the title block. And let's update and let's see now on this page, if I refresh, there we go. The title block has disappeared. All right, so our template is all done and now we can start actually creating our, the rest of our home page. We can start creating the content for our home page. So to do that, now there's two places where you can actually edit your template, right? So if you go to the editor and you go to pages and I select home, I can actually add the content here in the post content block right here. Content will be here. But as you can see, there's quite a lot of things happening around you. Now there is an option, if you click on the dots here to say distraction free mode, which will also declutter things around you and then you can only focus on your content. But I would actually just like to add my content in my page from the dashboard. So I'm gonna go to pages, select home and start adding my content here. Okay, so let me just drag this to this side. Okay, so here is the first section that we wanna create and let me show you how I did that. Right, so the first block I added was a cover block. So let's add a cover block. I saw there was a question about sharing the experiment website. I will definitely do that at the end. But yeah, this is just a test website. But yeah, I will share that at the end. All right, so let's go ahead. We're gonna add our cover block and I'm gonna select an image from a media. You'll notice I've already added all my media that I wanna use today. So I'm gonna select the image and then if I open up my list view, I will select the cover block. In my block toolbar, I'm going to change the alignment to full width and also in my block toolbar, I'm going to toggle to full height. Great. And I'm going to open up my styles and I'm going to select a white overlay for my cover block. I'm gonna have this white overlay and I'm gonna change the opacity to 80 so that there's a better contrast between my background and my text. Okay, so the next thing I'm going to add is I'm going to add a heading and the heading says Air Conditioner. And Heating Services and then I'm gonna press Enter. We will start modifying and editing our content now, but let me just copy and paste this text to save time. All right, we're gonna paste the dummy text. I'm gonna press Enter and now I'm going to add a call to action. So I'm gonna add a buttons block and I'm gonna add a text. So I'm gonna add a buttons block forward slash buttons and I am going to say contact us. Now you will notice I've already set the color for my buttons block and I just wanted to remind you where I did that. So if I went to editor, to the editor, to the site editor, I went to styles and then I opened up the style book. And this is of course where you can modify individual blocks or the display and style of individual blocks. I went to design and I changed the background color year. So the great thing is now I don't have to modify the buttons block every time I add one. It's already done. All right, so contact us. And of course the next thing you wanna do is you wanna add the URL to where you want your contact and contact us call to action where you want it to go. All right, so the next thing I'm gonna do is I'm gonna select all three of these blocks. I just clicked shift and I held them in and then I'm going to click there and say, oh, I actually don't wanna don't have to do it there. I can just say, all right, I want to stack these three blocks together but I forgot to add the heating. So I'm gonna undo that, select the heating and the buttons block and then stack them together. Now at the moment, you will see it's quite narrow. Now to ensure that it spreads across the cover block, you need to select the cover block and deselect inner blocks use content with it. At the moment it's using the content with of the cover block. So let's say it says your nested blocks use content with with options for full and wide width. So if we deselected, you will notice it now spreads across the cover block. All right, so let's select the stack block now and in our block toolbar, let's change the justification. Let's justify the items to center. Great, and now I also want to enlarge this and I'm going to select the heading and for size, I'm gonna set a custom size. I'm going to actually say one rim and let's make it 5.5 and let's also make it bold. Okay, so we're almost there. Let's select our cover block again. I want to actually change the content position to top center. So I will do that here. I select change content position and I want to top middle or top center. Now when I do that, you'll see, oh, no, it's, it's very close to the border. Don't worry about that. We just gonna add some padding. So again, let's select our cover block, open our sidebar settings, go to styles, scroll down to padding and now we can add some padding top bottom and left and right. And there we go. Our first section is done. The next section that we want to look at is this one and here I've actually used a pattern from the patterns directory. All right, so let's select the cover block and I'm gonna say add after and let's go and search for that pattern. Now you need to go to the WordPress.org website because the pattern is not available with my theme. So I will go to download and extend and click on patterns and this will take you to your patterns directory. Now here you can view curated content. So these patterns have been curated by WordPress.org or you can say I want to see all the patterns contributed by the community. So if I select community, you can also scroll through hundreds of patterns. Now what I always do when I like a pattern, I click on the little heart and then it gets added to my favorites. So I'm actually gonna go to my favorites. Otherwise it's a bit too difficult finding that pattern. So let's click on favorites and here you will see all the patterns that I've liked and I think it's on page three. So let's go to page three of my favorites list and there is the pattern. So you merely click on copy, return to your website and I'll say command V on my laptop you're gonna paste it there. Right and now of course we will start modifying it to make it look the way we want. So the first thing at the moment, the image is not displaying, that's fine. I'm gonna click on replace, open media library and then select one of the images that I've already added. Great. I'm also going to open my settings and say I actually want this image to be a square. You can make it smaller, right? And now we can start modifying the color and the text. So I'm gonna say we have 10 years experience. Yeah, I wanna say we make your house a home. The other thing I wanna do is I wanna change the lettercase. So it's changed the lettercase so that it's not all capital letters. All right, so we make your house a home. You will notice that they've already added a radius around the buttons block but if we open the sidebar settings we can go to radius and border. If you click on the three vertical dots you can say reset all and now it will be reset and now what I wanna start doing and of course now you can modify the content to meet your needs. So for now let's start changing the color. So you'll notice I've used this blue. So I'll change that to blue and the rest of the text I'm gonna change to black and the buttons block of course I want the background to be blue as well. The other thing I wanted to do is I wanted to reset the size of, you'll see the font size of my buttons block. So reset that so that it's the same as the other buttons blocks. And on this side they've added a deotone to give it that green effect. So it's also changed the shadow color to blue. Same for that one. Changed the shadow color to the blue and of course the other text I said is gonna be black. Okay, the next thing we wanna do is we wanna add some padding to make the section breathe more. So again, we need to make sure we select the parent block. So let's select this group block, go to styles. No, we actually wanna select the columns block here. There we go, select the columns block. And say we want to add some padding around. The other thing we wanna do is we wanna add some padding, some block spacing between the columns. So when we go to block spacing, you'll notice if you select the one here at the bottom, the middle block spacing, we can say, oh, we wanna add some block spacing there as well. Okay, so let's see what that looks like now. There we go. The one thing I wanna do is I just wanna select this columns block. All right, that's great. Let's say this image. Let's align the center. All right, so there is our next section completed. And as you saw, I used a pattern. I then added a new image and I just modified some of the content and I updated the colors and I've added some padding and block spacing. All right, so the first part and the second part. And yeah, you can see that blue color that I'm playing around with that goes with my brand, et cetera. Okay, let's move on to the next example. And yeah, I've actually used a media and text block to achieve this. So again, let's open our list view. Make sure we select the main parent block that I can say add after and I'm gonna say forward slash. If I start typing in media, you'll see media and text comes up and the media and text blocks allows you to put text next to an image basically. All right, so let's just select this block and say we also want this to be full width and then add an image from our media library. There we go. And now on the right, we can start adding our content. Now to save time as well, let's just copy this and say copy blocks. All right, and you will notice this is a heating. And of course, as I mentioned earlier on, I'm showcasing all the services that we provide and then I just added some dummy text here. I'm gonna press enter and then of course we can add a buttons block and let's say learn more. The other thing I wanted to remind you is to add alt text for accessibility. To add alt text to your images. All right, so I've added my content. Now of course, you also want to add your URL where you want this call to action, where you want it to go. So let's select our media and text block, open our styles and let's also add some padding three. All right, the one thing I did want to change is I actually wanted the image to be on the right. So in your block toolbar, you will notice you can select show media on left or show media on right. And I'm gonna say I want to show media on right. Great stuff. So that section is also complete. And now let's move on to my blog posts. As I mentioned, I'm not gonna have a blog page. So the good thing about this is that when I display my blog posts on my homepage and there will be fresh content on my homepage which will also hopefully be good for an SEO. So let me show you how I did this. Okay, let's select our media and text block, say add after. Now I'm gonna group all of that together. So let's say I'm gonna first add a group block. I'll select a single container. Also change that to full width. And then the first thing I wanted to add was a heading and the heading said what's new? Question mark and let's also make that bold. And then I'll press enter. And the great thing is in your list view you will see now it is part of that container. Now I'm gonna add my query loop block. Now for those folks who are not familiar with the query loop block, the query loop block is basically a block that displays your blog posts. All right, and I am going to choose a pattern. It says choose a pattern for the query loop or start blank. I'm going to choose a pattern because the workers already been done for me. So let's choose a pattern that I like. I actually want this one, the grid. Okay, and then let's make this wide width. I don't want this to be full width. And let's open up our list view to see all our blocks. Now for our title block, let's make that black as well. So the text we want black and for the links we want black. And the same thing for the excerpt. Let's make that black as well. Although the section won't display on the front. This is only on the back end. All right, the one thing I do want to add is I want to add a post featured image block for my blog posts, as you will see here. So just a reminder for those who are wondering where do these images come from? So when I created my blog posts, let me just go to my posts. Yeah, all the three posts that I've created. So let's open my one post. I've added some dummy content. And here at the bottom right below featured image, I added a featured image for this post. Right, so when I add my query loop block, it pulls in the image from here. Okay, so I've got my title, the title for my blog post. And I'm going to say add after. And then I'm going to say forward slash post featured image. Right, and we're going to add the post featured image. Now, the great thing about the query loop block is you only have to update one of the items. It will then automatically be an update. We'll update everywhere else. So when we add our post featured image, you will notice it's been added everywhere else. And yeah, you can actually remove blocks, add blocks. You can add the post author block if you want folks to see who wrote this post, et cetera. All right, let's also select my heading here. And let's make that center. There we go, cool. There are my newest posts. Now you can actually say you only want to see three posts at a time on your homepage. And then the newest posts will basically appear. And as mentioned, that's good for SEO as you have fresh content on your homepage. Oh, the one thing that I wanted to mention. Sometimes you might see, oh, but it's not appearing on the front end. Well, just remember, sorry. So it might not appear on the front end. So if you select your query loop block, you need to deselect inherit query from template. It says you toggle to use the global query context that is set with the current template. So we don't want to use the global query. We want to deselect this. We want to use the query that we set. So yeah, if you ever have trouble not seeing your posts on the front end, remember to deselect that. All right, let's move on to our next section. And as I mentioned, this is also something more aesthetic. And you will see this parallax effect, which looks really nice. Let me show you how you can quickly do that. All right, so again, add after. We are going to use the cover block for this as well. And we are going to select one of our images. This is the image that I've already added. Now make sure you select the cover block, the parent block. And then again, we are going to say we want this to be full width. We want to toggle it to full height. And now we can start changing the opacity as well. So select your cover block. I want the opacity, open styles. I want the opacity to be a bit lighter. So let's make it 40. And now we can start adding our content. So I'm going to say we bring comfort to your home. Let's change the text to white. And the size, I want it to be large as well. So I'm going to say 5.5 rim. And again, now you will see it's not stretching across your cover blocks. So remember, select your cover block and deselect in the blocks, use content width. I don't want it to use the content width. There we go. It crosses. Now it will, yeah, as I said, appear across my cover block. The one thing I still want to do is I want this to be lower down. So I'm going to change the content position of the text. Now again, there's not enough breathing room. So we're going to add some padding, of course. So open our styles and add some padding around. Let's see how that looks. Great. The last step is to add that parallax effect. So again, make sure you select your cover block and not below styles, but below settings. You will see media settings and you will see the option to have a fixed background. So let's select a fixed background. And now we will see that parallax effect because the image is fixed. There we go. And now it scrolls across the image or over the image. Awesome. All thanks to the cover block. All right. Let's see what's next. We have three more examples that we want to create. So the next section is showing off what we have achieved, the number of installations or repairs for air cons, for heating and happy customers. So the way to do this, we're going to use two different column blocks. All right. So let's do the first part. So insert after. Okay. So the first part is just a single columns block. So we're going to add a columns block and say we want one column, select the parent block, make it full width and then select the column that you want to add the content to. So we're going to add a heating and it says numbers speak for themselves. I'm going to press enter. Let's just copy this text. All right. Again, I'm going to select both of these. I'm going to hold and shift and then click with my mouse. And let's stack them together as well. And let's change the justification to center. And let's also make this bold. And then we can select this column block and say we want to add some padding, some more space. And let's add some padding. There we go. So that section is done. So let's select the main columns block. So add after. And now we want to add the numbers. And this time we're going to add the columns block with three equal columns. Select the parent block, the main block, say full width. Then change the background color of your columns block. So open styles background. We want it to be blue. And now we're going to do all our work in the one column. And then we're just going to duplicate to save ourselves the time. So let's just add a paragraph here and say it was a hundred and seventy repairs and installations for air cons and then copy. And we are going to say air condition installations and repairs. And we're going to stack them together again. So I'm going to select both of them or highlight both of them and stack them in a stack block. And also change the justification to center. And I want to change the text to white. This number I also want to enlarge. So I'll go to size and set a custom size again. I'm going to select rain and say five point five. Great. So now that's done. So now we can select that left column, the first column, click on the three vertical dots and say duplicate and duplicate again. And then we can just delete. I'll just select that and delete, delete the empty columns. And now we can update these. So it was a hundred and nineteen. So this was heating installations and this was three hundred and ninety happy customers. Right. And now if we select the main columns block, we can add some padding as well. And then I think we're good to go. There we go. So numbers speak for themselves and the one thing you could still do, one thing that I see here, if you select your your stack block, you can actually decrease some of the block spacing. So maybe let's do that and see if that helps. So let's make that zero. Yeah, that looks better. Select the stack block. Now, of course, I could have done that at the start. And then I would have only had to do it once. So let's make the block spacing. Yeah, there we go. So now there's less space between the two paragraphs. Awesome. So yeah, that's what we created using two different columns blocks. Next up is our contact contact info. And yeah, I'm also going to actually use a columns block with two equal columns. So let's just select this columns block and say add after. And we're going to add another columns block. And this time columns block with an equal split. Again, select the main parent block and say full width. And on the left hand side, we're going to add an image block and we'll select one from our media library. And then on the right, we can add content. So this is grab this text. So you will notice if I if I just copy and paste it, it doesn't actually keep the style. So now I want to style it a bit. I'm going to change the text color to like a gray. And then let's make it a bit darker, like a custom dark gray. Awesome. And then let's say we want this to be extra large. Let's press enter. I'm going to add a separator, a separator block. And below that, I'm going to type in contact. And I want to keep that small, but I want to add some some space between the letters. So when you select the paragraph and you go to typography, you'll see there's an option letter spacing. And I just want to add a bit of space between the letters. So I'm going to say five pixels or letter spacing and then press enter. And then we can add our I'll just copy, copy the address, the number and the email address. And this is large. That's actually the size I wanted. And you can see there's a nice contrast between the extra large, the small and the large. The one thing you can also do is you'll notice I've selected, let me just open my list view. I've selected the right column. You can also actually send that to the middle to align it to middle. Let me just do that here. Let's align it to middle. And then we can add some padding. So let's add some padding at the top and bottom. Oops, left and right. The other thing I want to do is I wanted to add some block spacing between the two columns. So again, yeah, when I select left, right, it's just add some padding there as well and Bob's your uncle. So there are our contact details. And you'll notice here our experience technicians are dedicated to providing top quality service and products. And of course, the last thing that I wanted to add was a gallery. So let's go ahead and do that. Add after forward slash gallery. And then you can just select the amount of images you want in your gallery. In my case, I want six images. So one, two, three, four, five, six. And so create new gallery, insert gallery. Of course, select your gallery and say you want it to be full width. Now, if you open your, we want to add some padding now. If you add styles, you will notice you don't see padding, but it's just hidden away. So if you click on the plus icon next to dimensions, you'll be able to select padding and margin. So let's select padding and let's also add some padding around our gallery. And you'll notice every time I'm selecting three, because I want that uniformity on my homepage. And there we go. Our homepage, let me just go to the top. Our homepage is done. Of course, we used a cover block for this example. We use the pattern for this example, but you can see it is actually a columns block as well. And here's a media and text block. Here's our query loop block and you'll notice it's a bit more narrow. So I actually didn't use full width. I used wide widths for this one. And then we've got this parallax effect that we selected for our cover block. And then our two columns blocks. This was a single column, three equal columns and another columns block with equal split. And then six images we've added to our gallery. Now, of course, we've already created our template. So we've added our header and our footer. The last thing we want to do is just check how it displays on mobile. So let me just update this. Right. So our homepage is done. Let's view the page on the front end. There we go. There you can see our header and our footer. And you can see all our content. And I've tried to implement those things that I've chatted about at the start. I try to install trust. I try to keep it simple and clattered. Of course, I mentioned to remember to add alt text images. And I've kept the calls to the call to actions simple. And I've tried to use attention grabbing headlines, et cetera. Right. So let's click. I'm going to right click and say inspect. Let's just see what it looks like on mobile. So there we go. Let me just pull this down a bit. There we go. So this is what my site looks like on mobile. So yeah, very happy with that as well. And that brings us to the end of today's session. So I am going to stop the recording now. And so for those folks who watch the recording, thank you for joining us today. And then for those who are in the session, I will find out if there are any questions. So we'll see each other next time. Thank you.