 Hey, what is going on everybody? My name is Roddy and today we're going to create an e-commerce store from scratch using the full site editing in WordPress, WooCommerce and Gutenberg blocks. I will go through the entire process of installing WordPress locally, installing the necessary plugins, setting up the team and creating a couple of pages. Throughout the process you will see some of the bugs, drawbacks and overall possibilities. And for those of you who are wondering what is FSC, FSC represents a major shift in a way that a WordPress website can be created. It is a tool that comes with WordPress 5.9 and above and it allows you to build fully working websites based on drag and drop blocks. It is an excellent way to make quick edits to your site without having to go through the hassle of changing code manually. Hey, welcome everybody and let's get started. For today's video, I'm going to be using LaraGon in order to be able to install WordPress locally. If you're a Mac or Linux, you can try local by firewall or you can use XAMP. The first thing that I want to show you is that if you are using LaraGon, I did have to download the PHP version. So right click PHP version and I downgrade it to 8.0.25 purely because 8.1.10 was giving me a few warnings. In order to downgrade, all you need to do is click on how to add another PHP version. It's pretty easy. You download the PHP version from the official website and then you literally export the PHP version into LaraGon being PHP, just like I have in here. And that's it. Now that we're done with this, let's start Apache and MySQL and let's create a new website. So right click in this case, quick up and then WordPress. I'm going to give my website a name of one plant and press OK. This is going to download WordPress. OK, this has this also generates a pretty URL, which is under one plant dot test. The extension can be changed from the LaraGon settings. But I don't really mind since this is a development environment. Now let's click on the link and this will open the browser and let's quickly install WordPress. So as a default, I'm going to leave it to English United States, press Next. And then for the site title, I'm going to go with one plant username. I'm going to go with root password. I'm going to keep it simple and put a password. And then I'm going to confirm use of weak password in here. Let's add my email and that's pretty much a click install. This should take a second to install and we're good to go. Now we can log into the backend of our WordPress website. Let's click Login, let's put root and let's put password and press Login. As you can see, we have the latest version of WordPress as of now, which is 6.1. I'm going to dismiss this message and see what we need to update. So here in updates, if you scroll down, you will see that we're getting a team that needs an update. We don't really need this team. We can delete it, but I'm just going to update it so we don't get the notification here and that's pretty much it. The next thing that I want to do is to turn on the debug for this website. When we're developing, we want to see any areas that we're getting so we can fix them straight away. And also, this is going to help with the caching of the website. So we don't have to refresh like Matt like I did in the last video. So let's go back to Lara gone. In this case, close this, let's go to the root folder, navigate to the website that we just created one plant. And I'm going to open the WP config in Visual Studio Code here. Let me open it. And as you can see, I've zoomed in so everybody can see. And if you scroll down a little bit, you should see somewhere online, somewhere around line 80, 89. We have defined WP debug to false. So let's turn this to true. And as I said, this is going to help with the caching of the website. So we don't have to clear the cache of the browser. And also it's very easy to make mistakes in the JSON file that we're going to be working in today, mainly, and this is going to help us quite a bit. When you when you finish with the development of a website, of course, turn this to false, then you should be good to go. Now, let's close this and let's open the team folder, which is located in the WP content themes. And then we need to create a new one, actually. So let's create any folder in here. And I'm going to call it one land like so. I want to open this folder in my code editor, which is Visual Studio Code. In this case, and to do this, I can do left shift right click, open PowerShell window here, I can just put me zoom in a little bit. So you can see, I can just put code dot, and this is going to this basically CDs to the folder that I mean, one plant here inside themes. And it opens there in Visual Studio Code. That's pretty much it for the if you can't do that command. Don't worry. All you have to do is open your code editor, go to file, open folder and navigate to the folder that we just created here. That's pretty much it. Um, so we can minimize this and let's jump back into WordPress and finish some of the installation. If we go to the current website as of now, it's actually isn't the index page and it's displaying some posts. I want to change this and I want to make sure that our WordPress website is displaying a page instead. In order to do this, all we need to do is go to the dashboard, click on settings, reading, and then instead of latest post, we need to do is change this to a static page. And the static page that I want to select is the sample page that was created when we installed WordPress for safe changes. And now you go back to the website, press enter. You will see that we're getting sample page here, which is all good. Now, the next thing that I want to do is let's go to pages and let's change the sample page to home, just so we know what it is. And say that I'm going to create one more page of where we can mess around, drop some blocks and style them. And I'm going to kill this page demo publish. And we should be good to go. Now, let's go back refresh. And we have the demo page in here, which we're going to use in a second. And the last thing that I want to do before we start developing our website is to install all the required plugins. In this case, if you go here to plugins, let's install WooCommerce, so add new and then WooCommerce. So let's press install now. This should take a couple of seconds. Let's click activate and we need to super quickly finish the process in here. So I'm going to put United Kingdom for this example. Let's put my address. In this case, I'm going to be sending home furniture and garden. So let's continue. We'll be selling physical products. So I'm going to leave this picked and then continue. And how many products I don't really know. No, and then continue as recommended business features to my site. Let's have a look. Some of those things will be very useful, like those three. The basics are very useful, but I'm going to remove the jetpack from here because I don't really want any of them at the moment. So I'm going to remove all of them and just leave those two and then continue. The last thing that we need to do is choose a team. And I'm going to continue with the active team for now before we create our own team in a second. And we should be good to go. OK, now that we have all commerce installed, I'm going to add a few products and categories and then we can continue. By the way, feel free to skip this step or maybe come back to it later. So what I'm going to do now is under products, I'm going to go to categories and create a few of them. I'm actually only going to create one category and one product. And then I'm going to speed up the process so you don't have to go through all this. The process is the same under categories. All you need to do is give it a name and a slug. And then parents should be absolutely fine. And I'm going to upload some images as well. I'm going to drag some images in here and all the images I'm using come from on splash.com. And I will have the links in the description below. And I'm just going to select this one. Of course, put the old text, but just to speed up the process here, I'm going to skip this step and use this image at category. And as you can see, we now have our first category created in here. Now I'm going to do exactly the same for the for the rest and I'm going to speed up the process. All right, now that we have a couple of categories, let's create a few products in order to do this. Go to products, add new. And then we need to give the product a name. So I'm just going to copy and paste some of the categories in here. And I'm going to copy some Demitex, Laura Mipson and that should do the job for the product image. I'm going to select the same image here and set the product image. And then for the price, I'm just going to make it up. I'm just going to make it up and say it's 16 pounds. And for the sale, I'm going to leave that off. And then for the product category, I'm just going to select the category that this plant is in. And that's pretty much it. Of course, if you're setting up a real shop, you need to go through all the options in here and see what you need to add. In this case, I'm going to publish this product and then create a few more and speed up the process so you don't have to watch the same thing again and again. OK, now that we have a couple of products created, you can go to products or products and you'll be able to see all of them in here with their details and so on. All right. Now, if you go to the dashboard here and if you scroll down a little bit, you will see appearance. If we click on appearance teams, you will see that these are the team options that we have. Now, let's create our team. So I'm going to close absolutely everything that we don't need in here. We have that. OK, open Visual Studio Code or your favorite editor and open the team folder that we created early in this tutorial here in the VP content teams and I called it one plant. As you can see, it's currently empty and we need to start creating some of the folders and files required. If we jump back to Visual Studio Code inside here, we can start with the first folder and this is going to be the assets folder. Inside the assets folder is where you can put things such as the fonts images. And if you have any additional CSS or JavaScript files, you can also put them in here later on. I'm going to be downloading the phones as we need them. And if we need any images, I'll put them inside here. The next folder that we need is called parts. And this folder is going to contain some of the parts of our websites, such as the header or the photo. We can leave them in here later on when we develop them. And the next folder that we need is the styles. So the styles folder is essentially where we're going to be creating one team for this tutorial, but later on, I'm going to show you how you can change the styles of the current team that we made. So, for example, you might want to change the colors of the team. You might want to change the fonts. I'm going to show you how you can do that. And then you'll be able to select which style you want. And then the styles are going to go in this folder here. The next folder that we need is the templates folder and inside the templates folder is basically all of the pages that WordPress is using. For example, you have the forum for page, which is going to be HTML. This is important. We're not using PHP anymore. And here it's HTML. Then let's create another file inside the templates folder is going to be called archive.html and the archive is essentially displays posts, category stacks and order archives. Then we need the index.index.html that needs to be inside, by the way. Index.html displays posts. Then we need the page.html and the page.html is the one that we're going to use the most today, which is displays a single page. Then we're going to have search.html, which displays search results. And last, we have single.html and this is the default template for displaying any single post or attachment. That's pretty much from the templates. WooCommerce is actually going to create a few more templates on its own. So we don't have to do them manually and we can collapse this. The next few files that we need to create are going to be functions.php. You don't actually need this file in order your team to work, but I do want to include a style sheet that we can use and further modify our team. And don't worry, the PHP code that we can write, it's going to be tiny. It's literally like two, three lines. That's it. Now, the next file that we need to create is index.php. And this index file is going to be empty. It's just required for the team, but we don't have to touch it. The next thing that we need to do is create the style.css. And this file is going to have two rows. One is going to have the description of our team. So the title, the author, the name, the URL of the team and so on. But also I'm going to be using this file to further style some of the stuff that we can't do in Gutenberg. So that's definitely required. So we definitely need this. And the last file that I want to create is going to be the team.json, which is probably where we're going to spend most of our time. This is how you create the full site editing themes, all the settings, colors, typography is pretty much put in here. So we're going to spend a lot of time in this file. One more thing that I wanted to do. And the last thing that I want to do is drag a screenshot of our team. So I'm going to drag it inside here outside all of the photos. So we have screenshot dot PNG that I've created. This screenshot is 1200 in width and 900 in height. And it needs to be dot PNG. Let's close all the files. I'm going to close all files here and let's quickly jump into style.css. Now I'm going to copy and paste a comment from the official WordPress documentation that I've modified a little bit. And also you can grab this from pretty much any team in your teams holding here, if you go to the, for example, 2023, you can grab it from here. I'm going to open this as you can see the name, the team URI and so on. So grab this, paste it in your style.css and just feel some of the information. For example, the team name, the URI, the water description and so on. Anything that you feel like is important to that and save it. At this point, we should have our team created. And if we go back to the website and refresh, you will see that we're getting our team in here. So we have one plant. And if I click on team details, you'll see that we're getting the name, the version, which is already on one point. See, I've got to probably change this and so on. We get in the description and it's looking pretty cool. Let me close this. And the first thing that we need to do is activate the team. So click on activate. As you can see, we're getting an error here. And that's absolutely fine. This is because we have the WP debug turned on. And also, I haven't started working on my teams.json file. One thing I wanted to show you is that if we go on the website right now, and if we refresh, you will see that we're getting an error in here and we have empty template page. This is because we haven't started creating or age template. Saying this, one thing that I wanted to show you before we actually start developing our website is the team.css. So currently this file is working or team is picking up all of the information here, but if I was to say, let's say we want to change the body background color. So let's say background color and I've put it to blip. Let's say this, if I go back to the website and refresh, you will see that nothing is changing, which is a little bit weird. The team is picking up the file, but it's not picking up the CSS. So what we have to do is insert functions of PHP. We actually need to add this file. This is going to be the only PHP that we can write today. So let's open PHP like so. And inside here, I'm going to paste a comment saying, thank you, Stiles. And inside here, we need to create a function. So function. Let's give it a name of one plant and then underscore styles. Then open and close the curly brackets in here. And this is where we're going to put the logic. Now, let me show you what the logic is. So the logic behind this is that we need to use the VP and Q in order to be able to add styles or JavaScript. And I'm going to show you the settings super quickly. So the VP and Q, the first setting is a string and is the handle. So the handling here you can reference is the name of the style sheet should be unique. Then we have here the source, which is a string. As you can see, the full URL of the style sheet. Then we have the, what do we have the depths, which is an array of registered style sheet handles. This style sheet depends on and we have the version. And so on. So this is where you can reference some of the step that I'm going to be doing right now. And let's quickly do it. So inside here, we start with the VP underscore and Q underscore style. We give it a name of one plant dash style. It should be unique. And then I want to get this file here. There is a shortcut and we can do get underscore style sheet. And the score you are I was like, so then this is going to be array. And then the last thing that we need to do is the version. So WP get the get and then version. And that's pretty much it. I'm going to do the view. World wrap. So you can see a little bit better. Here is the full line of code. And the last thing that we need to do is add an action and trigger this function. So add underscore action. And then this action is going to be called this is very important. WP underscore and Q and then scripts. And then we do comma and then the script that we want to thank you, which is called one plant underscore styles and we close technically speaking. Now, if you go back to the website and refresh, you will see that we're getting a blue color. And this is because I put the body background color of blue. If it was to put this to red, for example, save and refresh. If it doesn't refresh, what you can do is somebody mentioned this in the comments below, control shift and R or command shift and R and then dash it refresh straight away. Now that we know that our style sheet is working, we don't actually need this. I just wanted to make sure that it's working. And the last thing that I wanted to do in functions of PHP is to check whether this function exists. So what we can do is an if statement. And inside here, we can say if exclamation mark function. And the score exists. And then the function that we want to check whether it exists is going to be one plant styles like so. And then we do column and then we can tap this inside. And then we can do and if and then close. That's pretty much it. That should work as well. And now we are done with the functions dot PHP. Let's close the functions of PHP as we are done. And we're never going to touch this again in this tutorial. Now, let's close this file and let's open the team.json file. And let's do the very basic so we can get rid of this error here. Let me refresh one more time. So if we go back to Visual Studio Code and let's focus on the team.json. Team.json is essentially all team configuration. This is where we're going to be adding all of the settings for team styles and template parts to start with. What we have to do is inside here, we need to start with curly bracket and everything is going to be inside here. Now, working with a JSON file is not so bad, but it's going to get very messy very quickly. And it's going to be a little bit hard to navigate. But I'm going to show you how we can fix that problem. So the first thing that we need to do is set up the schema. And I'm going to copy and paste a URL from the official website. And this is essentially going to help us with tooltips, autocomplete and validation in or in our code editor. What I mean by this is now if I put a comma and if I do double quotes, you will see that we are getting a lot of settings in here. And this is where they come from. It's essentially this link is providing all of the tooltips and autocomplete. The first thing I want to set up, which is very, very important is the version. If you don't set this, it's going to default to zero and your settings might not work, probably one way. The version, as of now, is to set this to two. The next thing that we need to do is put a comma one more time in here and put the title, not so important, but nice to have. And I'm going to call this one one land that's it. This is the very basics of all team.json. If we go back to the browser now and if we refresh, you'll see that we've removed all the errors and we have empty template page. Let me quickly walk you through the FSC super quickly and the Gutenberg editor. If we go to the dashboard or you can click on the editing site as well. But let's go to the dashboard super quickly. And if you scroll down a little bit under appearance, you'll see the editor. The editor is currently in beta, as you can see. Let's click on him and let's have a look around super quickly. So this is how the editor looks like. If we click on the WordPress logo in here, you will see that we're getting the site editor, the templates editor, which is essentially the templates that we created earlier, such as a four or four page, the archive index, the page and so on. When we installed WooCommerce, WooCommerce actually added a couple of other templates for us, which is great. For example, product catalog, we have, we have a product search results, single product, products by category. And so on the next thing that we can look into is the template parts. And this essentially is where we're going to create in or header of our website. We're going to create in a forster. And as you can see, we have a mini card added from WooCommerce. So this is pretty much the editor. And now let's click on the templates here. And for example, let's start editing the page. So if I click on page here, you will see that we're getting a blank page, which is fine. There are a couple of things that you need to know. First of all, if you want to find the blocks under here, you can click on toggle block insert, you can search for blocks or you can find the patterns in here. Of course, you can look through featured buttons, columns and so on. Now, this is this is an important one because we're going to be using this quite a lot. And then if you look at blocks, we have some of the main blocks in here, we have text media design, we have widgets. And if I scroll down a little bit more, you will see that we also have WooCommerce blocks that we'll be able to use later on, which is really, really good. Now, this is pretty much everything that you need to know in here. And the next thing I wanted to show you is the list view. Now, the list view is essentially how your website is structured. So for example, if I was to add something here, it straight away added a paragraph as the food. But if I was to add a group, for example, which is a container, you will see that we're getting group. And if I was to add a paragraph in this group is where you will see that the paragraph jumps in this group. And this is how we can essentially create groups, rows, columns, paragraphs, buttons and so on. They'll be viewed in here. It would be really nice if we can actually rename what the group is about. But I don't think that this is an option just yet. But hopefully in future, we'll be able to rename. For example, this could be a hero section and so on. So that's pretty much what you need to know inside here. The next thing I wanted to show you is here on the right side is the settings. So we have the template settings, which is the page settings that when we go to an individual page, you'll have a lot more settings in here. And then the last thing I wanted to show you is the block. The blocks is when you select a specific block, every single block will have slightly different settings. For example, the container or the grid block, you have layout setting. You have justification. You have color, typography and so on. Now, the reason I'm showing you this right now is because I want to show you how you can add a couple of more settings such as body margin and so on. And the last thing that I almost forgot to show you is here is the styles. We don't currently have any styles. But essentially, we're later on in this tutorial, we're going to create a different style of our team, which you will be able to select from here. For example, we can change the colors of the team. We can change the fonts and so on. Let's remove all of this. First thing that we need to do in order or pages to display some text is to add a block. So the block that I'm looking for is inside blocks and it's good for post. What you can do is do slash and then post and then we need post content. Now, this is going to pull all the content from the actual page. We're currently editing the edit page. So this is going to be the template for the editing page. So what that means is if I save now and if I go back to the website earlier, we didn't have anything on the website, but now we're getting the content. And this is the content from the actual page. So if I was to go to the demo page that we created earlier, we we're not going to get anything. And this is because on the demo page, we don't actually have any text. So if I click edit page, you will see that we have the title of and let's say the words and we can put this as an H one, for example, and save it. So this if I go back to the website one more time, put them on. Now we have in the content of the page rendered in here. And this is because we're editing the page from the actual templates here. We're editing the page in here. And as you can see, we're getting a little blue dot in here. And that symbolizes that we've edited the page and it's not reflecting the current one inside here because it's empty now. But later on, I can literally copy the code, copy the code from this page and then paste it in here and just save it as a page where somebody will be able to download your team and it's just going to work if that makes sense. So a little bit confusing to start with, but it will make sense as we go along. Now that we have a very basic page in here, I'm actually going to leave it as it is. Save this and close pretty much everything that we don't need. And I'm only going to focus on the demo page in here. So what I'm going to do in here is create different types of headings. Heading one, and I'm going to duplicate this five times. So control shift and D or command shift and D one, two, three, five. And I'm going to put heading two, heading three, heading four, heading five and heading six. Of course, we need to change them because they're all age one currently. So what I'm going to do is change this to two, three, four, five. And six, perfect. If I save this super quickly, let's go back. You will see that we're getting the headings and we can also type something as a paragraph. This is a normal paragraph. Maybe we can look into the colors. If you do slash, let's put another heading. And then this is going to be an H1. So maybe we can look into the colors. Maybe we can look into some of the blocks. So I'm going to duplicate this and just put blocks. But the blocks, maybe we can start simple and just add a button. Like so, save this update and refresh. All right. Now we have a couple of things that we can start looking into right now. Let's close pretty much everything. Make sure that you have the demo page opening here, just so we can see the changes that we're going to be making and also have have the actual website with the demo page open on a tab again, so we can see the changes. Legend back into the code editor and open team.json. That's what we're going to be focusing on now. So the next thing that we need to do inside here is put a comma. And by the way, one thing that I want to show you is that if you make a slight error just like this, I've got a comma, but I don't have anything else below it. And if I save it, the WP debug is going to scream at us. It's going to say error when decoding JSON file and so on. So this is quite helpful to have because it's very easy to make a typo or an error inside here. Let's do comma and then the first thing that we're going to look at is the settings. So I'm going to press settings in here and the first setting that I want to show you, which is a new setting, is the appearance tool. So the appearance tool, if we hover over, this is what the schema does here. If I hover over, you will see that this is the setting that enables the following UI tools, border, such as the color, radius style and width color for the links, spacing, block up, margin padding, topography, line height. So I want all of them available and I'm going to put this to truth. If I save this and if I go back to the editor, refresh this, nothing is going to change in here. But if I go in here and refresh, you will see that if I select, for example, heading and then you will see that we're getting this new link color selected here, which we didn't have before. And also if I scroll down a little bit under dimensions, if I click on the plus sign, you'll see that we can now toggle the padding and the margin on and we're going to have them in here. This actually controls the full padding, as you can see. And the same with the margin, it can show the full margin. But if you want to unlink them, you can click on link here. And then you can put custom values, for example, the top only, the right only the bottom and so on. And of course, there is another option here is if you click on the unlink one more time, you get this other option here to set a custom size if you wish in pixels, m's or rams. That's pretty much it. The same with the margin. You can unlink them and so on. The only thing that I wish they had implemented in here is a little bit of a separation between the padding and the margin somehow because it's very easy to get lost. Let me close this and let's have a look at the other stuff. The next setting that we're going to look at is the layout. So let's do common and inside here, let's select layout. For the layout, there are two options, the content size, which for me is going to be one five four three based on my design. And then I'm going to do one more, which is the width size. And that's going to be one six four three pixels like so, which is going to be the wide width of the containers. Let me show you what I mean. So this is a tricky one to understand, but I'm going to explain as we go. So if you go back to the page, we do need to refresh. So what I'm going to do is inside here, I'm going to create a new container, which is called group. So let's create a new group. And I'm going to give it a background color or this one here is the forward curve that we can use. Inside here, I'm going to create another group just to show you the differences. And this group can be something else. Let's say this light green and let's call this one. Let's give it a paragraph and let's call it inner group normal. And let's duplicate this one and do control shift and deal, command shift and D to duplicate. And let's give it another background color. And this one is going to be in a group wide. I'm going to show you how this works. And then one more. I'm going to do control shift and D and this one is going to be another color. And this is going to be full screen. If we save this super quickly and go back to the website, zoom out a little bit just so you can see. Maybe I should have given them a little bit of padding zone. So let me do that super quickly. I'm going to update and so we can see. As of currently, we have a full width container here with the background color and inside here, the other containers are kind of like in the middle. And the reason for this is because if I was to select the parent container here, you can also select it through the list view here. So if I was to select the parent one here, you will see that it has a setting inside loud here. It has an inner blocks use container width. If I was to diselect this and update, I mean, you can't see much in here because my screen is probably too small. But if I was to refresh now, you'll see that they're now taking full width, but the actual container stops in here. And this size is actually coming from the content size. So I'm going to show you one more time. I'm going to toggle this because I do want that it's justified to the center. I can justify them to the left, for example, as you can see, now they're justified to the left and do the same thing to the right. But let's justify them to the center like so. And now if I was to change this number to one to something that we can see, something smaller, so now they should go small, as you can see. So this is what the content size is. I'm going to put it back to where we need it. And now let me show you the white size, for example, a refresh. This is the normal one. The white size can be controlled from here. If you select it, you select the group. Now there are two ways you can actually put custom ones in here, but also you can click on this icon here, align, and then you can click on white width. So now I know that you probably can't see it yet here because, again, my screen is too small, maybe. And then if I put update and if I go back to the website, you will see that we are getting a wider one here. And this is because the number is wider in here. And if I was to change it super quickly for you, you will see that it's a lot wider. So that's how this is working pretty much. So you can have a white container and you can have normal container. And the same goes for this one here. We can select it and we can go for width and update. And now we should have normal, white and full width. This is how they work. And normally if you want to control them, so they're in the middle, you do need to put them inside a group and then you can put the inner blocks option on if you wish. And then justification here. That's pretty much all we need to know. Now the next thing that we're going to look at is the killers. If we select this group, for example, and if we click on background here, you will see that we're getting some of the default colors and we're getting some default gradients. Now you can actually create custom colors in here and custom gradients. Let's start by creating a few custom colors. So this is going to be again, insettings here and I just need to put a comma so we can start a new one. And then inside here, we can select color. So for the color, start typing palette because we're going to be creating a palette of colors. And inside here is where in curly brackets is where we're going to be adding all pallets. So for example, we need a slug. For this one, let's call it a background color. Then comma, then we're going to have a color. This one is going to be a hex color and it's going to be FAF4F0. And then I'm going to do one more. This is going to be the name. I'm going to call it background. If I was to save this, let's go back to the editor, refresh. And now if we click on, for example, the group in here and click on background, you'll see that we're getting all first custom color, which is actually a creamy color for background. I'm going to do exactly the same for the rest super quickly. And also these colors are available pretty much everywhere. So for the text, for the links and so on. So what I'm going to do is copy this and just change it super quickly. So for the next one, we have the contrast color. I'm going to copy and paste, save this. And I already had the values for them. So I'm going to copy and paste. For the contrast color, we have F7F7F7. Let's copy this one more time. Now we have the primary color. So I'm going to copy this, paste it. And the primary color that I have is 425F57. Give it a name of primary. Let's copy this one more time. We have the secondary color. The secondary color is 749F82. And we have one last color, which is going to be the secondary color. And for the secondary color, we have 509265. Don't forget to remove the last comment here because we don't have anything else after it. So we have a couple of colors in here. Let's have a look. Save this and let's go back to the page and refresh. So if I was to click on one of the blocks in here and let's go to the background color, you will see. You'll see that they're not appearing and it's because I made a mistake. I've copied the contrast too many times. Save this, let's go back and refresh. So we can have duplicates basically. And let's click on this background. And now as you can see, we have all background color. We have all contrast color. We have the primary, secondary, secondary color. And we can use them on pretty much everything that we wish if I was to say the text. I can just change it from here. Let's update this and let's go back to the page. And now let's focus on the typography. If you go back to the teams.json file and if we find the settings in here, if you click on this, it's gonna show you where it starts and where it ends. So instance here is where we're gonna be adding the typography settings. So I'm gonna start with putting a comma and then inside here, we put typography. For the typography, we can do a couple of settings. For example, if you wish to have a drop cap which makes the initial let bigger, I don't actually want this. So I'm gonna put this to false. And then the next setting that we're gonna look into is the fluid typography. This is going to trigger the fluid typography which we can set in a second. This is gonna allow us to put a fluid typography such as a minimum width and maximum width of all font sizes. And then inside here is where we're gonna have all font families. And the font families go in brackets because we can have multiple font families. And inside here is where we can add all font face, for example. Let's start adding the first one, by the way. And this one is gonna be a Google font. All right, if you go to Google Fonts and search for the font that you wish to add, for example, I'm gonna be using this one here for heading so I can click on it. And you can download it from here. So download font family. Gonna download it on my desktop for now. And what I'm gonna do is show in folder, grab the font and we need to go into the assets, font in here and we need to reveal in file explorer. Now inside here is where I'm gonna paste the font and then I'm gonna extract this. So this is gonna be extract all and extract. All right, now that we have the font downloaded and extracted, the first thing that you might want to do is to convert TTF to WOFF2. And you can pretty much use any of the converters online, just track the font that you want to convert, for example, this one here, and then convert it to WOFF2. Now I've already done that, so I'm gonna remove all of the fonts and just put the one that I've converted to WOFF2. I'm gonna do the same for the other font that I'm gonna be using and this is the QuickSant. I've already downloaded this font, so I'm gonna paste the folder in here. It's called QuickSant. Again, it comes from Google Fonts and then inside here, as you will see, I have converted the regular one to WOFF2. So let me remove everything else, as we won't need them and that should be good enough. All right, now let's close the folders and let's jump back into the font families. So for the font face, we need to do another set of curly brackets and inside here, we need to put font family. The first font family that I'm gonna be using is the Maryweather one and then we put comma and then we can do font stretch. For example, we can put this as normal. I just wanted to show you some of the options. As you can see, there are a lot of options here like font style we can do and then this can be set to normal as well. Then we can do font weight. It's an important one. In this case, the font is gonna be both for heading, so I'm gonna put it as 800 and a very important option is the source where this font is coming from and inside here, we need to find where this font is located and in all cases under assets, fonts and Maryweather and then we have the font in here. So what I'm gonna do, I'm gonna copy this actually, copy the whole thing, so I don't have to type it and what I'm gonna do inside here is file, column, dot and then we put assets, fonts and then we put Maryweather and then we put the font name which is Maryweather dash both dot w o f f two and that's pretty much it. Now this pretty much adds the fonts for us but we also want to give it a name and a slug and what we can do under the font face here, we need to do a comma and we need to do font family and we need to do Maryweather like they have in Google. If you go to, for example, if you select some of the topography in here, let's say the bold one here and if you click on view selected families, you will see that we're getting this Maryweather series. That's how you include it. So what we're gonna do is font family, it's gonna be Maryweather series like so and we can escape the double quotes like so and this is a series font and we leave it like so. The next option that we need to add is the name. So the name for this, I'm gonna put as Maryweather again and then I'm gonna put a slug of headings. So save this, we should have all fonts included. Now to actually test the font, let me go back, I'm gonna remove everything. If I was to refresh, you'll see that nothing is changing. This is because we actually haven't told all elements which font to use. So in order to do this, instead of settings this time, we need to find where settings is. So the start and the bottom and instead of settings, we need to put this in styles. Now inside styles, we're gonna have something called elements and inside elements is where we can select all of the headings or you can select them individually. But what I'm gonna do is set all headings to be that font. Inside here, we can select topography and inside topography, we can select font family and the font family is gonna be called headings. It's gonna have a variable name. Now, if you look at the slug in here, we call the headings. Now what this does is it actually creates ACSS variable. Let me show you what I mean. So if you go back to the website and right click inspect, then go back to then, sorry, let me zoom in a little bit. So if I click on the body here, you will see that we're getting a lot of variables. So these are some of the default variables that come with WordPress. We have black, white, and so on. But then if you scroll down a little bit more, you should be able to see some of the colors that we added earlier, but not only that, I'm having now a new variable here called WP preset dash dash font dash family headings. And this is set to the merry weather on that we just added. So I can use this variable inside here. And in order to do this, we put bar just like in CSS, then we'll put the variable name. Now, if I save this, and if I go back to the website, and if I refresh, you should be seeing that all custom font is now working. And we can do exactly the same thing for the body text as well. So let's jump back on into the settings here. And I'm gonna show you a quick trick. So in Visual Studio Code, if you click on, for example, stars in here, it's gonna show you all the other objects that we've created. And for example, I want to go inside settings, and I want to go inside topography, and that's gonna navigate a little bit quicker than just going up and down. One thing that I've noticed is that I have full spaces, which is because I didn't reset my Visual Studio Code. I had to reinstall, but normally I have them set to two spaces, and that's gonna be a lot better. And I also have an extension called Prettier, so I can do right click and format the document, and that will do it for me. Perfect. So where we have the font families, we want to add one more. And essentially the process is gonna be exactly the same. So what I'm gonna do, I'm gonna copy all of this. I'm gonna do a comma and paste it. And inside here, I need to start rewriting everything to go to this font here. So I'm gonna copy the name super quickly, and I'm gonna be using quicksand regular for the body text. So let's start with the font family. This is gonna be quicksand. I'm gonna paste the font in here. So I can copy the quicksand. And so this is gonna be font stretch normal, font style normal. The font weight is gonna be 400. The file is gonna be under assets, fonts, quicksand, quicksand, regular, W-O-F-F-2. Then we have quicksand and instead of service, this is actually a sans serif font. And the name can be quicksand, and the slug can be body. For the body text, you can color whatever you like pretty much. So now if I save this, and if I go back to the browser, and if I refresh, if I go to body, and if I scroll down a little bit more, we should be able to see all new font here, which has the WP preset on family of body. So I can copy this, and I can use it for the body topography. So inside styles, instead of elements, this time we're gonna put it in here, and I'm gonna put topography. And inside topography is where we can put the font family, which is gonna be a variable that we just copied like so. And we can put a custom line height. So for example, here it is, line height, and this is gonna be 1.75 comma font size. We can do it to whatever we like. So let's say 18 pixels for now, but I'm gonna change this in a second. So I'm gonna save this, let's go back, and let's see what are these changes now, refresh. But as you can see, the font changed, which is great, and it made it a lot bigger everywhere. Awesome, I'm not actually going to leave the font size that big, but just for now, for the testing purposes, that's absolutely fine. Now let's have a look at the topography size and make sure that everything is responsive. Now, as I showed you earlier, if I put fluid to true, look at what happens now. So if I inspect, and if I click on the mobile view here, so we can have a responsive website. So if I scale down this, you will see that the fonts are actually scaling. Even the headings, everything is scaling, which is great as default. Now, if I was to remove this fluid to false, look at what happens now, I'm gonna refresh, and you will see that nothing is scaling anymore. All of the fonts are the way they are so far. You can tell that they're not scaling anymore. What we can do is we can set the fonts to fluid to true because we do want responsive fonts, but we can also set custom size for the topography. If we go to settings and if we go to, sorry, if we go to settings and if we go to topography, so we have the topography in here, we have the font families. After the font families, where we have this bracket, we can do another line and inside here is where we can do font sizes. So inside font sizes, we need to start with fluid and then this is gonna allow us to have two options. So the first option is gonna be the maximum and the maximum in this case is gonna be one RAM for me for this one and now I'm gonna show you how this works. And for example, the second option is the minimal, which is gonna be 0.875 RAM like so and save. If I do a comma here, we can also give this a name, which is gonna be small. We can also give it a slug, which is gonna be small again and we can also give it a size, which is gonna be in this case one RAM, save this. If I was to go back to the website one more time, refresh and if I do inspect and then if you go to body, we can search for small and then unfortunately it doesn't bring up the value that I want, but here it is, it's highlighted. So what this does is it essentially creates this variable for me that can reuse throughout the entire website and it creates a clamp. The clamp basically makes the font responsive. So what I wanted to mention that if you're struggling with the topography, how to do the sizes properly, I'm gonna quickly try to explain this to you. If I was to go to my, think this was the old design that I did in the previous tutorial, but it doesn't matter. The concept is the same. So for example, what I've done is I designed how my small headings and regular text I wanted to look like and then I designed the big ones. It's a little bit broken here, but it doesn't matter. So we have smaller text and we have a bigger text. And what I've done is I actually calculated the REM values. As you can see, this is 2.113 REM and this is free. So there is a little bit of a difference and the same for the other ones. I think the regular text always stays at one REM, but for the headings I do want to have them responsive. So what I've done is I designed this and also I took some inspiration from timescale.com. If you go to this website here, you can choose a lot of options in here, how you want to design your typography. So I've taken inspiration from this and just modified it. And also in order to make sure that this is working well and correctly, what I did in the previous tutorial as well is that I went to this website here, I'm gonna copy and paste. This is basically a clamp calculator. You put the minimum font size, the minimum viewport and then you put the maximum font size, the maximum viewport and this gives you the result. So this gives you the calculations of what you need to do. And this is what I'm gonna be doing for the headings. I'm actually, I actually just copied the headings from the last tutorial, but this is how I pretty much done it, just so you know. So let's close all of this and let's continue. All right, now let's do a few more. So I'm gonna copy this, paste it super quickly inside here and this is gonna be the medium. So I'm gonna put name as medium here. The slug is gonna be medium and then the size for the medium is gonna be 1.125 rem. Now the maximum size is gonna be the same and then the minimum size is gonna be one rem. I'm gonna copy and paste. I'm gonna do large for this one. So large, slug, large. The size for the large is gonna be 1.75 rem. The minimum is gonna be 1.75 rem. The maximum is gonna be 1.875 rem. And now I'm gonna show you how to do another one, but this time we're gonna turn off the fluidity. So what I'm gonna do is common and inside here, we do another set of curly brackets and I'm gonna do fluid and this is gonna be turned to false this time, like so. And now this font is not gonna be responsive and I can just set the size to be 2.25 rem and then the slug to be X large. Now I'm gonna copy the last one in here. So common and paste it. And for the last one, we have a fluid of max 10 rem. Minimum is four rem. The size is 10 rem. The slug is XX large and we also need the name, which is gonna be XX large, like so. Save this and all topography should be good to go. Now, if I refresh, you'll see that obviously nothing has changed, but what I want to do for the body text, let's find this super quickly. I'm gonna search for body and here where we have the font size and I want to make sure that this is using the medium size, which is gonna be under a variable and then inside here, we do dash dash WP dash dash preset dash dash font dash size dash dash medium. And hopefully, if we refresh, you'll see that we, this is now changed and we have all those variables under our disposal in order to use throughout the layout. The click on body, you should be able to find them around, around here. So here they are, we have the small, the medium which we're using for our body, we have the large, extra large and so on. And as you can see, the extra large is the only one that doesn't have the clamp on in here, which we put as fluid to force like so. Now we can do something similar for the headings. If you don't like the way the headings look like, we can actually change them as well. So if you go to, if you click on settings, let's go to styles and let's go to elements and let's click on the headings that we created earlier. Here it is. And inside the elements is where we can put a comma and we can target every single element in here. So for example, I want to target the H1 here. And for this, I'm going to put topography and inside topography, we have a lot of options as you can see, but the only one I'm going to change today is the font size. And I've already calculated the clamp for this one, which I showed you how to do this earlier from and what I can do inside here is literally use the clamp property and send the font like so. They are a little bit long, as you can see. You can post the video and copy if you wish. And then for the next thing that I'm going to do, let's put a comma and let's put line height to be 1.2 for this one. The same needs to be done for the rest. So what I can do is copy this and instead of H1 or I need a comma as well, we need to do this to the same for the rest. I'm going to do H2 and I'm just going to change the clamp size and potentially the line height. I'm going to copy and paste this one here. Feel free to copy this. Of course, feel free to change the line height. I actually didn't calculate the highlight, so I'm going to leave as it is and I'm going to continue doing exactly the same thing. So H3, I'm going to copy my calculations super quickly and then I'm going to do a few more. H4, H5 and the last one is going to be H6. And that's it. So now if I save this and if I go back, you should see that the headings are going to change. Yep, they changed. And also if I go to inspect and let's scale the website down just so we can see how they work. As you can see, they are shrinking down, so they are responsive. Literally hard to see, but yeah, they are shrinking down, they are responsive, which is good. That's pretty much the topography sorted. Let's have a look at some of the links and maybe the buttons. So for the links, let's create one inside here. Maybe we can just do, this is a link. I can just grab it and just put a dummy link in here, like so, open a new tab, whatever, and save. Okay. If we refresh, you will see that we are getting the default blue link in here. And let's have a look at how we can start it. So the links are going to go in styles, elements and then we can literally just at the bottom of or H6 maybe around here is where we can create, is where we can create another element. So common, and then we can put link. So for the link, we have a lot of options in here as you can see. And let's start with the most important one, which is the color. So for the color, we have a couple of options, background, gradient and text. For the text, what I'm gonna do is use one of our color variable names that we created earlier. For example, I can use the contrast one. So what I'm gonna do is a variable. And then inside here, I'm gonna dash dash preset, dash dash color, dash dash contrast. Save this, close it, save this. Let's go back, restart. And as you can see, this is now turning to black. And we can do exactly the same thing for the rest of the options. So for example, if I do comma, and then if I do, let's say hover, inside the hover, we can do typography. And I can do, for example, text decoration. For the text decoration, maybe we just save them. This will remove underline. And as a default, as you can see, when you hover over, it removes it. And we can do a few more. So if we do comma, and then if we do focus, inside here, we can do the topography one more time. Let me move a little bit. And then we can do text decoration to none. Let's have a look at a few more. So let's do a comma here, and let's do active. For the active, we can put the color to be text. And we can put exactly the same variable name in here. I'm gonna copy this, paste it. And that should work quite well. But also I'm gonna set the topography in here to have text decoration of none. Like so. And the last thing that I'm gonna do inside link here, I'm gonna put another comma, and I'm gonna select topography. And I'm gonna put topography, text decoration to be set to underline. So all links are underlined. If I save this, and if you go back, we should be able to see. I mean, I haven't clicked on this link. So that's why we should be able to see the differences and so on. So this is pretty much how you style the links. And now let's move on into the button. So if you go back again to the team.json, and we need to be inside elements in here, if you go to style elements, and if we click on the starting point, then we can find the endpoint in here. And inside there, I'm gonna do a comma, and we can do a button. So for the button, it's pretty much exactly the same as what we've done, but I'm gonna do some other options. So for example, can do spacing. This is essentially the button of the button. And for the spacing, you can control the block cap, the margin, or the padding. So what I'm gonna do, I'm gonna control the padding here. And I want to say the top of my button to be 0.7 M comma. And I want the right to be 1.6 M. I want the bottom to be 0.7 M, just like the top. So they're consistent. And I want the left to be 1.6 M, like so. If we save this and go back, you should see, well, I'm not sure if you'll be able to see the difference now, but there should be a little bit of a difference now. And let's do a little bit more. So instead of spacing just outside it, let's change the topography. So I'm gonna change the font size in here. And for the font size, I'm gonna do variable. And then this is gonna be WP reset, reset font size, and then dash dash regular. And we can also change the line height in here for the button by actually having prepared one. So I'm gonna leave it as it is and save. So essentially, if I refresh everything is looking normal, then let's do a few more options. Okay, and before we continue, I've noticed that I missed dash dash here and dash dash in here. Okay, that should fix the button. All right, this is looking good. So now let's change the color of the button to do this. On the topography, I can do comma, and then we can do color. Inside here, we can do background. And for the background, we can do variable, dash dash WP dash dash preset dash dash color, dash dash secondary. And then close this, copy the variable. And then let's do another line, text. And inside here, we can do the variable. And instead of secondary, we can do contrast. Like so, safe. Let's have a look how this looks. And as you can see, this is looking pretty good. Maybe there needs to be a little bit more contrast, but that's absolutely fine. The other thing that I wanted to show you is that what's on the page here should be reflected in the editor as well. So if I refresh, you should see that the button is also green as default, which is great. Now let's change some of the behaviors of the button. Let's do a comma, and let's do hover, for example. So for the hover, I'm gonna change the color one more time. And in fact, I'm gonna copy this and just change in here. So what's wrong with this? Oh. So for the hover, we can change the color as well. And inside here is, I'm gonna copy this and just change the colors from secondary, maybe we can do secondary hover. And the contrast can stay the same. So now if I refresh, oops, if I refresh this page, and if I hover over, you will see that we're getting a hover effect. And we can do exactly the same thing with the focus. So under hover, I can do focus and for the focus, we can do color. To be completely honest with you, I'm just gonna copy this in here, but of course, feel free, change it. We can do the same thing with visited. I'm gonna change that as well. Instead of focus, visit it, and I'm gonna leave it as the others here. So that should be done. Let's refresh, and we should be good to go. So that's pretty much all button. The last thing that I wanted to show you is that if you wish to change the border radius of the button, what you can do is put a comma and you can do border. And inside here, you can do the radius. So the radius we do is put a value. For example, I can just put zero and now we should have a square button, which is awesome. Right now, let's have a look at how we can set custom variables. If we jump back to the team.json file, and if we go to settings, I'm pretty much anywhere inside settings. Let me see where they are. They finish here. So pretty much anywhere inside settings, I can do comma and a little line. And inside here, we have custom. If you select custom, inside here, we can create custom variables. Let's say that we wanted to create a custom variable for rounded corners, rounded dash corners, for example. And then inside here, I can just put, let's say, one RAM. And now this is gonna be created on our website. If I do right click inspect, and if I go to body, and if I search for rounded, it should be, here we go. Here is, it should be here at the bottom. And you might be wondering, well, we've already done quite a few variables. Why are you showing me this? And the reason I'm showing you this is because you might want to have a global rounded corners throughout your website. And instead of kind of like, let's go to the button, for example, here where we created it, where we have the radius. For example, instead of doing the numbers manually throughout the whole layout, maybe you want to be consistent and do variable. And then you put the corners in here. And then I would use this variable throughout the entire JSON file. And then I'll have a single place of where I can control the border radius. And if I refresh the page one more time, you'll see that the button will change now, which is great. I'm actually going to leave the buttons like this. And the next thing that I want to look into is the block gap and the padding of our website. As you can see at the moment, the content is right to the edge of our website. If I was to scale this down, or mobile again is right to the edge. But I don't actually want that. I want as default to have a little bit of space at least on mobile, just so the content is not right to the edge. If we jump back to the theme.json file and if you go to styles, maybe even here at the top, we can do that. And let's put spacing. So here it is, spacing. And there are a couple of options. For example, you can have, you can control the gap between the actual blocks. And for example, let's put this as 30 pixels. I'm not sure if you're going to see the difference now, but yeah. So you see, there is a gap of 30 pixels between the blocks. Now, if I put that to zero, let's have a look. As default, there is no gap between the blocks. And this is exactly what I want in this case. So I'm going to leave it at zero. And then the next thing that I'm going to do is set the padding. So I'm going to click padding and then I want to start from top. The top padding I'm going to put to zero. Then the right is going to be one rem. The bottom is going to be zero. And then left is going to be one rem as well. So what that's going to do is going to push the layout here on the left side and the right side. And now we have a little bit of a gap, which is great. Of course, we have the padding on the left and the right side here, but I still want my website to be full screen. And this is a little bit of a problem as you can see. What we can do is if we go at the top where we have the settings, we can add one more setting in here would use root padding aware alignment. And if we set this to true, this should solve the problem for us. We go back and if we refresh, you will see that this solves the problem for us inside here. And we should still have, and if I inspect super quickly, we should still have the padding here, as you can see, which is great. Now, the reason that the heading one heading two, all the content in here doesn't have it is because we need to put them in a group. So for example, let's say, let's see if we can quickly track all of them. I'm not sure that's possible. Okay. It is, which is, yep. I can select all of them with shift. And then hopefully I can drag them in. And now by update, we should be able to have a little bit of space on the left side here. Yep, we do. And this is the space that we've put. So we have, I believe, is this here, the global padding left and right. And in fact, let's quickly change it to see the difference. So we have, it was under styles, spacing. Let's say that we want this to be four M and four M, something a little bit more, something a little bit bigger, just so we can see a difference. So refresh. And as you can see, we have much, much more space between the content and the edges, which is great. That's fixed. I'm going to go to back, back to one rem and save this refresh and we're good to go. The last thing I want to show you is this detail view here. And this can be quite helpful when you're creating your pages for the SEO. So if you're familiar with the HTML5 Outliner, this is pretty much the same thing. It helps you out with the document outline. And it gives you a lot of details, such as how many words you have, characters, time to read, blocks, paragraphs, headings. And of course, most importantly, how your document is outlined, which can be helpful for SEO and also accessibility as well. Save this page and let's jump back to the website. Okay, let's start creating the first part of our website, which is going to be the header. Navigate to edit site. And a couple of ways of doing this, you can do it through the team.json as well, to register one. But if you click on the logo here, and then if you jump to template part, from here, we can create a new part. So add new, and then we can say header. And then let's just give it a title of header. Create. And that's gonna be our header here. I'm just gonna do a little text saying header and save this. So this is gonna be our header that is gonna be reused for the entire website. And if I wanted to add this header to the page template, what I can do is go to edit site and then I can click on here, template, click on page. And then I can insert the header from here. So if we search for header, we, you should get this icon in here. And then you just click on it and choose, choose and then insert the header that we just created. It will look a lot better when we add some colors and the menu and so on. So click on this, make sure that it goes at the top, save it. And now if I go back to the page, you will see that we're getting the header here. And if I go back to the demo page that we created earlier, we have the header as well, which is great. Now let's focus on making the header look good. I'm gonna go to the homepage and then let's go to the editor of the header. So as long as we have header selected here, we can start. I'm gonna wrap everything in a group. So I'm gonna delete this text and do slash and then group, which is essentially a container. For this container, I'm gonna leave it as it is. And inside this container, I'm gonna create another one. So another container, and this container is gonna have a background color of this secondary color here, like so. And I'm gonna add a paragraph that says extra presenter of or plant with code extra 20. And then I'm gonna centerline this like so and change the text color from here to the contrast color that I created earlier. Let's save this super quickly. Let's view it. And as you can see, we are getting the header here, but it's not full width. So I definitely want this to be full width. In order to do this, we can click on the group and toggle the inner blocks is container width, like so and save. The next thing that I'm gonna do is let's create another group. And then this group is gonna be outside this group. Actually, this is gonna be hard. Here we go. And sometimes it's very, very, well, it's pretty much impossible to move this group at the bottom because it's gonna move inside this group. As you can see, I've tried pretty much everything. It doesn't work. So what you can do is move it here at the top and then click on the down button and that will move free. Hopefully these things will be fixed at some point as of now, that's the way it's gonna be. And one other thing that I forgot to do on this one here, I'm gonna click on here and change the font size to small just to make it look a little bit better. This group, I'm gonna click on the dark green color and inside this group, I'm gonna create a row. And the row is essentially going to help us with the justification. We can justify to the left, middle, center or space between, which is what we're gonna be using. So inside here, let's add the logo. I also want to add search. So I'm gonna click on the plus sign here. But I want to add the WooCommerce search from here, the purple one. Let's click on that. That's gonna add the search. And the last thing that I'm gonna do is add one more WooCommerce item, which is gonna be the card. Mini card is what I'm gonna use for this project. And that's it. So if we click on the row now, we can justify to the middle, top, bottom and then we can say justify item center or we can justify space between which is exactly what I want to push the logo on the left, search in the middle and cut on the right. Okay, let's update the logo. Click on this arrow here and then let's just track the logo. I've got it as SVG. And as you can see, we can't actually use SVGs and in order to fix this, what we can do is go to plugins super quickly. So dashboard and then plugins. And then if you go to add new, search for SVG support. And then the one that you can use too is this SVG support plugin and that should allow us to upload SVGs to a website activator. And then let's close this. We will need to refresh this page because it won't work straight away. So make sure you save it first, refresh. And now if we click on the logo one more time, let's upload it. Here it is. And then I can just remember that the size is 190. Then if click on it, let's change the image width to 190 and we should be good to go. Logo is done. Let's focus on the search. If we click on the actual search bar, you'll see that it does have a couple of options which is pretty cool. So one of them is toggle search label. I'm gonna untoggle it. The other one is to remove the button. So button inside button, no button is what I want. And that's pretty much it. The other thing that I'm gonna change is the border radius. I'm just gonna put that to the top, 100 pixels and that would make it look a little bit nicer. As you can see, we have no other control. This unfortunately like height is what I would like to change. So what I'm gonna do is let's save this. Let's go to the home page. We'll need to add a little bit of padding to the actual heading, but that's absolutely fine. So what I'm gonna do is I'm gonna inspect the search bar here and let me show you. So what I'm looking for is the input and I'm looking for a unique class name that is gonna be good to use for this search bar without breaking anything else. This one looks good to me, the WP block dash search underscore underscore input. So I'm gonna copy this and I'm gonna jump into the editor openstyle.css and inside here is where we're gonna do a class name which it means input dot and then WP dash block dash search and underscore underscore input. And inside here is where I'm gonna change the height since we can't do it from the editor to something like 40 pixels. And I'm gonna do padding the left of 20 pixels just so we can move the text a little bit. So now you will see if I do control, shift an hour or just refresh the page, you'll see that this is a little bit bigger now and we have a little bit of space on the left which makes it a little bit better. The other thing that I'm gonna modify is the padding here. So I'm gonna click on the unlink and then let's change the top to somewhere around five. Let's change the bottom around five and we should be good for the left and right. Let's leave as default and I should make it look a little bit better. Let's focus now on the card here. I'm pretty much just gonna change the text color to the contrast color like so. And as you can see, you have different behaviors like here, open card drawer or do nothing. We'll see about this later on, maybe I can modify it but we also can hide the price if you wish to and this should be looking a little bit better now. A problem that we're gonna have straight away is if you go to mobile, you'll see that this isn't working very well and we don't have much control unfortunately. If we do columns, that will work but if we do columns, we'll have the logo which we might not be able to center. We'll have the search and then we'll have the card at the bottom which is not exactly what I want. I would rather have the logo on the left, the card on the right and the search here big in the middle. So unfortunately, there is not much we can do here. What we can do is click on the row and then allow to wrap multiple lines and that will kind of fix it as you can see. I mean, if that works for you, yeah, go ahead and leave as it is, maybe make a little bit of fighting between them and that might just work for you but I don't personally like it so I'm gonna show you how we can modify it with CSS. Hopefully the editor will improve and we'll be able to do all this inside here but for now, there is not much we can do and this is the only big CSS that we're gonna be doing but it's not gonna be too much anyway. All right, in order to make this look good on desktop and mobile, we're gonna have to do a little bit of CSS. All right, what I'm gonna do is on the row here, I'm gonna put a custom class called custom-header then for the logo, I'm gonna click on it and do the same custom-header but this time I'm gonna put underscore underscore logo and then I'm gonna do similar to search, click on the search here, additional class name, custom-header underscore underscore search and then I'm gonna do the same thing for the card, custom-header underscore underscore any card, like so. Let's save this, let's go back to start.css. I've put a little comment in here, custom-header-stouse and these are class names so we start with dot like so, custom-header and that's our first one. So we're gonna have a few more obviously, we have the custom-header underscore underscore logo, we have the custom-header underscore underscore search and we have the last one, which is custom-header underscore underscore card like so. I want to convert this into grid and in order to do this, we go under the one that is wrapping all of the elements and we do display grid and we have to unfortunately put this as important in order to override the flexbox that is already set up from the editor. We're gonna do grid template columns and I'm gonna create one FR for the logo on the left side so one fraction of the screen, two FR for the search bar so it's a little bit bigger and one FR for the card. Technically speaking, if I go back and if I refresh here, you should see that everything is working as it should. That needs to be aligned to the right side but that's not a problem, we can do that. As you can see, the search bar is looking a lot bigger and if you don't like how big it is, you can always change this to the size that you want, let's say one FR and that will change it. In fact, that looks a lot better. So I'm gonna leave as it is now. What we can do now is when we go on mobile, we're still not solving the issue so it's actually breaking now, it's not looking good. So what I can do, give each element an area name so we can control it easier. So this is gonna work like this. Grid template areas and inside here, we can literally do the areas kind of like rows and columns. So imagine these are columns and what we can do for the logo, we can give it a specific name, so grid area and this can be called LIGO. This one is gonna be grid area and this is gonna be search. I don't need to remove the four spaces but that's fine for now and then grid area, this is gonna be cut. And now grid will know which section is which. So what I can do is on mobile, we want to change this to one fraction and one fraction because we want two columns actually. So this is gonna go logo, cut and then on the second row, we're gonna have search and search taking two columns. So we have two rows with two columns and look at what's gonna happen now. So we have this on the left side, this on the right side and we have the search. For mobile, that's pretty much what we want. As you can see, of course I'm gonna have to align this but that's not a big issue. In fact, I can probably go here, click on it. Can I align it? That's okay. We can align it from here. So cut, we can do display flex and we can just do justify content to the right and I should fix the first issue. Oops. As you can see that fixes the first issue. Of course we can do it a little of a gap between all the elements. So I can do gap and maybe 0.4 REM. Let's see if this works. I'm gonna refresh and I think we already have gap from the editor. So if this doesn't work, try important. Have a look. Yeah, that's starting to work. So maybe even one REM and that's a lot better. Cool. Now for the desktop, we need to do something similar. So what we can do is let's put a media query inside here. Media, we can do only screen and then we can do and and inside here we do minimum with needs to be 600 pixels. And then inside here, we grab the custom header and we just need to modify a little bit. So this is gonna go instead of, we already have grid on it so we don't need it. It flows downwards and then we have grid columns. We can do one effort, one effort, one effort. We can put the search inside here in the middle and close this pretty much. And maybe we'll see if we need to control the gap in a second. So if I was to refresh now and we need to fix this by the way, we need to remove, we need to put some space in between here. Just so this works and let's refresh now. Okay. As you can see, this is working on desktop. We have the search here. And if we go down to mobile, like so, we're getting the mobile view a lot better and that's pretty much it. Now the next bit we're gonna look into is the navigation. Inside the header editor, let's go to the list view and let's go inside the group. In fact, we just need to create another group inside here. So that needs to be outside one more time. So and just down one more time. I'm gonna put this as background. Wanna change this to a darker background which I don't have here yet. So what I'm gonna do is add a base color super quickly. I'm gonna go to the team.json. Sorry about that. And then inside here, settings color, I'm gonna add one more color just so I have a darker color to use. And this is gonna be called base with one three, one three, one three. Save this. Let's reload. And now if I click on this group here, then we can add the dark background color. Awesome. Let's add the navigation now. I'm gonna click on the plus sign here and search for nav navigation, this one here. And then what I want to do is centerline this, justify lines, justify items center, like so it's hard to see, but we can fix this in a second. As you can see, there are some elements in here and we can actually click on them and remove them if you want to. One thing that we can do is click here, click on the edit and this will convert everything into links, which is absolutely fine. So now we have a little bit more control with them. And I know it's hard to see, but I'll fix them in a second. Let's save this and let's see how we can modify the navigation. If you go back to the teams.json file and search for styles. So instead of settings, let's go to styles and at the bottom of styles, let's say around here, inside styles, we can do blocks and now we can modify different blocks such as the navigation. This is gonna be called navigation. Let's go for that. And for the navigation, we need to do color and then for the color, we can just set the text to be the contrast color here. I can copy this variable. So we quickly paste there, save it and refresh. And you can see that we are now having the navigation with the white color. Let's have a look at some other options. So for example, spacing, block gap, I'm gonna put as one REM, see how this looks like and what else did we have? Let's have a look at what else did we have super quickly and then maybe you can do a little bit of padding in margin maybe. So padding to the top of 0.2 REM. Let's have a look at this because I'm not so sure. But as you can see, this is already looking a little bit better. I think if I give it a little bit more padding to the top and maybe the bottom, we won't have to adjust the actual container. So let's do bottom and the buttons are gonna be easier to press as well. So 0.4 REM in here as well. I did it a little bit different earlier. So that's why I'm kind of guessing here but that's already looking pretty good. And now if we go to mobile, as you can see we're getting this toggle button here and that's not so bad. So let me show you the rest of the settings super quickly. If we go in here, I do need to refresh so we can get the latest and let it load. Here we go. And inside here is where you can basically, let's say remove some of the links. And inside here, when you click and when you click on the navigation, by the way, inside here is where you can control pretty much all of it. So the action menu you can control from here, it's already created a one for us called navigation and you can create a new one from here as well. So if you do that, let's create a new one. And maybe it's called a navigation too. And all we have to do is click on the ad block here and then you can just type, let's say we want the home. Here we go. And then just like so, you can duplicate this as well and just add some more links. So what I'm gonna do super quickly is I'm gonna save this and add a few more pages. And I'm gonna do that in the dashboard pages and I'm gonna speed up the process for this. So I just want a few pages for example, let's say all products, save this. And I'm gonna add, okay. Now that we have those pages, I can go back to the editor here, refresh. And now we should be able to get the other links. Okay. And if I click on the navigation here, if you can't see it, you can just click on here navigation. And then if you click manage menus, we do need to leave. But inside here, you'll see the menus that we have and you click on one. I mean, you can't really control much in here, but this is how you can create different navigation. So I'm gonna actually remove the navigation too because we don't need it. I'm gonna go back and refresh. Let's go back. And now we just need to select the menu that we have. So navigation. And let's modify this super quickly. So I'm gonna remove pretty much everything. So let's remove this. Let's remove this, remove, remove and let's remove the demo. And now I'm gonna add some custom ones from here from the play sign. And I'm gonna save all products. Let's add a few more new products. And I'm gonna add the last one, special office. Like so, and that's gonna be it. So if I save this, that's looking good. The last thing that I wanted to show you is that you can control the display here. So for example, you might want to have an icon for mobile when we get to mobile super quickly. You might want to have an icon like this or you can have the option of three. I do like the two. Then there are a couple of other options here overlay menu, mobile, always. You can change the text, the background, the submenu and overlay text, submenu and overlay background. And you can adjust the spacing and dimensions from here pretty much. You can also go to advanced and then add custom classes if you need to. But that's not too bad. And I think that's pretty much all header done. Now one thing that I do need to mention is that because we used grid here and the actual full site editing doesn't understand it, you will see that this isn't working in the editor, but it is working inside here. And it's not a big deal, but it is a little bit annoying that it doesn't reflect the exact same changes. We'll have to wait for updates again. We almost done with this. But one thing that you might notice is that we don't actually know which page we are on. If I go to the full products page, you'll see that it's not actually highlighting this. And to be completely honest, I tried quite a few things and I couldn't figure it out. So for example, if I go to the navigation block and under spacing here, what I could do is potentially I can target the elements, right? And then I can target the link maybe. And inside the link, I can target the active focus. Let's do active. And then for the active, I can target the color. And then for the color, I can target the text and put it as red for example. I have a refresh now. And if I click right, you will see that this changes. But one thing that I didn't see anywhere is that there is no current item inside here. So the only way I can do it for now is if you go here and if you inspect the elements, what you can do is grab the, let's see where we are, are we on all products? So we need to focus on all products here. As you can see, it has this specific class name called current menu item. And then we can select the A with CSS, the link. Copy this, go back to the CSS. Let me know if there is a way of doing this by the way with the team.json. I'm just not aware of one. And then inside here, what I'm gonna do is current-menu-item. We're gonna target the link. And inside here, we can pretty much do whatever we like. So I'm just gonna do the font weight of 800 and be lazy. So let's put a little comment and that's it. I'm gonna save refresh now. And as you can see, now we know which page we are on. Of course, you can do on the line or whatever you prefer. And if I click on, sorry, home, you will see that we are home. New products, we are on new products and so on. We just don't have any content on the other pages yet. And that's it. I also like to have a little bit more space between them, but these are things that I can always adjust, I guess. So that looks a little bit better. And now we're pretty much done with the heading. Let's focus on the photo. So for the photo, we're gonna have to do exactly the same thing. Let's go to the menu here. Let's click on template parts, create new, add new, sorry. And then put them and we just call this one photo, like so, create it and we should be good to go. So inside here, what I'm gonna do is create a container. So group and then this group is gonna have a background color or this base background color. And then inside here, I reckon just two columns. So we don't have to mess around with CSS. And this seems to be a little buggy here, but I'm gonna do this one here. Which is kind of like equal columns, 50, 50, 50%, 50%. And then inside this one, the first column here, I'm gonna create another column, like so, and I'm gonna do the same, two columns. And then inside here, I'm gonna create a heading and this is gonna be called about. Gonna make it H4. Maybe let's make it white super quickly. And then I can duplicate this, move it to the next column here. And then I'm gonna change this to company and then that will be it. For this, we can use the navigation here. And I'll say that you can create a custom one if you wish to for the photo. But for now, just, just, but for now I'm gonna leave this as it is and I'm gonna change the orientation like so. And it's very hard to see, but hopefully if I save and refresh that will work. Let's have a look. Oh, it is a little bit buggy. Let's refresh. Okay. Yep. Okay, that's that fix it. So that's working a little bit better. But as you can see, we're getting a little bit problem with the gap here. So potentially I can just do that manually from the dimensions and that will fix the problem. Let me duplicate this one more time and I'm gonna put it in the company. And of course, feel free to create different menus for your different sections, but I'm just trying to speed up the process here. For the company, I'm gonna copy this one more time and move it to the right column here. And I'm gonna say newsletter. Let me copy a little bit of text like so. And I need to turn this text to white. And then inside here, I would add custom HTML. If you use MailChimp, you can go to MailChimp, Login, Create an account. And then from MailChimp, that can give you the form code and you can just paste it in here and that should work. But the speed of the process I'm not gonna put the MailChimp in here and you might use a different company as well. And the last thing that I'm gonna do is put some social media icons, so social icons from here. And you can pretty much select whatever you like. Let's say logos only and I can click here. It's kind of hard to see, but I can click here and let's say Facebook. I can click on it and let's have a look. If I click on the Facebook, we can put the URL and that will make it active now. And I can do exactly the same with the other icons. Let's say Twitter is another one that we might add the link like so. And also you can change the icons to bill shape. You can give them a little bit of spacing between. And so on top of it, maybe show labels. That looks pretty cool. I'll leave it as this and say, the last thing that I'm gonna do is on the whole group here, I'm gonna give it a little bit of padding from say top, maybe five and let's say bottom five. And I'm gonna create one more row maybe inside this group or column. Yeah, row I think will be good. So I can click on this and say row. Let's create a row. And inside this row, let's create a paragraph. And this paragraph is gonna say copyright. I'm gonna move it in the middle if I can. I can click on the row here, move in the middle and just make sure that the text is set to white. So this is gonna say copyright, one plant build with care, something like this. And then maybe we can just change the padding a little bit. So the padding at the top can be something like this and maybe a little bit to the bottom. Okay, we actually created the first one, but we haven't inserted it into our page template. So what I'm gonna do is edit site, go to the WordPress logo here, then templates and page. And then inside the page after the content of the page, we can do photo. And then WooCommerce comes up with some great suggestions as well here. But what I want is the photo that we created. So photo, choose existing one, choose. And then here it is, it pops out. Maybe we do need a little bit of padding to the top, sorry, margin to the top. Let's save this and let's have a look. So if I go back, that's already looking good. Of course, we'll normally have a lot more content. And MailChimp is, this is where the MailChimp code is gonna go. I'll see how long is the video. Maybe I can grab the code from MailChimp and paste it in here super quickly. One last thing that I'm gonna do for the photo is grab the whole container here and give it a little bit of margin at the top. So select margin from dimensions and then de-link the margins and then do top this, I will do. And we get to go. Okay, we're done. Let's start constructing our homepage. So navigate to your homepage and then click edit page here. To start with, I'm gonna remove everything that we don't need and then I'm gonna create a new group. This group is going to contain a cover. A cover is pretty much a big block where you can add an image to it. Let's open the media library and let's just drag an image here. Of course, optimize images, put all text and order selected. And now, as you can see, we have a nice cover. For this group, we're gonna unclick the layout here. So because I want it to be full width for the title, let's make something up by plant now. And then I can convert this into an H1 from here. So H1 and then this can be text white. I don't think that... I wasn't... I don't think that you can control the text of the actual block inside the theme.json, but correct me if I'm wrong. And then for the text, I'm gonna create a paragraph and let's turn this into white as well. And this is gonna be center lines like so. And if you want this to be on two lines without actually making two paragraphs, you can press enter. This is gonna look ugly and he's gonna make two paragraphs, as you can see. But what you can do is hold shift and enter. And this will just put this text on another line, which is a little hack that you can use. And as you can see, we only have one paragraph. The next thing that I'm gonna do is add a button. So let's say button, add one there, make sure that is justified to the center. It's all center aligned. And this is gonna say buy by plants now. If we click on the actual cover, you will see that we have a lot of options. For example, you can have a repeated background. You can have a fixed background, which kind of like scrolls down. It creates kind of like a parallax effect in a way. And then you can control where the image is seen. So maybe I just want a little bit of that part to be seen more. You can have the old text in here. And one thing that is important is the overlay. So you can actually add an overlay from here. I can add this color and I can make it bright or dark, depending on what's readable. In this case, nothing is readable. So maybe we need the darker one. Like I say, I don't really like the darker one. But yeah, these are things that you can adjust. Let's go with the black one, 50% opacity and save. So if you go to the homepage now, you'll see that we're getting this beautiful cover. That's it. I think this looks a little bit smaller than I like. Let's have a look. It's H1. Maybe I can just do it as an Excel. And that would be much, much better. Okay, perfect. The next section that I'm gonna do is gonna be the popular product. Open the list view and I'm gonna create another group. So let's create another group. If I can, yep, I can't. So let's click here, group. And now, okay, that created it just after, which is correct. I want the group to be below. No, I want this group to be outside. They always do that. So I need to move this to the top. If I can, then I need to move it down. And one thing that I noticed is that if you wish to change your background color, by the way, it's fairly simple. You go to the teams.json. We find styles. We click on them and inside here, anywhere, pretty much anywhere inside styles, we can do color. And from here, you can target your colors. For example, we need to do the background. So I'm gonna do a variable. And this is gonna be dash, dash, WP, dash, dash preset, dash, dash color, dash, dash background. And this is the background color that I created earlier in this tutorial here at the top. Here it is. And I can do the same for the base just in case because I didn't do that earlier. So let's close this and let's do the text. So the text, everyone on our website, I want it to be variable, dash, dash. In fact, let's copy all of this and put it as base, which is a dark color. So now, if I refresh, and now everything should work as normal, it's kind of hard to see. I'm hoping that it's working. But if I was to refresh this, maybe we'll see in here. Yeah, you can see the background color change. So that's working. Maybe the first is adding this white space. And that's why. Yeah, I think the first is adding white space and that's why it's happening. So I'm gonna have to come back to this later on and fix it. But not a big deal. So when we add a new section inside here, this section is gonna have an age one. So let's go to age one, put it in the middle. And this is gonna be popular products. Now, the reason I'm adding everything in sections, as I mentioned earlier, we do need to look into the document outline. And what you can do is if you go to a group, you can actually tell it what that group is. If you scroll down here at advanced, you can actually say, do you want this to be a div? Do you want this to be a section article and so on? So for example, this could be a section. And the same as this one here, this can be his own section. Now the details thing should work a little bit better. Also, the reason I'm adding them in sections, in groups, sorry, is because I can add custom padding at the top. So for example, I'm gonna unlink this and add a lot of padding on the top, maybe even seven and maybe seven for the bottom as well and leave it as this. The next part is to add a little bit of text, copy and paste a little bit of text and the same, I've used the trick where I press shift and enter and I put it on another line without creating an extra paragraph. Put this in the middle and that's gonna be looking good. One thing that I wish I had is a little bit of maybe bigger line height to the headings or a little bit of margin. But what we can do for now is go to dimensions, trigger margin on and then for example, unlink this and just put margin at the bottom like so and that should do the job. If I refresh, I should already look good. Maybe that's a little bit too much, but you get the point. You can always adjust it to your liking. Now the next thing that I'm gonna do is I'm actually gonna create another group inside this group. So let's go and do that. Group on inside this group is where I'm gonna be adding some of the walk home as blocks. So what we can do, let's have a look super quickly at what we have in our disposal. If you go to blocks and scroll down to the bottom, you'll see that we have a lot of choice. So for example, because we're doing popular products, I can choose best selling products in here and just drag this inside the container. If I can, maybe now. Yep, that's working. And again, I'm gonna give this paragraph here. I'm gonna give it a little bit of margin. So margin and then I'm gonna say margin at the bottom to be something like six. Now if you click on the best selling products from here, we can adjust them. For example, let's say I want four columns. We have four columns and maybe because I didn't add enough products in here, we're getting one left out on his own. Just put a demo. Maybe I can just remove this to one row and that will fix our problem. And this is already looking super nice. As you can see, we have a lot of options in here such as the product image. You can untoggle this. You can untoggle the product title, the product price, product rating and so on. Maybe product rating is the one that you don't want. Currently, they don't have any ratings. Otherwise, they will pop up in here. These are things that you can adjust. So update this and essentially the latest product is gonna be very, very similar to this. So I could potentially make a template to this or just duplicate. I'm gonna duplicate it. What I'm gonna do is put latest products instead, products. And instead of best selling products, let's have a look at what do we have, remove that. I'm gonna go to blocks, patterns. No, block, sorry, and scroll down to the bottom. And then they've called the newest product. So I'm gonna click on newest products. And then I hope that this is in the container. Let's have a look. So for quickly, we have group. No, it's not. Let's stream inside the group. Okay. Let's just make sure that this is in the group as well. And we're good to go. Okay, this is looking cool. Again, we're gonna have to adjust this the way we want. So I'm gonna say four columns, even five you might want. Maybe two small, four columns and one row will be absolutely fine. Then this is a pretty cool actually. This is a pretty cool option actually. It's gonna align all the buttons at the bottom. So it's gonna look a lot more uniformed. Maybe I can do this for this one as well. Let's do it. Between those two blocks, the popular and the latest, I wanna add a separator with the categories. So exactly the same way, I'm gonna create a new group and click on the group. Inside this group, let me just find it. Yeah, I need to get it. Nope. I need to click down, down. Yep, that's what I wanted. So let's change this group color, background color to be, and I think that we are, okay, it looked like a back dot, but if I click on this group here and click on the background and then let's select the dark green, we should have a nice separator in here. I'm thinking of creating two columns. Column here, this one is gonna be 33.66. So we're gonna split it this way. What I'm gonna do is add a block and the block is called featured category from WarCommerce, like so. And then from here, I can select the category that I want. Let's start with the first one. It doesn't really matter. And as you can see, we can modify it the way we want. Let's say like that. And I can do the same one in here, featured category like so. Select the second one and then here it is. I'm not sure how big to make them maybe a little bigger than this. One thing that it would be nice to have is the height, how big they are because I can't really see so I'm kind of having to guess. Between the columns, we can definitely add a little bit of block spacing. So let's have a look. Doesn't seem to be doing much, which is great. Let's have a look. No, it's working. So that's good. Maybe just needs to reload. So it is a little bit buggy, but if I click also on the group, let's give it a little bit of padding. So let's go and say this is a section and this section needs to have a little bit of padding on the top. Maybe seven, bottom seven and that should look a lot better. Okay. I'm not sure what's happening here, but we can fix that. So for the columns, I don't know where this back is. Let's refresh this just so we can see whether we can fix the problem. And what I'm thinking is that the background colors are not working. So if you click on one of them featured sections, you can repeat or you can click on the background to cover. And I'm going to do the same to this one here. And let's see whether I click on the column, block spacing, it doesn't seem to be doing much. Maybe it's just buggy. I believe that there is a bug in this. Because originally it did work on my original design. Let's change this to the lighter color to make it a little bit more vibrant. The other thing I was going to do is inside here, create a new column. This column is going to be a little bit different. I'm going to go with 50, 50. And then I'm going to say featured category in here. And then this is going to be the roses, for example. Done. We can cover this and make it a little bit smaller. Copy this, do another featured category in here. Then we can go for this one here, maybe. And just make it smaller. I'm having to guess here, but I should work. Yep, that needs to be set to cover. And that's probably just one pixel off. Yeah. That's actually, that actually ended up looking okay. It does need a little bit of adjustment, to be honest. Maybe the background color here, if you click on it. And if you go here for the color, maybe you can have a more vibrant course. You need to make sure that the text is readable. So let's have a look at this. Maybe not. Let me try one more time about the columns. Maybe let's have a look. If I click on the columns outside here. And if I say, of course, padding is going to work. But I don't want padding. I actually want the, I actually want the block spacing. So I'm going to try one more time. Oh, okay. This worked. So we have block spacing of four. And let's do the same for the other one. Maybe I wasn't selecting the right element. I'm going to select this one here. And then let's say block spacing. And then we can do four. To be honest with this, we could do a padding at the bottom. So what I'm going to do is unlink it and the button at the bottom of four. Okay. That's not so bad. And this should be all responsive. So if I go inspect, let me move this to the right side so you can see. And then if I go down, this is all responsive. So not so bad. So that's pretty much our homepage. As you can see, you can build pages super quickly. Now that I have everything set up, it's not so bad. If we were to add a product to the cart, you will see that this, that's the product here. And if I add one more, let's say this one here. And if I go up, you will see that we are adding the items in here. All right. And if I click on the basket here, as you can see, it comes, if I click on the basket now, you will see that we have a beautiful cart in here with all the items. We can remove them like so. We can go to the checkout, view my cart and so on. Which leads me to the next bit. Now, of course, there are gonna be little things that you're gonna have to fix. Let's go to a product super quickly and see how that looks. There will be things like this that will need to be fixed a little bit. For example, I mean, that doesn't look bad at all. But if you wish to work on this here and make and fix the space in at least what you can do is go to edit site, go to the WordPress logo, then templates and then find the WooCommerce. So I believe this is gonna be a single product here. Click on it. And now you can do whatever you like. For example, this is already in a group, which is awesome actually. And then on this group, we can give it a little bit of padding at the top, for example, five and let's say, bottom five. Save this. And just like this, a riff brush, you will see that we fixed a little bit. You'll have to explore all of the options. I didn't add any descriptions and that's why. And also if you edit a product and add the gallery, let's say I add a few images to this. I'm gonna select this to add them to the gallery update. Let's say we add a little bit of a description as well. Like so, update there. Let's go back to the product. And as you can see, we have this beautiful image that you can zoom in and have a look into. You can look into the other ones. I definitely didn't make them all the same, optimize them. That's pretty cool. The description is here as well. So as you can see, this is using the classic template, which renders the classes, walk-on-works, PHP, and there is no options for this one. But you're gonna have to have a look at the other, but you're gonna have to have a look at the other blocks and see what you can add, remove, and so on. The other thing that I was gonna do is to show you the search is also working. So if I was to search for rows, let's say, and you will see that it goes straight to red rows. And I believe this is because I don't, I only have one product and that's why it's opening straight away, which is pretty cool. Let's have a look at what else do we need. And let me show you the last thing that I'm gonna do is do one of those pages and they're all gonna be pretty much the same. So if I go to all products, here, if I edit the page, all I need to do is create a group. Just so everything is in the middle. And then inside this group is where I can add the blocks that I want. So this is gonna be, so if you go to blocks and then we can have a look at all products, click on this. And this is gonna add all of the products. Make sure that they're inside in the group so they're contained. And of course, you can do the columns again. Maybe you can have them bigger in here, smaller, whatever you wish. Rows, a line block to the bottom, like before, show sort, drop down latest. You can update this. And this will be a very basic page that we just done. So if I go back to all products, you'll see that we're getting a very basic page. Of course, I need to put the value on the top to make it look nice. Popularity, yep, that's all looking good. And you can do exactly the same thing for the new products, special offers and the pages that you need. So one more thing that I wanted to show you is that if you go to edit site and click on the WordPress logo, go to template parts, you can actually copy the code from your template in here. Let's say the header, click on this here, click on this here, copy the block. And now you can insert this block into your parts. Let's say you want header.html. And now you can paste the code inside here. And if you give this theme to somebody else, they will have the same header, as long as you, of course, give them the styles as well, because we did do some customizations to this one. And now if I was to go back to template parts, you should be able to use this header from here. Let's see whether it's all working, by the way. And yeah, that's all working. And one more thing that I wanted to show you is, for example, if you're giving this to clients, you might want to lock some of the sections. So if I edit page, and if I click on this section here, for example, what you can do is you can click on the three dots here, and you can lock it. So now you can choose to lock all, or you can choose to prevent removal and so on. So for example, if I lock it at all, as you can see now, you won't be able to actually delete it. I'm pressing delete now, and you won't be able to delete it, but the clients will be able to update this, which is awesome. So that's pretty cool. And of course we can unlock it from here and so on. And we can do the same for each block, by the way, you can click on it, and then you can lock it from here, and then you can choose what you want to lock and so on. And the last thing that I wanted to show you is how to quickly modify some of the work on my stuff before we finish. I'm only gonna do some quick style change here, and that's it. If you remember, early in this tutorial, I created a variable with rounded corners. So if I go to body, and then let's say branded, I can find a somewhere around here, but in this tutorial I created this, which can be modified from the actual theme.json file globally. And what you can do is in your stars.css, you can create a global style. So let's say rounded corners, and now you can do overflow hidden, just in case, and then you can do border radius, and we can use that variable. So var, and we put the variable in here. And now every time we put this class name to something, it's gonna get the global rounded corners. So what I mean by this is let me copy it, save this, and then if I go to the homepage, and let's say I wanted to modify them, I can click on one, go here, advanced, add the rounded corners. You won't be able to see them in the editor, unfortunately, save this. And go to the homepage refresh. And as you can see, they're not working. I have to do control shift and R, they're not working. And I can do the same thing for the images here. So what I'm gonna do is copy a class name, copy this comment, will comments, mod, and the class name for the thumbnails we can inspect from here. And we can see that we have the attachment will comments thumbnail, and then size will comments thumbnail. Might do the job, so I'm gonna copy this, paste it inside here. And because I wanna make it very specific, I can do dots between them. And inside here is where I can add the border radius and the overflow hidden. So save this, refresh. And as you can see, the border radius is working on everything globally. So if I was to go to the team.json file right now, super quickly and find the custom variables here and the settings custom. Now I can change this to four, something ridiculous and refresh. And you will see that everything is now changed. So this is how you can do that. Of course I'm gonna leave as one. And the last thing that I'm gonna show you super quickly is how you can create different styles. So for example, I'm not gonna do much in here, but for example, what I'm gonna do is copy this and create a new file inside styles. And I'm not sure what to call this, maybe a light green dot json. And inside here, I can paste pretty much everything and I can modify whatever I want. If I wanna change the fonts, I can change them if I wanna change the colors, I can change them. And what I'm gonna show you, and let's say that we wanted to modify the original colors, what I'm gonna do super quickly is just make up something. So this is gonna be, or this can be like that. And I don't know, I don't know what else to change. Maybe the line green can change as well to a darker green and so on. You get the point. So what I'm gonna do, I'm gonna copy this. This is a primary color and I'm gonna change it inside here. So we search for primary change inside here. Of course you can change everything if you wish and let's change this one as well. So this is the secondary one and see the secondary here. So save this. Okay, let's change the name as well. So this is gonna be light green and we save everything else as it is. And in fact, you can even make this one smaller for some reason if you wish to. Let's say we wanna make it a little bit smaller, like so why not? Save this and then let's go back. And now if you go to the site editor, you should be able to change the theme with one click. So here we have these icons of styles. If I click on it, then we can click browse styles. And now as you can see, we have two styles, the default one and the light green one. If I click on light green, you will see that everything is changing. I mean, obviously I didn't plan this so it might look a little bit odd, but if I save it and go back to the website, just so we can see what's going on, it might look a little bit ugly, but not so bad. So just like that, you can change everything. You can literally change the fonts if you wish and replace them with other fonts just so you have different styles but that's pretty much it. I hope that you liked this tutorial. If you found it useful, please consider subscribing to my channel. Like this video and leave a comment below. Tell me what you think of the full site editing. Thank you very much for watching and I'll see you in the next one.