How To Build A Lead Generation Website With Webflow

1. Introduction: Build A Bespoke Website With Webflow: As a platform, Webflow is a great alternative to the likes of WordPress as fast, powerful, and much easier to use. The more traditional web bells in platforms allows you to build your website visually without having to worry about codes. And endless course, I'm going to be showing you step-by-step how you can build a lead generation website. We're B2C company. So if you're a restaurant owner, a genuine and are a local business looking to sharpen up your online presence, this course is definitely going to help edits. I'll be showing you everything you need to know about Webflow from setting up your main functionality, additional things you can do with the Webflow platform and showing you best practices for how you can automate the regeneration process. So I'm surface IC to be an in-service course with you. And I really hope it helps. If you have any questions as you're going through this course, you're more than welcome to leave a comment below, and I will get back to you as soon as possible. And on top of that, I would love it if you could share with me as a project what you've built as a result of watching this course. So with that being said, let's get into it. I'm really excited to get started with this. 2. The Kind of Website We're Going To Build: All right, So like I mentioned in the introductory video, and we're going to be belting elite generation website for a B2C company. So x you're a small business owner, local business, you know, if you're in a restaurant, a gym, or a company like that, this course is going to help you build a website, the age early generation methods. So I'm going to be showing you how to set up the web for platform behind me and everything you need to know about that. I'm going to be talking to you about brand. You don't have to develop your brand assets and all the different tools you can use. And more importantly, I'm really going to get into the nitty-gritty of the web for platform. Because as quite tough to use if you are a beginner and we really want to get into the details of that so you fully understand what you're doing because it definitely isn't easy at first as your first time using it. But before we actually get into the building, you're actually setting or Webflow ran. In the next video, I'm going to be discussing the differences between Webflow and WordPress because FU really out at the beginning of the lesson, you never use Webflow. And maybe you have a WordPress site right now, which is understandable. You may be hesitant about using Webflow. You may be hesitant about shifts to know your online infrastructure over to here, but I can assure you that it's worse. And we're going to dissect some of the reasons why web will really as a better alternative in the next video. So let's jump into that. 3. WordPress vs Webflow: All right, so this has been a development page on web flows website for quite some time now. And basically the reason why by fluid made this obviously they are a disruptor and the website design space. And just to give you a rough idea of where they stand versus what price at the time of me making this video, what trends account for roughly 34% of all the websites on the Internet, right? So most of the websites you look at are probably hosted bar have been belt by what dress? Alternatively, Webflow are currently as 0.4%. So roughly 0.40%.5 of all the websites on the Internet or belt with Webflow right now. So that as a really substantial dilutions, I mean, I still think that's pretty good considering wife will haven't been around for that long, but they obviously still have a long ways to go. And one of the big challenges they have as guessing users to move from our WordPress website to Webflow, right? They know they have a bad products and they know they have more to offer the Nolan more innovative. They're just better overall. But the problem is that when people go ahead and ves a lot of time and money and so on, online infrastructure, say on WordPress and then those working and they can be very, very daunting and quite stressful. So degree to shift to another platform and put all your eggs in that basket. So this page kinda illustrates some of the key points of why Web who's best at. And I just want to quickly run through them. So we can see here, these are obviously tweets from people that love Webflow. We're now going to include any negative comments on the platform on here. But let's just gives you an idea of what people are saying. So Webflow is crazy good. I feel that you guys are the first to build the right UX are going to stay in a CSS giveaway floor. Try with nothing to install automatic updates and no PHP as to what press of terrorists if you need. All of these are true. I don't need to go through them all. But if we scroll down and we just have a look at some of these points, again, we've got another testimonial there and right, okay, So here we go. This is probably one of the main points of why Webflow is such a game changer. So you can, they're saying you can build a better website without codes. And that way there is kind of the essence of what they're all about. There are no code company, and the no code movement basically includes a bunch of companies that allows people to do things without codes that usually you would have to use code to do. So, for instance, building a custom website you would usually use has to know how to code in order to do that. And what's Webflow. You don't have to know how to code. And at the end of it, you got really high-quality website that usually you'd have to know how to code in order to achieve. Okay, so let's just move on from this. You can build visually with the codes. You know, like we're saying, it's a visual Bowser, it's not based on themes, is not based on bulky codes, it's not based on plugins like what presses. You can craft customer interactions and animations. This is another key thing. Can't really do that and what press unless you start messing about and doing some custom stuff. So you can get really, really granular with how you want to animate things on your website and anti-B response. So if you want it to be too sudden actions from the end-user. And you can also design where CMS content. So this is another thing, Webflow, CMS is really, really powerful, really powerful as an absolute game changer. So even though as you're probably watching this, you're watching it as a local business owner, you may not be a marketer or web developer now that's okay. But if I had to emphasize one thing to use as a game changer, above all else from what pressed to Webflow are actually most website builders to Webflow as the CMS functionality. By using a CMS, if you had to do it yourself would be Tressie difficult. And what wife who have got here? They've got a CMS where if you want to have boat pages of a certain thing, so you're doing local SEO, for instance. That's a tactic where you have a lot of pages instead of having to add each individual page. So you're using to target a specific location and you add a one page, one template and it gets applied to all of them so you can have really good control over all your pages without it being this really big piece of work. If we move down from here. These are just some case studies on the types of websites you can bows. And then we enter the host thing. So like we're going to talk about, and one of the videos coming up. Webflow has hosting bell nth of the platform. You don't have to go and find a third party provider for hosting. And basically what they're telling you is that they're hosting as through Amazon CloudFront. And then in conjunction with that, they also use fastly. Both of these combined provide a really, really strong hosting service that I'm personally really fond of, I think is really, really good. Um, I haven't been able to fall so, so far, and I've been with Webflow for about a year now. Just as good, Marx, and you have to think about it much less than what you would other platforms. And on top of that is definitely much cheaper than some other hosting providers. So that's something to keep an eye on. And next we have the fact is that you'll never actually have to do any manual updates to your site. And the sense that when you're using WordPress, usually if you get plugins are if WordPress itself updates, you have to actually initiate the update. What's right for you? Don't they make the updates automatically and you don't really feel it, you won't even notice that it's a really seamless experience in that regard. They have security and wife will have security to Bell. And so unlike WordPress, where you have to pay a third party provider for our security, what's wonderful is Belsen. And when you say you have to worry about a heck of a lot less than what you would if you were doing this on WordPress. So again, another great feature. And keep in mind, they may have the SUS bet. So if you don't know what SEO is, that's okay. Seo search engine optimization, this is where we go about optimizing your website. So little shoes on Google. So good SEO is a bunch of things coming together. We're not going to, you know, we don't have to get into too much detail here, but these are some of the things that really contribute to good SEO. So high-performance hosting, like we've just spoken about, that really contributes because it has a big impact on speeds. And then we have tools, you know, it's really easy to set up redirects and stuff for my flow, much easier on WordPress, for instance, like I mentioned, the cold is really, really clean. That means it's much easier for search engines to read. That's an important point. So that kinda summarize these most of the key points. We're going to get into all of them a bit more individually as we go through this course. But hopefully this gives you a better idea of Webflow and y is definitely much faster than what press F5. To sum up, I would say the workflow improves upon everything that WordPress has failed at so far, m, because we know for the most part, WordPress is an open source platform and anyone can really do what they want with it. But the purpose of this video was just to address some of the concerns you may have about using Webflow. And I'm sure you can tell by the way I'm talking about that. I sing the company's prayers any chance I get just because of how good they are. So yeah, What's that being said? Let's hop on to the next video and actually start assessing at Webflow and get this website built for you. 4. Create Your Webflow Account: Okay, so the very first thing you have to do is go ahead and create an accounts on Webflow. Now, I already have an account with another email address, but I'm just setting up a dummy one just to show you the process you have to go through when creating your account. So it gets stopped to three. And you can continue with your email address or you can say, no, it was Google. I highly recommend connecting with your Google account as just a little bit easier and will save you a little bit of time. So I'm just going to use this email address and we're going to hear what we want to do is just hit that send e-mail button and then check it on books. And you can see we've got an e-mail from web full support. Confirm your e-mail address. Okay. And that is there's literally get to go. And that is that simple when it comes to tracing your account. And there's really not that much you have to contend with. And you can do some things to your public profile and you can edit your account sentence. And we've got a couple of tabs here, like showcase. This is where you can discover different work from different people in the Webflow community. And you can have a look at different designers and see what they're doing on the profiles. And you've got a bunch more, but that is just the process of signing up. So with that being said, let us move on to actually go ahead and tracing our first project. 5. Add Your First Project: Okay, so what I've done here is I switched over to my web flow account. And this is where we're going to build projects. So this is where I'll be showing you has it builds your project. And what I'm gonna do is just zoom in just a little bit, just so you can see a little bit better. Okay? So what you're gonna do is in your dashboard, you're just going to hit the New Project button. Okay, So just click that and then we'll go from there. And then Webflow will give you some options for templates and stuff like that if you'd really need them, but probably you're done. I would highly advise you're starting from a blank canvas like we've got here. And you probably should get used to that. If you're working with Webflow law, you, you, you will find that you won't do a lot of work with templates, probably ever again. Okay, so let's just click blank. Sleight that. And okay, so the type of website that we're going to be building in case I haven't touched on that already. And obviously we're building a lead generation website for a B2C company. But the kinda website, the ratchet going to be building as far a gym. Okay. So it's a local businesses are fairly common type of website belt. And all I'm going to show you all the foundations of generating leads through a website that you need to know about. So what I'm going to call a gym as Magnus gem, Air Share. Okay. And just in case you're wondering what any of these words mean or apart from Jim, magnus just means gray and a asha is actually where I'm from. So in case you can't tell them accent I am from Scotland and the Kantian from is called air shy and we're on the West coast of Scotland. But yet you really need to know that. But anyway, let's go ahead and create our projects. And when we do that will be taken and to Webflow. And this is where flow, this is what it looks like. It's a true blank canvas to say the least. And we've got a lot to talk about here. But that sums up for you just create in a project and what that process is like. And then the next video I'm going to be breaking down the core components of the wave full platform. And just so you understand why earthen isn't weight, everything is. So yeah, let's jump into that. 6. Setting Your Breakpoints: So the first thing that I wanted to talk about here is actually breakpoints because it's a pretty important part. The web development process and wife flew to really, really well. So as you can see here up top bar in the center, we're, right now we're on that's displayed with a star next to that. So this is your core designing place as the way I would categorize any changes you make here and will be applied to your tablet breakpoint, to your horizontal phone breakpoint until the phone breakpoint. And as you can see, Webflow is already predefined what each of these breakpoints are. And you should definitely just not change any of these, just leave them the way they are because the right and you can see I just scroll down, it gets smaller. So when we're Edison desktop for instance, we do here. Remember it hasn't been tablet we're doing here. Remember Edison or phone horizontally we do here. And obviously just a normal mobile device, we do that here. Now, there are some options here that you should consider when you're building a site. And I'll just tell you, I do passionately as someone who's doing this all the time. If you click these three little dots here in the left-hand sides, you can see that you can actually add more breakpoints. And while I usually do is I usually add all of these breakpoints, right? So we're just going to add them for this projects and you can see why I actually do with them just in case you decide to use them. So we've got our breakpoint for 1280 Px, so we're going to add that. And this is important point when you create these, you can't get rid of them. So make sure if you're creating them, you're doing it for the right reasons. So click Create, and I'm going to go ahead and add these other two. Okay, perfect. So now we have all of our breakpoints. Now I know you're thinking, you're probably thinking, Okay, Everything from this breakpoint and right up to this big one here looks exactly the same. How am I supposed to be able to tell the difference between any of these? So let me just quickly explain. If I click the little eye over here on the left-hand side, if I just click that, now I can get a preview, right? And as you can see, the size of this breakpoint spends the whole of my screen, okay? And I do all my design and on an iMac Pro, right? So most of the websites I look on my desktop, but actually all of this breakpoint. And so when you're designing here, you're designing for people that have got that bigger screen. And as we go down, you'll see that it gets smaller from there. And you can take less drag functionality and you can move up and down. You can put it wherever you want. And then actually gray if you want to make sure just to make sure everything is responsive across all of your breakpoints. But let's just preview mode for a second. While we're on design modes, we can drag here, right? Women on tablet, stuff like that. And the reason why I quite like just drag it on the design modes m is because wind flow will show you as you can see then the bottom right hand corner there will show you what size this says for certain devices. So we can see here the 768 px as an iPad Pro, write as 9.7 inch iPad Pro. So that's quite useful to know. Okay, So like if you've got an iPad Pro, if you're looking at it on an iPad Pro and you can't figure out why it doesn't seem to match up. And it's probably because you're not looking at it on the rate breakpoint. So yeah, but something to keep in mind. So that's one of the first things that we need to get in the way and that is breakpoints. So yeah, I hope you find that helpful. Unless move on to the next one. 7. Webflow's Management Tabs: So now that we understand or breakpoints and we've already set our breakpoints for say, the next thing I want to talk about when it comes to the different features that went full has as this column then the left-hand side. So this is where you control different parts of say. So let's just quickly go through them. Let's first tab here we've got with a little plus icon. This is where you'll find all the different elements you can add to your site and the different elements that you can play with. And then you also have she made layer so you can add, you know, so for a sticky navbar, a heater overlay a call to action fits or contact from the whole lot. And so these are base layer so you can use if you don't want to build something from scratch and end the second tab, we have symbols. Symbols are something that you won't see you in any other website design-build. So they are completely new and independent. Especially when it comes to the website design builders. Why symbol basically allows you to do if I create one element somewhere and see actually a section I create like an APA or something. I can turn my navbar and to assemble. And what that symbol will allow me to do so allow me to add the same piece of content, so multiple pages on my say. And then whenever I want to make an edit to a symbol, I'll be able to make that edit directly to all the places where the symbol appears. And I'll give you an active example of that later that you'll be able to see. But this just gives you a brief introduction to. And then if we go down again, we have a navigator. So when I add different elements to my website and I didn't layers, I'm adding, I'm adding different components that sound top of each other in different ways. And what might navigate it allows me to do is see the way that those elements on top of each other. So something isn't quite set and right, or if something doesn't look right and I can't see it, just when I'm looking at my bells or I can go to navigate it and I can see the way the sections are. I can see that everything's looking goods and I can see my class names, which we'll get onto a little bit later again. Which again we'll get until a bit later. But that just gives you an idea of how the navigation works. And when you're building a big page, this gives pray along pretty quickly. But it makes it really, really easy to find what you're looking for really quickly without having to click in, um, you know, a lot of mess in the boats and find what you're after, then there's an error. We have the Pages tab. This is really simple. This is just where you're going to create your pages. So you also have folders. So as you look into keeps things organized, folders is a great way to segment your pages, and that's all you really need to know about them. We'll talk about the actual settings and pages a little bit less so, but that's probably the most important place to start. Then below that we have collections. Collections I mentioned buy more, talking about what Press versus Webflow. Um, but we're not going to be mentioned about too much with collections. We're not going to be doing, we're not going to be setting up a blog or anything like that, but collections or something I'll definitely touch on probably in another course, but you won't need to worry about or for what we're doing here. And then below that we have e-commerce. No, we're not going to be touching on e-commerce, but it's probably good just to touch on anyway. So if you activate e-commerce, it's a different plan altogether for e-commerce. But this will basically if you click E-commerce and yet you have an e-commerce site and then there's a bunch of other stuff that has to do and I'll just get us out, but we're not doing that here, so need not worry. So let's just cross off. Below that, we have the place where you add all your MGs, um, so you can manage all your images here you can see the size of the Webflow will also tell you if it feels a little damage. So to bake, and this is just great to keep all your images and one easily accessible place. And then below that we have settings, so backups and you can search for additional stuff. And below that, as you can see down in the bottom left-hand corner here, you've got this check mark or the feature. And what this will allow you to do is as you're designing on a page and you may feel happy with it, okay? But Webflow analyses and it sees that there could be issues on the page that might hurt your SEO or may have. So it's performance or something that may make the website not look right, then audits will flag up and instead of having a tick mark, you just have square with nothing in it. Here. You can search for different things on by flow if you need help with Aniston and below that you've got some video tutorials if you need any more explanation of what I'm talking about, and then you can get help if you need it. But that explains all of these tabs and what they are and briefly how they're used. The places where we're going to spend the most time are definitely in this ad section. We're going to be talking about symbols are good. We'll be using navigates through a law, be talking about that a lot. And pages will be spending a bit of time of pages and those are the four that you need to focus on. So in the next video, I'm going to be talking about this right-hand column and Watson here, which I'm sure you'll be excited to hear about. So let's jump into that. 8. Webflow's Design Features: Okay, so the next thing that we need to talk about as workflows design features. So when we actually put elements on the page from the management tabs and what do we actually add to them? How do we design them? How do we make them look the way we want them to look? So I did a few really basic elements in here just to try and get the point across. And I'm just going to go through each of these tabs on the right-hand side and tell you what they all mean because they all had different purposes, but you should be able to gather most of them. So MLA section, this basically determines how things look right at where this was the leader of them. Usually you'll use the Layout tab if you're trying to add at most things inside of something. And what I mean by that is, if we take this example, I have a dev blog, then I have a heading, a paragraph and a button insight. If I want to make the heading paragraph and button horizontally as opposed to vertically, then I would click the dev blog that you can see there. I will go to the lab section. And if I click this little button to the right, you can see that everything moves horizontally. And obviously that doesn't look very appetizing, right? I mean, there's not meant to. This is just to illustrate how it works. And within that, I can change a bunch of different things. I can click away with these buttons. I can play with them until I'm happy with how they look. I can change Vasco horizontal. I can do whatever the heck I like with these, right? And that's what you would use a live far. You can use it for things like headings if you want. But I'd advise only using that if you're trying to edit things and cite a deadlock or in cyto section. But anyway, that's the layout section. Then if we go down to spacing, this is where we can adjust the padding and margin. So if I take this head and you can see I've already made a very brief edits to the heading, but I can change the margin and I can change the padding. So just to break this down in case you don't know what either of these are. Margins of space, as you can see here. It's highlighted in blue on the honor panel here. The margins of space that exists outside of the element that we're looking at. Those blue shades represent the margin. If I hover over padding, let me just see I make shows. Yeah, you can see the padding exists n, say, the element that we're looking at. So padding and margin are just a very basic way of adjusting spacing. And there's not just a wonderful thing, you'll find that you can add a padding margin and virtually any website design build or inclusion if you're building it from scratch. So that's something to keep in mind. Let me then to size if you ever need to manually adjust the size of something. And we can talk about this a little bit later in more detail. You can use a size tub, so you have a bunch of different options. You don't need to know all of these options are, but you've got your basic ones that Px and you've got percentage of wet. So if we're looking at this breakpoint, if we want the white to the element that we haven't hand to only be 60 percent of all of the what we're looking at right now. And then we can use them. Then we have a bunch of different ones here. You don't need to water it, but these are the only three that I ever really use our px percentage and then this one called View. So view, which means that the section in question or the dev blog, and we'll adjust its size based on the device the person is using to view the website. So that's something to keep in mind and view hey, is very much the same. So that size, they may have possession and static relative absolute facts sticky. You're only really going to use these if you're doing quite complex animations or when you're building your nav bar and you'll see how to use these laser on them. I have typography. So obviously far your text, if you want to change the font the way the size, height, color, alignment, style, the whole lot you can do there. You can also create classes, which means that you don't have to make myelitis to each single text-block that you ads, but we can talk about that later too. Then down here we have backgrounds. Again, if you want to change the background of a def block, or you want to make an image, or you're trying to do animations, That's all you would just for that. And we have borders. So if you want any lines, range of blocks, so you want any lines, Ranger elements you can use that It's self-explanatory, then have effects. We aren't gonna do much work with effects here. We're only really focusing on the regeneration, the structure of the site. And there's obviously a lot we have to cover here. Animations would be a totally separate subject, but there's no harm and playing about with them, experiment with them and see what you can do with them. So that's the Design tab. So then if we look up at the top right here again, we can see we've got Settings tab. So NFA could look up the top right here we can see that we've got Settings tab. And what you'll find with this as the Settings tab will change depending on what you're looking at. And because I have a heading, select deeds, I may want to choose whether this heading is H1, H2, H3 for 56 and so on. And if you don't know what they are, basically the H1, H2, H3 structure as that's the way you tell Google or you tell the search engine the structure of your page. So for instance, you only have one H1 per page and that has a title of the page of the person's looking at an H2 would be the second half of that and you get the idea, so on so forth. Again, head instructors are more of an SEO thing. We don't really need to touch on them too much here, but it's important that you know, and you're not going to have to whatever custom attributes and you're not going to have to whatever but search index settings because that, all that doesn't really matter. And then we have Style Manager. Again, you're not going to have to worry too much about this, but, and we both do something called a cleanup at the end where f was any classes which I know we haven't spoken about yet. And if there's any classes, you don't use them. We clean them up and get rid of the ones on active. And then the solar panel. If you want more complex interactions, effects and introductions, if you want to build something more complex, the fuels, those can take a bit more time. You'd use interactions panel again, that's more advanced and complex and we're not going to be really touched on any of that here. But nonetheless, it's important that you know what it is. So yeah, but really is it. So I feel like that's quite a good overview of the Webflow platform overall. There's a couple of things that we're going to have to do lay so that I haven't touched on here and the settings later on. But for the most part, I should be good to go. I will get into more details into certain aspects of wide mentioned here. But overall, yeah, I think we're pretty good to go. So let's move on and prepare our brand assets for this website before we actually start building. Okay, let's go on to the next one. 9. Picking Our Brand Colours: So now we understand a bit more about the web platform is time to stop talking about a brand assets. So when you start preparing spelled the site, the saying that you don't do when you're building a website usually don't jump straight into the design process. That isn't the most efficient way of doing things. And you may often find that things take longer than the half that because of certain stuff that you didn't do it at the beginning of the process. So the first thing I always like to do is get my brand colors and alter. And the website I used to do that as a website called killers and kills his great for generating bland palates. It's really easy to use and you can, I'm not going to lie. You can spend a lot of time in here the just looking at different colors. So let's start with January. So then see how we go on. Okay, So we can see here, this is a gentleness and kilos. And you can play around with this. You can do what you want with the type of color scheme I'm going to be using for this wipes I already know is going to be a single color. So I don't want any accent colors, I just want one good color and then I'm going to use a grayscale for all the other important stuff. So what I'm gonna do a dish to these. And then I'm going to make these a grayscale. I'm going to one for texts and then one for the contrast and color. And case, I'm doing different blocks or just one thing to pop a little bit more. So I'm going to have one color for my texts, which will be this one here. And then I'm going to have another code that I can use against the white background if I want to actually, many boxes are innocent, but I don't want it to be so dark that is going to cause a contrast. So really thorough and with the text. So let's go ahead and pick the color for our texts. If we go here and click down hex and we click pecker, right then to probably have here, think probably, but there, I think that's probably a good place for the text. Okay. So we can do that and we can lock that one. And then over here I want a much lighter gray right up the top end of the scale. Now you probably won't be able to tell here, but this color won't be used much. And it's so faint that you won't even notice it. But what it does is it helps me create a differentiation between different parts of the website and without getting too much into the face of the viewer. And it's something that the viewer won't even notice. But that's the thing of a design, good design as anomaly noticed by the person looking at it as bad designing and Moses. So I know that we're going to stick with that one. And you can see there's a very slight difference between the way up here in the gray zone here. So we'll lock that one. And then if I shift this over, and if you use spacebar, you'll be able to change the color as you can see that. So I'm just going to keep going through these until I find the color that I'm happy with. So it's a gem. So we want something that's probably quite bright, quite electric. Well that's quite an interesting color, but probably a bit too much for one day. And here, hmm, interesting though. Yeah. I don't know. I actually think I might just stick with that one for one down here. Maybe spend the bright side, but I think I could work with that. Actually, yeah, you know what, let's just stick with us. I think it illustrates what I'm trying to get. So we'll go with this color. So let's lock that in. And what we're gonna do is just save it here. And I'm going to save it as like this designing example. That's fine. Save that. Okay, unnecessary if so, that's one of the key things of bells and your brand assets the way so we'll build our color palette as simple. And I know it may seem very simple, very simplistic, but sometimes when you're doing brands and color stuff, you don't want them to be too much going on. You don't want this to be excessive color. You just want something simple and easy to apply to most areas of the site. So let's go ahead with that and next we're gonna move on to pecking our typography. 10. Adding Your Fonts: All right, so now that we know the colors that we're going to be using on a website. And the next thing we want to look at as the type of fonts. So we're going to use, which is another really important part of any website that you're designing. And I'm not going to lie the way that you do this. What's wonderful is so much easier and comparisons of WordPress like it's night and day, I always find it super, super difficult to get custom fonts inside of WordPress that when just the standard that they gave you from someone like me, when I do this all the time, it makes my life ten times easier. So what we need to do is we need to go to Adobe fonts. There we go. And we'll keep that killers tab open for laser. But I'm just going to quickly sign in here. Okay, that's good to go. What we're going to measure price fonts. So be different for you, depends on what type of website you're designing. Because I'm designing the gym. We're going to want something clean and it's quite bold, not in your face, not excessive, but something that's clean and modern and tells people that it's a gym. And so what I'm gonna do is go through the clean. You can see here, I'll just zoom in slightly just so you can see. And this gives us a bunch of different options. So what one? I'm going to go for? One of a gonna go far. Let's try luxury, not a one and it's like that and maybe geometric. Now, let's go clean. And I want san-serif, That's probably a good place to stop. And look into these. So what you'll find is, I mean, these are all just variations of the doctrine of stale, of the same style of font, but they definitely wrong way. I can guarantee it. So actually just looking at those one that caught my eye on the first page there that I think we could use this one here, Proxima Nova. And I've already used, I want to know psi is, but I think we should just go ahead and use this one handle, that one. I've used it before. I know that it works, so let's just stick with that. And now I'm going to do as creates projects. And what we're going to do. It was just going to call it Magnus gym example. Okay. Unless click Create. And what we've done there as we have, yes. So what we've done here is we've cases a web projects and value the font to the web project and the web project with crazy as what will be enforced into Webflow just in case it wasn't clear. So let's click Done. Now, I've already connected to my Adobe Fonts account, so you'll have to do this as well. But what we have to do here is go to Settings. So if you go up to the top left-hand corner, to the little hamburger and then go to Project Settings. So we haven't really touched on Settings much and we'll kinda be definitely if here. And as we go as all good stuff in here that you need to know about. But we won't go into laser tell. We're setting up for domain and stuff. But what you want to do for fonts as it goes to the font section. And you'll see here, obviously you've got access to Google fonts if you want to use any of them. I just prefer having the flexibility of Adobe fonts and you can kinda get access to fonts that you otherwise wouldn't really be able to. If you have any custom fonts you want to add, you can do that here. But really, if you insulate me, what you'll probably be doing is using Adobe fonts. So I already have my account, as you can see, and we can see Magnus Jin example down here. So I'm gonna click that and I'm going to save changes. And what that will do is it will import Proxima Nova. And so our projects. And that's it. It's that simple. It really is that simple. The only thing that I haven't touched on as well, and he's an API token from Adobe. All we have to do is collect the API from Adobe Stock and they're saved token. And what APIs do, all that does is create like a verification between the two applications. And it bypasses a level of security allowing them to talk to one another. So we've picked the fonts and there the next thing we need to do is look at our logo, right? So another really important part was a little bit we're going to look like. So let's talk about that next and start designing a logo. 11. Designing Your Logo: Alright, so the next thing to do before we actually go back into Webflow and start bouncing as create our logo. So there's a couple of good websites you can use. I'd recommend just to kinda give you a couple of ideas and the type of local that you may want. The first one as lookup. And I've used a look at a couple of times, it just gives me some good ideas and the type of logo and I'm looking to create, and it just gives me some goods, n say n to the type of logo that I might want. So I'm just login real quick because I've already got an account with them. And what we can do is I'm going to generate more logo designs. And because I was already then here, Elea doing some work on, let's say, of the order, but it's bells. There's already a couple of suggestions for Magnus gym. So let's just keep that as as so. Let's just scroll through these and have a look. Okay, so there's obviously a bunch of suggestions that has given us. I personally am not keen on any of them, but what you'll find with us, you kinda have to pick and choose what you're looking for. So if you make it like a fun and hate the colors are some of them you may like the icon behave the text know some of them. You might love the icon and the text behave the color, so you just kinda have to pick and choose. And why would do is let me just see if there's one that really jumps out. So we know our color is going to be red. So let us look for shapes that may work. That one seems interested in. Lots going on here. Quite like the weight one. Actually went ahead and I've already bow a logo that we could use, but I just want to see if there's something else in here that jumps out the arm. Don't know how I feel about that. And anyway, the point here is that you can just keep scrolling through this and you can keep looking far different logos and you can take as long as you want. It's kinda like that coolers to, you, could just sit here, click and load more all day looking at a bunch of different logos. Some of these are interesting, but what we might do is we might just stick with the logo, the outer. They went ahead and create these just to keep keep us going to pace. Yeah, I'll just do them. So to design your logo, you've got a couple of options. You can use Adobe Creative Cloud or you can use Canvas. If you're looking to quickly create a logo. Or if you've already got a logo, maybe, maybe you've used Canva, maybe not by recommend Canva for most people, just if you're getting stopped to use this easy to use, drag and drop all that good stuff. So I'm going to do is yeah, that's the logo I'm looking for here. Right. So I already went ahead and crazy the side of different red. So let's change it to the reds I'm looking to use. Come back here and let's make that alright, profits. Okay, try happy with that overall the thing. Yeah, Okay. We can just stick with that. I'm not that faster than bone. So what we're gonna wanna do is I want to make that a little bit bigger. So we're getting the foo of bang for buck. I'm going to crop this dynamics so it doesn't really massive too much about the size and stuff. And then let's download. So we'll go PNG will transplant and backgrounds downloads. And now that we've done that, let's hop back into the Webflow. So here we go. Unless, yeah, let's go back in here. Let's go back to the designer. And we're going to upload this logo. And that should hopefully put isn't good stat sites will start designing the same. So let's go to MGs. Click uploads, less here, open that. Okay, and we can see our logos in their pockets. So now that we've got a logo, obviously take you a little bit longer because you have to design one from scratch. You have to spend time getting some ideas. Logo is upright important. So make sure you spend your time on it. Make sure you're really happy with it before you put it on your site. But yeah. So the next thing we need to do, and we're going to get back into a web form will stop bells on that as we need to build a style guide. So now that we've got colors, we've got funds, we've got our logo, and we have to build a style guide. And a style guide is going to make your life much, much easier when you actually start building on this platform. So let's jump into that in the next video. 12. Designing Your Style Guide: Okay, so now that we have a brand colors, we have our typography or funds and we have our logo. It's tends to go ahead and build a style guide inside Webflow. So if we jump back over to Webflow and we're going to create a page and we're going to call a style guide now, in case you're wondering why stay all get As and like, why, why can I just go ahead belt the site now a1 wie das a bill to stay OR gate. This day is going to help with a couple of things. Firstly, is going to help when you're applying different themes, the different parts of your site. And because what we're gonna do is we're going to create classes and I'm going to explain exactly what data are as we're going through the process. But the other thing it will help you do as that. If you're also creating social content, you know, maybe you do an IPO market as well. If you're doing, if you're using different marketing methods where your brand applies, the stable gain is going to help you keep your brand consistent across all the different platforms that the urine, but above all else is really going to help you inside Webflow and save you a lot of time and energy. So let's go ahead and create a new page. And we're going to call it style guides. And that's all we need to do. You don't need to do anything about SEO. You don't need to diagnose them with Open Graph, but there's one thing you have to do. So if you scroll right down to the bottom of this page, you have custom codes and you have NSA head tag and a body tag. And you need a little bit of codes. You need a little bit of code. So that this page is not indexed by Google because of the purpose of this is to be used internally on your study. Of the purpose of it is not for it to be indexed by Google. You don't really want anyone to see it. So this page I just pulled up, it shouldn't Google Search Console itself. And we want to use a no index tag. And this basically tells Google that this page that we're looking at should not be indexed by them. We don't want it to be indexed. So what we're gonna do is we're going to copy this code here, copy it, and go back to Webflow. And we're going to paste the end head tag, okay? And that's it. So this will stop Google crawl on this page and I'll just Google any search engine. It'll stop any, any search engine bought crawl on this page and index node. So when we've done that, let's hit Create. Now we have our style guides. So what we're going to be doing with the tailgate is we're basically going to be building the theme of our website. And just to give a little bit of a comparison here, you know, we'll be talking about WordPress quite a bit on wave for you basically create your own theme. There's not a Wordpress where you pick one. You can pick templates for layers and the type of structure you want your site to follow. But when it comes to themes, fonts, color, design, animation, stuff like that. We have to build style guide in order for that to be the case. The way I like to describe Web floors, it's basically as a no code development to like this is the closest you'll get to coding without actually having to coats, okay? Because the fundamentals of this platform is built from as closing. And that's, that's the truth. So the way we're gonna do this as well, we have to just follow along with what I'm doing. Here. I'm an apply the same thing as dependent on what fonts and colors you're using. It may be slightly different. Let's just do an a section. And then we're going to throw in, I'll just throw in a container here for now. I'll talk about my tricks with containers laser. And then the first thing we're gonna do is we're going to, sorry, the headings flush, that's going to be the primary thing. So let's just add these in here. We're going to add six of them. Okay? And then under each one, we're going to add a paragraph. Okay? So let's talk one we're going to use here is going to be our H1 headings. So this is the title that will be used at the top of every page. And 40 H1 we want to do, first of all one thing. So it's already marked that one. But before we start editing this and make it an end to errors and making it reflective of the brand that we're trying to achieve. We want to give a class and we want to call it, I'm going to call it basic one. Yeah, that'll do. We're going to call it basic age one. Click Create. Now what I've just done is created something called a class. And the best way I could describe a class as a set of brand features or brand themes are designed features rather that you're applying to a particular say on your website that is independent of anything that doesn't have that class. So I can apply this class to all sorts of different elements, any edits I make here. So H1 with this class, so long as I apply that Teller, which ones across my say, the same theme, the same design principles will be applied. And that's a key point. So we have basic H1. And what I'm gonna do here is this, is this good at to the I know of that you can use that will help with sizing your headings. So Web say, I think this is a correct one. Wasn't that one. Give me two seconds. You can really use any of these. It's just personal preference, but there's one particular one that I find quite useful. And it was this one. No, I think it was the one just below that. This is one. Yeah. I quite like this one when I would use. Okay. So what you're gonna do here, as you're gonna put your body text font size, I recommend you stick the 18. And the minimum really for your website should be 16 by always recommend async because it's just good for usability and accessibility and making sure everyone can read what's on your site. And then when you put the n and that's going to tell you what all the other head incisors should be across different breakpoints and based on that, based on that paragraph size. So you can see here because my body font size will be 18, is basically saying that my H1 on desktop should be 54. It should drop the 45 on tablet and then 36 on mobile. So let's go back and apply some of these to our H1. So the first one we have is 54. So I'm going to make the size of this list. We have to go to the typography. So let's collapse all of these schools to typography. So we can see it's a 38 China. So let's make that FST for COPD. We've increased the size of it. And why wouldn't hear? Let's just change it to the fonts, font spawn that we want. And let's look at the color. So this was a color that we want to maybe fairly similar to the one who's already got here. Okay. Just slightly different but pretty much on the same line. Okay. So we've done that and now we want to make sure that the right font sizes apply. It's all these different breakpoints. So as you go up the scale, as you get closer towards the beggar, a breakpoint, it doesn't really matter. The only really matter the size of the Haden's and the whole thing scaled down as you go onto smaller devices. So what we're gonna do here is we're gonna go to the tablet. We're going to take the tablet number 45. And we're going to apply it here. Okay, no scale that one down. And then we're gonna go to H1 mobile 36. And we're going to apply 36 to both the horizontal mobile. I'm just a normal Volvo want to self okay, profits. So that's one softly, It's basically an IB scale up. You can see that it stays consistent and we keep effective for as we go all the way up here. Right? So now we want to move on to H2. So I'm going to call this basic H two. Okay, so we just want to go through that same process again. So let's make this topography, you guys get it back to Proxima Nova. Let's make sure that we use the right colors. Like mentioned before. Bolds and endless go over here. So for hedge to desktop, we're looking at Farsi one, Sweden, right? Unless you know that skills down. So we're going to force you, foresee 1, 36, then 29, backup, SAP again, a stage three, back down to 0. No thing that I forgot to mention. This one, I forgot to add a class here. And that's a good point actually. If you don't create a class before you do design work on an element. Workflow will automatically assign a class, but you can change the name of the class any point. And so this one is just being assigned head into. So I'm gonna change that and I'm going to call that a basic H3. And another thing to point out, when you make, when you make a class and you call it basic HCI is particularly for titles. It's not going to automatically change assessing in here. So for instance, I don't think it's on here that should be marked as H two. And this one here should be marked as an H3. Okay? So that will really help you out a little bit. Okay, anyway, let's move to H4. So basic h4. Okay? And now you can see the H4. When we get into 20, things are starting to get pretty small. And actually I probably won't go past H4 and this instance, and I don't, I don't imagine that we'll we'll use more than a page for when we're built on the site. So let's keep that. We've named the basic h4. We want to make sure it's marked as h4. Back over here. Let's see. I imagine yeah, they will all stay is 20, regardless if I fall down, we go. Okay, good, good. So let's just actually use because we don't need these anymore. I don't think we'll need them, but no thing we wanna do. I'd like to do here. So what we wanna do is edit the paragraph and I'll advise you what to do here, but we just want to name this class Basic Paragraph. Again, we're going to change its approximate ANOVA. We're going to make the size 18 like we spoke about. Okay, cool. As you can see there, because we've increased the size of the text and this, and this paragraph without actually increasing the height. It looks a bit funny. It looks about tight and condensed. When it comes to send the size is far. Your basic paragraphs. Why would advise as increasing the hay? Change it to percentage. And then you're going to be looking at somewhere between 125%, 165. Usually I would like to go usually about 145, which yeah, I can live with that. That looks okay to me. Yeah. I can add to that. I can live with that. That looks good. I think. Let's see how it looks at 16. 5 actually is so you can kinda play with usually. I mean, you don't want it to look to space. It just doesn't look, you know, it just doesn't easy on the eye. You want to just look space so that it doesn't look trends really, that's what we're going for. So I think that's fair. I think that's a good that's a good place to start. I'm just trying to think she would go 17 or 16. Maybe for this website, I think we may go for a 16, actually, 16 px in terms of basic paragraph, Hey, I think that may be more appropriate. So we'll go 1 65, and hey, 69 size. Yeah, As I said, I mean for polygraph height, you've really gotta take as it comes, sometimes fonts will look slightly different if you're using different fonts with them. And that's where really the size and justice. So one thing can, for this one, as it will stick with 16. And we've defined our basic paragraph. Let's just quickly copy this color over. Okay, good. I'm quite happy with that. I think what we'll do is we'll just apply this class across all of these Haden's just so you can get an idea for how they look with different Haden's. And then I'm going to mark this is heading one, heading to heading three, and then four. Okay. I'm quite happy with that. I think. Yeah, I feel good about that. So what we're gonna do now as that, that's the, that's the main stuff. So like I was talking about before, that means that you can basically take this basic H1 you can copy and you can apply it to other places on the site. And the style guide will remain the core of what these classes are all about. Now you have something called combo classes. If you ever have to change one of these in a particular page because the color isn't right or something like that. And I'll show you how to do that a little bit, Lisa. But this is the main stuff. But this is the main stuff. Now. Now that we've got the text or the way which was one of the core components. One thing that we want to do, um, as add buttons, okay, so let me go back here. I'm going to pull over a button and we want to come up with a design for 40 button, right? We want a button to be reflective of a brand. We want to also for n. So what I'm gonna do here is we're kind of topography at this point and we'll look in more of its size, backgrounds, and borders. So what I want my button to say, most buttons will say Learn More standards. And I want the text obviously to be Proxima Nova. I want the background to be lovely, red that we picked out. And move that back over. Let's get into the backgrounds. All right, Sweet. Okay. Now as you can see, it still looks a little bit. I'm like it's just a basic button, right? So let's make the text bold. We're going to make the borders, but curves now we can either, either pill it re n, so it looks a bit more like that or we can just have it ever so slightly. For me, for this, I am thinking that we're going to keep the I think we may go fill in. But because we've done that, what we need to do is go back up to size, no size. So I have any SQL to spacing. It means to add a lub and more padding to the edges here. I'm thinking maybe theft say yeah, I think that's a reasonable naturally know maybe 21 thing that you'll find when you're going through this is you'll be playing a plane about a lot in it. We're trying to figure out what's best. So I think that's appropriate. And one other thing that we're gonna wanna do is we want to just make it not pop a little bit more, but we want to smooth those hard edges. We've got run the size of it. Um, I think it looks okay. I could probably I could probably use that and feel okay about it. But one thing that I'd like to do as when we go to Effects, we have a pasty, add a box-shadow, right? So click plus on that. Not so basic paragraph thus, no, I want, I want to on the button. Okay. Now the thing about this, when you're adding bulk shadows and you don't really want them to be noticeable plate we spoke about again with, you know, good design is design as an oocyst. That's usually why I would say, we wanna, we wanna make sure that our users aren't going to feel like, oh, that looks about how it doesn't look quite right. So we wanna take the distance. I should know we can leave a one thing I think I can leave. You can leave it at one blur on the blush to be quite high. But we want the size to be quite small. Okay. You don't want use those noses and that was any kind of blur there. And we don't want to jet black, we want to pull it down maybe to the same shade of gray that we're using on the text. Okay. So you may not be able to notice that you actually know you made. Those are very, very slight blur around that button. That makes it stand out a little bit more, gives a lot of more texture. And, but not so much that it's going to get in the way of anyone looking at it. I'm just going to feel uneasy on the eye. That's the point I'd make. So that's a button so we can copy that. Oh, last thing we have to give that class, so we're going to call that basic button, right? And we can apply that class to any other button that we add on. So site as well. So let's just copy that. Actually, no, we can duplicate it and we can just see how that looks and other areas. And I know what you're thinking. What is the degree? Yeah. I mean, tell your brand like the thing that is Azure brand develops, you can use this page to keep developing different aspects of it. So for instance, if I want you to add an accent color here, I want you to do different stuff and yeah, I had all these different colors going on and maybe I wanted to add another fun. This is the place where I would do the work in order to make that happen. Now, now that we've got the button, we've got the text, I am pretty high, fairly happy with them. I make tweaks the button again. I might I might tweak the button again, but other than that, I don't think I'm gonna do a great deal. So now the last thing that we wanna do here is obviously just for ease of use ID then a section here. I didn't Webflow standard container, I'm actually going to show you here, has actually belt the section and the container. Because if you're using these higher breakpoints like we spoke about, you've actually got a little bit plain about it, so all plays nicely. Let me talk about that now. So what I wanna do as I went to a deaf block right there, now, I'm kinda reverse engineered and that's right. When you're building it, you're just a section and then you put a dead blog venue sides and stuff I should have led with that. Forgive me. But we're going to do that. I'm going to pull this the block. So I'm going to pull all of these elements enter the deadlock. So they should all just drag and just like that, quite time-consuming, but we'll get there. Okay, notice and now I just want to shift that does block and I don't want to ditch that container. Now you can see that when I had the deadlock and like I spoke of a like, there's no difference between a deadlock in a container and the container is just a dev blog. The Webflow is played out with a little bit. But what's this section while I wanna do is I want to give this a class today. I want to call it basic section. Yep. Can't spell basic clearly. Basic section. And in terms of layout, I want to go to that box on the right, like we spoke about before. I want it to be vesicle and I1. Yep, I want that there. No, I will not I will not like that. You know, I went out there and that's all we want. Okay, So while happiness, this section, we'll scale regardless of what size the devices that a user is looking at. What the deadlock things changed slightly and I'm going to talk about that now. So what we're gonna do is go to def block. I'm going to call this basic container. Now what we wanna do is want to leave that like that. Then in terms of weds, we want to set our max weds to the width of a base breakpoint. So we want a max-width to be 11, 7, 8. And we want to be Let me see where we're at 99 to. And then what we're gonna do is set the actual weights to view what's that one? Hundreds. Okay? And then what we also want to do is with padding, you never really want to elements hadn't the site of the page like this. So what you wanna do is add padding on each, say probably fart, say yeah, yeah. Yeah, yeah, let's start with FAR. You will see as we go on, you can always come back and change this if if if you change your mind, but yeah, we'll set we're far from that. And then as we move up, okay. You can't really see it right now. But this should hopefully let me just them. I'll zoom out slightly and show you here. Okay. Right. So, so if you can see this, what happens is the section, as I go up, as I go out, the section is increasing. The section is increasing in width. But the way I've set this section as so the a keeps the basic container centered regardless of what size the section As. And because we've set these restrictions around hypha that container can go out and it's not going to stretch too far as the screen gets bigger. This is a common thing you'll see on most websites because they don't. Because what happens is if you've designed something perfectly on this base breakpoint 0. And just for the base dimensions of a website, if you pull it out, you'll lose all that great design, all the great stuff you've done with it. So it's best just to keep things sensor to keep all in place. And that's why we do this. So I'm pretty happy with that. That is the trick when it comes to containers. So now we have our basic section and have a basic container. We have our basic headings and we have a basic paragraph. And I'm overall presi happy with how it looks if I'm being honest. Okay. So we may be thinking, Well, no, I've kinda got stale guide and play. Well, the next thing we have to do is we have to go ahead and create our header under FIFO. And that's what I'm going to move on to next. And what we'll do is when something comes up, we're going to think is appropriate and this is why I usually do. I usually start off with this as my studio gaze. And then when I think anything else needs to guide, he's in here, like for instance, say a 10, I don't know terminus of button, right? There's not that one. It looks a bit different than that fits a different type of design. And I'll come back and I'll design a different button with a different class. And you can do this for all sorts of things, right? Yeah, So now we're gonna move on to designing the header, which is a really important part. And then we're going to design the Fisa. And then we're going to start filling in the blanks and getting I'll say it looking good. Okay, so that's a big one out of the way. Let's move on to the next one. 13. Creating Your Sitemap: Okay, so now that we've built stay OR gates, it's time to actually start building the heads are an officer of a website. But before we do that, There's one last thing means is a belt, a sitemap and pages and Audra. And sometimes this step in the process can be skipped. It depends on the size of the website you're building. And by light to include this anyway, just because I know that you may be built in a larger site was more pages and F, So that nece, maybe something you want to consider. So every website will have something called a sitemap. And a sitemap as Google's way even chatbots in the structure of your site and what pages are important. Now, sitemaps aren't only for that though, there are all sorts of help you keep track of what pages would build in a more pages are important to you. So why do usually, I usually just use us to call glue mouse, but you can also use the likes of Lucidchart as the name. Yeah, you can use Lucidchart. I've used Lucidchart and the past, and they're really good if you're trying to build this type of stuff. Let's just visual wireframe, but that's why it's column. And that's what you're doing when you're building a site map. So the pages we're going to have, if we're kinda drawn these up as a hierarchy while the homepage will have the about page. And we'll also have a lot of services page will have a pricing page for different packages. And the last one that we will have as a contact page. So let's just pop that into. And now we've got 15. Yes. So that's roughly that's about the size of one. We've got five page website and I can live with that. So what we wanna do with this, now that we've got our sitemap, as you can save this, you can download it, do whatever you want. And you've got beggar website, like I said, then you're probably want to keep know that somewhere or keeping the heap, you know, an active document on gleam obsolete we've got here and just add it to every now and again, if things are changing, much more clarity on the contents of your site and most important to you. So now that we know our pages, Let's go back to Webflow and one last thing, wipe flow will actually generate website sitemap for you. So the one that Google will reads Wherefore will automatically generate that for you so you don't worry about having to do anything else other than that's when it comes to your site map. And this is just to help you. So when we've done that, let's jump back over. So Webflow, and we're just going to quickly create our pages. So we have our style guide which were not index, and then we're going to create a new page. So let's call this one abouts. Again, let's note what I've SUR, anything like that at the moment, let's just create these pages. So we have the webpage. Next we're going to go for services. Let's create that. We're going to have pricing. We are going to have contacts. And we are going to have a contact page. Okay, great, So let's create them. And let's just clean the Apollo band. Make sure the style guide isn't and the way. All right, great, So now we've got all our pages and that's it. So the reason, again, just to emphasize, the reason why you'll want to save out. The reason why you'll want to draw one up is if you have a beggar website, if you've got more pages, that's why you'll want one, because you'll want to keep track of things. You may want to consider purchasing CFS and pages into folders. So yeah, if you're building a bigger website, then I definitely recommend drawn up a sitemap. But with that being said, let's crack on and get on to building our header. 14. Building Your Navbar: Okay, so now that we have went ahead and created our pages, we've got our sitemap and all that stuff. And now we want to go ahead and create the nav bar and the fissure. And this video, we're just going to be looking at the head of the navbar. And we're going to be built in that. And I'm going to show you step-by-step how to do that. You can really do all this stuff in any order you want. I just think it's best to those to get the navbar in the viscera of the way. And mainly because they will be symbols, there'll be things that show up in every page of the site. And it's a fair chunk of whatever design what you're doing out the way when you've got both of them done, I just find that good way to break the workout video and it works for me. So it may work for you to. So I need to do this. What we're gonna do is we're gonna go to that plus sign at the top. I'm just gonna put myself over here. And we're going to scroll down to the bottom. And you'll see navbar. And we're going to pull that up here. Okay, So remember when I've been talking about containers and how they're a little bit funny. The ones that Webflow gives you what this container, you're restricted to this weds of container. And we don't want that. We want to be able to use the space on the left and right-hand side. And now in order to do that, we have to monkey about Othello bed before we start doing all the design of stuff with that, we want to get our structures in place. So it hasn't navbar. We have the container, as you can see on the navigator on the left-hand side. And then say that we've got brand feature and then we've actually gone Nav Menu was our nav links and cite it. And then we've got a menu button which will show up when we're on mobile devices. But what I want to do here is I want this container to be the food webs. Now, I don't want to monkey with it with this container because it's not going to let me, it's restricted to new towns of what it can do and it's not going to let me feel that's the full-width. So what I wanted to do as a ticket that block, I'm going to drag that into the container. And I wonder if all of these things and say that diblock and we'll name rename and a second malicious pull all of them and I'm going to pull that out. And then we're going to ditch the Container Insights. Okay, and now look at that. We have a full-width and what we're gonna do here is we're going to call this def block nav bar container. Okay, great, So we've created that glass, which is just a different type of container because what we don't want as the settings and the structures that we're going to put on nested block will be different from a basic container so we don't want to mix them up. So now that we have that in place, let's just do a couple of things. So a lot of the work that you'll do with the navbar and the Fisa. And the reason why it can take a little bit at a time is because you're trying to put the structures in place that allow it to be responsive. We spoke of it responsiveness and breakpoints. We want a website to scale properly. And in order for it to scale properly, we have to put some restrictions on certain shut and breakpoints in order for it to work properly. Because for this base breakpoint, you'll find that it's applied for a range of devices are small and larger k and the navbar will get pushed Enter and it'll get pulled out. And we want to facilitate that. We want it to be responsive regardless of what device someone's looking at it on. So what we're gonna do, as we have the navbar here, we have the navbar container. And the Navbar section. We want to leave it as is just like that. Okay? And when we click the navbar, what we want to do is we want to click this button here to the right-hand side of our display. We want to click that and then all this will look a little bit funky, but just stick with me and you'll see how it turns out. So then in terms of direction, we want it to be vasco. Ok, and you can see it's, it's kinda switch back to what we were looking at before. And we want it to be centered here. Now again, those n, The whatever. And then we want it to be completely aligned here. And that's the reason why we're doing this is because we want the nav bar to stretch out as far as, as far as a display goes, as you can see that when we move up, but we want our nav bars to stay consistent with the rest of the website. So to do that, and we sat in the upkeep, the navbar censored regardless of how weighted goals and a desktop display. And but what we need to do know that we need to get this container the right What's height? So what you're gonna do is click on that box container and then you're going to put, um, some conditions on it. So the conditions that we're going to put on, you're gonna go to size and then you're gonna go to men minimum. So you're gonna go to Size. And then what? You're going to click vw, which means view. What's OK. Now you can see that's all expanded, but we're going to set that to 100. So view as like we spoke about, that means regardless of what device someone's looking at it on it will be the white of the display. But we want to put some restrictions on that, okay? Because we don't want we don't want the view what's being applied when we got to some of these higher breakpoints. So not just to get round that, we have to put some restrictions on it. So we're gonna meet the minimum wets. Let me just see here and it's just ever so slightly. Yeah. Okay. Okay. So we're gonna make the minimum width 992. And we're going to make the maximum width 12, 79 profits. And then now we're going to go up these breakpoints. You can see how the navbar, and as it expanded all the way out, is staying where we want it to be. So let's go back down. So base breakpoint. In terms of hay of a navbar less quickly, just check our height or how you should be or an ACP x for this. So 60, I'm thinking I'm thinking we're just going to bump that up to 70. Yeah. Maybe it's immediately say Yeah, I've I much prefer the AC. It just gives a bit more space, more space. So now what we've got here, we've, we've kinda saucy that some of the structures of a Napa. But we can see here that a brand we're a local is going to be. And then our navbar too close to the edges we want, we want, we do want to let us be a little bit of space between them. We don't want it to loop two clusters. So on a container, what we wanna do is we want to add some padding. And the thing I'd recommend you add is 40 px. That should be enough for what we're doing here. And I can just give it a little bit space. It gives us some room. And what you'll find is when you design a website is the real BC of a good website as in the space around the text and the images. It really heavily contributes to how people perceive a website, but we don't need to get into all that here, but spaces more important than you may think. So now that we've got that in place, we want to start shaping up these lengths. Now, I know you're thinking you're probably, well, we haven't touched on tablet or mobile devices. We're gonna go into that in just a second, but let's just focus on getting all looking good on desktop. So let's add a page. These will go home about contacts and let's just double-check our pages. We need hope we're going to actually read of the homepage on the navbar. I'll talk about that in a second. But we're going to have about services pricing and concepts, okay? So we're going to duplicate that. Bot Services, duplicate that pricing. And then we have contents. Okay, great. And we're going to ditch the home. That and I'll tell you why in just a second, but that's what we want. Okay, great. So we're kinda go or pages and place. The next thing we want to do is add our brand logo. Now I don't know if I make changes about a little bit. You just have to stick with me. I'll see how this looks. But let me put an image in here. And I'm going to choose or logo, which is a bit vague, but just stick with me. Yeah, So why I made this I think I may take this out and I may just go with the weights without saying Magnus Jin. There just may not. I just don't see really any poppers for that and we want to also stay consistent, of course. So let me just take that for the moment. Okay, and now I'm gonna go ahead and edit this local. So it shouldn't take, it should take two seconds, shouldn't take a long time. Okay, We've got Magnus gym here. Let's get rid of that. Let's get the sense of re, download it. Let me think. I want this little low but smaller yet you don't really want to have a big size damage. And I should actually talk with us a little bit more on AI standard. When you're uploading images and stuff to your website, you want it to be a JPEG format weight and when it can be. And the reason when you use a PNG image, if you want a transparent backgrounds, usually, usually that's the only tine you'll use a PNG image if you don't require that, you use JPEG because it's a smaller file size and it won't Hartley performance of your website. So what's this? We obtain that PNG is transparent backgrounds and we're going to download it. And i'm, I'm gonna do is quickly coming here. Pull this up and open up this and quickly edit. So all I want is this one absolute, as close as I can because we don't want it to mess up anything. Okay. That looks good to me. Okay, Great. And now if we go back to airflow, I'm going to go back to my images and I am going to upload that. Great. So let's go back to full screen again and keep going in there. Now again, we're just going to stick with us a little bit and just see oh, I'm looking at that. It looks a bit bloody. Nearly there, guys, the liver. Then we'll double one more time. Keep it a 500 plus timeline. No transparent background and back over here and move guess, upload this again. Okay. And what we'll do is, isn't playing too nice them in terms of size and proportions and stuff. So just that with me. I'll be okay. Okay. So got pages in place. We've got a little there. It might not look too great right now, but just stick with me. Right. Now. What we want to do next as we want to start, again, That's looking a little bit better. By the way, what you're gonna do here, Let's brand link. As you can see on the left-hand side, this is going to be the link to your homepage. You'll find that most people will click the little one a website expect and that's take them back to the homepage. So we're going to link that. You're gonna go to settings. And you're just going to click this page button here. Choose page, and click. Okay, now that's that soft. It's actually, this is another thing you can do with the container. This is where I think some of the problems are coming from. Go back to Design. And yet we call that an entrepreneur Leo I think is just lacking ever so slightly horizontal sense of, ooh, there we go. That's better. And then, and what? Yep, that's it. Okay. So we want to eat. So let me just explain most of the what was happening was the image got beggar, It's the logo got bigger. And it was, it was pushing out the proportions in the center alignment of the nav links. So what I've done here is I've just went back to the navbar container. I went to layout and I've changed a change. It's a different setting and ensure that its sensors, everything that's insights, the deaf lot we container. And then I've justified it by making sure that everything is going back as as white as it can go. Permitted the restrictions that were put in place. Okay, so now that's done. Let's go ahead and quickly just link up these pages. So we've got the About page, the services page, the pricing page, and we have the content page. And we're going to do something interesting with the contact button, which I'll show you in just a second, but let's click contexts. Okay, great. So now we have everything in place. Just about know what I wanted to hear. I want to start getting these more. And one that's more on brand. I want it to look a little bit faster because I know it doesn't look too good, right? Like it just looks like a logo and a couple of links, right? That's not very good. So the navbar, we want to change the background first. Let's get us designed a little bit better. So the background, we want to be white. And then within that bone itself, I wanted it to be some kind of box shadow just to create some kind of differentiation between the navbar and the contents of the website. So like we spoke about again, when we put these box shadows in place, we don't really want them to be that no school, they should just flow with the website. So distance we can keep enough of that. So I'm going to keep it at 0. Yeah, blur, take that array up, size, we're going to take that down, but maybe bring the blood down as well. So move the actually, I think that probably the sweet spot for me. Yeah, I'm happy with that. Okay. I'm happy with that. Okay. So that didn't know that's done. We can see the differentiation between the website and an app bar, which is exactly what we want. And now we want to change these nav links and get these abnormal. So we've linked them up, but we wanna make sure the class properly and that they have the correct font and stuff like that. So let's correct class. We're just gonna call it navbar link. Right? We'll take that class. I'm going to copy it. So these three. All right, great. So now what will happen is we go ahead and edit one of these. It'll add all of them photos. So let's go down to typography and we're going to change it to Proxima Nova, like we spoke about. Great, That's already looking better. And we don't want 14. We want at least 16 for the napa, probably over there. Okay. And that looks good to me. I'm feeling whatever that. Now we want to make some edits to this navbar link. So I want the contact button to pop a bit more Mainly because that's one of the pages that we would prioritize when building the site because we want people to alter the contact page that we want them to get in touch with the company. So I'm going to highly less button and I'm going to do that. And I'm gonna do that by making it seem more like a button. So you'll see what I mean in a second. But I'm going to add another class here because we don't want all of these buttons to be attitude. So we're going to create something called a combo class. And this is where you have one class and then you have another one so that you can edit the foundation of the class you already have. So I'm going to name this CTA, call it nav, nav link. Cta. Okay, I can live with that. Let's go to backgrounds. And not that matures at open. Quickly open this up. So what I want here, let's put that in the background of this link. Now you can see, I mean, it looks okay, it's all right, but it's just a box with black text and the contrast isn't very good. So we want to clean that up a little bit. So we want to make it look like the buttons that we crazy don't know, stay OR gate. So we have to change the borders a little bit. We have to take them up to the 23 mark I mastered or just the padding and say it's I'm here. So we want to make that I think maybe not quite ten, probably fortunate. And I know you're thinking you anything all right, That doesn't look right is too high up. But I'll show you how to fix that in just a second. So we have the length and we want to change the text to white. And I think I might make these Bolds. I haven't quite decided yet. Yeah, let's make these buttons bolts. So nav link, we're going to go for bold, something that would be much better. And if the color is actually of the links, we didn't change that. So we want to make them a little bit like so. Okay. So that's what we're so Brent. Okay, and now the reason why you may be thinking, well, essentially the container, so that shouldn't be happening with this button. But the reason why it's happening is because this person is actually in saids, the nav menu. So we actually have to make edits to the nav menu in order for that to be sensors. So we have to go to display. We have to go to V naught. We want horizontal and once centered. There we go. Last one we want to, and we want it to be filled with, okay, now that sends those. So now we've got some differentiation between the standard pages and that would use just for informational purposes. And one of the pages that we would use for lead generation, which is useful. And now, one thing that I usually like to put, and I'm quite keen on putting on a top block above the navbar with other information or other links I do on some sites are usually about beggar, RFQ, particularly for local business. If you expect people to contact you by phone or e-mail, or that's what you want to push above and beyond the contact page or any other generation methods. I always think it's good to put and the numbering email there. So that's why I think I'll do here. I'll just show you what to do because it demonstrates one of the other good features about Webflow that we haven't really touched upon yet. So I want another div block and I want to put this above the container, so still within the navbar. And why am I also going to have to do with the navbar is increased hate to also, right? So now I've got this dev blog and I want to make this top, Top Nav, what we'll call it top knot. I'll just call it top Navbar. That'll do. We want to make the web for this again. We want, we want this to be, we want this to, what would we like this to be? We want this to be a hundreds. Now we want it to be a hundreds. And we want the height to be like 20 as Schnupp statue or Farsi, maybe thats a yeah, I'd say that's fair. And then what I'm going to have to do here, I'm going to have to increase the size of this container. Probably. Height of the container. Ac Yeah. We want I see. Yeah, yeah, that's where we want it. Okay, so now we've got a top navbar. We actually want to put another dev blog and site if you're ok. So just like what we did with the so yes. So just like what we did with the container, we want to set that, saw that. And it's not going to expand too much. It, everything's going to look at a proportion. So I'm gonna take this read real quick. I'm going to say that as the backgrounds. Okay? And we have another d-block here that we need to work with. So let's do some, some of this. We're going to call this Top Nav. And full, right? Same again, we're going to make, I think, I believe the hate statue. So we're going to make that faster. And because there's no contents in this problem and I'm going to do very much. Nope, sorry, that's the wrong place. That's why it's actually right. Great. Now we want to set some restrictions. View It's a hundreds. But we want restrictions spoke about before. So 12 79. So minimum would be 1902 and the maximum width would be 12 79. Right? Now a second, some information up here and see how we go on. As I want some text and let's put some text in here. Nothing crazy. Okay. So I'm a name. I don't want another one for my phone number. Now, you can see the other stacking up vertically. We want that to be horizontal. Okay, great. So we've we've changed the horizontal food webs. So yep, That's awesome. Actually, I think I will not on the IEP. I think I'd like it there. Yeah. And that's what we'll tend to say. They can't decides. Yeah, I actually will keep on the right. We can keep on the right. And we want to put some padding in there as well. So we're going to make that fossae packets and then end here. What about random number? So I'm going to UK, so I'm just going to put a really random number, so plus 44, 23456. All right, That can be one and then I'll just put contacts. It's Magnus Magnus issue. I can't remember the name of the domain of this website, but I'll just call it nine is Jim.com. It doesn't really matter. Okay? And then we want to give these little classes. So navbar, mobile number and e-mail address. Okay, so let's get these on-brand. So we're going to put Proxima Nova Condensed just normal. And make it bolds. E ipa, make it bold. And we're going to stick some padding around it because right now the email address, number of fascicles together. So let's make probably 10, I think, and then 10 here. Yeah. And then we want to make it white. So their grid. Yep. And then here we want to put, again, we wanna do very similar things. So we're going to put 10 right? Thing there. Okay. Bolds. Yeah. Yeah. Can work with that. I come up with that. That's good. All right. So the feature that was going to show you when it comes to this part, as you can actually set these links on the website to open up either, you know, if you're looking at a website on your phone, you can you can set it so that it opens up. The Parsons and dialer are far e-mail. You can set it so that it opens up this person's like Gmail or Yahoo or email. But you can set it so that opens up the person's Gmail to send an email, you know, stuff like that. So if the number we want to but and that's what we're gonna do. So the next thing we need to do, I'm kinda doing this slightly backwards but just stick with me. You've done that, you're going to want to add, then. Let's just see, you're going to want to add link block. We're going to add one. You're going to ask what? So you're going to want to add to link blogs up here. It's really easy to. Another, we've done that link block. We just want to put a number and email and say the link block. Super easy. There we go. Now we can see this is a nice, ugly blue line under that. So we want to get rid of that. Going on here. Decoration. And just like, Nope, don't want that. And same here. Just click Nope, We don't like that. And again, you don't really need to whatever classes for link blocks, it's not that important. It would be important if you're trying to dictate how things looked inside the link blog, but we're not, we don't need to whatever that. Okay, so if auto number, we want to add a link. When you click Link settings CEO, you've got a mobile phone here. I'm going to click that. And then I'm just going to actually just copy and paste this number real quick. Copy and paste that. Then link it to stick the number n. And if anyone clicks that number, so looking at the website, it will automatically open up a dialogue problem. And now we want to do the same for email address. So with that, we're going to go to settings and we'll get email right now. So the e-mail is going to be contacts, Magnus, Jim.com, and then subject is going to be just just say let's just say membership and choir membership. And okay. And yeah. So so yeah. So note on that. Okay, so now this is looking Besso ray is night and day from what? From what it was before, but I still feel like it's looking a little bit bare. And now that I'm looking at it, I think is because of the logo. So I'm going to want to go back and maybe going to want to play with a little below. But let's see if I can get something working there. Because while this looks okay, I can't say that I am completely satisfied with it. So I may have to play around a little bit here and see you. I can go on. So if we go back to Canva, so if we go back to Canva and we have a local here, I probably want to go to I think I'm going to put back in what we had to buy. Magnus, put the name of the gym back there. So I'm thinking we can make this a little bit smaller. Take some texts at it. And I'm just going to put Magnus, Jen. And it doesn't lift and there's something not quite right with me. I think it's because I don't like this being horizontal. So what happens if I'm me that, you know, that could maybe work? It doesn't really matter. I mean, the point here is just to illustrate that you have to put your logo n. And so many different ways you can do this, but I just wanted to pop a little bit more. I want us to be yeah, bit more going on. So take my gray stick it right there and I can make that go a little bit closer. Yeah, I think that's a little bit better. I may add to the magnus may add it in here just to give it more. What's yes, more like it? That's more like it. Okay, and then I want to just change this font. So let's see if we've got books, you know, Nova in here. Nope, I'm not a fan of that. So may just have to stick with monster that. Well, you'll find those if you do use Canva, you're restricted plus what fonts you can use and what fonts you cannot use. So just keep that in mind if you do choose to use Canva. But I think I can live with this. It'll do for what we're trying to do here. So let's take that and we're going to put onto a site again, actually in one more thing, I wanted to just that line-height. Ever so slightly. Yeah. That's better. Yep. And then I can pull down the size of this over again. Much so I don't know if I might look for a different symbol here. We've got the elements. Yeah, I just want something that's not as horizontally driven. So maybe I'm going to go for something like it doesn't have to be anything crazy. It can be whatever you like. You can be wherever you want it to be. You know, you may end up go ahead and create your logo on Illustrator or Photoshop or Y v You may do. The reason why I didn't is just because that is a totally separate course. It's a totally separate video. So I may just take let me just take this one. I should know I may not yet none of these none of these are light gray if I'm being honest. Yeah, I think I'm fortunate. I'm just going to have to stick with what I've got here. Actually, maybe I could use this one. Now that I'm an advocate of bodybuilding or shown off your muscles, but that seems the best. Just from a design point of view. That's quite interesting. Yeah, it's quite interesting. Yeah. Right. Anyway, flatten over. We can just go with us from that needs to change again, we can, but it's not that big a deal in the grand scheme of things. So we're just going to take quickly edit this down. So I think like when it comes to designing your site and stuff, you will find just the probabilities right now. All right, you know, like I'm having to edit, I'm doing a bunch of edits complain about with different stuff. And that's what you do to be honest, when you're designing, let's say you spend, you spend time plan about because you're trying to find the right combination of what works and what doesn't. And it really is. You have to go with your gut level, but, and you just have to use a little bit of intuition, at least in my opinion anyway. Some people have different processes do things definitely for me. It's just more a case of view sky go in and play. And that's why that's why I would say you got to go in and play with it. So let me look at that. I'm happy with that. Yeah, you know, I may come back and play with the layer. If I do, I will not do on, on this video. So let's just leave it as that exist. Fine. It's just my perfectionism coming in. But with all that, we've got, yeah. I'm pretty happy with that overall. I mean, there's not a lot of pages on the site. There's not going to be a lot of pages for your state, you may have a lot of pages, but I feel okay with us at least for the moment. So I'm trying to think, is there anything else we need to add here? I don't think so. I don't think so. So yeah. So what we wanted to know as we wanna make sure this looks good on tablet and mobile devices. So let's go to tablet, right? So you can see there because of the, because of the restrictions that we put on navbar and the main breakpoint as applied them to all of them. So we want to change that on a, on a tablet device. And let me just quickly check to make sure that this looks good as you'd know, a little problem there. So obviously here, I've not set this up correctly and I can see the issue straightaway. So it's down to this one here. And I think I can roughly TO yeah, because we want that to be filled whites, but that's it. So I haven't edited the layout and that's why it's filling all the way across to the far left-hand side as it scales up, we're gonna make it Vasco sensors. And that should solve that. Ceo. That looks bound up. Okay, then back to the Medical. Okay, so let's keep going down to tablet. And now what we wanna do is these restrictions in the layers of change. So we don't need it to be this white and we don't really want it to be this way dealer. We just want it to be, we want it to scale, we want it to do its thing, but we don't need a lot of these restrictions that we initially put on. So we can date the minimum. What's the name to-to make that also. Make the max was none. But still not play nice there. That also, okay. And now you can see that that looks a bit better, right? That person is in one place if a pill listen and it moves with it. And as you can see here on tablet, you may be thinking, Oh, why is it showing the navbar when it's on a tablet device and see if you are on an iPad Pro. For instance, if you view a web server on your iPad Pro and horizontal, it may look like it's showing the desktop, desktop version of the website, but as matter of fact, it is showing the tablet version of it. And it's showing it probably like this. Because if it feels I can get I can get wide enough to show the whole nav bar without making it into a hamburger, and then that's what it will do. So I'm happy with that. The only thing that I'm not happy with as I not sure how I feel about the foster px space on tablet device, but usually I'd pull it down to mini-batch, went to sleep. I actually feel okay with on this one actually looks okay. Let's just leave that like that. I'm not happy with that. So again, let's move down to horizontal. Yeah, I have right here is where I'm not happy with it. This is where I want to change. So I want to make this for my navbar container. Instead of far I'm going to make it 20. And see how this plays. It doesn't seem to be shifts into much wave I set the restrictions at with I hear will that's to be seen soon as we play into nicely. And while I've done is I've made it. Okay, so now that I've added then let's see if I can get this to play nicely. While one is I wanted to just it's probably about it, so I don't have a problem. When is this white space with proportions there? But when it's down here, I don't like that was too much space. There. Has to be much less than that. So let's make that 28, maybe 10, ten, tens a sweet spot. And on the other side we wanted to do the same as me let ten, okay, so now you can see that that scale is a little bit better, still not completely perfect, but is much better than what it was. So I'm going to leave that like that and it's jumping a little bit, but it's only because I'm pulling out it was wise as it can go. And that's okay. Okay, So what we're gonna do now is move down to mobile. The real game changer. So mobile is a little bit different. So men minimum here I want to make to foster a I don't want my maximum to be 479. Okay. And for me, I mean, look, let's just look at these devices are low, but the way the website looks now would be on a Nintendo entertain. Yeah, I know an intangible device probably not going to be viewed in an intangible device most of the time. We take the Apple iPhone SE, yeah, probably. So we want to play about with that load up here a little bit because right now the email is in Philly and view. So what we might need to do is just take not the size, but we need to take, firstly take away this pattern. And there we go. For me, that's always a problem if I feel I'm feeling fine with that. Yeah, I can live with that. And what I might do as well as make a sentence. So if I go to my tall bar and full we've got a sense that I want to yep. Okay. So I made that center lives tosyl in ice but see yeah. So why things happen here, you can see it jump in. I believe that's because it's inheriting this design from the previous breakpoint. So it's trying to whatever that is, for the most part. I mean, there's going to be viewed whenever we trace it here, almost always. Ok, So Now for me, all those, Okay, I'm pretty happy with that. And now I want to do as I want to edit the head, the manual look on mobile and open up with the hamburger. So musicals assessing for me to click Open menu. And you can see that doesn't look too nice stripe that it doesn't look great. So when it's open like this, what we're gonna do as make it the background will be the whites and the Saudi money. So yes, open, nice to me that way. Okay, So that looks That's fine. So let's open, open, close. I just see everybody. So make sure that the element itself as whites, Saudi, dark gray, dark gray, bring it back through here. So that's an open Alex Bessel there. And for these elements, we want to make the background white and just like the other. So nav menu, you're going to go to the backgrounds and we're going to make that white. And that's Bessel right now. All right, it looks better. But now what we wanna do is the contact button is set and right below that, right at the end of the nav menu, we want this to be about space, and we also want this to be a box-shadow. So let's just add some padding to the bottom, say 20, it will add 20. And then what I'm gonna do is I'm going to add padding on each sides of the nav menu. So not keen on the waist, sit in right now. Okay. And then what I'm gonna do as I am going to make the sensors, yeah, I'm gonna make them senses. And we're going to have to revisit Actually, yeah. Now you can see here that I've made some edits and I did this kind of some ad is M and o is passive and that's kind of, that's the levator. But because you may do this to make the okay. When I get to the mobile phone, that's when I'll make the edits to the navbar. You actually wanna make them up here. But most of them anyway. And what I'll do is when you make the edits on tablet, the horizontal mobile and mobile and had it, the changes that you've made. So let's just quickly and play about with that. So backgrounds, whites, icon. We're going to make gray. Nav menu. White. Adds 20 px and 20 meter. That more haven't decided yet. And then while wanna do is I want the texts also be sent. So let's see what happens. Not less than I'm gonna do it. So that it goes to the nav menu, make them centers like that. And then this bus and I want this button to change. So the margins maybe B wants to probably add to this as we go down, we'll just stick with me. Okay. And then less than we'll do it, We just want to bulk shadow at the bottom here. Just make it right. And one thing we could, and why I think I might do here is when we're making the colors we spoke about using like a software gray. So differentiate between whites and certain areas and the thickness would be a good place to do it. Well, this we're going to experiment with it and see none that one. Nope. As an avenue. Think that could. Yeah, Actually, you know what that's a little bit about. And you can see here as sole sessile, but I'm trying to make a differentiation between the top navbar and then the drop-down. Um, because if all looks white, l just groups together and it just looks blind and it doesn't, it doesn't look right. So I think I'll stick with that. And let's just quickly equal to n These, Yes, So, right, so what we've got here, the margins way through back here, 11 phosphate one fall to much less than that, maybe 60. Make it Farsi actually. Alright, and you can see that the gray actually hasn't been inheritance these all the way down. So I need to change that. So I need to take our lovely gray from here. We've done some mobile not venue background. And I'm going to put that in there. Okay, so let's quickly just view that and see if it looks right. So we take all the way up, so that's what it looks like on desktop. All of that was this out. We pull all the way down to the bottom. And this is how it looks. And I have to say I actually feel it All right over that. Yeah, it does the job. I think. I think it does the job. Yeah. Yeah. Let's stick with that. I'm actually thinking I think it was one thing I want to change. Not too keen on the backgrounds here. So if I go back up to tablet and what I'm gonna do is I'm actually going to reverse engineer things ever so slightly. So if we go back to my colors and dark gray, I actually want to this is, I think this will be slightly better, so just stick with me and you can see what I'm doing here. And then on the nav menu itself, and I go there. I don't want the background to be like that. And they may be thinking what the heck are you doing? That does not look right. It's all right, but just stick with me and you'll see we don't go in. And then I'm going to make yeah. Okay. Now you may be wondering, well, why the heck of it then that again is a bit differentiation. Some things just don't look quite right. And for me, just my eye is peck. It was picking up the way it was before as I saw, that doesn't seem to gray. So let's just see how it looks now it was a great dance, a little bow. Right? We need to change again from over. So just give me a second backup tablet. Open it back up. Okay. All right. Okay. So yeah, I'm I'm happy with that. The reason why I'm happier with it as like I'm saying, it just didn't look quite right. And but for me that's much better. And I think it's closer to about and you know, I really like in particular and the way that red goals with the gray like that, that's for me. I'm like Get that looks really, really good. It's not. So one of the problems I was worried about with eye color at the beginning and I don't know if you remember me saying was that the red looked at just like he just looked really, really bright, look way too much. But the way we've used it here as subtle enough that I think It's fine, like it's not too in your face. It highlights the things that are important, that highlights the call to action button for the contact page. And if it's an emphasis on the number and e-mail address and also the logo itself. So that's why I'm happy with it. Maybe thinking, okay, I built an app. I, well, that didn't have, the last thing you need to do is make it a symbol because you want this to show up on every page. So we have this here. And what you wanna do is you want to click that box because that's the top of the hierarchy when it comes to this section of the website. So we've got that and then we want to right-click here. We want to go then to create symbol. And we want to name it, and we're just going to name it all caps. Nakba, create symbol. Right? Now we have a symbol. And now we can go through all of the pages. And we can go to symbols here, and we can drag them, not bought on. And there we have it. We have enough pads on. Which is great. Right. That's one big thing out of the way and designed. So yeah. So that's one of the main things are the way I have to be honest with you. The navbar is one of the more complicated, tricky, but it's because you only build it once you have to build a custom, there isn't really much else you can do. You can get around the fact that you have to design an APA. And it can take a little bit of time. And this video is obviously been one of the longer ones, but I know it's a bit tough. I know it can be a bit tricky and connects the so if you have any issues, this is one of the parts. We don't really encourage you to leave a comment and I'll get back to you soon as I can. If you've got any problems, then I can try a 15. Building Your Footer: All right, so now that we have our header in place, it's time for us to create or Fisa. Know, there aren't many pages for us actually have on the fissile. So it's not going to be a big massive for so that you see you in some other websites. But hopefully there are some things that we can do to make it a little bit more useful. So just like we did with the navbar, I'd recommend starting with one of these layers and it was in a different place, but I'd recommend start out with what we've got here, which is the Fisa. So what we're going to pop that here. And then I'm going to just take a section between the header and the fissile, just so it's clear what's what. But what we wanna do this as we just want to really make it branded, that's the most important thing, kinda like the head that we want to take it and just make it ours. Because there isn't really much we asked to add. And here overall, something that I have in mind, I think we can do that you might want to consider because you've got less pages. But if you get more pages, I've just said the sun and adjusted to fit your brand colors. And then really that you should be good to go. So let's just go ahead and see you ever gone. So in terms of color, I don't want it to be white and MOSFETS, those are usually a darker color, so we're gonna take our dark gray again, I'm going to come back. And what we're gonna do, this is called facilitates got classical physics. So we'll just leave it as that. And we're going to make the background color lovely gray. Ok. Now you can see all the text is obviously that doesn't work. So we have to change the colors of these. So we're going to change them to white or a shallow gray. Yet this is another thing you may want to consider so often on the Fisa, you don't really want everything to stand out. As such. You want it to kind of, you wants it to be quite soft and you don't really want to in anyone's face, right? Because they already have the top navigation to get rents and most pages we wanted to get to. And you don't want every link to be emphasized on the fist or you know, there'll be certain things that you may want to draw attention to if people get that far. Um, but overall, you're not really trying to do that much with it. It's just more to the lengths, all the different parts of your website. So what we're gonna do here as just quickly change these colors. And so I'm going to do is the n times is the white. I wouldn't make it completely white. You probably want to be there. I'd say. Yeah. Okay. So we'll take that and we'll apply it to here. And we'll do this into here. Okay, So kinda know what lengths. And I'm just going to call the heading for this company. And then we're going to go abouts, serves these pricing. And they have contacts. And then I'm gonna get rid of these two. Now you may be thinking, whoa, why, why, why, why didn't that? Well, there's a reason for it. We're going to find another deadlock to probably the right thing. We might need to play with these a little bit. Yeah, we can put that there for now. I should probably are these no. Yeah, I'm actually gonna do my own thing here. So what I wanna do is I want columns. And instead of this kinda weird flakes that block that M workflows and statutes. So I'm going to put in columns here. I'm going to add, and then I'm going to actually add a block on top. And you'll see where I'm going with us in a second. So it's up log columns and they're done in terms of columns. I think we're going to one problem with three. Okay. Yeah. And know when I'm looking at, I'm just trying to think what the best way to go about this as a pilus down to the bottom here. And then say block. I want to make this less horizontal. And also wants it to be spaced out, but not quite that much. Yeah, let's go there. And then I'm going to touch that brands are going to do is that will get rid of these. Yes. We're gonna include a logo. Just stick with me. What can we do with this flex container? I think we can leave the flights container there. Any big feelings towards it? Yeah, I think we can use we can use this. And what we're going to try. Okay, so what we're gonna do here as NFS, a part in part, this is a bit regeneration, right? And like I'm saying, if you don't have many pages, your physics doesn't really serve the same purpose of what it usually would if you were designing a bigger site. So to make use of that space, what you can often do is turn the fill color and so I call to action, which is why would usually do in this situation. In this instance, we're going to make an email sign-up form and offers and stuff we can talk about a little bit later. But for the purposes of this M just pit in the frameworks are sure you have a contact form of Look how you would build one with Webflow, and then how you can connect this end email marketing provider if that's what you wanted to. So let's just play about with this a little bit and see how far we get. So I'm going to go here. I want this vertical sense of there. Okay? So firstly, let's get an image in here. And I want the image from my local, but without the name. Plus get rid of that. Let's get this big muscly figure here. And there's some kinda download the transparent backgrounds. Then when we go back here, I am going to have to crop this just ever so slightly. Drop packets. And then we'll go back here. Okay, And then we're gonna go back here. And we should have an average right there. Right now this is starting to get somewhere. And that's probably a fair size for what I want. Okay, now I've got a logo for the pages in there. We have to link these up. I have not done that yet. We'll do that a bit later. Now, once you get the once you get the foreman that we're going to use m for client-centered emails and stuff. So let's go here again. And let's see if we get any forms here. So got contact form of guys subscribe form. The one that I'm going to all photos actually the subscribe form. I think this is one of the more useful ones. So let's see if this works. If not, we're going to have to build one from scratch. So thickness dy, okay, so that's an entire section. We don't want that. We just wants to build the farm from nothing. So we're going to fill in a form block to the container. Okay? Now, what you notice here is I've got these a sense of, but I actually want them to be full width. And then what I'm gonna do is I'm going to apply padding, quite a lot of it to try and make it just a bit more sensors. Okay. So I ended up diversion because much like the issue I had, I would usually have with the header and the container doesn't play nice. So we're going to do is we're just going to create on doing that's always easier, always. So this deadlock in there, another one in here, sorry, the classes in a second. And we're going to get a logo like we had before. We're gonna get the end here. And then we're gonna get our farm. So let's get that feigned form, the one that's pulled in. Right? So this is again, somebody was gonna take a little bit of plain about with UGA. And we'll call that, we'll call it container. And then tomes of any padding and stuff that we want. I'm going to put that. Yes. So we're going to have to do a little bit plain about here, much like we did with the header. So that's dead blow here. We're obviously going to call that container. We're going to call that and we're just going to call that internal container. You don't have to do it like this, but it's just the way that I'm choosing to. And we want to set, we want to add the same kind of sentence that we did when we were building the header. So we want to view as to be a hundredths. And the minimum weds to be 992. And Maxwell's will be 12 79 profits. Now if we pull that up and we just all we have to do always left to do. As a sensor. Visceral efference, think the facility of sensitive Fisa. And that'll be Besso. Okay. So you can see that's kind of working, but we just have to we have to change a couple of things runs. So let me just see how this plays. Yeah, so what we're going to want in here, we're going to want some pattern just to break things, download that. And then for the form itself, I want to go. Yeah. Okay. So you can do that and you can make it vesicles to make it full webs, which is definitely what I'm after here. I need to change the color of this one up here. Same here. I just want to make sure it's the same one that we've been using. Ok, and let's put some padding at the bottom of this container just because it doesn't seem to be sitting very well. That's a big vessel, that's a bit of a vessel. And now actually when I'm looking at it, so as you can see, the fields are set. Very nice, but it just doesn't look very appetizing with the big, massive gaps between, between the input lines are the input fields rather. So we're going to get rid of them right there. And we're gonna get some margin. They are. And what I'm gonna do is we're actually just going to put the name of the input fields of the information that we're looking for and say it here. And we're going to discuss here when it comes to fields and we'll get on to the lead generation principles a little bit, Lisa. But you're not going to want to have the filename. You're not going to want to be collides and a filename and any essence, you're going to want to be collecting a first and last name. So we're going to duplicate one of these input fields that actually we can just add another one to the phone right there. And then if we double-click on each line and we can name them, right? And we want to do this. We want to give them a first-name, and we want to give them the name of the information that we're looking for. And then this place holder will just be firstname here, OB, last name. And lastly, one thing that I'd quite like to do as I want to insert columns and say the farm because I don't really, I don't really like it when the firstName and lastName set on top of each other like that, because it's quite a mess use of the space here. So what we wanna do is one, for the FirstName, column one, we want to put the last name and it's called two. And then we want to get rid of the padding that comes with every column no matter what. So let's just take that. And we can make internally, we can make it five. So that is even with proportions across the boards. Okay, so that looks a bit better for me, but I'm still the length of it is still a problem. Phoned me as too white. So I want to, I want to tailor that little bit. So instead of 220, we're going to have to go for like two phosphates investigators to 60. No, not quite that much. So let's try 300s. That's where I like it. Yeah, I feel I feel a lot more comfortable with that. And now we want to just tidy all up and make sure it represents a brand and some of our brand set. So for instance, we don't want to blue button, we want our red button. And they also want to provide a little bit of information above the form to tell tell people what they're signing up for. So let's just do that. We're going to add a heading here. And then we're going to add a paragraph, then also live in a second. Suppose just going to put it there for now. And then we're going to want to play yet, we'll play about with this. So let's just, let's just keep it going. I may actually put a little down here, may create columns into the form. So once I just sold a full citizen so bag and there's just too much space on either side. So anyway, let's just sorry, it was phone flushed. So in terms of the button, LSI, the class, we'll just call it a farm lesson. Now, obviously we've got like a rounded buttons and that's what we want to continue West, but there's no Just for the button, if we make the bus and Randy, without making the rest of the foreign field render, that will look great. So we actually have to do a little bit more than that. So we actually have to put, we're going to put that block here. And we're going to put everything in sight of this d-block. And let me just make sure that foam blocks and so we'll get everything and say the deadlock. And I'm just going to name this class. And tonal fits. On, because we want this font, Popolo, but we want it to be slightly differentiates you from everything else on the page. So let's just do that and we're going to change the color of this internal Fisa farm. We're going to add some patterns stuff and do a couple of different things, but just stick with me for now. So background, we're going to make a type of gray, but we don't want it to be too light. We just want to very subtle differentiation. Rob a little bit there. Yep. And what I wanna do, I want to strip back this pad and ever so slight, it's maybe like to 20. Now, sorry. Okay. And then inside this form, that block, I want some pattern. So I'll pull in 2010 to ten at the top. Maybe 20 at the bottom. Yep. 20 the saids. Yeah, I can live with that. 20 again, forcing them. Today. We'll start with twins it for now, see how we get on and this heading. So what we're gonna do is we're going to use an H2 heading, but we're going to create a combo class because we want it to be the head and to be white. So I'm going to call this H two basic H2 like usual. And then I'm just going to edit. It's far. That beautiful forest or something like that. Okay? And that will allow me to change the color of a star without messing up everything else on the site. I'm going to do the same here. Professor. Make it white. Now we're getting somewhere. Now, Batson a tunnel for the farm. We want to make the corners for this round. It's because we want it to be in line with the rest of our farm, in the rest of what we're building. And then as we go through our farm here, we want it, we want these rounded corners to keep us to stay in effect, we want it to be consistent throughout the entire site. So what I normally do in this instance, instance, I want to, I will not. So why would normally do in this instance? And I will not make the entire each corner on the whole farm rounded because that is not very, I would have put it when we talk about things that people will know this when they're looking at a website. That's one thing that we'll notice is needed. They might not necessarily like, again, most of what we're doing here we want, it's if you, Brandi, we want to also fit together, but we don't necessarily want people to notice it. So instead of doing that, what we're gonna do is we're going to run each corner here, just like we did with the internal fusiform. And you'll see what this does. And yeah, so let's do that. So we're going to call us, we're just gonna say Fisa, bottom forests. And and you can see borders here. If we click on the alternative which lets us add at each corner individually, I'm going to put 20-foot was no, not 20. Actually, maybe 20. Let me just leave it there for now and see how we get on. Actually. No, I'll probably like 15. Yeah, I think 15 is probably best. Okay, we'll start with 15. And then what do we call this fusiform? Last name, okay. And I want to take the right corner of that one. I want to for that to 15. So you can probably see where I'm going with this. We don't have to I know we don't have to touch the email address portion. But what we wanna do is play about with the buttons we're going to call this officer. Actually just going to call this form button. Because if we ever use any other farms, we want it to follow this kind of theme there. So I'm going to just put fits it in brackets because I don't know if this one I actually get you reuse. Okay. Right, so let's make this out of them. So let's change the font to Proxima Nova. Let's make it bolds. Let's take our nice red. Let's put it like that. And then when it comes to the corners, we have a 15 there. Okay. So you can see what I've done here. I've tried to keep the font feeling rounded without a bean. Excessive, but that doesn't have to be the way you do it. You can remove all the corners completely if you want to do it this way. And while dinner, I'll go ahead and I'll show you how it would look if we round all the corners, okay, Just so you know, you know, what we might like it morally that who knows. So let's go ahead and do that. Let's meet them all 15. Or should we make it 20? Should we make it 20? Yeah, let's make it fully rounded. And that's how it would look completely random. So for some people, when you're looking at this, that may feel better because you've removed the entire corner. So instead of just feeling those always covered around the entirety of the form, you may feel that you're again, it might feel easier on the eye when you're looking at it like that. But really you can do what ever you want with the design of your font. It really doesn't matter. As long as it doesn't feel uneasy on the I or the design doesn't feel off, then you'll be fine. And then it sends a text I'm just going to put in here well, let's just put saying to email. He's less. Join. Join thousands of happy customers. Regular updates on products and services. Actually, you know what I'll do? You can get 10 percent off your flushed when you sign up now. Okay. So that looks all right. Okay. I mean, it's neither here nor there for me, I that would work. I could publish this as a website. I'd be happy with how that form looks at the bottom. I don't have any issues with it. But why do you have an issue with is the space and the size of the fissile. For me, this is just too big, is too big and there's too much space. And those that like I was mentioning earlier, there's a fine line when it comes to space. Sometimes, I mean you need space, right? Space creates BC when it comes to designing websites. And those are really, really important thing. But there's a fine line between too much space and to let some space right now, in my opinion, we have too much space. Some designers may disagreements, we'll not have too much, So we have to try and do something about that. So what we're gonna do is we're going to have columns and to the container. What we're gonna do as a block and here, I know that may look a bit funny, but it will be absolutely fine. So we'll get to that image with pop that in there. Thus far, we have pop that in there and refer the full-width. What we're gonna do is just extend that right? And because the actual base logo for this is actually quite, I'd say it's quite an interesting one. You like as not in your face really, at, at least I don't find that to be in my face. I think it's quite a it's a little wacky. I don't feel it in the space when I look at it. But we don't want the I don't want to form this close to the IgE, so we have to do some sort of with that. So if we go to columns, we need that Farsi or Thursday because it's already ten X applies or 30. The 30 here. And that isn't line. So as a first order now, I am ten times happier with that. Like much, much happier with that. It feels much more than ln. It feels about the right size, as much Bessel proportions, and it doesn't look close up. So I could go ahead and publish that and feel okay with it. Last thing left to do here is just get these links saucy done the bottom. So I'm just going to quickly change the font here. Seems done the button. And yeah, we're pretty much good to go. All right. So it took some time. Those weird problem with the farm where it wasn't the first name and last name are crossing over each other and wasn't aligned properly. It would have taken weight alongs go through is just a main or bucket and you hope you definitely almost definitely will not have any issues with that and you'd end. But with that being said, let's crack on. So that's basically the freezer. And we'd last thing we have to do is just link of these fissile lengths. So we've got the homepage with a bot page, services, tracing, and contacts. Okay. So that's me. I'm pretty happy with that as a facade. I think. Yeah, I can work with I feel pretty good about it apart from that. So we can see as we're scaling the farmers jumping a little bit, so we need to work on that. So these columns are, columns are not sitting nicely, so we need to work on that. Okay, that's fine. That's nice effects. So again, just like the header, we have to put in all of us as a hundreds. So set our max 12, 79 and then they're men should be 922. Let's pull up. We've got to go great. And last school down the scale and the CIA gone. Okay, so we've got some work here to there. So what's columns? What we wanna do is we want to stack them usually, do when we get down to tablet. So it stays as a dual column. But you can see tablet portrait for landscape and portrait. And we want to just change that to static like that. Then when we come back here and we want to add to the constraints that we've got, just make all of them also. None. Yes. So we want to view it there. Um, and that's a really was no great, Do I have to do that? The only thing I'm made those I'm not sure if I want a logo stacked on top like that. So I'm going to do is actually just flip them rounds. And I'm gonna do that by going up to layout and click on that button to the right vertical. And we wanna, nope, sorry, not that one. Wrong element is columns. We actually want to look at their vertical flat. Okay? And because of that, we can see the logos actually sit a little bit higher up is for me It's probably too close to the farm. So we want to fix that. We can do that with vasco, sense UBS. And I think it's going to show because we have some pattern, There's a culprit. Okay, So we have some pads and the unwanted padding and 20 at the bottom times the top. Okay. With that. Then to phone to have a problem here was tablets. Nope, we're good there. And we get to tablet. So we can see that looks a little bit wonky because we're getting down to tablet the stuff we won, things to be consistent. So we have to get rid of some of the padding elements that we decided to add evermore on desktop. So that for me, I think we're good there. Just quickly you've also singled actually mode. So if you ever get stuck or if things don't work either I had not properly, like here for instance. So you can see those are very, very slight like five pixel gap that I wonder I don't throw my office throwing my eye off and making me think that was some kind of code coverage or when when there is, but it's not deliberate and it's just because there's a slight discrepancy here. So what we wanna do is come out of extra votes. What's the column that we're looking at and get rid of that five px so we don't need so I don't know they're here. Great Now it looks good to me. So let's keep going. And so on mobile, we're just looking for the same as what we've been doing. We can center this down the bottom. There are links there. And let's just polish this off and make this look good so we don't need 201010 Zoom. And then on the outsides, we want that to be 10 as well. Now let's wave ESA, the motor was, and I said, Okay, so now we have a scalable facility with an ACE call to action. You can use if you don't have a lot of links on your site because you want to try and make use of the space, right? If this was a standard part of your website, you want to make sure you're making the most of that when you're building your site. And let me go on to lead generation methods. We'll talk about how we actually link these forms up in what we do there. Um, but for the most part, That's it. So that's just got Pharaoh done. So let's quickly go back up and just check out and see you. So then it's a mess. The only thing I think this messiness. Yep, So the texts here hasn't been changed to Proxima Nova. Let's just do that. Should I make these bold? So that's why I don't know. Now we can leave them as normal, happy with that. And now that we've done that, we want to make a symbol, just like we did with the header. So click the Fisa, right-click on the facade. There. Three symbol then all caps. We're just going to create visit and profits. Just like that. That's just got it done. So with that being said, the next thing that we're going to move onto is actually starting to fill in some of the contents of the site. And just quickly before we move on to that, what you should do is see if your pages at a section in and then Azure Fisa. Okay. Section, officer. Section. So yeah, that's it. So let's crack on, right. Super easy, super, super easy. So just like I said, with the head, as you're going through this, if you get stuck, I mean, there was a point in there when I was going through the first of the I actually have tripped off and one of the just Webflow through on a curve ball at me and it will do that sometimes, sometimes it'll be issues and you won't necessarily know the answer. I can assure you those always a logical reason is nevertheless very really anything you can actually blame. Webflow far outfall. Am usually it's just you've made a mistake in the way that you've used the platform and the way you set things up and just causes a slight slight discrepancy and from what you may expect to happen. So yeah, let's move on to getting the rest of the site boat. We're getting close, making progress. Let's keep going. 16. Building Your Homepage: Okay, so that's the header and the way we've built the head and the Fisa and now it's tends go ahead and stop belting pages. So the first page, what we're going to just gather the way is our homepage. And that's where we're going to touch on some of them lead generation stuff in the wage kind of structure these pages and what you should be able to thought. And before we actually start with a couple of things I want to point out. You may be in a situation where you feel like you have a lot of content, that's your website. And my advice at this point is to keep things short, sweet and concise. Those would be my top pieces of advice. And the reason for that, as people, when he has a website, they're going there for the particular intent. And usually they're going for a really specific piece of information. And you want to make it as easy as possible for the fame that information. And you want to break things down in such a way that things are easy to scan as opposed to easy to consume, right? Like in the sense that you don't want an excessive amount of texts that began in the wave or someone's looking for. And it's a common thing that I see on a lot of websites. It's just this. It's just too much content, just, just an overwhelming amount of content and it just saturates the design field, the purpose of the website, and also the brand. So that's something to keep in mind as you're going through this. Keep things short and sweet as well, I'd say. But also don't be scared or hold back. You put the information into the site that you need to just don't overdo it. So the first thing we need to do for this page as well, actually for all the pages as we need to get a bunch of emojis and you anything about overcoming damages, you might be thinking Chicago Stock or Adobe Stock. There both pays the cost quite a bit percentage and they suck right there. They're not the best. I use Adobe Stock usually if I'm trying to download graphics. So that's where I get most of my graphics from some other good websites out there. But the one I actually recommend is called Unsplash. That's the one that I recommend if you have to use stock images. And that's a good point such that when it comes to images, because can use your own images. And if you've got your own images, if you've got access or the budget to hire a photographer to take some good pictures of your brand or your business, your local company, and invest in it. Like people want to know about your businesses, especially if you've got physical premises and they want to know what it looks like and say they want to know what a loose like I say they want to know the people that run the brands. They wanted to know on here about the employees. They don't want to see stock falls. Just really a way for brands or business owners to hide behind the website. So I'd advise not doing that. But anyway, for less than I'm going to be using stock photos obviously because I do not want to Jim. So let's just type in gym. And yeah, a bunch of images we can choose from here. And one of the things I really like about Unsplash, as all these energies are coming from independent trailers or photographers, you know, though not been cherry-picked by Adobe Stock or Shutterstock. And it's just people like little nut allergies and saying, hey, you know, you guys can use them for free, just going to be credit. So what we're gonna do here is I'm just going to pick probably 10, 15, 20 energies. We'll just keep coming back here whenever, whenever we have to. Um, I'm just gonna pick doesn't really bad stuff to be honest. Let's just stop and saw what have we done? This, all these energies are usable. So here you go. Public five more. So edges are important, they really make the difference, but the website in terms of design. So you wanna make sure you get them right. That's a good one. I can go here. And let me see if I type out a different keywords. Let's let us and it's an else. Those are good ones. Okay. I think I'll probably do it from now to be honest. So let me just go back and we'll upload these images to the website. You can, if you need to obviously go into like Lightroom or wherever you're profound photo editing app is. But for this, I'm not going to bother, I don't feel the need to. So let's go ahead and upload images, which will all appear here in just a second. There we go. Okay. Another thing that you can do that I haven't done here just in the interest of time. Let's put the EMG through compressor. I'm just to make sure they're not too big. And the, and the, I'm going to clog up your site because performance is going to be a really important thing. And if you're struggling with that, you're like, oh, I don't know what size is energy should be or what should be in there for Webflow will actually tell you. So if you go to settings of an image and let me just shift this over that way. You can see that it saying here that the image is very large and we're not going to be published on this website are really trying to do and some lessons, so it doesn't matter. But I will tell you, okay. And if it's very largely that I mean, that's a sizable website. You don't you don't need it to be that back. You don't want it to be that big. Your website would just be slow, be clunky, and a lot of good work you've done will be redundant to degree. So anyway, I've got a bunch of images, so let's just go ahead and use them. So we're going to bolts. Header will not have a yeah, we're going to pull it out a top of the page section, should we call it. So we've got section, we're going to put a block in there that's going to be a container. And what we're gonna do, we're gonna add another div law just in case we have today any other kinda crazy address. And then we're going to stop it and content and sites. So we're gonna put a heading. Let's get some photographs x in there, and let's get a button in there. And this is going to be the top of a page. So what we need to do is get our classes and ADA. So let's click on the section. And then we're going to click Basic section, basic container. And then we'll have page one paragraph button. So what we'll do is we'll get this looking a bit sharper. And then we will move on to having a chat lead generation stuff and why the top of this page is so important. So let's just get an image in here. I'm sorry, the rest later. We're going to go back here. It doesn't really matter why image, I'm, if I'm honest, can pick whatever one. Instead. We wanted this a little bit darker to thank goodness, I there was something not quite right. And then we're going to create a combo class with our container because we want it to be quite so if we wanted to be above a certain size. So I'm just going to Top Hat say w in terms of the play about with this and that's what you wanna do. You wanna play about them when you get to this point. And you're not necessarily going to know what the best high as a think, roughly six hundreds at times is a good show. Hello. Yeah, can go with that. And then let's just saw this background because that doesn't look too great. Yeah. Okay. I'll come out with that. And then we want to make sure everything and sites that contain a sense. So that will go vasco. They're an NSAID that's deadlock. And we're going to do basically the same thing. And then you'll want to clay. You want to create combo classes. When you start editing like the weather, the heading, a central or not, because you don't want to make a change somewhere in it. Messes up everything on your entire website less the last thing that you want. So traits. Central stage one. Actually, one more thing is to make, we need to make a class for changing it to white. So I usually just put make white. I'll just use quite. I mean, you can label your classes whatever way you want. I just like to use more like commands than classifications just because it's easier when i'm, I'm going about it and certain classes that needs to be mic white. So we'll make that way first, since it's the same as the paragraph. Right? So again, soma, then we're just going to hit this button tag. Now, can we cancel each generation stuff in a second step block? What we wanna do as just the text here is way too wise and we don't want it that way. It's because it just doesn't look right. So let's pull that in a little bit and see how we gone. Yep. Lab works for me. Yep. And so there's a couple of things that you can do here, and we're just going to add a section here just to prepare for the next one we're going to make. You can have the, you can have a kind of farm here. Like it really depends what you're trying to do, right? And it depends what you'd offered us. But a standard on the homepage is just have a button that links to your contact page. You can do a heck of a lot more than that if you really let your traits, I would say go a little bit wilds. And you can have, you can have a form that allows people to insert the name and email like the one we built for the Fisa. Or you can have it connected to a type form. You can have it connected to anything you want. There's so so much potential with what you can do on my personal website from BYU media, and I usually recommend this to some of the clients that we work with this use type phone. I quite like type 1 is really good as functional and is quite interactive for users. So I'll quickly just show you if you have an accountant. And I don't think we're going to go through this, not a type font. I think that would be something for a separate video, but there's no harm has shown you the platform and just what it looks like because there's a really good lead generation method that works pretty well for us. But we haven't doing a great deal the market and recently, but we have a bunch of different forms here. And you can create any form you can think of I and j can link it to your website or you can embed it. You can do all sorts of great stuff with it. And what I'm gonna do for this one as I'm actually just going to put an e-mail field. Yeah, and we're just going to stick an email field and so we'll get rid of this button. And what I'm gonna do is actually what ways I wanna do this. A couple of different ways. I could go back to a couple of different ways. Let's just see what we get. What we need as a form block initially. Okay? And you can, as I said, you can, you can do whatever you like. Here are some what I mean, what you could do as you can, you can link here to your contact page, for instance. And you can link your contact paste a type form. You can take information here, then you get people whose name and email address is, which is important, especially if you want to January leads. So like for instance, you could have both an offer right here. Okay. Well, bells on offer and what we can see, I've gone enough. Don't know if I want to change this image, I don't know how I feel about it. Maybe. I just thought we could just say, well, it doesn't it doesn't matter that much at this point. Yeah. But I think the point I was really trying to make here with the homepage is that this heading of your website, like on your homepage for instance, which is normally the repeats are going to come through if you're following a traditional model and heading. And this area here. Needs to be able to get your message across and tell a passion why they should sign up to your website. You really generation methods, street, or wherever you are offered as you need to justify that straight away, you need to make it clear that has to be concise and it has to be quite directs. So what is your key differentiating factor as accompany? It was a thing that makes you definitely was the thing that makes you Besso, why should we say not right now on this farm that were built in instead of one of the competitors. These are the things you have to think of it when you're building your site because a lot people vote just come in and they'll bend straight away if they can't find what we're looking for, you have to give them a reason to stay and engage. And you want to make it as easy as possible for them to do that, which is what we're trying to build here. So for instance, I've got a couple of ideas here of why I think would be useful. And I think I want to pull this over here. Okay, a random it there so you can kinda see on there in there. I often will, I go for it depends. We can image your work, you must, but sometimes you want to shift the key focus of the image onto one site and have your farm on the other side just so that we're not sitting on top of each other the way they were. So right now I can see the muscle of the eye in this image. I'm trying to insinuate this idea that you're going to get strong. You know, that this is real exercise, that this is real fitness, that this is important work that you're going to be doing it at the gym. And then obviously here with the text, I'm trying to say Look, sign up, this is our class. And you're almost suggesting that by signing up, this is what you could look like, which isn't directly was come down here to do but you could make the argument. So let's play this and see you see how we get on. So I don't want that to be centered anymore and I don't want my head and to be centered at 1 all to the left-leaning. And then we're going to build our farm here. And then we're going to build out a farm here. And we're going to build out an offer and you're going to hopefully see precisely what I mean. So let's think about an offer. Well actually first let's get this formula. I think that's the thing that takes precedence. I think last, I think that takes the lead in terms of importance. So let's create a class and let's just say, let's just say header. And our background. I'm going to make a thing, this nice gray that we're using. We said that we're going to use the beginning. So whom should I, shouldn't I? Yeah, I, I think this could work. Let's just see how it goes. I want it to be curves. Don't want css phone button that we've made earlier worse? Yeah. Kind of. Yeah. Yeah. Okay. We can work with that. And then I want to get rid of these fields just like before. And then what we'll do is answer, I'll be a rush them. And you can have as many fields as you want. And here you wanna make sure that required two when it comes to the funds. And then we want to make these fields that we're looking at curves. And one thing you might want to consider a little slight border on these, which I'm not sure how I feel about. Let's just see how we go on. Yeah, okay. Yeah, we don't want or need to really any lambda in the select, just this them. And those things we can do to make it like what we're gonna do is when we get near the end of boldness, a Google bike through analyzed some interactions and I can show you how that works. But for now we're just going to leave it kind of, yeah, we're going to leave it like this. And we're going to make sure that we're using the right fonts. Ok, and OK, so now we've got the formula. Let's just put that's the site for 1 second. And I'm going to put only going to do let's just go for guesthouses. All right, so now that we've got that and some of the texts at the top of the page when we're doing this, what we want as we want to try. And I mean, unless there's more brand and business WACC in some discovery work that you may have to do. But you really want to get that headline and it should be your core offer and summarize. That should be you're here one line or you know your, your key proposition that you're putting forward. So I'm just gonna, I'm just gonna put Shane I'm going to put actually become less. Okay. Now as I put that text, I mean, what you can see here is that little line, hey, isn't quite right, so we need to change that. And what we're actually gonna do is we're going to change his honor style guide because it goes we've got combo class. I don't really want any of that to get messed up. And as you can see here, because I added to the background of that container with adding a new class is changed it for this one too. So we want to change this back. So we want to change this background back to us, obviously image that we've got here. Okay, So that's, that's fine. Let's just there's that from the and far less container. We're going to put. Now, we're going to just edit line-height. Okay. So line-height, moving not quite 145125. Yeah. Actually, you don't I'm going to put that back to basic container. Yeah. And voting into this, we're just gonna have to bend that image. I'm going to go back here. Still stays. Yeah. Okay. Right now you can see that now that we've added to all the n and that shoe, that change to 12 yet, but dead profits. Now we need to increase the size, the height of this container. So we're going to make it seven hundreds. Yet. Happy with that, right? And here we're just going to put a sign up today. Sign up today to get started. It's actually the hook. Nice to actually, you know what? I think I'm actually just take less sex night because I feel like often was me partially anyway. I always feel like if I if I feel like I'm forcing myself to add more words, then I probably shouldn't add anymore wants because this straight here, there's probably enough yeah. Trained vasopressin smarter with I wanted to put Wes Magnus. Yeah. Yeah, transgressive are suspended omegas. And then what we can do is instead of the structure we're going for, we can throw that in here and we can put because one thing you can do as well when you've got a person's name and email, you can start fit them and sell the funnels like one it shows in 10 on their parks are basically the same. They're interested. Yet it might not be buying for you straight away, but it doesn't mean that they can't. And on your contact page, like you can focus more on driving people to actually purchase a membership and stuff. But anyway, let's just keep going. And it doesn't really mess us too much about this piece of text. So I'm just going to slate here. So this is all right. I mean, what we're doing here, we're basically saying was definitely better. This gentleman was seen save them to join our community. And terms of that, I mean, I think if we were really doing this properly, I'd be forced to answer, like trying to push the person that's actually purchasing their membership. But that's more of like an econ, kinda thing and times of elite domination thing. I haven't a form on the homepage I think is quite a good way to go about it. Or at least connecting, or at least having a button that connects with a formal some kinda lead generation method. So that's something to think about. And then move these sections down here, which I usually just keep this really, really simple. Like you don't have so complicated this pot. And it depends on the person that you're trying to help and working less, but why would normally do as get your classes and autofocus? So basic section. Okay, your Container columns, you don't have to read, really rename them. So now that you've got that in place, Let's get d-block. And in both of these columns, What we're gonna do is we're gonna get an image. Doesn't have to be that one. It really can't be whatever one you want. I'm not really that foster that well, one we go for yeah, I mean, yeah, that can work. And then here, Heading 1, not going to do here as add excessive amounts of texts. I mean, there's just no point should really you don't need to see me write a little detached. You just need to understand the structure that I'm going for. So let me quickly clean this up. Um, and yep. And then on the SAT we want to Px of 40. And then we want to make sure the height of each of these sections is consistent. So what we wanna do is whatever height less as mean. We're looking at here. I'm not going to download the image. I'm gonna make the, I'm gonna make a background image over here because that will actually scale it properly. It will scale the image properly and I'll keep it consistent when we bellow sections and they'll all stay the same size, which is ultimately what we're looking for here. Let's go for that one. And then what I'll do is I'm going to change the site of the size of that. 500 is, but we're looking for profits. And we're gonna do the same with a step block. And inside that div, we want to make it Vasco sensitives. Yep. Okay. And here this is where we want to use our H2. So like I said, you only use one at the top of the page. Not using that. Awesome. So er, sorry, get into the lower sections. Ok. Ok, So now Let's quickly name these deadlocks. So what will we call it? I think what we'll just do as we'll call it dual column. Yeah, we'll just call it did not play nice. Okay, so we need to add that image against the O. And this is the thing. If gather to call them, we're going to create another class called ads. The image. I actually don't want to do that way. I'm I'm going back and forth on that. She can do a couple of different ways. I think I actually might do is just add an empty string and make sure that it covers the entire background. Yeah, sorry. Yet lastly, there's just quickly add the image back in. If I need to add a second class packet. And now what we're gonna do is we're going to duplicate that section. And we're going to flip these columns aren't. All right, so we get nice to nice juicy sections there that we can talk about the gym and some of the features of it. And then usually what I do, as I mean, this is like a very straightforward design in this regards. But as, as basic as it gets. But why would normally do is I would go aheads. And I would add like, what would you call it a mission statement are just some type of empathetic piece of text that talks about what the brand means of water striving for what its main messiness. So let's just quickly store and something like that. And then I'd like this to be yeah, we can make it, we have, we can make it red actually, that would be quite interesting to see how that goes. Right? Guessing some are slowly but surely. Why might actually do is I might take the head and excite this. So it just popped out there. So if you're looking to build a section like this, you can just kinda follow along with what I'm doing. I like it like that. And the end actually I think I might pop it back in. Okay, so this is something set point out with the button. Remember we spoke about, you might remember a memo done escape style guide. I spoke about. As we're going through or if we need to add anything else to say, okay, we can, well, this is one of those things. So if we go back to our style guides, we can duplicate one of these buttons and then add a comma class. It says lesson. And we can basically make this white, okay, because that's what we want. And we can make the internal, we can make that gray that we like. And that's it. So we take that class, go back to our homepage. Nobody wants to do a sense of us. Do here is like I would have this section being Fairly beg you like you want some good padding here? You probably want much more. Yeah, something like that. And then you want to create a low bit of a differentiation. Or 11 more space between the button padding of F. Kennedy. Go about it like that. That's probably that we have. And I just realized that I didn't not count for that being white, so we need to take that back to gray. All right. So I'm feeling I'm feeling okay about this. I think those more work to do on this, I made it behind the scenes. A hundreds, hundreds zs probably ever had. And yet those things that can be added here, okay, there's lots of different ways it can be ID then most of these features, because the focus of this website is only generation. I don't really want, I mean, I don't want to get too heavy into the design side of things, but you get where I'm coming from. I mean, really want to do here is build really basic sections. And basically it's the m that you can use. It might not look like much, but it's simply guess the point. And we're using a strong color scheme was kinda doing the job for us. So this is actually what I'm going to use. I think I need to change do you need to change this image? So here, down here quickly. Yeah, okay. Yeah. And then what you also will want to do is we have to ipx over the top, which we've maintained so far, but we wanna make sure that's maintained also in these areas. So here is a place where it definitely is. But we want to make sure that's all sort of flight is here. So let's just move the up and see you. Okay, so don't wanna do that. And creates. So I'm going to call this one nope side of that one's left-leaning. All right, so overall this is looking pretty good. But there's still some things we need to do before we can move on to the next page. There's a few things. I'm not I'm not keen on that. I just don't think of the best. So I'm not keen on the way this image transitions into this one though, this section. So what I wanna do here, I want to add an a section that, well, just talk about some key features and benefits all of the gym itself. So let's just throw in another section and forget that noise behind me. That is my Springer Spaniel. Do nice thing. So it's either another section there and we can have in a deadlock. And then within that, we're going to add some columns and columns that are grids. I think. Actually this is a good opportunity for me to show you how to use the grids. So grids are really, really good when you get different cards and tables that you wanted to add really what we're doing here. So I understand you may not really know what again I here, but what we want to do is add the tiles here. So these will be three separate cards, and then we want to remove this bottom one. So right-click and delete row. Okay, so now we've got a row of three, okay, so that's what we want. And then with any row I want to add latch, I just want to add one block from that. And it quickly want to make sure these are all class droplets. So basic section, basic section, basic container. And the admin gets the credit class if you want, but it's probably not essential. And then obviously I did block inside it and I'm just going to call that set. I'm just gonna call it service titles. You'll see why in a second. Okay. Okay. So for me I'm like, Yeah, that looks okay. I can yeah, we can work with us. And what I might do is, well, just while we're talking about this, I'm not sure how keen eye on these images and these sections. I'm not following that far, say Px of space steady sites. So we might want to take a look at that binary. Let's just continue with this. So here we've got the service tiles. And then here I am going to add an image heading. Then I'm going to want to paragraph. And lastly button. And this is also a good opportunity to send people to two decimal places on your website if you want. And then also I normally do as you've got these here obviously, but I usually adds heading and pie graph above it, just so people know what it is. And usually I always include a little bit of tags right above that. One. Just move myself here again. So they're heading. And then paragraph needs to make sure these are n say the basic container. Okay, so now let's looks better. I'm asking me to thinking, oh, was this button. You'll see how it all comes together in just a second. So we have this tight. So firstly, let's just start in the top. And then some texts, you will just put key features and benefits. Let's put some text in here. And I'm just going to leave the logarithm automatism and here because when you know what you're adding yourself, okay, the whole point here is to show you the design, not to watch me type. So let's just try and get these in a bit more. Otto, we've got this fault tolerant of class and we'll just say above. Texts are like kinda of a subhead. And by that, I mean, you name the class is whatever you want. This will be H2. And this will be a basic paragraph. Okay, Great. No, I want to do as I don't know if I want to change maybe not change the color of it, but I do want to change something. So probably this one here. And I want to get rid of this top margin. So I'm just going to put top margin, maybe 10. Now it's going up. Yeah. Right. I'm going to center this and, and typography. We are going to, we are going to know we're not going to make a bolt. Or we shouldn't make a poll, not know bolt won't make it bold. But we're going to change it to the red that we like, which is this one here. And we're gonna make it uppercase. And we're going to spread less of spacing ever so slightly it yet probably over there too. And what we're gonna do is central here. Probably do on 10 px here. And I'm going to increase the margin just so that it's not as wide as what S because that doesn't look right like that. So probably like one, maybe two Svante, let's see. It seems to be the sweet spot for that. And then we want to add some padding. Okay, great, So that looks a little bit about another, some kinda differentiation between this top section and then the sections here because they will just kind of mashed together and it wasn't too fond of that, if I have to say. So. Now we've done that, let's move on to the service tiles and get them looking good. So we're going to have to use Canva. And you'll see why in a second for the damages. But let's just policies often see how we can get them. Look. We're going to use that nice alternate white that we picked out. And the backgrounds for that is going to look like. So I'm going to make it carts and the bulges. And in terms of the layout, we want to make everything sentence. And then we also want to add just a less of a padding of 20, 20. Just like so. Okay, so yep, I can work with this, will just make this a basic button, right? Okay, this is getting the right. And then what we're gonna do is just take this and copy there and then, okay, now we'll get three servers sections, which is good. Okay? And I'm going to really quickly fell in this text. So we will go for what I think key service features of a gym. I mean, Let's just put x bar support, community group. And then we'll put online classes because why not? And then I'm going to leave a lot of apps. Mm-hm. I'm going to take this bit here because there's just too many sentences in my opinion for phi. So here's a little tip as well. When you're doing these types of sections. I've always find that it's also a five lines usually power sections enough. And y mean by that as five lanes, including the heading when he then to sex and stuff. Some websites need to and the need that extra text. But for the most part you want to try and keep it a shot. And as back to this, like keep it as short and concise type of thing. You don't really want to be put into much text. You want to be, you know, you want it to be easy for people to consume. And that's key. So let's say, let's just keep going with less. So, Okay. So for me that looks a little bit of ESA. And we're going to change the button text to just learn more. And there we go. All right, and we're getting somewhere here. Now we just need some images. So let's go to Canvas. We're going to create a custom size image, let's say 300 by 300. The thing that's probably appropriate. And then we're just looking for like just little graphics that we can use. So we're going to go to elements. And what I'm going to type it in as just Gym, unless you what we can come up with. Or health MOOC overhaul of the sections. That can be one classes, community group. We'll just go for that one. So really matter what one there. And have expert. Can we just want to size these ups and make them the color that we're looking for, right? And let's make them Coachella, which is the rats on that one and that one. And M want to download them as a PNG with a transparent background. Chris. And then I'm just going to come back here and let's upload them. Now we have to do is supplement. And there are two bank dry so we wanna make them smaller. And as you can see here, as I'm making the image smaller, right is leaning to the and left-hand side. No, see, I run this. Those are the tracks that you ran this because it's something that you might run into pretty quickly. So let's just quickly sizes down forests and gallons up place that we're happy with. Their yeah. Okay. Then let's insert a deadlock here, here and here. And then we're going to put the image and save there. And you're going to see what I'm going to do in a second. And then we're going to change the LEA and say they're speaking sensors. Just like that. We're going to name this class terminal. We'll call it internal service TO image. Into that. I'm going to apply it to all of our sections. All right, now, that looks all right, it doesn't. So that looks much better than the did before. And if we just come out to say here, if you look at it from a little bit and we can see how all of us kinda fits together, but I'm pretty happy with that overall mean, I think that looks pretty good for just a template website, should we call it? So Let's take that and there's one more thing we have to close, a couple of more things. We have to come back here and I want to change these MGs the way they set. It's really up to you in a sense, maybe we might change these and they might not look too great. So let's just see how we go. But while probably have to do is remove these images from the background because I don't think that it will play too nice. So I remove the padding here, so I want to, yep, So I want to add that pattern back in. And I wanted to remove from here, just like so. And same down here. I'm going to remove the padding, we want to keep it. And as you can see that keeps everything nice and endline. Now have a look at it like that. I feel a lot better. I'm looking at it from further back on the biggest break point because I can see everything is more than length, which I think I prefer a little bit better. I think it's really personal preference. I just yeah. I think I prefer it was and being in lane like that. Let's just go back and check again. Actually then part of me is also kind of likes that. Let's just leave it the way we had. Okay. I mean, you can do what you want. If you wanted a space, you can see what I've done there. If you don't, you can keep it as is. So let's do that. And then I just wanna quickly and set some headings here. So the important information. Okay? So this is looking good. I'm happy with this. I mean, you can add more sections. You can do all sorts of definite stuff. But for me, I mean, these are kind of the core yeah, I'd say, Yeah, I see these are kind of the core components of what you will probably end up doing. You want a title section just for things that you want to add. If you've got beggar website, you'll want a tail section to link to other places on your website. And you want these sections just to be able to expand a little bit more on certain points are certain things that are important about your company. And then down here, I always think it's good to add that mission statement. Why is it you're trying to achieve was, what did your company executive, why should people care about is that these are important points that should be addressed as early as possible when someone's visiting your site and that's at c, This is a good place to stop that. So now we need to make sure this looks good on all over breakpoint is that's the next thing and you'll have to do this with every page regardless of what one. So let's just go up the scale and see how we get on. So as we go out VF and we're looking good there, don't see any issues. That's how kids. Yep. I think we're good. And I mean, like, if you want your website to not have this whitespace on either sides as you scale up. And then you'll have to basically redesign everything your bills and on each breakpoint. And what it won't scale profitable, look right. But I prefer it when you keep everything consistently less than n and you're not losing a lot of the good design you've done as a way of say skills up. So anyway, my school then down the way because this is where things start to get a bit more. Should I say? So, let's go down to tablet. Alright, so clearly we go, we've got work to do here. So yeah, let's, let's, let's work with us. So the fertile explain how it looks fine, everything in between. So here what we wanna do, now move us up. I didn't hear it. As we're going to want to just stack these. Well, actually, I don't know. You can do, you've got a couple of different things you can do west your tablet. Because some people don't want a tablet to be stated that we use a mobile. And dependent on the size of your text images you're using, you can kind of maintain some, some kind of consistency between the desktop and the tablet. But anyway, let's just see how we'd gone. So we've got the basic container view. And we want to change these. Yeah, we don't need any of that. Actually, I think they'll be doing so is going to be okay. So if you see the what's on the container was the first time we've done. And but now we saw these deadlocks which are causing some issues. Okay, So we've added obviously affects the container. So that'll explain now, but we need to solve it. Let's dive blow this massive but padding, right? So we can have it like that. We can have it kind of stack to the say for this. So I'm going to say that we have incentives. So we're just going to make it 0. I think that's probably could be past. I don't know. Somewhere like that. The problem is that when a skills then it's going to be a bit of a struggle. So there were fine, but let me scale density here. We're not. So what I'm going to do instead is just add paddings E site. And as we scale out there to here, yep. Okay, that looks fine. That looks okay. And then with the image, the background image, I just want to shift the position of that too. Maybe not sent lives. I just want to shift the possession of that. I think I think I feel okay with it being there. Or should we keep a sense of yeah, we can give it a central. Then it doesn't look like it's thrown off, and then it just scroll down. There's a few things we need to do and by the way, ignore the sweetest in this. This is, I might need to revisit this later. So we've actually launched the site, but I don't like it well, so we'll just go with this. And then when we get down here. And for this basic paragraph, we don't want it to be that smaller so that we don't want it to be that much margin. So let's take that down to 1 phosphate. That's plain. And then with the growth we want to add to the grades on tablet and you have to edit the grades for each breakpoint. Let's just them. It's just something that you have to do. So well, I wanna do here is add another row and I want to delete this column and you see what that does there. So those are great history. But the thing that I'm not happy with about here, and you know, I'm going to name this lesson, I'm going to name it service titles, dreads. But I want some padding each side of it. So I want to maintain the 20 to 40 that we've been using for the entire website, have found the culprit. Okay, so this is what's been causing some of the problems. So this basic container on the Section 2 needs to be changed. And it needs to be changed to a minimum of 768 and a maximum of 91. Let's see if that change doesn't change too much. It's just kinda pushing it from one side to 17. Building The About Page: All right, So now we've done our homepage and the next thing we need to do is design our about page. And this will hopefully not take as long because we've put together some of the basic structures that we need to build this page on the homepage and you'll see what I mean in just a second. But the very first thing that you can see here that I want to address, and you see this as blue. And we went over, why is that? Well, that's because we're on the about page. That's the one we're editing. And we don't want that to be blue because it's not consistent with our brand, right? So we want to go that and you can see here that it says current, this green. Here. It means that we're currently on that page. And what we can do is we can take our nice red and we can change that to them. So now whenever we're on a particular page will be highlighted and rights for these, these pages to. So what I wanna do is, as I said, we've already laid out the basic structure of what we're trying to achieve. So we don't need to actually go ahead and rebuild with a top hat and stuff. You don't want to be doing that stuff from scratch after you've done it once, right? It takes a long time as we learned from the first video. So what we wanna do is go to the homepage. And we can take, we can take the structure that we've got here, but we're going to want to change a little bit. But we can take this basic section we'll talk about. And we can teach that. Paste enter the body section and look there, we have it. But we're not going to want a farm here. So we're going to want to ditch that. And this deadlock, I mean, now we don't want to use that either. So we're gonna go and use up block there. That's going to be the food webs. But we're going to change a couple of things. But we're going to have that head in there and we're going to have a paragraph under it. And then we're going to have a button underneath that. And that's going to link to the contact page. So you can use this standard kinda format for each page for at least for the top of the page anyway. And and that's why I would usually do it just I mean, it just makes life easier at the end of the day. And so we've got something going on there. Well, imaged a Madonna and actually not damage is probably fine. Yeah, that's fine. Let's just go ahead with the paragraph. And I'm just going to change the layout here as well, just so that it all fits nice. And then we're going to adjust the padding like we've done previous pages. Just like that. And we're good to go. Good to go. And I just wanted to just some of this text because I mean, there's another thing is as well, like I was saying earlier, by the size of having a lounge one per section. So we can see a book of five lanes, including the title in the paragraph, burger three lines and the descriptive as opposed to the heading. And that's favorable section. But for the header, I wouldn't should I say we've had to either turn two or three and not 23. Okay. So that's just something to keep in mind. Now we're going to use that as contact is. And how am I feeling about yeah. Fine. I guess too wide for me. Like it's excessively white. So well, I think I made to actually just change this layer, the center and then I'm going to have to, okay, That's better. Yeah, that's above M. Now you can see here the contrast is okay, I can read this text is not too bad. This a little bit invasive, but not to the point where it's like completely overdoing it. So what I will do here as let me just go to, All right, so now that we've done that section, which I'm all right, and let's just quickly make sure yeah, it doesn't scale, but we'll get to that. Lisa. We're just going to put in some really basic sections here. Like nothing crazy, nothing distributedly designs, nothing like that. And I'm actually just going to do something really, really straightforward here. And It's fine to do things straight forward because it will make it easier for you and your print in a text and stuff. And if you're designing and is obviously easier for me to bills here, but it's just a straightforward layout. So let's just go ahead and, and do this. So through with a block in there and another one. And then we're going to throw an heading paragraph. Don't need a button. And I mean, we've got button at the top. You don't want to yeah, you don't want to overdo it with the buttons as well. That's a good thing to point out and keep in mind. And then in here we want to just again, like many times before we just want to adjust the padding. Now this section, you can be as long as it needs to be at that, I mean, if you're just looking for something short and compelling, you can either store it in there, you can add whatever you want. But that's going to be the first section. And I'm going to do a new section underneath here. I'm like these informational pages don't have to be excessive. I mean, people Google here as they're just looking to learn more about it, the more bad company overall there. And then follow the basic section. I want to, I want to make it gray. So when some kinda differentiation. Okay, so you can see that there's a very, very slight differentiation between the two sections. Now inside the dev blog, I'm going to add two columns. Here. Just above that. I'm going to add a heading. And this is going to be our Meet the Team having been actually instead of columns, I think I'm actually going to make the aggregates and goods are usually just a little bit easier, almost always. So I'll be H2. And we're going to add two very basic tiles in here. Just call this. And then I'm gonna make this background a little bit darker too, not too much, but just enough so that contrasts ever so slightly. Just like that. Again, we're going to make the borders and we're going to add some padding and change the layer. Again. We're making it Vasco widths and just like that. And then just like we did before, we're going to add a default, drag the image in, and change the layer that does block. This one will be h3. And then we want a text for the profession, italic. And then I'll make that red for the profession to change the margin. Ten. And that looks good to me. And then for the grass itself, these are, I mean, to make the argument, These are two white, but it can be hard to judge that. So actually those might be fine. I think it would push this in. Yeah, Actually, those are fine. So I'm just going to take that copy it, paste it in there. And that's the Meet the Team sections. And on Canva like when you're at and the MGs. I always find this good for the team proof AOC is like a circular fold. So on Canvas. If you go back to Canva and you just create, then you can add a frame. Not there. They're circular one. You can go to fossils. Profile pictures. John and Joe. Okay, I download these with a transparent background. Now we have them there. And we wanted to just the size of these cues are far too vague. And those are okay. I mean, this is where I think that they should be a little bit slimmer. So if I go to the grass itself, actually, for what we're doing here. Okay, That'll be fine. And then below that in the same container, we want to go ahead and add one more big section. Okay, and last section that you should probably look into adding m, especially if you're a web page, it's just quite a lengthy Actually. Yeah, I change this from our story to driving health and wellness. Then here you can go to the layers and you can take this main content polygraph layer rather. You can make this like a beggar. Like if you want to write a law, if you've got like a lot to talk about on your About section and this is a good place to do it. Maybe you've got some videos that, and this action will use something called a rich text element, you can see here. So we have to make some edits to that. And we're actually gonna do this and style guide because that's the best place to do it. So if we go, So guys, we don't want a page, we want to style guides and we want to live just like so. We want to change the text to Proxima Nova obviously. And all these haste toes and stuff should be online. And we want to make this consistent with the other page two, so we've got Sophie, and we're gonna wanna make it gray. Remain pie graph. We want to get to 16. That's a 165. And you kinda see where I'm going with that so far, you're far less you want to go through and you're going to ask apply, um, all of the principles that you debts for your headings and your main pie graph in centimeters and you want to apply them here. And the reason for that is just as mainly just because it's a rich text block, it works an axle little bit differently than some of the, some of the other elements. So you want to go in and just make these changes and use this as your base, right? So keep this on your style guides and make the edits you need to hear. And Azure will be able to see if I go back to my webpage, they're already being applied. And what will happen is that these changes won't be applies to the, to the layer that we just added to the about page. But what we are going to do is take us, we're going to copy it. We're going to go back to the boat. We can dish what we've got here. And we can add a new section. And you can see that I haven't finished editing the whole thing. So these are, these build upon so too small. I could monkey about it and play with us all day until I feel like the rich text is perfect. But what I'm going to pick here as our story, because that's what you would use a section four. And you can do whatever you want here with that. And that would be my webpage, right? So allow the mesh and then drives the purpose of the company, meet the team. If you're more staff, add more sections and make these slimmer. And by adding more and more employees if you've gotten them. And then talk about your story made that maybe add a YouTube video if you can. And that's it. You don't need to overthink. These pages, don't have to be exhaustive. They just have to keep us with information about the company for anyone who's looking, fought. But the last thing we need to do is we just need to go ahead and make sure the scale roughly. So we can see that's fine. And these scaled perfectly, which is great. So now let's go back and we want to go to tablet. So that doesn't scale very nicely. We wanted to just padding on that. And I'm just thinking, I think I want to do the same here. Okay. Similar here. Right? And that looks fine on tablet apart from the containers S pot. And I just realized I'm not sense of that. And anyway, you can kinda see what omega, so we just need to keep adding these containers. That one's fine. And the main content will be fine too. And then all of a sudden, it looks good. So let's move on to the horizontal. So this container here is one causing some of the issues. And we want to actually, let's just go back and double-check this. That's fine. Then I have 77 there. And then we wanted to reduce the padding that we've got here because it's not going to look try as we get down to this level. And that looks fine. And here these grids, we're going to want the stack because it's going to be much more texts. So add one here and get rid of this one. And again, a lot of space here, but it looks okay. You, you'll get away with it. And then again, our main section is fame. And lastly we have mobile. That looks okay. These do not clearly. Let's just double-check that. They're fine. And it looks okay there. Yep. Now let's gets none. Let's quickly check, let's check it and you pull it right out and push n. Let me just double-check way of container here. Yep. Okay. Happy with that. Yeah. That's the about page. That's why I recommend. It doesn't have to be anything crazy. You don't have to be doing like a stupid amount of work. I mean, you can, and we'll talk about some of the things you can do in later videos, or it may be in another course. So if we're trying to get more advanced, but if you're just looking for something, basically it looks clean, it gets the job done. This is why I recommend. So that's it. Let's move on to building a services page. And let's see what we can do with that. Okay, So let's move on to that now. 18. Building Your Services Page: All right, so now that we've finished our about page, the next page you'll be asked to create as Socrates page. And for yourself when you're building out your services page, you might have a bunch of services. You may want to allocate one page, the service. You may just once I've blocks like I'm going to show you here. And there's a bunch of different things that, that you can do. So we're going to keep this one really, really simple. So we're going to take Hello from the previous page like we've done before. Let's hit that copy it goes the services, paste it, take up so the top. Change the image and make it our services. And we can put something on here. We can now have we can just leave us alone. Absolutely. Okay, So we've got that. And then here what we're gonna do, I just want to add here probably an accordion. So I want to have information for the services by what most of it to be hidden. And, um, I don't wanna make it too complicated. I wanted just to get to the point people can see what Magnus Jim has to offer and we can keep it like that. But as I said, you can go ahead and create and center pages for each service. And you can have a drop-down here that the visuals all the different services. So let's go ahead and just build a Ricardian so we can see what we've gotten layout. So let's have a look at that. And I don't know if I have a lesson for now. We don't have any accordion or anything like that. So we're going to have to build it from scratch, which is absolutely fine. So let's just build a section. So elements, whatnot container, I want my own. So throw a deadlock in here, then another one. And then down here somewhere we're going to have the dropdown. Drop them. There we go. Perfect. So we're going to have to play around with this a little bit. So if we keep having a look here and see what we can find. All right, and below this section, what we're going to do as I want to add an accordion and actually already have a preset for this page that I want to add. Then I'm going to do is I am going to add it to a separate project so you can just take it if you want to use it. But also this whole website, I'm going to publish an Ethan copy. You can take away whatever you want from it. Um, but let me just quickly show you what I'm gonna do. So I'm gonna go to my flow on another tab. Obviously, it's gonna take me to a company website, but that's okay. Not less deliberate. I'm not trying to ponder on services, but we're going to come out here. Or actually I think I may have one looking for on here, but let's just go to the dashboard from that. No, Actually, yeah, as in the NVD website, that's why I was aiming for apologies. So let's go back in here. I'm going to have to hunt for a little bit. I know, I know somewhere here. Shrift tissue values, possibly the values page. Yeah. This is the layout that I want to take and we'll change it and make sure represents the brand colors. But we're going to take this section, copy it. And I could think of a webpage. You can just copy and paste between projects really, really easily, like those. Really ever any issues. So let's just drag up. Okay, and now we're just going to want to enter this mic hours. Now obviously, these accompany principles. I'm going to go to Lorem Ipsum generator. Now that one, probably this one. So one. And then here, all I'm going to add. Right? So don't, so let's take our nice reds from here. Paste that in there. I have a long title, but not really that fast. And then in here, I'm just gonna put lawn and epsilon right there. So yeah, Like you'll be able to take this from projects. I'm going to Lincoln on Skillshare on this course. And you can copy any of that you like. You can access the entire project and just take it. Okay, I'm not going to use it for anything. It's just going to be set in there. So if you need anything I'm designing here and you can take it. And this is all scaled properly and stuff. So like, let me just show you what I mean. So if I go here and just view, so it would just look something like this. I've missed out something there but and you can take these out. You could only have four. You can split them up into different sections. You can add them to our dredge. You can do whatever you want with these. So these are useful, I think. And I quite like it because it's just a drop-down and it's really straightforward. And you need to change the highlight layer. Actually, I'll do that before I move on. I think this is a good way, especially if you've got a lot of services, but you don't necessarily want to add extensive information about them. Alternatively, if you do have quite a bit of information, but you don't want it to clog up your page. Having a drop down like this is good to disguise it and just let people click on what the one m and let me just quickly change the color here. And it's on animations. I'm session sugar here. Okay, So let's just change that color palettes, right? That's what we're looking for. Snow get some good drop-downs we can use. And yeah. So you can use that for your services. You can use definitely. You can do what you want. But I think that this is a good way to break things up in a way that isn't going to clog up your page or make it too text-heavy and unflattering way. So yeah, this is why I do for the webpage and this should scale. Well, in this section doesn't play nice, but that's okay. I can work with that. I can I do that right now so we can make sure everything's good stats. Let's just make this and that should be and best Hofstede's. I think. Yeah, looking good. So overall Let's go to Preview. Yep. Grit. So now that's in place. Yeah. So that as you as you well. And that's it. Okay. So let's move on to pricing page. 19. Building Your Pricing Page: All right. So now that we have our Services page done and dusted, it's time for us to move on and get the place and penalties. So just like before, we're going to take our basic header section. And we're going to paste that onto here. We're just going to put bracing. And we'll just leave it as lot of Epsom. And we're going to change that image to something a bit nicer. Okay, So we'll leave that there. And then, then in this new section we've got, we're going to build out something really simple, which I recommend. I mean, you can have some, some more complications on your price and page if you want, but you probably won't need to. And most instances with gym memberships, you usually got like steel offers. You got like a base one, that entry point. And maybe you get your higher tier for higher paying customers. So, and that's what we're going to belt here. So we're going to do that. I've got a basic section contain a deathblow here. Then what I'm gonna do as I'm gonna throw in, I think we're good. Yeah, we're gonna do this one with columns. We're going to use a grid for this. We use columns and we're going to have three. And then those columns are going to add a def block and each, there's going to be a very similar layers what we've done before, but it's going to be slightly different. And then we're going to have a heading above the columns and n here. How are we going to do this? We're going to do, I need to think of it that Let's just got a class he's done first. So we're going to do the basic section, then basic container. And for our heading, we're going to be that one. Sensor versus gonna say. And I just realized that's not actually H2, that one. And here we're just going to name this the Blog class. Pricing packages. We're going to keep it real simple. And widely it's to do with this one because we're really trying to put some emphasis. I actually want to use the red is the backgrounds and which I haven't done a lot less, but it's just because you don't want to overuse it. You don't want to saturate the use of the color. So let's make that around it. And then let's get some this is how you need to think about the structure of that. So we're gonna put, let me think. We're gonna have a text element first. Then I'm going to have a head. And then we're going to have a brief description. So another text element. And then we're going to have a less. So let me just find decent list of texts. All right, so let me look a mass but we're going to polish up so the water, just like before 2020. And by the way, you can hold down the Shift key. If you want to change everything to one number at once. Then this one we're going to now not bolts. Don't need bolts. We didn't need it to be I'm going to go 15. And then I'm just going to call this Stacia, going to be less space and 2, and I'm gonna make it white. A heading is obviously going to be a H3. And keep it at that. And we're just gonna make it white. And we're just going to say 25. Then here we're going to add the descriptive. So we're gonna take some, a lot of epsilon. I can just take this one here. Maybe not as much as that. So maybe just one sentence. Seems good to me and we're going to call that basic paragraph. Let's get some white in there. Actually, no, I don't need to know the class here. And then we'll fest lists. That's when we're going to change things just ever so slightly. And I also want to reduce the module at the top of this heading. Then an N here on the less we're just going to make the ANOVA. We're gonna make it white. We're going to make a 16. And then we're going to add some padding between each less than probably ten. I think. I don't feel I'm feeling pretty good about this one. And we're going to add a button down the bottom. We're just gonna say basic lesson. And we're going to go ups because we want this to be white. Let's change the latest lately. So one of the buttons to be full width, just like that. And I'm going to put sign up. I'm going to take that and I'm just going to copy and paste that here and here. Stashed all the Father now call the books go. I don't know, 35, 45. And that's why I do for the pricing page, a really straightforward, you don't want to overthink it. So that's the really basic packages that we can use. And you could add some things about it, like, instead of having them all equal color like that. What you could do is as you could have these as white and n vertices on the top one as rights. Actually, I don't mind doing that just to illustrate. So you will, that will look like. So let's make that white, which is going to actually just slightly gray. So I can see Edison and I can make the top one. And I can make that one go as far as making the texture adds. I don't think that's appropriate. And then I want to make this gray. I like that. And then because we're making a white wall I wanna do here is add a box-shadow. Just like we've done plenty of times before. And for me, if I'm happy with that, copy that there's this one. Let's change the tags. Basic specifier. Yeah. Alright, and you can do something like that. Epistle bit of emphasis on last one, and that's the one you want people to go for. You could add most popular labels. You can do lots of stuff here, but that's why I recommend for price and you don't need to over-complicate or make it. Yeah. You just don't over-complicate it. So let's quickly check and see how the scale, and I want more space. So I'm going to moving not quite a 100, maybe like 60. Yep. Let's now bring the happier with that. Let's go tablet. Losing a little bit there, but not so much that I'm feeling what do you like? That's okay. I think. Yeah, that's fine. What we can do is we can change the pattern to maybe 20. That'll help below, but, okay, And here what we've got, so we've got the column stack that we would expect them to, but there's not enough space, so we're going to add some spacing. And that's it. Well, it's much better than that. Let's see. I will look on mobile grid. Looks good to me. Usually just a space here, it's Farsi and E loops goods. All right? And that's a price and pitch. So these pages are coming along nicely and I'm feeling pretty good about them. Now, there's some parts that you've maybe been watching me doing here and you'd be thinking, okay, those parts that have maybe not unhealed, I've done on all the pages, for instance, I haven't been Lincoln the buttons and I hadn't been paying much attention to the headings are whether they're categorized correctly. And the reason for that as well. I always do. I usually try and get the bulk of the design, what kind of the way. And then I have some standard checks I do at the very end, which I'm going to make a video and show you what to do. And because you wanna make sure that your site is going to perform optimally, you want to make sure everything's in place. Sometimes it's a bit much to be doing those checks as you're going through the design process because that's not what you're focused on, your focused on trade and something that is designed. Well. So we'll do that in. So if you've noticed that, if you're not, we're we're gonna come back to it. But yeah, that's the pricing page. And now we have the Contact page to have a look. That's the one that's next. And then we're nearly there. Now, let me start talking about regeneration structures and how we actually go about generating leads with us. So let's move on to the next one. 20. Building Your Contact Page: All right, so now we finally come to addressing our contact page. And like the themes that would be going through this course. I know we've been focusing a lot on design and we're guessing totally generation part of the course now. But it depends on what type of website you're building. Firstly, in terms of what you want your contact page to look like, you can follow a more traditional approach where the contact page is just a font. And I can absolutely show you how to do that here. And you can also say the approach where you build a tight farm and you embed on the page. And that is a more interactive way of collecting leads, which I'd argue is a bit more engaging as a bit more innovative. And at those, it connects and tight form two different applications is also much easier than maybe just a standard form. So there's so many different ways you can take this and it's all of it was best for you. And what I'm going to actually suggest the way I'm going to build us. I'm going to go ahead and build this with a tight form and mind. And it depends on what you're doing, but that's why I recommend you to if you're watching this and you're genuine and the way that I'm setting this up and will not be in probably won't be in your best interest. And the reason why I say that as, as you can go on, you can say no for PT remainder. You can say no for team up. You can have members saying that up through your website and actually getting money off them before they've even step foot in the gym or before you even spoken to them. And unless you're selling like a high-tech kind of products or services that you need to speak to people and you have to go through a particular sales process before they actually buy from you. Then this way maybe a little bit better. Again, if you're just kinda standards local business and you need people contacts and then, yeah, the type font method is much Besso, wasted. Go and let me just quickly go back and I'll show you type on our belts are very quite tight form. I'm far less. I'll just show you how it will look and show you how to lunch, right? And I think this is easiest ways to go about it, right? And tight phone rails of land expensive. You can create, really engage in farms with it and just release it embeds. So let's create a new type 1. And we're going to come up with their own theme. And we could just start from blank a thing because all from scratch. All right, and now that traces I'm just going to call this Magnus Jan sign-up. And what's the type form itself? You'll have to build a theme. You have to just monkeying about. And I want to get rid of this image. Okay? And I want to add a welcome screen. Okay, The first question here, obviously the welcome screen here, flush question and we're just gonna, we're just gonna do a couple of questions here. We don't need to take a lot of time and over this, but you'd have your starting screen, you have your first question which I'd recommend is as well your first name, which are less than email address. You're going to want to collect that. And every instance. If I can find it, It's Hayden from it. A go. And you can add any other questions you want here, but I'm just gonna go with that. Then you want to add an ending. You can see there's already one here. Alright? So we've got that and I will, I'm going to do is build a theme. So when it comes to design, we're going to add a new theme. The backgrounds. We're not going to have an image, but we will have a background color and we're just going to use our grid. In terms of the texts. We're going to use white. And with the button, we are going to use our reds, like we've been doing previously. And that's us. And the answers are also going to be, probably, we're going to stick with white for that one. And that should do it. Let's see how this flows real quick. So we'll click start. Yeah, and we're just going to want to quickly take a look at the font as well. So we won't use system font, we will use UDL, think you guys will have your ANOVA. We'll use Matsuda would just use whatever we can get our hands on. Okay, so that works and we can make a lot of mediums probably the best option, um, okay, and that's a really basic type farm belt for this website. So let's just publish it. And what we're gonna do is we're going to add it as a fill page. We're going to get the coat's going to copy the codes. And here what we'll do it, we're going to get rid of our header. We've got this section. Then we're going to add an embeds element there. Paste the cool, then save it. And that's us. You don't have to do anything else to us all we have to. And when we publish that, we'll be able to see how it looks and move, able to see how we can interact with it. But that's really as far as we're going to take at the moment. So yeah, I think I know why I've done it like this may not make sense that you can't see offeree, okay, but on the next lessons I'm going to be talking about how we actually turn this or how do we actually improve the regeneration aspect. So that's not going to explain the flow of it. And then I'm gonna make some suggestions about, yeah, but how you can connect these different applications and how you can make the most of it. So let's move on to that and get started with the lead generation side of things. 21. The Lead Generation Structure: All right, so now that we've designed all of our pages and we still have a little bit of work to do the design side of things, but for the most part is basically finished. But what we wanna do now is talk about lead generation. And this is going to change depending on what your company is. And there's so many different ways that you can go about generating leads and Sunday your wives to answer what we would call it a selling machinery, where we can collect what leads and we can do a lot of good work. This website we set, I've tried to set up a structure that I think is probably going to be appropriate for most companies. So you get to math is going on. First one is where you can collect email addresses and names and the tongue for something for an offer. So they offer that we're using here is say not to get 10 percent off your first year. So when you sign up for a membership to get 10 percent off, the reason why I have done I like this because there's a separate way I would normally do. They're supposed go and fill. I don't know Jim website for instance, as because the math with the two methods that I've got here are probably the two ones that any business can kinda using that you can just add that you can adapt the foundations of walk, but here you can apply it to your. And so we have this up at the top here. And the important thing to emphasize here is that this will be visible to anyone who's visiting the site for the first time. As it comes through the homepage there being presented by partially but this page one being presented but the purpose and the mission statement but as telling people what this gem can help you to. And then below that we're telling people where if you sign up here, we're given a much strong call to action and that's the point. And again, presented with that, with having to do any school and I click on anything. And that's what's important. And then down the bottom here we've got another call. It goes the same call to action. It's just in the first row and this will be shown on every page. So the deeper someone gets into the page when the head the bottom again presented with another offer. And these are good for a bunch of reasons. I mean, the first one is that it gives you something that people can attach to beyond just contacts in your company. If you're a service-based brands for a gym, there would be more ecommerce functionality involves before we're going to write down that road. And the truth is if you get really deep into one particular type of business model, you'll find that their foundations is regeneration methods will always stay the same, but they just make us feast, but they just make slightly faded from one another by think that that's one shown here is a really good place to start to come up with one offer like we've got here. And then you obviously high good contact button up at the top. And the contact page or consisted of a type form or wherever kinda farm that you want to use. And one thing I didn't do on the tape from when I was building it was really a call to action there a definite call to action. Now get 10 percent off. And it could just be whatever you want. And we're going to talk about some of these here. So for instance, I've got it listed chart open here. I'm just going to quit the densities. But for the desk canteens offer, you can then enter your email, email campaigns or the desk and it would be boats. And I'm just gonna expand that with a link. To purchase. A membership. Are alternatively, it would be difficult. But the sales rep. Because if you're cyberspace and you're not going to have an ecommerce functionality. Someone has to speak to you before you can actually come to an agreement. So that's something you may want to consider. And you can take multiple email, but you can send multiple, you know, you can create a whole automated sequence. Obviously, we're not, we're not going into that today, but that's what you can do it you can go ahead and you can create a full automated e-mail sequence to an offer to sell the perhaps and if you asked him, but because someone will be signing up in the HUC strong enough, there's an older gonna get desktop and you may have to do that. And then what's the contact page? It may just be a straight forward as contact is like pick a color picker discovery called gap proposal request pricing so that we have the price and unless Jim say, but there's so many different hooks that you can use. And yes, So we're going to say contact and then the result was that would be a big call. So yeah, like the so many definitely generation methods I could talk about here. And to be honest, it would be a completely separate course. I could go on, but that's for soul so long. But far less website that we're looking at. These are the two different ones with golfer would offer them a desk and retain them. Were often than my desk and pick a membership or liquid bigger call. Standard contacts form, where someone can pervade a bunch of information. And then returning to be connected with the sales rep or something like that. And that is the key thing here. That's the key things that we've been trying to focus on and trends about. And what we have to do as the next video. Rather, we're going to be connecting what we've got here. So what we're going to be doing in the next video as connecting our type form and also our farms here and here with our email marketing provider. And I want to briefly touch on the different types of evil Roxanne providers you can use. And they should consider if you don't have one at the moment. So we'll get into that in the next video. 22. Connecting Your Lead Gen Forms To an Email Marketing Provider: All right, so now that we have went over allele generation methods and we have to connect them to our email marketing provider. So you may already have an e-mail marketing provider are if you don't, you're going to have to pick one. And I'm going to show you two of my favorite ones I'd recommend to beginners. One of them we actually use internally, I'm for a lot of what we did and that's what I'm gonna be showing you. So the first one we have as Mailchimp, and this isn't the one that we use, but we used to use it. And militia was really, really good if you're a beginner to Eva marketing is definitely case. So to small business owners. And then people are new team and marketing and marketing in general. So I'd highly recommend assessing out with them. And the process for connecting your Webflow farm with motion will be very, very similar to the process of connecting Webflow, but convert kit, which is what I'm going to be talking about here. But these are the two that I recommend. But you can go away and do your own research because there are so many different e-mail marketing providers. Mailchimp is probably the market leader and the law respects convert kit as less known, but it's just as good as Mailchimp. So what we're gonna do is open up a new tab and go through a conductor. We actually switched away from MailChimp or undergo a month, months ago, wants to, wants to go. So let's login. So this is convert kit. Let's give you an idea of what it's like. And this is the US, yeah, this is probably the one I recommend using this as a as good I much preferred over motion is just much better in my opinion. But yeah, the thing that we're going to be doing here, then, firstly, we want to connect farms or discount forums on, on here, on the top of our homepage. Under Fisa. We want to connect them with combat cap. And then we also want to connect our type farm with Connecticut. So the first one I'm going to show you is how to connect your type form with kickback hit. And the way you're gonna do this is using a platform called Zapier. So you can see here there's lots of different connections you can make with different platforms on tight form. And what they actually haven't to use Zapier or some other type of API configuration software. So let's just type in here and see if convert kit comes up. So we can see that there wasn't here. We would have to go ahead and use Zapier to connect to that. But we well, we well sought to use up here. So if you don't know what I'm talking about there and we're still going to use I'll show you the process you have to go through, so don't whatever. But here we have type form and we're going to connect to and we should be good to go in just a second. Okay, so tight form has been authenticated. Now we need to get authentication from Connecticut, which should be relatively straightforward. So it needs to go so you can vacuum any school settings. And any SQL is a general and a less API key here. Actually this one, the secret one. Let's take that, copy it. To come back over here, paste, then click Create. Great, and that's been successful. And what I wanna do here with regards to tags and stuff, you, what you would have to create a tag and say convert kit that you're going to attach. The leads are coming from this form to so I'm just going to pick yeah, I'm just gonna pick one single tag. And yet we can update existing subscribers, but we don't have to. Okay, So we can choose. These are all the tags I've gotten side come back. It doesn't really matter which one. You create a tag specific to the form that you have in your contact page. So you create a tag just saying contacts and something like that. And what we're going to use. It's this one I just haven't I theta. I haven't added a question to. And then you're going to match these questions with first name and last name. And then when this information gets pulled into convect, get o be assigned to the right places. So we'll click Finish. And that's it. So if I went on to take form on the website that was Belgo we've yet to publish. And I would be able to put my information in and it would show up and come back kitten, that would be good to go. So now that we've connected tape farm with convex, we're going to head back to Webflow. And we're going to connect these farms. So we've gotten the header and the Fisa and we're going to connect them with convect KitKat. Now we're gonna do that using a platform called Zapier, which obviously mentioned. And that's going to allow us to connect Webflow. Wes, convert kits through API configuration and Zapier, it makes it very, very easy to do. And in terms of these forms, of course will get these forms may seem independent of one another. But the way we're going to set them up as the same way, we're going to set it up the same way. We're going to assign the same tag and there'll be treated as the same thing. And because ultimately they are. So that's what we're gonna do next. Now this is slightly more complex. It'll take a little bit more skill. But I definitely was worth knowing how to do. And you might be thinking, well, why, why did I not just embed a form onto my website? Because you can't do that with a comeback here. You can create a farm and then you can just paste it onto the, onto your site and you can collect information that way. The reason why hasn't liked doing that is because you don't have as much control over how the form looks. And that's usually quite a downfall for someone like me who cares about zinc way of it because it wouldn't be consistent. It would stick it like a sore thumb to me and it was driving me crazy to say the least. So let's go ahead and do this. So I'm going to shut down all these tabs, mainly because we are also kinda get into the end of this project. So we've done type form as other way. Let's just get rid of all these. So Zapier as a platform that you can use for free, but there's also a paid version of it. I would advise investing in if you end up doing more complicated part with it. So I'm just going to say it in here. This is one of the platforms that we pay for. And this will make it really easy for us that connects Webflow with convex. So what I'm gonna do, I'm going to create that. And this process will be the same regardless of US pay the free. And then we're going to create, we're going to create a customer. So now that we are here and Zapier, this process would be the same by the way, regardless if you're on a free or paid plan, and at least it should be. But what we're gonna do is we're going to click the Create button. And then we're going to browse gallery. We'll see if there's any templates here for connects them Webflow with convect kit. Because a great thing up exactly it is that you can search the app so you're looking for here. And then you can connect them directly with the other IPR. So you don't have to do much monkeying about that can engage you through the entire process. So let's firstly type in Webflow there. And then we're going to type in Connecticut. And then you're going to set a trigger. So F is a form submission. That's what's going to trigger this event. Then we're going to add a subscriber. Then we're going to add a subscriber to a sequence. That's what we're gonna do. And yet we're gonna go ahead and create that. And then what we're gonna do here is just click Guest OS. It's alright, so now that we're in here, we're going to click connects. And you can't because it's a separate website that we're working with. So you can see all the different websites that I have here. And the one that I'm going to use is obviously Magnus, Jimmy, or Shi'a. So we're going to click there. I'm going to click Authorize application. And that's it for our website. There might not say it, but that is definitely the one. So then let's hit night. So that's obviously our gem here. Now, what we're going to want to do before we actually go ahead and click next is we're going to want to publish or say at this point, because an order for Zapier to, because in order for Zapier to identify the forms that we want to pull information from it has to be published. So let's go back to Webflow, going to go up here. And then we're not going to add a custom domain at this point. And that's a totally separate process that we'll talk about at the end. Because in order to add the custom domain and you have to upgrade to a site plan, which I'm not going to do here. But why I'm going to do is publish it. So this Webflow, Hofstede's domain. So let's do that. Because that identifies a project is the same thing regardless of what domain it's on. And then what we're gonna do as to make sure the form is going to be registered properly. We're going to just quickly and SAT or information, so information ends up So registers either as a response. Okay, so that's one. And then here we're going to do the same. Okay? So now Zapier should be able to pull that information that we've just messes when we click Next here. So you can see that as being registered with two separate forms. You'd actually going to have to create 2s abs, you're going to have to create one for one farm and one formula. So we're just gonna go for the first one here. I'll click Next. And you can see that it's pulling the data from Webflow. And then we have to connect and back. Good. And I already have connected, so that part passes for me. But what you'll have to do there is when you connect and convert kit, I imagine as get your secret, as get your secret API key. And then you're going to have to copy and paste that into here somewhere. Now it's asking you a bit sequences. We haven't created a sequence. But let me just go back and talking about Git and show you. You'll create a sequence and automations. And again, convert kit as probably a whole separate course in and of itself. But the way we plan to have information or you can create a really great sequence. But this was when we were talking about the e-mail campaigns. But you would want to go to sequences and start there. And this is where you would build out your emails. And then those e-mails can get added on some automation. But what sequences? It's just a set of emails that are getting incense and an automated way. So I'm not going to use any of these at the moment, but we'll go back to Zapier and I'm just gonna collect it doesn't really matter what one for me, but you can't sequence. Then you would click Next. So we can see here when we're looking at this that is pulled through a name, but we don't actually want that one either. We want to write the email, we want to map that. So we're just going to click Data emo. And then down here we're going to go firstName and lastName. And that's what we're going to use. And let's just see if it works or not. And then we're gonna go ahead and click Next. We're going to send a test to see if it's working. In gray is pulled out through. So now we have created, so what we want to just turn on those up, and that's it. And then you're going to want to repeat that process for the second form. And then you will have your thumbs hooked up to advocate and the information will be passed through properly. You well, one to spend a little bit at a time when your e-mail campaigns law. And to create a sequence, use that new sequence, give it a name. Like. So. Then you want to give you a sequence, a name. And we can be anything you like really into your business. Just make sure it's clear and that it's clear what form the sequence is related. So and then that's what you'll use in your Zach. I'll just create a test one just to show you the process real quick. And then this is where you write your emails. And you can add multiple emails and they all fire in an automated manner. And you'll determine how long after each email is sent, when the other one will send. And it really is that simple. You can spend a good bit Taiwan you to emails making sure they're designed properly and the sand all the right things. And then dependent on your authoring or your service, if the intention here is to use someone's book a call you're going to want to link, you're going to want to send a link to your counter, a platform that you can use for that as called Calendly. And this is it here. And you can use this. And when it's really, really easy to create an event, it will generate your custom link. You don't have to do much monkey and about. You just have to get Calibri the information that you need. And you'll be able to link that in your emails for pupils a bit calls babies for business, still dependent on what you're doing. So you can really take this whatever direction you want. It doesn't have to be specific to what I've been speaking about here. And that's it. At that point you will have connected, it's your farms to convert kit. And that will be a fill automated sequence if you set this up properly, which is really, really useful means you'll have to go manually sending emails to leads and all that kind of stuff. So yeah, so that is really now there's a couple of other things we have to do, relate into the site and assessing. So I'm going to talk about in the next video. And let's go into that right now. 23. Adding Your Siteplan and Settings: So the last few things that we need to go over here, and this is one aspect that we haven't touched as we've been going through this course as workflows, project settings. So you can see you've got a bunch of different tabs with a bunch of settings. I'm just going to quickly go through them for you and explain to you what each of them are. So in general settings, you've obviously got the name on the sub-domain over the site. And you can add it to our folder if you want to. Then you can also add your favicon and web clip. So I'd advise put your logo on there because people won't know. So and then down here you've got your time zone. You can add your line login heel, that's useful. You can get rid of workflow branding in the HTML, which you'll probably want to do. And then down here, just statistics really and hosting. So you will want to connect your custom domain at the end, when you're ready to publish, you will want to add a site plan. An essay plan can be either one of these. The one I'd recommend is CMS. But you can use basic if you want. Cms will just give you added functionality and oh, probably be a slightly better hosting service. Then yes, the isotopes. So if you have any employees that you want to make edits to the site, but you don't actually want the mess and the boat with a design. You can add them as a collaborative. So on Login to change MGS text, things like that, or create new pages and your CMS. Don't need to. Why rebelling SEO? So we haven't set up Google Analytics or site console yet. But when you go to do this, to do any of us, you will have to add a site plan. You'll also have to verify your site with Google and are awesome SQL things that you do have to do, which I'll talk about in a second. And then farms when e-mails of January's is or if you want to know when those farms, in terms of getting notifications, you just put all the information in here and follow through for you. Then we have fonts. We've already kind of touched on fonts and connecting them with Adobe and doing all that. So you're fine their backups. If you ever make any big mistakes in your site or you lose stuff, you can collect or return to one of the backups here. The good thing about Webflow is that it does backups automatically. So that's a real benefit and integrations. So you're going to want to integrate with Google Analytics here. If you, google has Google Maps, Facebook pixel at the two most important ones here are Facebook pixel on Google Analytics. As really important, you get them set up. And the third one as search costs, we also want to get that self to. And then we have custom code. It depends on what you want to do, what's your Google Analytics and Facebook pixel? You can add the custom code in here. Or alternatively you can use Google, or alternatively you can use Google Tag Manager, which is also a great way to sell that stuff up. But these subjects really fun to the castle, kinda website optimization, SEO. And that's it. That's what you need to know about and here. And it's just going to give you an overview of the settings and the stuff they have to do to get the site ready to launch. So with that being said, I just want to do one last video we covered in the final checks I usually do on any site that I'm building. So yeah, let's jump onto that right now. 24. Final Checks: All right, so the very last thing you want to do before you take your website live is just some final checks on it. So the things we wanna do here, we want to check. We're going to check the copy, make sure there's no grammar mistakes. We want to check the links on all the buttons and make sure that all go into the right places. And we've already checked the farm. So that's one thing out of the way. And then the last thing we wanna do is we want to check the head and structures. And then the thing that will help us with that, as like we spoke of it before, the Webflow other checker is useful. And one thing we haven't touched on that it's actually highlighting here as the lack of alt text on the images. That's another thing that you really want to check. Alt text is quite important for SEO. So to add alt text, she just goes to whatever image as you're looking at. Click the little gear icon, and then you'll add your alt text in there for whatever it is. So for an end to check your headings, you just go to settings on whatever heading you click and make sure it's marked as the correct one. Do that for the entire site. And then when you're ready to go, All you have to do is launch. So you can see here that these haven't been linked up properly. So I'm just going to send these two. Now. I'm going to send these to contact. And you'll do that if the entire site and make sure that you've not missed anything. And it's always best just to do this at the end of any project then Azure going through it because you're bend to mess something, because you're focusing on so many different things at once. So as much battles at the end. And yep, I'm only just going to show you for this one page, but when you have went ahead and done this, you'll be good to go for whatever your wife says. And that's one of the last things I recommend you to write. So it's been a pleasure teaching this course. And I hope to see you in the next one. So thank you. 25. Next Steps: All right, So thank you so much for watching this course. I hope that you've gained a lot from it. The chest as Webflow, as an incredibly powerful platform is what we use internally for all the work we did for clients. I mean, it really is a game changer when it comes to web design. And if you want to keep improving your web host scales, we have intermediate and advanced courses on ambient Academy. If you visit our website resources, you'll be able to finance view Academy. I highly recommend checking out it has affordable. You get to be part of a group with other people like you look into a lot of the same stuff. And it really is a game changer for people looking to develop but digital marketing skills overall. But anyway, thank you so much for watching this course again. And I will see in the next one.