 Great stuff. As I said, good day. Welcome to part two of recreating block designs. And if you join me in part one, this is also going to be a live demo. And yeah, this is all about me showing you how I created some designs and recreating it with you. So to get us started, when we speak about block designs, we are essentially talking about using the block editor and using the power of the block editor. And as you know that the block editor offers an array of blocks that can be used to create media rich pages and posts. And to create those media rich pages, we are going to use blocks and blocks are the content elements that you add to create content layouts. And of course, there are so many different blocks that that we can use. But one of the most important content components of the block editor is the container block. And I think this is very important to understand but one of the fundamentals of the block editor or one of the fundamentals of build the basics is using container blocks to to nest and group other blocks, especially the columns block, the group block and the road block. So just a bit of a definition again, or a reminder, a container block is a block that groups other blocks together inside one container and you can think of it as a parent block that can hold multiple child blocks within it. So our our objectives for today, we are going to look at how we can nest and group blocks together. And we're going to use container blocks and also the duplicate option. And that is something I'm going to emphasize a few times, but the duplicate option is a great way for us to save time. And then we're going to build a page with various content elements. And of course we will be editing blocks and and changing the style settings. So, yeah, now hopefully we all know where we are going in this session and and yeah, please stop me if I'm going to fast or ask me to repeat something. I'm more than willing to do that. All right, so I'm going to take you to my my test website and show you what I have created. And of course we are going to recreate that. So let me jump out of here and show you whoops, I'm already at the at the bottom. I'm just showing you my bicycle website that I've created. So it's like a cycling website or a cycling shop website. And let me show you what I've done here. So I've decided on this header with a beautiful feature featured image. And I created my site logo in Canva. And of course, at this bike shop, we are going to be able to buy bikes and accessories. So the call to action button top right was was important to highlight here. So as we scroll down, I've also created a posts feature where I've highlighted some of my posts using the query loop block. And then if we scroll down, I've used the parallax effect here. And the section is about racing bikes. And if you scroll down, I want you to meet my team. I'm going to show you how I did this as well. I've just repeated the top part at the bottom. But of course, in real life, we would have changed these images and the names and their roles. But yeah, I've created this just using blocks. And then of course, we've got another section about mountain bikes. And I've used the parallax effect again. And then I have a little section about our journey. And the one thing I want to show you is how I how I did this, where you actually have the two columns of text here, but only the one column at the top. It almost looks like something you can find in a magazine or in a newspaper. Right. So I hope you see how this is kind of scrolling. If I scroll down, you can really see that the bottom part scrolling up. Now I wouldn't mind one of these, but yeah, it's the brand new Holly Davidson electrical scooter. So I wanted to highlight this part one of the new the new things that are that are out. And then to end it off, I have an hours and location section. So just highlighting what times we are open and where you can find us. And then I have my foot at the bottom. All right. So that is my my cycling website. And as I mentioned, I created all of this just using the block editor container blocks and other blocks, no page builder. All right. Yeah. And Laura, I'll show you how I did that now just to quickly show you as well on mobile. How how my site looks on mobile. I thought that was always interesting as well. Looks really cool on on mobile and everything appears to be in proportion and displays correctly. So yeah, let's get cracking then. And let's of course start at the top with our header. And I am using a block theme. So let's jump to the front. I mean the back end of my website. I'm using the 2022 block theme. These days will probably start using the 2023 block theme. But yeah, I'm using the 2022 block theme. So if I'm using the site editor, and I'm going to create my header in my site editor for if you say if you change things in mobile, do they change in other responsive views as well. So yeah, they are responsive. And that's why they display correctly on on mobile. And if you add a tablet, for example, it would do the same back to appearance and the site editor. And now we are going to create a new template part. And then after this I'll come back to questions. So we're going to create a new template part. And of course template parts are things that recur on your on your site such as headers and footers. And we this is the one I've created by one. So we're going to say we need to create a new header. And I'm going to say add new. And then you've got to select what type of template part is it it is a header template part. And then we can name it we're going to say bike to for this example. And now I'm going to create. And now you will notice we are in template editing template editing mode. And the nice thing about template editing mode is that you can just focus on on your, your header that you're creating without any distractions. And the first thing, of course, we are going to add a cover block. And I am going to select my image for my, my cover block. And I'm going to ensure that I select my cover block. And at the top I'm going to say full height. There we go. So now you've got that beautiful. And now the first thing I'm going to create it add is my button. A buttons block. And we said it's got to say be shocked now. All right. Let's make that bold. Let's open our list view to ensure that I select my, my parent buttons block. And now we can open up our sidebar settings. Let me just check and select the button itself. Let's change the background color to white and the text to to black. All right, now we're going to press int. Okay, let's say insert after. Now we are going to add our site logo and our navigation menu. So we're going to use a road block. And that's one of the container blocks that we spoke about. So we can add a road block. And within our road block, I'm going to say I want my site logo. Nice. And I can just enlarge that a bit. And then next to my site logo, I'm going to add a navigation block. Always remember to ensure that you select the road block, the parent block. So now I'm going to add my navigation menu, one that I've already created. And let's make sure the text is white as well. Now I'm also going to change the alignment of the shop now button. And let's say we want to change the alignment to write. And now this is something that somebody asked me the other day as well. The reason I'm not going to use the content position option here is because things don't appear the way that I want it to. It appears. I'll let me click it for example and say, let's say top left. See if that happens, that's not how I want it. So I'm going to say undo and instead I'm going to click on my road block. I'm going to say insert after. And now I'm going to add a space of block. And now you can just drag your space of block to the top. And there you have your header. Of course, you can still add the link to your shop. But yeah, we've used a cover block, a buttons block, a road block, a site logo block, and navigation block, and a space of block. And the great thing is you can see all of that in the list view. And now we can save it. And we can make our way back to our templates. Of course, this is my page template. And you will notice that I've already added this header. But if I click on bike one, this is the one that I had. If I say replace, there's the bike two option, the one that I've just created. So now I can just click on bike two. And that's the one that we want. You can still change the opacity to be a bit darker. Maybe that's the one thing I will still do. So I'm just going to select my cover block, open my sidebar settings, and let's make the opacity a bit darker so that the white text stands up more. So let's change that to 17 or 16. I'm going to hit save, and there we go. Our header is completed. And now we are going to move on to the block editor. So we've done in the site editor, we've created our header. Now we need to go back to our block editor to add content. Please remember, we don't add content to templates. Templates are there for structure. And we use pages and posts to add content. So we're going to hit our way, make our way back to a block editor. And we're going to create a home page. Now, of course, this is the one I've already created. For my example, I'm going to also call this home too. And it's hit publish. All right. Now, I hope this is going to work because yesterday the reason I activated the Gutenberg plugin was something else didn't display right so I might. I'm going to see how this goes. I might activate the Gutenberg plugin again, but we are going to create that new arrival section. So we are firstly going to add a group block, one of our container blocks. And within our group block, we are going to add a heading and call it new arrivals. And then below that we are going to add a query loop because we want to display some of our posts that we've created. So we're going to add our query new block and if you can start blank or you can choose a pattern. So just give a sick for it to load. Okay, so it's different patterns that you can select the way you want these posts to be displayed. And I am going to go for this one. And then once you're happy with the pattern, we can click on choose. And now I'm going to open up my list view because there are some things that I actually don't want to be displayed. So I don't need the post excerpt. So I'm going to remove the post excerpt and remember the wonderful thing about the query loop block is if you remove it in in one of the posts, it will be removed everywhere else. So I just have to do it once so I don't need the post date. I don't need the separator. I don't need to pagination. The next thing is I'm going to use the filter option because I as you will notice my my sample my sample post is being displayed. But I've actually created a category called bicycles because I only want posts that relate to this topic to be displayed. If you select your sidebar settings remember ensure you select your query loop block if you scroll down and go to filters. You can use filters to display content specific things. So I've created a category called bicycle. So now if I click that, only those will be displayed. All right, now this is where I wonder what's going to happen now. I want to select the group block because I want to change the alignment to full width. So select the parent block. And great stuff. All right. Do you want to take a couple of questions and we have a few in the chat. Yes, I will do that now let me just finish this one and then I will go. Thanks for that. So let me just select this and I want this to be displayed a bit smaller. And then also I'm going to select my group block. And I wanted to change the background of the group block to show different color. So there we go. We've created this new arrival section. So I still wanted to make this bold and I actually wanted it to be uppercase. All right. And if we open our list view, we'll notice we've used a group block, a heading block and a query loop block. As we want to display these posts. All right. Let's get back to some questions. All right. So I see there was one from Darren. So let me just update this so long. And let's just jump to the editor because you asked about the header. So it says, how would you change size, margin and location of button in the header? So if you select the button, of course, you can change the size by just using your sidebar settings. You will notice below typography, there's an option. So of course you can actually create that, make that a bit larger if you wanted to. I'll do undo. All right. The other question was about margin. So for the buttons block as well, if you go down to dimensions. And as you'll know, we can only see padding. But if you click on the three vertical dots, it says view options. You will notice sometimes some blocks will also have margin as an option. But at the moment for the buttons block, maybe that's something for 6.1. I can't remember now, Courtney. I don't know if you can check. But with 6.1, and as you know, that's upon us. But with 6.1, a lot of blocks will have more options available. So I'm wondering if I activate the Gutenberg plugin, we might see that. Let's do that for interest sake. Let's save that. And for those of you who don't know, the Gutenberg plugin is a development plugin. And things here will go into the call. So let's jump back. Let's see. Okay. We were busy with the buttons block. If I click on the three vertical dots now, still no padding. I mean, still no margin, but you can change the padding. So for example, if you drag this, we can create more space around the content. And that's what your padding block can do. And if you don't want that, I'm just going to say reset all. And then your other question was about the location. You can place it where you want. So if you go to the list view, you will notice our buttons block is there at the moment. You can send it to the bottom. If you wanted to, let's say you wanted right at the bottom, I just use these little arrows. And let's say now you want it to be center. You could have done that as well. So you can play around with, with these little arrows. All right. So Nomad, what if you have a specific template for the homepage as far as editing content, if you have an annoying themes to that. Okay. All I can say about templates, if you had a specific template for your homepage, you would have just added this header to that template, this template part. Okay. Let me just undo this. All right. Can you increase the font size in the editor? Yeah. So for the font size, if you, for example, click on the navigation menu, you will be able to scroll down again to typography. And next to typography, if you click on the three vertical dots, you have font family. You've got appearance, line light, letter spacing, letter case. I mean, decoration and letter case. And below that you've got size. And if you click on the three vertical dots, you will be able to add a custom size. And of course that will be the same for, for the buttons block below size. Okay. So James, were you referring when you asked about 6.1? We just made a comment. I was noticing that you were activating deactivating Gutenberg. So it's wondering if you were in 6.1 and getting further advanced features or on 6.0 and getting 6.1 equivalents. Yeah. 6.1 equivalents, yeah. 6.1 equivalents. Although I don't have the, what do you call it again? I don't have the other plugin installed to see exactly what I will see with 6.1. Okay. Yeah. I haven't tried that plugin. Okay. Yes. Thanks Nomad for, for highlighting that. Okay. Gene, when you showed the page full width, the new arrivals title was offset to the left. Then when window size was smaller, the title appeared flash left with the left image. Both were aligned at the same point on left. Can you specify the title to align the same as the image? Okay. Let's, let's check. Dashboard. Right. Pages. So we looked at our first example, right? Right. So you want this to be aligned with the text. Let's see if I do that. No. I don't know if somebody already answered that. That is a good question, Gene. Let me just open up my. If you change the width of the window, if you slide it back and forth, will that title move around? Or is it always going to be there? I did want to have that new aligned right on top of the image. Well, it's interesting when it's in a different screen, you will notice it actually appears flush. But yeah, I don't know. It's see if I. So this is the. This is just a hitting block. See, there it is. That's perfect. Just like that. Yes, but that's just because I've got the, the sidebar, the sidebar open. So if I close it. And this is the way of course it will look like on the front end. So I'm sure about that one. I don't know if you need CSS for that. Okay. Thank you. I'm going to stay around and if I figure out something, I'll let you know. Cool. But one thing that I can think of, just hold on one second. No, that won't work. Let's see if I. If I select these two. And I stack them. Oh, there you go. Okay. I stacked them together. Okay. So I basically grouped them, but in a stack. And that, that's all that for you. Yes. Thank you. Okay. Okay. Great. All right. So now we're going to move on to, let me just check the time. Okay. Now we're going to move on to. These featured. Images. All right. So let me. I'm going to add a cover block now. And. We are after. One of those bikes again. So. Let me check which one was it. This one. I see. But now. Yeah. Sorry, Linda. I don't know how to do that. I'm going to have to try and figure that out. Thank you. Cool. You're welcome. Okay. So I'm going to select that bike. Again, I'm going to. I see. Now I wonder if I. Make it full. Forward. And I've selected. Full height. And now I'm actually going to. Use the. The change content position. So with the cover block, you can change where you want the content to be. So I'm going to say top left. I want it. I want it to be. To be there. So I am going to add. Group block. And then within my group block. I'm going to add. A heading block. Oh, did that work now? Sorry. I'm going to add a heading block. And this is the racing bikes. And now below that. I have actually. I've got the text that I want here. So. I'm just going to copy that to save us some time. And now I'm going to add. The text there. Now. Let's make that bold. Now one thing you will notice it's quite. I'm quite far at the top. Now that's where padding helps a lot. So if you select the cover block. And. You, you scroll down. I think I want to make the opacity bit lighter because the photo is, is quite dark. So let's make the opacity. 30. And now we can use the padding option and say, oh, we actually want. Things to. To be further away. And you can add that space around. And the last thing we're going to select the cover block. Open our sidebar settings and of course select fixed background. And when you click fixed background. That is where you will create that parallax effect. So there you go. We've used the cover block. And we've added all of all of this information into. A group block. Right now below that. We want to create. The section of where we meet our team. So once again, I'm going to add. A group block. And within the group block. I'm going to add my heading. And that's where I wanted to say. And meet our people. And I will. Make that bold as well. And now below that I'm going to add a columns block. All right. And we are going to select three equal columns. And now let's first go ahead and select the group block. And make that full width. Okay, see that happened to me yesterday. Let me just deactivate this again. I don't know why this is happening. Bugs. Okay. Maybe just. Why did that happen now? Okay. Let's just rather it's being a bit temperamental at the moment. Sorry about that. So let's select the columns block. And make that full height. I mean, full width. Okay, now. In our left column. We are going to add an image. And we are actually going to say we want this to be 25%. Yeah. And our sidebar settings. And we are going to say we want it to be rounded. All right. Next, we can add the name. Lily is the owner. And we can say we want this to be bold. And this to be italics. And now we can also make sure we select this left column. We're going to use the duplicate option now. So it's important that you get everything right now. So we are also going to, I'm going to actually select in my sidebar settings. I'm just going to click on shift and select all three. And I'm also going to use the stack option. So I'm going to stack that together. And now once it's stacked, I'm going to change the justification or the alignment to center. Again, now the cool thing is, as you would have noticed, the design is the same across, right? So this is where the duplicate option is really helpful and will save you time. So instead of recreating that, I'm going to select this column, click on the three vertical dots, and then duplicate. And I will do the same again, duplicate again. And now I can just click on the three vertical dots next to the empty columns and remove the column. And now we can just go ahead and replace the image, for example. So the other person who worked there, again, let's make this 25%. His name was, and now we just change the content, right? He was the manager, and let's replace that image. Again, I'm going to say 25%, change the content. This was Alexa Stevens, and Alexa is the technician. All right. Now, again, we're going to use, so let's say you've got three more people that you want to highlight, right? So now we are going to select the entire columns block. You know, with the parent column. And now we are going to click on the three vertical dots and duplicate that. And now you'll notice that the entire column will be duplicated. And something else that you could do, which I've done here in my example, you know, I've changed the color here. If you select the stack, we can change the background color. And I've already had a color that I have in mind. So I'm going to say B2CC E3. And then I'm going to copy that. And then I will go to the bottom one year, bottom right, and I'm going to change the background. And this time I'm just going to take that out, and I'm going to click on the Xcode and paste the Xcode from the other one that I've just added. Let's update that. Now, if we close the sidebar setting, she will notice we have our section meet the people. Well, now we are on the topic of duplicate again. Because as you remember, below the meet our people section, we had another featured image. So of course this is exactly the same idea as year, right? So instead of recreating this, I'm going to duplicate. So the first thing I'm going to do is go back to my page, right? I'm going to select this cover block, click on the three vertical dots and duplicate. So there's the original one. And of course we just want to change the position now. So again, we're going to use these little arrows to move it down and push it below the meet the people section. And now we can merely just replace the background image. So let's open our media library again and select this image. All right. Now the other thing again that we need to do is let's just change the text to white. And of course we need to this strange. Why is this going to remove that quickly? Let's just or maybe let's just copy from here. Copy. Let's paste that there. And now we can change the text to white. But of course now we need to modify the opacity because this image is not that as dark as the other one. So we can change the opacity to 70 year as we want the text to be highlighted. You have a question from Phil. How can you decrease space between the blocks? For example, Leo and owner. Which ones? Oh, Lillian owner. Oh, that's a very good question. All right. So if you select these two blocks, we've already stacked them, right? So let's go to that one. Now, if you go to your sidebar settings, there's an option called block spacing. So let's say you've got these two paragraph blocks, right? Let's group them together. Okay. Just make sure it's still. Okay. So now that I've grouped them together and full, if you go down to block spacing, I think there's an option. There we go. Now that you play around with block spacing, you can actually decrease the space between them. And I think that's what you wanted, right? You wanted the space between Lillian and the owner to be less. So yeah, just remember, again, that's why I spoke about the container blocks in the beginning. You've got to group things together to play around with the block spacing between them. Okay. Now we. James, sorry. Yeah. Could you use row block rather than columns to get flexed? Ah, thank you. Well, sorry, I forgot to change this to mountain bikes. Thank you, James for being awake. So what was the other question? Could you use row block rather than columns to get flex behavior? Yes, you can. Yeah. A row block is also a great container block to be able to do that. Yes. All right. So yeah, full block spacing will always be there if you group blocks together. All right. The next one that we wanted to look at was this one. So we are going to add a columns block. Whoops. Again, one of our container blocks. And we are going to select two equal columns. Okay. Then we want to make sure that we select the parent block and change the alignment to full width. Okay. Now we are first going to add some content to our left column. So in our left column, we first going to add our heading. And that is our journey. Okay. And below that, we can add our first text now. So I'm just using some dummy text. So I'm going to add the text there. But now remember, in the example, we had the text at the top. That's all in one column. And then we had the two columns. And to create that effect, we just add another columns block. So we're going to add another columns block in the left column. So now this time we're going to add a columns block. Again, two equal columns. And then in the left one. So we're going to use that dummy text twice. We can pop it there. And we can pop it there. So that's how I created that kind of newspaper effect. Or magazine effect. And now if we go to our right column, we wanted to add those two images. So this time we are actually going to add a gallery block. Because we want those images to be grouped together. So let's open our media library. And I want that image. And then I'm going to create a new gallery. And if we close the sidebar settings, you will notice that it appears this way. So just want to select the parent column. Or let me just, sorry, the parent column. Because we also wanted to change the background again. So the great thing is the columns block also allows you to change the background. So I'm going to make sure I select the entire parent column. And then if you go to background, we can change the color of the background. And there you have that our journey section. Of course, I can still again make this bold. Cool. And then this is going to see how much time I've got left. Okay, so let's press enter. Let's add another cover block. Select our Holly. Let's say full width again. And full height again. And let's go grab our content. The brand new Holly is here. Now I'm just going to highlight that. And you know if you click on the transform button, we can transform this to a heading. And we can also then change the size. If you click here, we can add a custom size. Let's select pixels. And let's say 40. And then I take, yeah. And then we can also make it bold. And of course change the color to white. And then below that, we've got some more text that we can add. And of course this will just be a paragraph. And then below that, you want to add a button's block. So I'm going to add dash button. And I'm going to say read more. I will change the background to white again. I'll change the text to black. Make the text bold. I like that rounded effect for the buttons block. So if you select your buttons block at the bottom, when you go to border and radius, you can add team, or you can just drag it all the way to the right to give it that rounded effect. And then I will change the alignment of my buttons block to center. And of course, you want to add your link to where it will take a reader who wants to learn more. Okay. And again, we're going to add fixed background to create that parallax effect. And we need to probably change our opacity to be a bit darker as well. So the text stands out. So again, the powerful cover block has allowed us to add all of this or group it together. Okay. That is probably all we have time for today. And maybe I will just show you my last example. What I've done here is I've added a cover block. And then within the cover block, I added a group block. And I changed the background color of the group block. And then within the group block, I added a columns block. But the columns block that I added was a bit wider on the left and a bit more narrow on the right. And then I just added a heading, a spacer block, my text. And on the right side, I added a heading, spacer block, text and a buttons block.