 All right great stuff as I said welcome to today's session. My name is waste the wrong and Yeah, today. We'll be looking at recreating recreating block designs as you know these sessions are and Sessions which where we actually learn from each other. So yeah, I'm excited to to hear from you as well. You're welcome to Get involved in the chat Onseach others questions post questions. I might not have all the answers, but hopefully there's enough people here to to help me out alright, so and as I said, we are Looking at recreating block designs and I thought before I get into that. Let's talk about the block editor so the WordPress block editor It's also called just the block editor or the WordPress editor Some referred to it as the Gutenberg editor and it is the new way of publishing content in WordPress. So following its launch in December 2018 The WordPress block editor was set as the default editor and of course it's it has replaced the the classic editor you can still use the classic editor by I'm installing a plug in the The classic editor plug in so you're still able to do that. But yeah, the default editor Excuse me Or the block editor is now the default editor in in WordPress so the block editor offers an array of blocks that can be used to create media-rich pages and posts and You can achieve a lot of things without using a page builder if that is what you wanted to do I mean the one other thing about WordPress is There's such a large community and there's so many products that you can use and some people prefer to use page builders and that's great But there's a lot that you can do Just by using the block editor You don't actually need a page builder if if that is the route that you you wanted to go So You can control the layout of blocks with with ease to both visually appealing webpages by nesting and Combining blocks and we'll we'll we'll see a lot of that today by nesting and combining blocks and and as you can see on the screen and blocks are the content elements that you add to create content layouts and The important blocks to take note of I think Container blocks And that is for For structure, I said equal structure So container blocks provide structure for basic blocks such as the group block the columns block the cover block etc and It 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 And the great thing about it is that it will also allow upon styling options such as padding margins background color and so forth So let's just talk about what we are going to be doing today And we are going to be grouping and nesting blocks together. We will be creating an offset gallery And we will also be customizing a header in the site editor We will be building a page with various content elements And we will be editing blocks and and of course some of the style settings So I see a bit of a typo there. Sorry an offset gallery. So Yeah, that is what we want to achieve. So let's jump straight into it By looking in my first example All right, so we're going to look at different examples and I might have time for another example that I didn't put in here But we might get there But yeah, let's talk about this for a moment and offset gallery now we know usually images are And they're symmetrical and and this is a different way of of displaying your images and displaying um A gallery. So yeah, this is what we call an offset gallery and I thought we can We can see how how we can create our own offset gallery so this is from a this is a screenshot from a different website and let me just Jump out of here then And go to my My test website All right, so this is actually an offset gallery that I've created It's part of my restaurant website and as you will notice The images complement each other But it's not the typical the typical structure You would see All right. Now, how did I Create this let me show you and this is hopefully something you can test out afterwards as well Now I think the first thing we want to see here is you can actually see I've got three columns here So Let's go to our page So I have created let me just go back here. So I created a page offset gallery So I created this page So I'm just going to Let's do it below All right. So the first thing we're going to do is we are going to Um, yes, Jane always food food or traveling. That's my my go-to all right, so I am going to add a Columns block and this time I am going to Select three equal columns All right, so I've selected my three equal columns Now you will notice when I click It goes on to the individual columns. So this is where you want to use your Your list view Because I want to select the parent block. I want to select the The the main columns block And then I'm going to use my block toolbar and I want to change the alignment to full width All right, so now we have done that And now we can start adding our our content All right, so let's start on the left column We'll click on the inserts will add a block And the first thing we're going to do is we're going to add an image block And I've I've already of course added these to my media library. So I will go there And as you can see lots of good food and I am off to this one And I will select it I'm going to press enter and then I'm going to add My next image again from my media library And let's go for this one right But now of course We want to Make the second one smaller Okay, so we're going to just drag it a bit smaller for now And then we will change the alignment to right Alignment to right. All right, so you can see there's a straight line coming Coming down here. All right. Now we can move on to our middle column We can add another image on the media library And we're going to select the the one with the lights in the restaurant And we also want to make this one And smaller All right So you asked, how do you um realign? A button under the media. I will get there a bit later I'm not using any buttons for now, but I'm I'll definitely get there later All right, so I've added that one. Let's add another image Remember you can just say dash image if you wanted to as well and Okay so now We can go ahead. We're going to come back and and check this the sizes of these just now Um, but for now, we are going to add a paragraph block on the side now To to save time. So first I'm going to add a heading And I'm going to say welcome to A machine that is my restaurant name and then I'm going to add another image Just something to make it look nice But we can't see that at the moment. So let's go ahead now and Select our columns block again now the one thing about the columns work as I mentioned it mentioned it is a Container block and you can actually go to your settings and we can change the background color to black and now of course you can see that Now we just need to select my Welcome to a machine and then we change the text to to white All right, and to save time. I've already I got all my my information in a different doc. So I'll go there And now I'll please enter And I will that day just ignore Grammarly please All right, so I'll grab that again and I will change the text to white All right, so there you can see in in a few clicks. I created this this offset gallery um Now I just wanted to double check my sizes. So if I click on the image um, it says 819 by 1024 that's fine Is this the one I had? Or maybe let's make this 219 I was wondering if this one should be a bit larger. Yes, let's make that one 257 And then this one You can actually make this one a bit smaller Let's make this 414 All right, and now of course We can do that And there you go Now let's update this and of course the the main thing about using a um Using a block theme is that I won't have you won't see the the header here, right? um, I created the header in the In the site editor. So Let's say preview And then this is something I wanted to show you as well. Let's look at the mobile um So first of all, let's preview this in a different tab All right, so as you know, there's my header But of course, you want to see what this looks like And yaku and I think that's what you are referring to. Let's see what this looks like on mobile And I want to show you a cool trick if you didn't know how to do this And if you click on if you right click And you click on inspect right There's a little option here Um, it says toggle device toolbox. So if you click on it, you can go to And you can actually see what it will look like On a desktop And then if you click on it again You will see what it will look like on on mobile So, of course, there's my my header My responsive menu the hamburger menu And if you go down The images Are also in an offset structure So, yeah I think it looks really good on on mobile as well Great stuff And now we can click out of there Right any questions about the the offset gallery? But yeah, uh a creative way of displaying your and your images You know without using any code just using a A colons block So yes, this session is being recorded. So afterwards I will drop the link in meetup But it's also available. I'll share that at the end. It's also available on learn Dot wordpress and then you can rewatch it and play around with it as well Yes, it does. I actually watched lego masters this weekend. It does sometimes feel like playing playing with lego All right All right, so let's move on to my next example now Let me just move this slightly All right, so I've created A page here And as you can see it's got a very nice featured image It says it's the site logo is spectacular sightseeing I've got my navigation menu on the right I've got some text here And a call to action And then if you scroll down I have a quote from Lewis Carroll that says in the end. We only regret the chances we didn't take So there's a bit of a life lesson for you today as well In our session. It's not just all about wordpress Don't regret your choices All right, and if we scroll down You will notice I've got these two images Or two options like hiking and trekking and then great lakes and then another two calls to actions Where you can actually click and hopefully find out about cool hiking trails, etc And then if you come down You will see I've got this parallax effect Way to next And to end it off Traveling made easy now. Hopefully your eye can immediately see that That I've used column blocks here as well But you'll also see I've modified The image a bit so that it's got that rounded And effect or it doesn't have that sharp curve Will shop for ages All right, so let me show you how I created this So Let's start with the top And of course, this is our header and I created the header in my site editor because I'm of course using a block theme I'm using the 2022 theme so Let's click back To our dashboard And if you click on appearance you will notice I am using the 2022 theme And to create that header We need to go to the The site editor Because with a block theme, of course, you are in charge of Your navigation in you and your headers in your footers now At the moment I'm on my home page template home page template and I am going to go to template pots Because a header and a footer are template pots that you add to your templates Now you will notice here's the one I've already created, but we are going to recreate it right so I am Going to click on add new top right And of course, I want to create a header template bot a new header. So I'm going to click on header and I'm going to say Let's call this online Workshop header All right, and now I'm going to click on create And this is taking me into the template editing mode And the nice thing about the template editing mode is that you don't have any other distractions All right, so Let's go ahead and the first thing we're going to use we're going to use a container block. We're going to use the The cover block here and the great thing about the cover block is that you can add an image or video and you can late and overlay Or you can have an overlay color and of course you can put text and other blocks on top of that So let's select our cover block and Here is that beautiful image That you saw And now if you click on the The cover block we're going to go to our Our block toolbar and we're going to say toggle to full height So that it fills the It fills the the space All right, now let's look at the opacity The opacity is at 50 and I'm actually going to keep it there because I'm going to add I'm going to add text to it All right, now We are going to add a row block Okay, the first thing let's just add this and we change the text to white All right We are going to add a row block for our site logo and for our navigation menu And we're going to use a row block because we want to Have one pot on the left and one pot on the right. So on the left side We are going to add my site Logo all right, so You can of course replace this if you have a different site logo, but this is the one I have and Let's enlarge that a bit All right Now on the right side, I'm going to click on the insert Inserter again. Remember I'm adding another element. I'm adding another block to the row block And this time I want to add a navigation block And I'm going to select a menu that I've already created But of course you can start empty if you wanted to so I'm going to select the navigation menu the one I've already created And I'm going to change the text To white All right, but now you will see okay, just want to double check. Let's click on the list view I have selected the row but now you will see we have a bit of a problem the site logo and the navigation Menu or like right next to each other. We don't want that Um, we want the navigation menu to go all the way to the right And to do that It's quite a quick fix you go to your sidewall settings and below justification is an option On the right far right. It says space between items So we are going to create space between those two items So if I click on that you will notice The navigation menu goes to where you want it All right, um and let's just Select our navigation menu. I think I want to Create and make it a bit larger and I'm going to say let's change it to To three and then also Drag this a bit Larger as well, okay Now we are going to press enter And now we're actually going to add a spacer block because um You'll remember there's more text and I'm going to add a spacer block Between the the two parts so that when I when I drag the spacer block Um or enlarge the spacer block the top part will go up and the the bottom part will go down so let's add a spacer block and then press enter and Now we're going to add a paragraph block. Oh, sorry. It's already a paragraph block. So now I'm going to say live the dream and I'm going to also Ensure the text is white. I'm going to change the alignment to center And I'm going to say I want the text to be extra large and I want it to be four All right, and then below that I am going to add a separator block I'm going to change the background of the separator block to white as well and then I am Let's just click on the separator and say insert after And now I'm going to say your journey Starts here And of course again change the alignment to center Change the text to white And I'm actually going to you know, you can add these default sizes one two three four. So it's um small medium large and extra large but of course If you click on set custom size you can add your own custom size And I'm going to say I want this to be 60 pixels And then I'm going to press enter And this is this comes to back to the question about the Buttons blocks and now we're going to add a buttons block or like a call to action So I'm going to add a buttons block And you can merely just use the the block toolbar I can't remember exactly who asked that question, but um Um, I think it's press ante Um, so yes, you can now just use your block tool and say I want this to be center Okay, and I want this to say learn More But I actually want the background color of my buttons block to be white and I want my text to be black So just in your sidebar settings, we're going to say we want the text to be black And we want the background to be white Right And when I highlighted you'll see you've got your block tool Sitting you can also change that to bold and then one thing I always like the rounded effect of the buttons block So you will do that in the right on the right side in your sidebar settings as well When you look at the border and the radius You can type in your 100 Or you could have just Dragged all the way to the right All right, and now of course to learn more you just need to remember to click on the link and of course You need to add the link to where that button takes you And there you have it um The only thing we can still do here is let's say We can Drag that to the top a bit And also um If I click on the roadblock I'm just want to see um If I go down Just want to see and maybe you want to add a bit of padding So we are we now padding So I just want to see if I if I drag that up I can actually bring that in a bit if you wanted to So maybe we can add that to 10 pixels and then we can Can save All right Um, yaku you said I've noticed that the editable parameters for each block seem kind of random almost like a different engineered reverse hard Yeah, I'm unsure about that yaku. Maybe it's just um seem related All right, um Great stuff. So there we've created our template bot or our header And maybe one thing I you still want to do if you want to maybe make that italics. I don't know You can decide all right, so let's save that and now go back to our template pods And you will notice that is one of the options now that that you have So when we go to our our page template You will notice if you click on the list view I've called this one test one now I could easily now go down and say replace And then I just click on the one we have just created Which is online workshop header And there you go. All right Now I'm going to click save Okay So are you happy with that any more questions about the site editor and The header because as you know all the other content and this is really important all the other content that we're going to add We are actually going to add to a page because we don't add content to templates templates are for site structure and content will be added to Our our block editor and if you create a page or post write so we have created structure by creating a header and Therefore we're going to leave the site editor now And and make our way back to the block editor all right So can you show having multiple versions of a header and swapping that part to a page Creating a new template creating a new template part Okay, yeah, couldn't um that is actually I think that's going to be a bit too much maybe at the end Um, I've actually run an online workshop about templates and template parts um I don't know if I'm going to have enough time to get into that um, but I'll quickly just make a reference to that so Of course, um, you can have Different templates for different pages because maybe you don't want this header For another page. So then you just need to add a different template to that page um, and to do that um, for example If you go to templates and let's say for example um for your posts Now you will know I just opened up the single post template. So Usually this now this is the the header that you will that you will see when you um, open up a post right But we can quickly change that if we wanted to by selecting one of our existing template parts um all by selecting one of our our patterns so Let's add that one and save it so now you're Your posts will have a different a different header for example All right, so let's make our way to the dashboard um and Ya Kun this also refers to what you said so if I go to pages for example and Let's go to um The about page There's no content in here at the moment, but if you go on the right to The sidebar settings you will see it says template and at the moment this page Has been assigned to the default template and here you can Edit that template the page template that we just worked on Or you can actually create a brand new custom template In the template editor But as I mentioned, we probably don't have time for for all of that, but yeah, that is how you How you can actually change The template that is assigned to a page All right, so Yeah, yeah, couldn't I hope that helped or helped some people? Um So again, I'm just going to go to the front page. Remember, this is what we've just created in a site editor or a template part And now we want to go ahead and create all of this That you see here again So again, I'm going to go jump back I'm going to go to pages Now all of that information you just saw I created in the home page So you'll notice if you go to settings Reading You will notice that I've selected a static page. So I've got a static home page and I've I've assigned the home page to my home page and Um You can also of course have a blog page or a different page Assigned to your posts All right, so let's go back to pages Now for this example, I don't want to We are technically creating the the home page, right? So this is where we do it. But for now, let's just create an example page So Example page. All right So first things first we want to add that That quote Now you would have noticed that the quote had a different background And you need to contain the block for that So I'm going to say dash and I'm actually going to add A group block first because you can change the the background color of a group block So I'm going to add a group block And then I'm going to change the alignment to full words And then inside the group block I'm going to add A quote block All right, and there it is You'll notice there's even A cool template that you could could use if you wanted to but I'm going to say I want to use the The quote block and I'm going to just jump back to my Here's my quote I'm going to copy that just to save a bit of time All right, so here's my quote And this is the person who said that the lure Carol And now we can select it. Let's make it larger. Let's say Three for large And now let's change the alignment to center And now of course If you click on the group block, let's just click on the list view. I've selected the group block All right I see the quote block actually also has the the option to change the background color So maybe I didn't need the group block, but for now, let's just change the background color And there you go my quote And then swiftly moving on to Those two images and text that you saw So I'm going to use another columns block Yes, the great thing and Dave is and they are of course I'm iterating and A lot of blocks are getting more and more features. So The great thing is with with workplace 6.1. There will be even more More possibilities with with different blocks. So, yeah So I'm going to add a columns block but And I'm going to show you why I'm going to choose 100 now I'm just going to choose one for now because I'm going to use the duplicate Option just to save us time and that is something that that you can really start using Is is by duplicating and because once you've created the structure you just duplicate and then Replace the the content. So the first thing I'm going to add is I'm going to add a gallery and I'm going to select This image All right And then in my sidebar settings I Want to change the I don't want those shop edges. So I'm just going to change the radius to 20 And now you will notice it's got that nice curve All right, and then I'm going to um And now I'm going to add paragraph And this was the one hiking and tracking Again, I'm going to take that to center And I will make it bold And then below that I will add some more text And I'll just use a bit of dummy text here All right, and let's add some dummy text there And then below that we're going to add another call to action A buttons block and this time we're going to say explore instead of learn more And we want to actually change the background color to black And let's make that bold And then remember if you want that rounded border, you can just drag the radius to 100 pixels And let's change the alignment to Center All right Now I'm going to click on my list view All right, that is the column right? So now I'm just going to say duplicate So I'll click on the three vertical dots And then I'll click on duplicate All right, that did not work because Oh, I know why it did not work All right, um Let me quickly fix this I'm going to add a column Two equal columns All right, let me just um Change this to full words Now I'll show you you can See a bit of troubleshooting here as well Okay, so now we can actually I want to see this works We are going to copy all of this Let's see if that works Okay, and we are going to add that You know paste it there All right Sorry It's removed the image Oh, where's this now? Let's remove this column Remove all of this Okay Back to Sorry, Jean you said column block not the bearing block to duplicate Yes, thank you. Sorry um Maybe that was that was that the issue? I should have I didn't I shouldn't have duplicated the the bearing block just the the one column All right, so now I'm going to duplicate The column there we go. Sorry about that. Yes And now I can just remove the right column the third one to remove column and there we go Thanks, Jean Okay, now we can just merely replace the The image here. So I'm going to replace this This looks really comfortable And of course here we said this one was great legs And now of course, this is just some dummy text, but now you can just replace the text All right, so we've got our quote We've got our two columns. All right Let me just click on the parent block again And then I'm going to click on the three vertical dots and say insert after Good night. Jean. See you later All right, so now I'm going to add A cover block because I want that parallax effect Okay, we've got 12 minutes left and I think I will get it all done All right, so we have selected the cover block and the reason I've selected the cover block, of course If you because you can add text over an image and secondly You you can have that parallax effect. So let's select Where is that image? There it is So here's my my cover block. I'm going to select it. I'm going to say full width And I'm actually going to change the opacity to zero And the reason I'm going to do that is I specifically select this image so that the person is on the left And I can add the text on the right. So now within the column within the cover block I'm going to add a columns block and I'm going to add Two equal columns and I'm not going to put anything into the left side. I'm just going to To add some text now. Remember, I've already saved my text So Here's my text And now I can just paste it in there Let's make that a bit larger maybe four and now I'm going to select the cover block again And here you've got the option on the right To click fix the background fix the background and once you do that You've got that great parallax effect. So now if you go up down You will see It's got a fixed background. All right. So next one This is the last one We are going to add I'm going to add two columns first So we're going to add a columns block I'm going to select two equal columns and again, I will say make sure you select the parent block Say full width right on the left side We are going to say traveling made easy And I've got some Some dummy text again So let's grab the dummy text Okay First off It's um make that bold and then let's make that large Now I want to add another image between the the two parts of text. So I'm going to add an image here So I'm going to click on this And I'll add one from the media library. I wanted this person jumping But I actually want this Yeah, okay. Remember, I don't want those sharp edges. So I'm just going to change the radius to to 20 All right. Now on the right hand side I'm going to add A gallery block And I'm going to add an image The person skiing Now again I want to change the radius of it to 20 pixels to have that rounded effect and now I am I'm going to click on the column and I'm going to duplicate the column. Remember, thanks gene for early on when we're not going to duplicate the parent block I'll duplicate this column And now we can just replace this image with another one And I'll open another one from the media library And that was the person on the bike And there you go so I have nested Blocks together We've got a quote block. We've used the columns block. You'll notice I've used the columns block and And the cover block and the group block a lot again. Those are the Those are the container blocks Yeah, wonderful. So Yeah, that is how I Created these now. Let's see what it will look like on mobile because um Let's publish this all right, and again Before we say goodbye, let's preview this in in a tab All right, again, I said The best way to do this is click right click Go to inspect And yet the bottom I've already selected The mobile option and there you can see my hamburger menu So I think my cover my my header actually looks really good on mobile my quote And then these of course will stack. Oh the one thing I forgot. Do you see what happened? What's happening there? That's the one thing I forgot. Let me just quickly Change that I forgot to do that. I need to change the the padding a bit So It's just edit this page That's actually very important. So let's select this columns block Let's go to our sidebar settings because you don't want those things to be so far to the edges So if you go to padding You can change the padding to 40 pixels Now you will notice it Went slightly in And let's do that with this columns block as well Let's go here Um, you can just drag up as well if you wanted to let's go to 40 Okay update Again Preview you need to Right click inspect All right, let's see if that's kind of fixed the the problem as well. So again our header Our quote And yet now you can see it's actually added that padding the space around the block Oh, the parallax one also looks really good Traveling made easy And those two images would have also stacked And bobs your uncle. All right And that is all I wanted to show you today We've got um, I've got a part two Coming up I think on the first of November for me It might be the the last day of October for For for some other people in the world, but yeah, I'm going to run a similar one. It's called part two And I will be kind of doing the same thing nesting and grouping blocks together And recreating block designs