 Today I will guide you 3D creation of a WordPress website utilizing the full-site editor and the plugin called Create Block Team. Join me as we build every section of the website from scratch. We will build the homepage, contact page, blog post page and a simple forum full page. Now it's important to note that this video is packed with ingenious hacks to help us achieve our goals. While everything functions flawlessly, it's essential to understand that there are certain limitations when it comes to customizing good and bad blocks and controlling responsive web design behavior. Hey welcome everybody and let's get started. For today's video I'm going to be using Laragon in order to get WordPress installed on my machine. Make sure that you start Apache and my SQL. From here right click and then go to Quickup and then WordPress. Give it a name FSC services and press OK. This should take a couple of seconds in order to get the latest WordPress downloaded and installed for me. We can now visit the website using this URL. As you can see we have the standard WordPress installation in here and I'm just going to do the default English United States. Then for the site name I'm going to call mine FSC services. Name is going to be admin password is going to be password as I'm developing locally and I'm not going to be publishing this website. That's absolutely fine. In this case I will confirm the week password and I will put my email. Cool. The last thing that we need to do inside here is install WordPress. All right. Now that we have WordPress installed, let's log in admin password and remember me. Perfect. From here, let's update absolutely everything starting from WordPress. So please update now think that's done. Then let's do the plugins, update all plugins. Then let's click updates again, scroll down, update all things and we should be good to go from here. The first thing I want to do is change some of the website settings. So let's go to settings, general and from here you can update your site title, tagline, email and so on. Let's go to reading and from here, because we're going to be developing a website instead of a blog, we need to change the home page to a static page. So click on this and then select your home page. When we installed WordPress, this created a sample page. So let's select that. This is located on the pages and now we just need to press save changes. For the permalinks from here, if you wish we can make them a little bit more friendly. So for example, let's just choose post name. Of course, this is up to you. You can put block before this or whatever, but I'm just going to keep it simple and in fact, let's just choose this and put it as block. We'll see whether this works later on. So that's going to be fine and then let's save changes. From here, let's add a few demo pages just so we have something to work with for our menu later on. So pages, we already have the sample page. So I'm going to change this to home, update, let's go back for some reason, we're getting a privacy policy page now as default. That's interesting. Let's add a couple of more pages. So I knew about this, I will change the URL to about the permalink and publish. Let's go back. Let's create a few more services, publish. Let's create a few more, how it works, publish, rates, publish and the last one is going to be contact, publish. Let's rephrase this and you can see all of the pages that we have in here. Let's do the same for post. So I'm going to go to post and from here, let's edit the hello world. Let's make a few demo one. So exploring the most common capatory trends, future the image, I will drag something from my assets here. Obviously make sure that you optimize your images and you put all texts. I'm going to set this as featured image update. Let's do two more blog posts, how to fix your sync for this. I'm going to drag another page. I'm going to drag another image, set to here. Let's add some Laura Ripson as well. I forgot to do that. So I'm going to go back and add a little bit of Laura Ripson. Now this one already had some and let's add one more. So Laura Ripson here, we'll put cheap plumbing services and let's add one more image. I don't have another image like that. So I'm going to say cheap painting, something like that. Let's refresh here and now that we have a couple of pages and we have a couple of posts. Go to plugins and let's install a plugin, which is going to allow me to upload SVG SVGs. And this is for my logo mainly. So add new SVG and the one that I'm going to install is going to be safe SVG. Install this one, activate the plugin. And now if I go to media, I should be able to drag all of my images for this tutorial including SVGs. So we'll make it easier later on. So I have my logo in here, it's kind of hard to see, but go through your images, make sure that you optimize them, add alternative text and so on. Now let's go back to plugins, click add new and look for create blockchain. This is the plugin that we want by WordPress.org. So let's install it. Also activated and this plugin is going to allow us to add fonts from Google or local font. It's going to allow us to create a team super quickly and also export it. If we go under parents, make sure that you have a full site editing team selected, such as the 2023. So you can get the editor because if you have a classic team selected, you might not get this option in here. Now that we have the create block team plugin installed, if you go under parents and then create block team from here, we can create a blank team. So click create blank team, give it a name. So FSE services, give it a short description, URL, author, ready, author, URL, screenshot, we can upload it's 1200 by 900 recommended. So I'm going to upload one and here it is. And then once you're done, select your team tags, add custom tags if you wish to. And once you're done, click generate. Here we go. Time has been created. Go to appearance and from here you will see all brand new team. Let's activate it. If we visit the website super quickly, I will hold control to go on a new tab. You will see that we have a brand new website. And by the way, I am zoomed in a little bit just so you can see when I'm inside the WordPress menu. So I'll be zooming in now from time to time. Let's go back and the appearance and then manage team font from here. We can either add Google fonts. So if we click this super quickly, you'll see that we can select many Google fonts from here. But for some reason, the one that I want it, which is also a Google font is not inside here. I'm not sure why, but the one that I want it is if you go to fonts.google.com and if you search for weeks, for example, this is the one that I want it. And what you can do is you can download the full font family from here. You will download a zip and then we can upload the font from here. So if I go back instead of adding a from Google, I'm going to be adding it locally at local font. There are a few extension supported as you can see. So let's choose my font and this is going to be in the assets static. And here is my font. So I have the boat, extra boat, medium, regular and same boat. I'm probably going to be using both medium and maybe regular. So let's go with both first of all. This gives it a font name and so on gives a font weight, which is pretty cool. And now I'm going to upload this font, drop done. Let's add another one. So potentially medium upload and the last one is going to be regular for me. Now, if you go here and manage fonts, you should be able to see your fonts and you can manage them from here. You can remove them if you wish and so on. All right, let's close this and let's have a look at the full site editing editor. Go to appearance, themes and from here you can click customize the number of ways of going to the customizer page, but this is one of them. So click customize, and this is going to open the full site editing. Now I am zoomed in a little bit. So things might look a little blurry from time to time and it's actually blurry anyway. Let's have a look. Yeah, it's a little blurry anyway, because they're probably using a zoom in CSS. I assume. Anyways, so from here, we can design all templates and template parts. Let's have a look at template. So if we click on this, templates are basically all out. As the full WordPress uses the index template. But if we click here on the plus sign, you will see that you can design a different template. So you can design a specific one from page that you can design some for single blog posts, pages, which is what we're going to be using. So as you can see, when you hover over, it gives you a little bit of text. Displace all static pages unless a custom template has been applied or dedicated template exists. Then we have archives, orders, categories, date, tag, taxonomy, search, four or four, single item post, and so on. And you can also create custom templates. Now let's go back super quickly and look at the template part. Template parts are essentially reusable parts. For example, on most websites, we tend to reuse or header and put on pretty much every page. And you can create stuff like, as you can see, a sidebar, header, footer, whatever, there are tons of reusable parts that you can create on your website. Today we'll mainly look into creating a header and a footer. Now that we understand this part, let's go back and let's click on templates. The first template that I'm going to create is going to be the page template. So click plus and then click page. For this one, we're going to choose all pages because I want my template to apply on all pages. And here we go. We have a very basic template. Sometimes if you refresh after this, let's have a look. It seems to add a lot of content. I don't know why it wasn't added as default. It doesn't really matter. So from here, let me quickly walk you through the menus and then we can start building. So from here, we can always go back to the template that we are editing, but let's go back. And, but then from the plus sign here, we can search for patterns, which are pre-made patterns such as here we go, some featured patterns, posts, as you can see, we have text patterns, gallery patterns, and so on. You get the point. Then we have blocks, which is what we're going to be using the most. And blocks are basically stuff like paragraphs, headings, lists, quotes, images, galleries, buttons, widgets, and so on. And on the media, we pretty much have the images that we uploaded earlier. And that's pretty much it. So from here, let's close this and let's have a look at the next one. So the list view. The list view is what we're going to be using quite a lot throughout this video. And this is essentially how your website is built. Now, normally, our website is built with sections, for example, a header section. We have a query loop in here and a photo. So these are three different sections. And inside them, we have different parts, different blocks, such as a group, row, spacer, inside the row, we have a logo, and so on. Now here on the right side is where we have the create block theme exporter, which we're going to be using later on. So we'll be able to export our team. And then you can pretty much reuse it on any website. Let's close this. And then we have the settings, which is what we're going to be using quite a lot. So from here, we have template settings and block settings. So we don't get anything in the block because I haven't selected one. But if I was to select the navigation block here, you'll see that suddenly we're getting a lot of options. So we're getting the list view here. Then we're getting settings, which is kind of like the layout display and so on. And then we're getting styles. So styles are basically your colors, topography, dimensions, and so on. That's more or less it. Now the last thing that I wanted to show you inside here is the styles. It's kind of like your branding, your topography, colors, and layout. So we're going to have to change all of that. And also there is a little hidden icon here, kind of hidden, which is our style book. So if I click on this, you will see, if I close this photography, you will see a lot of the elements that we could use on our website. For example, headings, paragraphs, lists, quotes, code, pre-formatted code, pull quotes, table, and so on. Inside here, we have media stuff like images, galleries, audio covers. And we have the buttons, columns, groups, and so on. There is quite a bit. And we have widgets, team settings, and so on. So we're going to be pretty much starting from here and develop our website. If you go back to everything, don't select anything on the screen. Let's start by building or branding. The first thing that we look at is the topography. If we click on this, as you can see, we have a couple of elements. The text element is the first one that we can look at. And from here, we can change the topography. Now as you can see, the current font is the default one. I'm not sure what it is from here. We can change it. Instead of using the system font, I'm going to be using the Wix font that we downloaded earlier. And as you can see, it already changes. From here, you can always change the size of the font if you wish. The appearance, which is basically thin, light, regular, and so on. Now we have links. I'm going to do the same for links. I'm going to change it to this one here. Everything else looks good. You could remove the underlying from here, as you can see. But I don't really mind the underlying links. I'm going to leave that. Then we have the headings. For the headings, you have pretty much two options. You can either change the font from here for all of them. So maybe medium. And if you go to text, you should see, did I not add both? Hmm, okay. Maybe I didn't add the both, which is a little bit strange. But okay, we'll go for medium in this case. For the headings, you can change the font from here. You can make the letters capitalized if you wish. Smaller and so on. I'm going to leave it as default. And also you can look into each individual heading individually if you wish to. And you can change stuff like the line height and so on. If you go back, and if you look at the buttons, from here, if we go to media, now design. From here, let's change the button to be the wix, display font, and let's change from pixels to RAM. So maybe I can put as 0.9. All right, make sure that you save your changes. And let's go back. Let's go back. And now let's look into the colors. From here, we have a palette. On the palette, we have a couple of default colors here and couple of default gradients, which is pretty cool. Now I want to add custom colors for this theme. So if we go here on the customs, click on the plus sign, and then you can select the colors that you want. So first of all, I'm going to be adding a yellow color, which I'm going to call. I don't know if this needs to be unique, whether this is already taken, if you know what I'm saying. So potentially, so what I'm going to do just in case is FSC and then yellow. You can call it whatever you like. Let's add another one. This is going to be almost black. So just outside here, and I'm going to call it FSC, black, one more. And this is going to be a very creamy color, as you can see here. And then this is going to be called FSC cream. Okay, save this. Let's go back. And from here, we can change some of the colors globally. So for example, the background color is what I want to change. I can change it. And as you can see, it makes a change straight away. And so I'm going to leave it as this one here. Let's go back. Text, I'm actually going to leave it as black. I'm going to leave it to this one here. Instead, let's go back. And then we have the links, select them as FSC black. For the hover, maybe we can do something extreme. I'm going to go with the yellow. That might be a little bit extreme, but it doesn't matter. Then for the headings, I'm going to go with black. And for the buttons, I'm going to go with custom. For the text is going to be black. And for the background here, it's going to be all custom yellow. Okay, let's go back. And I think we are almost done here. The last thing that we can look into here is the layout. And now this is going to be basically the dimensions, the width of your area. So for example, if I go back to my Figma design super quickly, I click on my design. And if I look into it, so this is where my content is going to start. So if I create a square super quickly, so this is how wide my website is going to be. And I can go to, and I can go here and have a look. So it's one five four four. This is how wide my website is going to be. So I'm going to be using that number for the content and the wide content. Now this allows you to basically have two options for narrow content and the wide content, but I'm not going to be using this in this video. You also have something called block spacing here, which you can modify. Sometimes it's pretty useful. Sometimes it's pretty annoying, but you'll get used to, I guess. So I'm going to leave it as default and show you ways of going around this. Make sure that you save your changes. Let's go back, click on blocks. One thing that I want to change is definitely the paragraph. So I'm going to go to typography and maybe put it as, let's have a look. One points, I don't know. I am zoomed in. Let's have a look. That's actually looking decent 1.6. So I'm going to leave it as that. So make sure that you go around here and change everything that you don't like. Save this and let's have a look at the first problem that we're going to get. So if you go to text super quickly, as I showed you earlier, we can modify the headings to whatever font size we wish, but unfortunately we can't make those fonts responsive, which is a pain. So if we scale down, you will see that they're not responsive and that's not great. And as you know, the Gutenberg blocks don't really have many options for responsive design. So we're going to have to fix this. And this is where the first hack comes from. So save your changes once you're happy. Go to export, make sure that you name your team and put all the description. I'm going to put new and then export. This is going to export a zip file for me. And now let's go back to LaraGun. Close this route. So from here I'm going to go FSC services, WP content, teams, and here is the team that we were just working in. So I'm going to create a new one. FSC services. And I'll just put dash new. Inside this folder is where I'm going to extract everything. And this is going to be all new team. I wanted to give a quick explanation of why I exported the team from the create block team plugin and created a new one out of it. And the reason for this is because originally I tried to edit the team created by create block team. I couldn't update a couple of things. And I don't know whether some things are saved into the database because if I open the team.json file, you will see that a lot of the things that I added a mission, like they're not here, like the colors, topography and so on. But when I export the team, which is here, and if you look at the JSON file, you will see that the colors are here, the layout is here, the space in the topography and so on. And that's why I created a new theme out of it. So that's pretty much why I did it. Okay, now if we open the team.json super quickly, you will see that most of the work is already done for us. And the reason I'm going through this and I'm creating the new team is because I don't want to mess up anything. I want to start clean. So we are starting with a clean team here. And I'm going to be adding custom code as we need. It's not going to be much. This has already saved us a lot of time. As you can see, and I walk you through this in a second. So essentially we have a couple of parts and you can add a lot more to it. But as you can see, let me, which one's styles, template parts and settings. All right. Essentially we have three main parts, the settings, which are basically stuff like the palette which we just added. We created them. We have the layout, which we also added. We have some spacing in here which you can add more options to and you have the topography. So this is already added for us. It saved us a lot of time. What else do we have? Let's have a look at styles. So styles is another section. And this is basically where you can style different blocks. So for example, inside blocks, you can start the paragraph. You can style, I think they're quite a lot. Let me just do this. And as you can see, you can start the core archives, audio avatar buttons and so on. So if we modify them earlier in the style book, they would have been added in here. But since I left most of them as default, that's why we didn't get more. We have the colors. We have elements such as buttons, headings, links, topography and so on. And we have some template areas for the header, the filter. And also a very important bit in here is the schema. This is basically what does the auto complete. So if I was to do, let's say inside the elements, if I was to do double quotes, you'll see that is auto completing for me. You try me the options. So let's say each one inside each one, I have border, I can change the border color, CSS dimension filters, outline shadows and so on. And we're going to be doing this. So let's save this and let's go back to our website and let's go back. Let's go back. And now we go to appearance and let's select all new team here. Okay. Now before we start any development work, what we can do is if we go back to the website, navigate to the root folder where we have WP config. And from here, if you open the file, scroll down to the bottom, somewhere on the bottom, where we have WP debug. Turn that to true. And this is going to help you every time you make an error, it's going to show you at the top of your website and also potentially it might help with caching issues. So if you save this, the other thing that we want to do is let's look at the styles super quickly. Let's go back to WP content, teams, the FSC services team here. As you can see, we have style.css. Let's open it. So this contains details for team, the name, which appears here in the editor, as you can see and so on. But when we visit the actual website, if I refresh super quickly, everything is working well so far. But if I was to go to this style.css, and if I was to do, let's say, body, and let's say I wanted to change the background color for some reason, let's change it to red. And in fact, let's make important just to prove a point. If I go back and if I refresh, you will see that it's not taking any of the styles. What we need to do is go back and create a functions.php file. So new file, text file and end functions. .php, okay. Let's open this file and it's going to be empty. Inside the functions.php, the first thing that you wanna do is start php like so. And inside here, all we want to do is enqueue the style.css. So I'm gonna paste a little comment in queuing styles. And to save time, I'm gonna copy and paste the function that does that. So here it is. Make sure that you can pause the video and just add this. And this is going to work for you. Basically, also change the names. If you wish, it doesn't really matter. But this enqueues the style sheet for us. And now if I save this, we still have the body background color of red. If I go back to the website and if I refresh, you will see that the styles are working, which is great. So let me remove the body because we don't obviously want that and save it. Perfect. Let's go back to the website and refresh. And by the way, you might see some errors in here. And this is because I enabled the WP debug. And as you can see, some things are deprecated. And this is actually coming from this plugin here, the create a block team plugin, which we don't really need anymore because we exported the stuff that we need. So I'm going to deactivate this. And as you can see, no errors. I am using PHP 8.1, I believe. If I do right click PHP, yep, 8.1, 10. Now let's go back to appearance. Editor. And from here, we can start with the header. So inside template parts, click on header and click edit. There are actually quite a few headers that you can use. Sorry, it's inside the plus sign here. If you put headers, you might be able to find a few headers that already pre-built, but today I'm just going to build a very basic one. So if we go to the list view, we have a spacer, which we don't need. So I'm going to delete it and we have a group. So this group I'm going to click on. And under advance here, I'm going to change this to a header element. Now for some reason this, I think this adds a block margin on top of it. And there is a way of resetting there. You can go here, by the block margin, let's have a look. It could be, in fact, sorry, it's margin. So in the here margin, and I believe that you can just reset the margin. Yep, that's it. Say that. Now also just for development purposes, I'm going to change this to another color, maybe this one here, just so we can see, we'll change it back in a second. And if we go under the group, we have a row and inside this row, we have the site logo, which is fine. We also have this group which contains the site title, tagline. Let's remove this. For the logo, I can click here and upload mine. Here it is. And for the navigation, at the moment, it's actually just picking up the pages that we created earlier in this tutorial, which is absolutely fine. But from here, I want to change the order. And this is actually using page list instead. So what I'm going to do is I'm going to remove this and navigation menu successfully created. Okay, it's removed now. So let's add the first item and I'm going to go with page link. And this is going to be home, like so. I'm going to add another one. And by the way, you might be tempted to use this homelink, but we're going to have some problems with this if you use it and I'll show you why. All right, let's add about, like so. Let's add services. Oops, page link, sorry. How it works. Rates, perfect. Save this. From here, I am doing quite a bit, but if I change it to the default one, that's actually looking pretty cool. But from here, you can edit some of the settings. For example, the mobile menu, the orientation, you can change it to whatever you like. And also you can change the styles. So for example, for the text, you can change the color, which will actually have to do. So I'm going to change this to white and what else do we need? The block spacing, you can also change to make it to whatever you like. I'm going to reset it because I like the default. And that's pretty much it. Look into the background, the sub menus and so on. Now if we go to the settings, you'll see this display. From here, you can choose how your mobile menu displays. So if I go down to mobile, you'll see that we're getting this mobile menu. Let me zoom in. And then from here, you can pretty much change it to whatever you like. There are not many options. And also if you click on them, you'll see that this is looking kind of pretty bad. And we're going to have to do some custom CSS in order to make this work in a second. So let's close this and let's look into it. Now it's actually pretty hard to visualize how our menu looks like. So what I'm going to do is save it. Let's go back to WordPress. Let's go back to all template parts, page. And from here, I want to add it to the top. So from here, I'm going to remove this one, remove the bottom one as well. And I'm going to add a new one. Search for header and just drag this in. Well, try to drag it. Okay, here we go. You added it to the bottom. So choose and then scroll back to the bottom, choose. And then here it is. So I'm going to add this and make sure that this is at the top. Wait for this to be removed. Come on. Here we go. Move at the top, save it and let's preview or website. Okay, not so bad. The first thing that I want to do is 10 pixels of space on each side. And also I want to move this in the middle. So in order to do this, I'm going to click on the, let's go back to editing or header here, click on the header, edit. And now let's continue. So edit. So first of all, let's click on the group here and let's go to styles. Let's go to padding, unlink this and do 10 pixels to the left. Sorry, right. And then pixels to the right, to the left. So now I also want to make this in the middle of the screen. So let's go to, so let is in a blocks use content with, that's correct. Maybe we need to put group inside the group. Let's try that. So group, drag it. Select this one here. And now if we drag this group outside and if we drag the row inside, well, let's try it. Here we go. Now hopefully if this is set to in a block use content with, save this. And the other one is also set as the same. You will see that it did move, but the reason that it's not working well is because I'm zoomed in. Okay, so potentially it was probably, it was probably fine the way it was. Let's try without the second group. No, okay. So the second group does make a change that unless, yeah, the second group does make a change I think, unless we, so let's, let's do it like this. Refresh and we're good to go. Now, if we look at the design super quickly, you will see that our header is always on top of this hero image. So we need to do that. Let's go back to the header and let's remove the background color first of all because that's gonna get in a way. So I'm gonna go to styles and this like the background color first of all, it will look a little bit odd now. It's gonna be hard to edit, but there is not much we can do about that. If we were to select in this group first of all and go to settings, you'll see that there are some options for positioning, such as sticky, but there isn't a position for fix or absolute yet. Instead, I'm gonna click on this and I'm gonna add a custom class on it. So on the settings, advanced click on here, additional CSS classes. So I'm gonna call this one FSC custom header. And I hope that you can see here we go and copy this and save. So now if we go back to the website, as you can see, the header is all working fine, but we need to position absolute. So I'm gonna go to the CSS and inside here, we're gonna put FSC custom header and then position. It's gonna be absolute, zero, left, zero, right, zero. And I want to put the Z index to be at least two, so it's on top of the other step. So if I go back, you should see that I did control shift and add to refresh. And you should see that the header is now on pretty much on top of this section, which is exactly what I want. Now, the other thing that we need to solve is the mobile menu. I didn't really prepare for this, but if we inspect this, and if you go down to mobile super quickly, and if we click on the menu, which is here, oh, okay. That's not so bad. Potentially you could add a custom class and just move everything to, in the middle maybe, or just move a little bit from the right side. So what you can do, click on the menu, here navigation, let's go to settings, click on advanced, and let's give it a class name, maybe main nav, main nav. Copy this, save, save. And now if we go back to the website here, when we toggle the menu, let's see where it is. I need to inspect it. And when we toggle the menu, we're getting this class here is menu open and has modal open, which we can use in our advantage to style this. And by the way, here we go, I refreshed and the style that I just added is here, main nav. So that's outside the, so that's here. And if I open it, then we have another dip with this is menu open. Okay, cool. So what I'm gonna do is I'm gonna use this menu nav, and then I'm gonna do is menu dash open. And then I'm gonna use the container, which is, sorry, this one here, block navigation container is what I could use. Yeah, I'm gonna use this URL here. So this is gonna be URL with the class name of this. And let's say we just do padding write of 20 pixels for this example. And font size was already good enough, but you could potentially do that as well. So let's refresh, open it. Yep. And as you can see, there is a little bit more space. So yeah, and pretty much you can change this to however you like, but this is already looking okay. It's not perfect, but it works. And that's pretty much our header done. And it's gonna look much better when we add stuff below it. All right, one thing that I totally forgot to do is the active links. So at the moment, you can't see anything because of the background, but if I edit side super quickly, and if I go to templates header, edit header, now let's super quickly give this a background color of this one here, for example, and save. So what I wanna show you is that at the moment, you don't really know on which page you are. So if I, I'm on the about page and it doesn't, it's not really highlighted. And if I go to the services page, the same thing, I don't think that there is a proper way of doing this, but if you right click and inspect the elements, and if you go to one of the links, for example, the about this, I'm gonna put this at the bottom. If we go to the about this page, for example, and if we inspect the element, you should see a class name of current menu item. So we can use this class name in order to somehow highlight this link. So if I was to copy this, and we can also use the WP block navigation link if you wanna make it super specific. And then inside it, we have a link. So for example, there's somewhere around here where we have all navigation. I'm going to, let me zoom in. I'm going to paste the current menu item and the WP block and both of those are class names. So if I put dot and put this one here, and if I put another dot, it means that whenever they're together in our HTML, we can, we can start them. And then I can say, well, we wanna start the link inside, which is a inside here, I will be doing my styles. We can also put little navigation comment here just so we know where all navigation styles are. So for this example, to make it super basic, we can do border, dash bottom, but then the border can be two pixel solid. And just let's put red for now. So if we go back and refresh, I did control shift and now because it wasn't refreshing. And now as you can see, we're getting the border underneath. I could potentially use one of the variables from the body. So from here, let's say, we can maybe use the FSC yellow. Think that would be pretty cool. So I'm gonna copy this variable and then go back to my styles. And instead of red, I'm gonna do variable and then paste the variable of yellow. Okay, now we could do the hover and I'm gonna copy this. But in this case, obviously the current item menu won't exist on the other items because they won't be selected. So I can remove this and I can just do potentially hover and then do the border. Maybe you can do on the link and then we hover the link and then we add border at the bottom. So let's save this and let's have a look. Refresh, the hover won't work because I've selected the device toolbar here. So I'm gonna unselect it. And as you can see, the hover is working, but it's kind of like pushing my element a little bit at the top and there are a couple of ways of solving this, but what I'm gonna do super quickly, I'm gonna grab this link here and I'm gonna say border bottom and I'm gonna put as two pixels solid transparent. It's because it's messing with the height, I believe that this is gonna make it work. And if I refresh, no. That's cool, but we potentially need the A as well. So let's save this. And as you can see, now we have hover on all items and if I go to services, the services is now highlighted because it has the current menu item class name. And now we can go back and remove the background. So select the group, background, remove it, save. All right, and now we're finished with the header. Now, the next thing that I wanna do is the photo. So for the photo, let's go back, make sure you save everything by the way, click here, click back and click photo. Click edit photo. And from here, we can edit this photo. By the way, there are also other photos that you can use, buttons and then photos. There's so many from here, but let's develop a custom one super quickly. List view super quickly, then click on this, go to advanced, click on photo, save. Now this is gonna have a style of black background, but the text is gonna be white and the links are gonna be white. Now, was there a logo here? No, inside this group, we have a paragraph. So I wanna add the logo as well. So I'm gonna add logo and drop it in. Let me zoom in. I'm gonna make this a lot smaller. Whoops. And if I click on the list view, we can go here inside this group and create a row. So let's click a row, add it. And then inside this row is where I'm gonna be adding everything. So let's just drag them in. And then if you click on this row, then you can do orientation down vertical and then justification center. So I think that's gonna look pretty cool. Save them. And also on top of this, I'm gonna add a couple of columns. So let's add column. These columns are gonna be free. And I'm gonna move the columns above this. Inside here, so let's just add a new heading. And this heading is gonna be called about. Let's change the color to white. And let's make sure that this is H3. And then inside here, I'm gonna create a new menu. So this is navigation. And then instead of using the main primary navigation, what I'm gonna do is create a new one by clicking here. So block list view and then create new menu. And inside here, I'm gonna create a page link. And for example, we can do about services maybe, how it works, rates, and maybe contact. Here we go. Now this menu, if we click on the settings here, the orientation needs to go down. And we can disable the Overline menu for mobile. So let's click that. And also the space in between is a lot more than I want. So I can just change it from the block space in here and save. Now we can do exactly the same thing for the other column. So I can do control shift and D to duplicate this and just copy, copy twice like so. And then I can do the same thing for this. I can create another menu, copy in here. And then for, let's say this is gonna be company. And let's say that this is going to be contact. And inside the contact, I'm just gonna add a paragraph, which is gonna say pick a dilly. Maybe this can be linked to a Google map. We can embed the Google map, but I don't really wanna do that because it's just a waste of resources, I guess. So instead I'm gonna use a nice image that I've prepared. And then I'm gonna use it like so. And then you can link this to your Google map by adding a link from here. Save it. And now let's go back to our website. And as you can see, we only get in the header, but we also need the footer. If I was to go to edit site, templates, page, edit the page, all we need to do is here we need to add the footer. So in fact, I'm gonna remove this query loop and let's add the photo. Drag the footer in, choose, choose, and then here is the photo. Save it. Make sure that it works. I'm gonna zoom out and here we go, it works. So we get in the header and the footer and everything in between is gonna be the content of each page. So it does look a little bit odd at the moment, but if I was to edit the homepage, for example, so this is the content, right? This is the content on the homepage, but the moment we are not getting it from here, this is because if we go to the template, inside here is where we need to add the content. So plus, and then this is gonna be post, let's have a look. I think, yeah, it's post content. So I'm gonna drag this and this is basically gonna fetch the content from all pages. I will show you how it works in a second. But also I wanna wrap this in a group, just add a group. This group is gonna contain everything. And also this group, I wanna reset the inner blocks use content and we'll see how this goes. So now if we go back to the website, we're getting the home content. If I was to go to the contact page and edit it, let's just put an H1, H1, sorry, heading. This is the, this is the contact page. Refresh, and as you can see, this is the contact page. Cool, and the last thing that I spotted, if we go down, you will see that we're not getting the space again. So what I'm gonna do is go back to the photo, the main group here, click on edit styles, unlink the pattern, right is gonna be 10 pixels, left is gonna be 10 pixels and save. So that will make it a little better, one way or mobile, at least a little bit. All right, now that we have this done, let's edit the homepage. So I'm gonna close all of these and let's edit the homepage super quickly. So what I wanna do is let's look into the topography. So let's remove here everything from the homepage and let's create a bunch of H1 tags. So I'm gonna do heading slash heading and this is gonna be heading one and I'm gonna do control shift and D to duplicate. So one, two, three, four. So this is gonna be heading one, two, three, four, five, and I believe there is one more, so six. Okay, so let's put this as H1, H2, H3. H4, H5, and H6. If I save this and if I preview the website, you might see that these headings are not responsive, which is no ideal and that's why I had to export the website, create this JSON file here so we can do them manually. Let me show you how this is going to work. In my design I pretty much have, so I have the minimum size for the font or mobile and I also have the maximum size for desktop and the way I've calculated this is by using this calculator here, which I'm gonna open and I've already calculated everything but on the smaller screens, the base font size is set to 16 and the minimum screen width is set to 400 and as I showed you earlier, we set the maximum screen width for my website to be 1543, so that's why I'm adding it here and the base font size is gonna be 19. I've added all steps, small, base, medium, large, Excel, Excel, and so on and this creates these responsive fonts for me with the CSS Clam tool. So what I've done basically is I've copied this. Let me copy it to a notepad, paste it into a notepad. Let's open the JSON file. Yeah, theme.json. An inside element, we can use those in order to make our fonts responsive. So inside here, I can do h1, as you can see and for the h1, we can do typography. Here is the last option and then inside typography, we can do font size and for the font size, we can basically just do the clamp size. So for the h1 is gonna be this one here for me. In fact, we just need this. Copy, paste, and I would also change the line height, for example, so line height and let's say we put this to 1.4, right? And what I would do is copy this and do it for the rest. So this is gonna be h2 and I would change the h2 to this one here. Copy, paste. And before we do too many of these, save them and let's go back to the website and refresh. And as you can see, heading one and heading two have changed and if I make the browser smaller, they also resize, which is amazing. So this is how I was able to make the font responsive. So I'm gonna copy and paste the code for the rest. Copy and we have h2 and after h2, I'm gonna have h3, 4, 5, and 6. That's it, save it, let's go back, refresh. Cool, now we are getting a problem and the reason I've done it this way is because as you can see now all h3 tags here are pretty huge, but in some cases you might want to have an h3 heading that looks like h4, for example. And that's why I'm gonna be adding custom font sizes as well. So let me show you how we can do that. So this time we're gonna go back to the team.json. Let's go to the top and let's see. This is gonna be inside settings, maybe underneath the spacing. Yeah, underneath the spacing we can do, okay, we already have topography. So inside topography is where we're gonna have to add the new one. And this is gonna be font size, sizes. Okay, font sizes. Click on this and this creates an array. Inside this array is where we can do curly brackets and then inside here, there are a couple of methods of doing this, but what I'm gonna do is use the fluid method in order to be able to use the fluid method which we can set a maximum number. Let's say the maximum for this one is gonna be 0.89 RAM. And then the minimum meme is gonna be 0.8 RAM and then we can give it a name for this custom font size. So name, this is gonna be small. Slug is gonna be small. I don't know whether I need to make this unique so I'm gonna do anyway. Better save than sorry. And then size is gonna be the small size. So in this case it's gonna be this and save. Now this probably won't work and this is because we need to add another option here which is fluid and we need to set it to true. Otherwise it won't work. I don't think that it will. True, save it. Okay, so technically speaking, if I go back to the website, refresh, everything is working well. But now if I wanted to change these to my custom font, let's go and edit the, let's refresh on the photo. And now let's select the, the about here. And as you can see, we have only one font which is awesome, which is the small font. So I'm gonna have to do this with the other ones. And what I've done is literally, I just use the same thing as here and I just use the name, small, base, medium, large, Excel, XXL, XXL, awesome. So let me show you. If you go back, basically pretty much copy this. Sorry, copy this here, the curly bracket with obviously with a comma. So you put comma and then you copy it and then you just change the names. I'll show you. So I'm gonna paste a few and feel free to post the video, make sure everything is working fine. Okay. So we have the small one that I just created. We have the base one. We have the medium one. We have the large, extra large, extra, extra large. And then XXL. So that's it. Save this. And if I refresh one more time, for example, the photo, for example, I can click on about here. And now because we have so many options, they did it on a dropdown menu, which is great to fair. And now we can select, I don't know, large or not. That's too large, medium, perfect. So now let's select medium, medium, save this. Now we have responsive fonts and we can select whatever heading we want with whatever size we want. If you go refresh, you should be able to see that they're scaling. Perfect, awesome. All right, now we have the exciting part. I'm gonna close this and I'm gonna go back to my Figma design here. Let's close this as well. And let's go here. Now we have the exciting part. We're gonna start by building all pages. So starting with the homepage and the cover. Just a quick recap. If we go to the FSC here, Appearance, Editor and then Teams and then Page. Just a quick recap. We have the header, we have a group which is gonna contain the post content which is basically the content from the pages and then we have a photo. So essentially, if I click on home, we have this but if I click on contact here which you probably can see, we have the contact page. Now the reason I've left this to be full with is because sometimes, just like on the design here which I removed, sometimes we wanna make stuff full with and sometimes we don't. So that's why I've left there as three. Let's edit the homepage. Click on the logo, Edit Page and let's start, let's remove everything from here. And let's start by creating a group. So slash group, there it is. And then select this one here, the first one. And then inside this group is where I'm gonna add a cover. So add cover. And cover is basically going to allow us to add an image and text on top of it. So from media library, I've already added a couple of images. They're definitely not optimized. Three megabytes is fairly large. So let's add them. And inside here, I'm gonna add a group instead. So let's create slash group. Whoops. Maybe there is another way. I can maybe do plus group. Add in here. Choose the first one. And then I'm gonna put everything inside that group. And this is gonna make sense in a second. So I'm gonna put the paragraph in here. And if I put, and I'm gonna grab some text and put in here. So local repair and maintenance services. And this is gonna be an H1 tag. Oh, I don't know why it doesn't look. It looks a little bit small than it should. Let's update and let's refresh. Yeah, it looks a little bit tiny than it should. So H1. Maybe we change the appearance from here. Custom reset tool. Yep, okay. So that works. And also you might wanna change this to regular or light. That works as well. And one really cool trick with the cover here is if you select there and if you go to the styles, you can actually change the opacity and it changes the text. It makes accessible, which is super cool. But what I want to achieve inside here is on overlay. I wanna go to gradient. And I wanna change this to kind of like a black color. And then I'm gonna change this as well to a black color. I'm gonna change this to, oops. The gradient here, I'm gonna change to 90 and have it as linear. So this, I wanna change the opacity to this, but this one is gonna be 100% and also the opacity from here I'm gonna change. So we're getting like a nice gradient here. The next thing that I'm gonna do is add a paragraph underneath here. So press enter and type a paragraph. And let's make sure that we center align this and center align this as well. Cool, that's good. And then I'm gonna go back to the bookings. Obviously, we can link this button to the contact page. Like so and make sure that is center align. So middle align and there is another one here. Justify item center and update. If we go back to the website super quickly, just so we see what's happening, you will see two things. The first thing is that we're getting a little bit of a gap on top and bottom. And the second thing is that or section is not full width. So let's save both of those issues. So group potentially in a block. Now, we don't need this. So if we go here, if I click on group, potentially we don't need this. Update it. Okay, first problem solved. And the second problem, I believe that the group that in our template has block margins. So if we go to, let's refresh the template. This is the page template. And if I click on the group here, that's why I've added actually pretty much. And if I click on styles, then I think you might be in the margin. Okay, margin, select margin and reset it. No margins anywhere. Save this. Refresh, okay, yeah, that has worked. I'm not sure what there is space underneath here yet. So let's have a look. It could be even the person. You know what? I think is actually the photo. Margin block start. Yep, okay. So on the photo, we'll have to edit that and fix it later on. But basically you click on the photo and you reset the margins. So let's go back to your homepage. And here where we have the group. The reason I added this is because if you look or website this, it's a little bit too long. So what I wanted to do is this group allows us to add content with. So I'm gonna do 850 for example. And already this is looking so much better. Refresh and this is already nice. Now you could mess with the spacing a little bit, typography and so on, but that's already good. The other thing that we can do is we can either do the height of this cover manually so I can just try it. Or there was a way, so for example, advanced maybe. No, sorry, under styles. It's gonna be here. Okay, wait up, we have the pixels. We can do VH, which is kind of like percentage but is based on the window. So if I do, let's say 90%, this is gonna take 90% of the height of the window. So let's have a look. And yeah, that's looking pretty decent to be fair. And if I go down on mobile, it's looking good. Not so bad. Okay, I'm happy with this. If I open the designs, we have one more issue. I want this scroll button to be at the bottom. We're gonna have to go back and add it outside this group. So I'm gonna create a row or stack, whatever it's called and drag in here. So inside here is where I'm gonna add a paragraph. I don't know if you can see and I'm gonna put scroll, oops. And also I'm gonna add an image. So image, and I've already uploaded this image, which is like a little Chevron icon. Here it is. And with them. So with the row, we can click on it and we can do it as a transform to stack and that will stack them under each other. Then we can do justify item center and they're already in the center. Now the issue is that I want this to be on top. And the way we can do this is by giving this a class name and setting it as absolute, for example and making this group a relative. So, again, I'll show you. So selecting the stack, click on advance. Under here, let's give it a class name or maybe scroll button. Copy this. And also this needs to be turned into white. So, oops, centerline, but where's the text? Text, white, that's fine. Update. And also this group will need a relative class. What I'm gonna do is I'm gonna create a class literally called relative. Darken, reuse for entire website if I need to. So relative and update. So let's go back to the CSS and first things first, put relative, position, relative. And then for or scroll button, I'm gonna do scroll button and this is gonna be position absolute. Bottom of 50 pixels. Left is gonna be zero. Right is gonna be zero. And Z index will need to be two to be on top of the cover. Now, for testing purposes only, I'm gonna put a background color of red and save. Let's go back, make sure that you refresh, sorry, save everything and refresh. Again, we have the scroll here, which is great. There is a little bit of a space between them and I need to link it. So let's go back and if I click on stack, potentially in the styles, block spacing is what? And it's pretty hard to see. I'm really sorry about this, but that has so the problem. And now I can just link this to the anchor point. So which is the services file was to go here. Let's create a new group for the services. So group and drag this somewhere on here. I don't know if I did, potentially. It didn't seem like it worked. So group, maybe I click on it. Yeah, if you click on it, it adds it, that's much better. So click on this, click on this. And now we have a group inside the group. We don't want that. We want this to be its own section. Remove it. Yeah, it's pretty hard to move from time to time. Sometimes you can hold there on here and it works. And then you can move over with the areas. Cool. Now, one little trick here is that if I was to click on this section here, and if I go to advanced, and if I was to give an HTML anchor, let's say hero, you will see that it adds a name. So this is what I've been using in order to name my last pretty much. I'm not sure if it's a good idea, but it's actually a pretty cool trick that I made up the same here. We're gonna have an anchor, but this one is gonna be actually used. So I'm gonna go on the advanced, gonna put this as a section, for example, and let's say services. And now we can link this to the services anchor. So where's the link here? And then we do hash services. Press enter. And now this should be linked. And maybe we can link the image as well. Let's see. Hash services. Press enter, okay. Perfect. You click and it scrolls down to services, but we don't have anything in services just yet. And this link is looking a little bit odd. So if I can change the color of this, that would be great. Link color, white, perfect. Let's go back to styles and remove the color red. Let's go back. Perfect. Should work. If I scroll up, click on it, it works. All right, let's create our services section. So inside the page again here, let's where we have our services group, click on this one, and let's start by adding a heading. Services, this heading is gonna be an H1 and it's gonna be center-lined. And inside here, I'm also gonna have a little paragraph, which I'm gonna copy and paste here and center-line. And just like we have this group here, I'm gonna create another one. So excuse me. New one, group. Add in here and this is gonna be. So this group is gonna be inside this group and we're gonna add everything inside here. And in this group, we're gonna put 850. Perfect. Now we can put a little bit of space. Spacer, I don't know how much I need, but let's say 30 pixels. Refresh, perfect. That's looking good. Maybe that needs to be moved a little bit more, by the way. So 120, I'm also sure. All right, that works. And that would be nice if this wasn't underlined, but you can change this with CSS. So for this, I'm gonna have three columns. Let's go back. Maybe we just create call and drag them down. No, just click on them and then press the three columns. Press the three columns and here we are. Now I need them outside this group. That's what I wanted to achieve originally. And let's put them down. There we go, that works. So three columns and each column is gonna have, basically it's gonna be a link to a different service. Let's start with a cover. So this is gonna have an image, tap water here. We're gonna put plumbing. If I select the cover, if we go to styles, we can change the opacity to a darker one or whatever. Maybe we can make it a little bit cooler by going to full on and then go to overlay gradient, make sure that the angle is set to zero, all right, just to manually, much faster. And then if we put this as black and then if we put this to be more opaque, that would look pretty cool to be fair, but I'm just gonna change it to black. Something like this will do. And that's gonna be it. Let's make this a little bit smaller. And what we can do is link this to a plumbing section of our website by clicking here. And then I don't really have a plumbing. This is spelled wrong as well. It's plumbing. And I don't really have a plumbing page. So I'm just gonna put it as plumbing and then change the link to white. Now the issue here is that the whole section isn't clickable, which is really annoying, but there isn't really an easy way of doing this. So the link is clickable, but everything around there is not. I'm sure that there is a hack that you can do, but it might make it really complicated. Also in my design, I have every single section here with the little border radius. So I wanna achieve this as well. In order to do this, if we go back, unfortunately I don't think that there is border radius option on this. And even if they're worse, a global one that I can do, hmm, there might be a global one actually. Let me have a look. If I go back to the template here and if I click on the styles and then the style book, if I click on media and if I click on cover, layout, body, margin. All right, I don't think that there is a border radius on this. So what we're gonna do, let's close this. So what we're gonna do is add a custom class. And so click cover, advanced. And then inside here, I'm gonna put services call. So a services column. And I'm gonna update this. Let's go to CSS. And inside here, we're gonna do services call and then overflow hidden. And then border radius of 10 pixels. We could set a custom variable we know team JSON file, but I'm gonna leave this. Let's go back to a page refresh. And here we go. We have the border radius. So let's duplicate this a couple of more times. Maybe make this, you can make this text smaller if you wish and so on. Let's duplicate this. Control shift in D if you wish. And then drag. Control shift in D if you wish and and drag. Cool. So this one is gonna be electric. This one is gonna be decorating. We could try to fit one more. Super quickly. Let's have a look. Custom font size, custom. Oops. Medium. Okay. Yeah, that could work. If I put those as medium. So custom font size, medium. Custom font size, medium. It could work. So one more column. Duplicate this column here. And we have four columns. I don't know how well this is gonna work. So three. Put this down. Yeah. Almost. Yeah, that works. I'll leave as it is. And also we need to put the 10 pixels on the left and right. So section here. Services. Go to styles. Padding. Left and right is gonna be 10 pixels. 10 pixels. And that should be it. All right. Let's change the images extremely quickly. And I might speed up this process so you don't have to watch me there. So replace. Now, if you wish to have another set of columns, you can literally duplicate this, replace the content and update. So now we have a bunch of links in here. And that's pretty much it. One thing that didn't show you is that you can click on the cover here and you can move around how you want the section, which is really cool. And you can also mess around with the fixed background, repeated background. Let's refresh this. And let's make this a fixed background for a second. Update there and let's have a look how this works. So okay, that's a pretty cool effect with a fixed background as well. You can do that if you wish. I'm gonna remove it. Let's scroll down. And the last thing that I can see in here is we can do with a little bit of space in the top and the bottom. Easy thing to do. Go to the group here, go to styles, padding is gonna be so top padding. Can I do just five or something or six? And then bottom is gonna be the same. And that will make it a little bit better. Okay, onto the next group, which is the YS section. From here, I'm gonna create another group. Click on it this time. I've learned my lesson and now scroll down and click on this. This is gonna have a style. First of all, I'm gonna change the padding super quickly to the left and the right. And this is essentially going to have a cover for the background. So let's put cover. Let's choose an image. And the image that I want is this one here. Again, two megabytes not optimized, but it's fine. And instead here, I can use another group. So let's do slash group. Choose this. And then inside this group, I can choose two columns. So call and then choose 50, 50. And then the section on the left is gonna have a heading. This is gonna be Y first. And I'm gonna have pretty much the same text as above. So I'm gonna copy and paste the same text as above. Also, let's create a quick button. So this is gonna be request booking. Obviously from here, you can link it to the contact page like so, and we should be good to go. For the right, let me remove this text from here. Remove paragraph. Let's make this a little bit bigger. Let's make sure that we have... So we have group. Let's first of all see on the website. Okay. So that's looking good, but we want it to be full screen. So what I'm gonna do is this needs to be unticked. Yep, and I fixed it. And we're getting some padding in here. And this is the padding. It actually looks cool to be fair, but this is the padding that I added earlier. So we might need to add the padding on these here. Okay. My fault, remove the padding from here. So reset, whoops, reset all. And maybe we can put the padding on the cover. Is that possible? Yep. Okay. The padding can be left and right of them. That should serve more problem. Now let's do the right section. This I'm gonna have columns. And you can make this a little bit better, but essentially this is gonna be two columns and is gonna have to know if it needs to be a heading or paragraph. Let's go with paragraph. And I'm gonna say quality. This is gonna be centerline like so. And maybe we can middle align it. Perfect. And now we can click on it, this column here, and we can go to the styles. Give it a little bit of padding like so. And maybe give it a border of, let's have a look. This golden color, one pixel. And that's looking pretty cool, I think. Maybe that needs to be bigger. Let's have a look. Just have to try. Yeah, something like this. We'll make it a little bit better. And then essentially I won't be able to do the other effects that I wanted to. So I'm gonna give it a class name of YSCO. Update them. Let's go back to styles. And inside here, we're gonna say YSCO. Box sizing of border box because of the padding and the border that I'm gonna be adding. So background color. I'm gonna set to RGBA. And this is gonna be 255, 253, 246. And then the alpha is gonna be 0.1, like so. And then the background filter is what I wanted to add originally is going to be blur of 1.5 pixels. And then let's give it a border radius of 10 pixels. Save it and let's see what we get. Yep, that's looking pretty good. Maybe you can add an icon on top of that and make it a little bit nicer. But that was the whole idea. The text can definitely be a little bit bigger than it is. And now I can literally copy this column. Well, it's a little bit bugged from here. Maybe I have too many lists and I can't see. Is there a scroll? Okay, it's a little bit bugged in here. So right click, nope. Here, here we go, duplicate. And now we can remove this one and update. Now, if I was to refresh, obviously, you're not gonna see the CSS changes in here, the rounded corners and so on, but that's one of them things that I'm not sure if we are ever gonna get. So refresh and we're getting that. And this is already looking cool. If I was to refer to my design, we have reliable here. And then we can copy these two. So columns, duplicate, and then we can change them to efficiency. Pricing and save. Not so bad. I mean, potentially I would want this to be cut off here or maybe where we have the columns, I would go to the styles and change the block spacing. So if you toggle this, that might just do the job. Yeah, that might do the job. And that's already looking good. Scale down. Let's see. Yeah, not ideal, but it works. So the issue with these is that they look clickable, but I think that's my fault about designing here. And we need a lot more space on top and bottom. So if I click on the section, let's go group and padding. Six, nice, that should be a lot better now. Is that refresh? Cool, that padding didn't do anything. All right, that might need some messing around. That's strange. It could be because of the cover. So let's reset this. And then can I do padding on the cover? Yes, I can. So let's do that. Six and six. Much better. Maybe a little bit more, but at least it's working. The next section is gonna be the testimonial section. So more or less the same as this one here. In fact, I wonder if we can copy this one. So let's have a look. So potentially this one is gonna be wider. I'm gonna go advanced and put my first. So we know. And potentially I'm thinking of copying this one. So duplicate the services, move them to the bottom. Nope, nope, mistake. Okay, we're gonna have to do this manually. Move them to the bottom and change the services to testimonials. And now if I click on the group, let's change the background to or yellow background here. Perfect. And now let's change the title. I'm gonna leave the text as it is. Obviously you can change that. And now we can remove the columns. So these columns can go. In fact, I'm gonna remove these columns as well. And just create new ones. So columns. And I'm gonna create four columns in here. Three is the only options, but we'll create four after. This can be outside like so. And now inside here, I'm gonna add some images from middle library. And I'm gonna go with this one first. Make sure that this is centerline like so. I'm gonna add a paragraph. So this is gonna say a great service. Maybe this needs to be a heading actually. So heading and it can be age four. And we can make it much smaller. So medium, that could work. And maybe we can make it light. Yeah, that looks great. And then in the middle, I'm gonna add a little bit of text in here. Make sure it's aligned in the middle. And in fact, you could add quote instead of this. So you could do quote and then add it and then make sure that the quote is aligned in the middle and maybe align this in the middle as well. And this is gonna be Maria. Here we go. So let's remove that. Improvising as I go. And maybe we can even add, I've saved a few fake stars. So I'm gonna add an image, media library, fake stars from here and spot them in the middle. And that's looking great. So potentially I could duplicate this four times. Remove those two. And now I can change them super quickly and I will speed up the process so you don't have to watch. And we should be back. So update. We have all the content here, refresh. And just go down. We're getting maybe from the camera, there is a bit of a margin. Let's have a look. Oh, is it testimonials? Hmm. That's interesting that the testimonials is adding the margin instead. We can definitely fix this by clicking on the group here. And then it will be blocked spacing maybe or actually I said margin. So margin. Okay. It was margin on this group for some reason. That's absolutely fine. And the last thing on the homepage we can do the latest articles. So let's do a new section. Can I copy this? Let's copy this. So duplicate. I'm gonna call this one something else. Let's say articles. Click on the group. Let's remove the background color. Like so. I'm gonna change this to latest articles. And this time I'm gonna put this on the left side and make it so it's a little bit smaller. So maybe we can put it as the large font. And this needs to be outside the group now. So around there. And I'm gonna remove this. The space I'm gonna keep. I'm gonna remove this group. Now these columns, they can go away, remove. And I'm gonna put, if I can, I'm gonna put the query loop. So query loop. Okay. From here we can either start blank or we can choose how we want to display our posts. So there wasn't another way of choosing, I think. But that's looking pretty cool. But essentially I wanna do something like this. Or this. Okay, I'm gonna go with this one here. And as you can see, it's taking a lot of space here. But if we click on this grid view, that will make it a little better. Now we have three columns and you can add more, but we don't really have any more content. So three will do the job. And from here you can start editing everything. So for example, we can add this as a tree. And we can also make this a lot smaller than it is. So maybe medium, perfect. The images themselves are not so bad. I might just keep them the way they are. And from here we can do read more dot dot dot. Or you can even put an arrow. The date is cool. Let's have a look at how this works. Okay, for some reason this is not appearing. Now the reason for this is if we go back, if we click on the query loop from here, I believe that if you untick this inherit query from template, and then if you click post newest to all this, that's all cool. Let's update it. I think that this is going to work now. Yep, perfect. Now this is probably the ugliest section of the entire website. And for some reason this image has rounded corners and the other ones done, but that's probably my fault yet. That's how I saved it. So what I'm gonna do is I'm gonna move this super quickly. I'm gonna move it below the image. Like so that's already so much better. Mean that should make it a little better. Maybe we can remove the date or put the date around there and remove those separators. And that should make it a little bit better. Okay, that's much, much better. Let's have a look at the images super quickly. What I wanted to add border radius in them. Okay, here we go. For the images, we can actually add border radius of 10 pixels and that solves my issue. Now I don't have to re-upload the image. So these are all clickable, but obviously we need to edit the template which does the post. And as you can see, this is going on the blocks and then the title here. Cool. That's gonna be pretty much everything from the homepage. And now we can concentrate on creating or contact page or contact page is basically going to use exactly the same template as this, which is gonna make it super easy. Now, if we go to any of those pages, they're using exactly the same template. I go to contact, you will see that we're getting the header. It's kind of hard to see, but we are getting the header and we're getting the photo. So from now on, it's going to be super easy to build pages. Let me show you. For example, if we added this page on another tab here, we added it in the contact page and let's quickly open the homepage. What I can do is copy this section here. So this is the hero section. I'm gonna copy it, copy blocks and now if we go back to the contact page from here, let's remove everything. And now if I right click, sorry, if I click on this and paste, paste styles, no, maybe Ctrl and V. Let's hit Ctrl and V. Okay, Ctrl and V does the job. And now contact page is gonna start looking good. Let's change this to contact. Maybe you can have a little bit of text, remove the button in this case. Let's remove it one more time, remove this page as well. And now if you click on the cover here, and if we go to the styles where we had the maximum height, now we can actually change this to pixels and make it a little bit smaller. In fact, 430 pixels should be fine. Let's go back to the contact and refresh. And now just like that, we created a super quick contact page. We can, of course, change the image from here, replace, open media library. Let's choose this guy here. Update and that's it. Now to make this contact page a little bit better, we can go here on the group. We can come on the styles. And for example, we can give it a border of four pixels, yellow, can I do it bottom only? Unlink everything. Okay, reset that. Now, unlink everything, yellow border, four pixels to the bottom. And now that's going to look... Oh, I've done it on the home page, sorry. Let's do that on the contact page as well. Sorry about that. So styles, go down to border, unlink, yellow, four pixels and update. That's looking so cool. Maybe we can add it as six. And now I can update the home page as well. All right, just like that, we have our home page and the contact page. Cool. Now let's finish our contact page if we go here. Underneath this group, we can create another one. Under here, we can create columns. So we can split this into two. The first one is going to be a heading of where to find this. So find first or something like this. And then I'm going to copy and paste the address. Copy and paste it. And from here, you can do pretty much whatever you like. For example, social icons. Here we go. And for the social icons, you can click the plus sign and you can choose from here. So, I don't know. Let's choose something super quickly. Master Done, LinkedIn, Twitter, YouTube, WhatsApp, whatever you wish. And then you need to give them links. Obviously, I don't have links for them. So I'm just going to put empty links for the demo. Otherwise, they won't appear and save this. This finder is a little bit too big. Maybe I can make as H3 and save. On the right side here, we can add a contact form. So let me refresh super quickly. That's already looking good. So let's add a super quick contact form. And in order to do this, let's go back to the WP admin. Let's go to plugins. We're going to add a new plugin. And from here, I'm going to do contact. Contact form is a very basic one that we can use. It's very popular. So I'm going to install this. Activate it. And now from here, where we have the settings, you can pretty much create contact form however you like. For example, this one is going to have your name, email, subject and your message. Then you'll have some settings here for the email and a few messages like you thank you for your message and so on. So we can use this, the default one. If you go back to editing the contact form, let's refresh this. And now inside here, we can click on the plus sign and click on search for contact. Here we go. Select the contact form one and now update. If you go back, you will see that we're getting the contact form, which is awesome. Now we also get in this scroll button from the homepage, which we need to remove my fault. So inside this group, we have this stack. Yep, let's remove that. And we're done. One of the things that you cannot do with a JSON file at the moment is style things such as input. So we're going to have to do this manually. If you go back to all style.tss, I already know the classes of contact form seven. So I'm going to help you out straight away here. And essentially I'm going to copy and paste them. So essentially that the very basic is WP contact CF seven for WP for WordPress contact form seven. And then we select all the input with the text field and then we do the same for the email here. And the text area. So from here, we're putting this font size to one room, the background color to be white. I'm putting a little bit of border to make a little bit more readable. And I'm adding board box sizing. So when we add padding, it doesn't affect the width. The width is always 100%. And then for the button at the bottom, we're pretty much doing the same thing. I'm just changing the background color here. Save this refresh. And as you can see, this is actually looking fairly presentable. And of course, feel free to make it a little bit better. And potentially we need to put a little bit of padding on the left and the right. And we should be good to go. So this one here, yep, we can do it here. Unlink. So left is going to be 10 inch pixels. Right is going to be 10 pixels, 20 pixels would have been better, but so good. Yep, that's much better. So we have a decent contact homepage and we have a homepage. Now we can do exactly the same thing for most pages. So for example, I can literally copy this group here. Copy block. And now if we go to or templates or appearance editor. Yep. And then templates from here, we can literally create a new one that's a 404 and I can remove everything from here. I mean, you can add the heading, I guess, and paste it. And instead of this, we can put 404, put some text in here. Sorry, this page does not exist or whatever. And then you can click on it, make this VH of 100, whatever. And now you have a simple 404 page, which I'm not sure how to trigger. Let's have a look. Can I trigger like that? Yep, here we go. So we have 404 page here, just like that. Super simple. We can also do the same thing for the blog post. So let me have a look super quickly. Single. This is for the blog post. So if I click on this, we're going to create a new one. And this we can remove this, remove this and remove this. So let's start with a header. So choose it. I'm going to choose my header. And let's paste the cover that we copied from the contact page. And inside here, what we can do is replace this with the actual post title. If we do post, you will see post title, put this in the middle. And then we also need the post content somewhere. So post, post now, slash post, post content is the one that I'm looking after. Okay. Let's go back to the website. Click on one of the posts in here. Chief painting services. And as you can see, we're getting the content. Also, this can come from the original article. So if you click on the cover, if I can find it now, replace, use featured image. Here we go. And now that's going to use the featured image. And we need to put this inside. So potentially we can create in the group. So and then that group, if we can get it out, now it's gone into the header. That group needs to go down. Select this, move the content inside it. And as long as this group has inner block use content with, we're probably going to be fine. Yep. So we are getting a little bit of an issue here. Title has changed. I think the image is so small for this. But what we can do is obviously change the title to whatever color we wish from here. Maybe we can do the color to be a lot darker. And now this can be whiter. And the link is a link. I'm not sure. Anyways, regardless, inside here, you can do a lot more. So you can do post title. I'm sure that there was a date. Post date. Yep. You can do that. Put it in the middle. Make sure that this is also white. Save it. And now you will see that this is working. We are getting a little bit of a problem from the template here, I believe. So this needs to be reset. The margins of this needs to be reset, I think. Things like this, you're just going to have to mess around a little bit and get it to work. And that just works. If you install the SEO plugin, you can also do breadcrumbs and so on. But this is where your content is going to go. If you edit the post, you can literally write your post in here. Heading. Hello world. And save. Now, if I was to go to another post, you will see that everything is dynamic. So this one here, everything changes, the date changes. Well, it's the same date, but everything of changes, the tech changes and so on. The last thing I didn't do here is the first one. So we might as well add it. So let's add a new first one and choose, choose photo. Let's make sure that this is at the bottom. So that's going to be everything from this tutorial. I hope that you found it useful. It is a little bit hacky, I know, but hopefully things will get better. Thank you very much for watching. Consider liking the video, comment below and hopefully I'll see you in the next one.