Strategic Website Design Bootcamp™ - Using Webflow to Build Results-Driven Beautiful Websites

1. Welcome to Strategic Website Design: What exactly will you learn in this course? Now this course won't just teach you how to build a website, but it will also teach you how to build a website, which is going to strategically help your business grow. The truth is having a website that just looks good will not get you results. What you need is a website that looks beautiful but can also be strategically focused around the objectives of your business. Now, whether you have Zero website design experience or even a little bit of website design experience, this course is going to help you to understand website design to a level that no 0.1% of website designers understand in the entire planet. I can say that with confidence because I know that a lot of website designers know how to build a website They don't necessarily know why they do what they do. In this course, I'm going to show you how to build a website which can get you the results that you need. We're going to learn how your website visitors think when they actually land on your website, how to build trust with website visitors, how to guide them to taking certain actions that you need to meet your business objectives. And you will be able to build the website of your dream simply by following the step by step process in this course. There's no need to pay thousands for an expensive website developer. The best part is you don't need to understand anything about coding, website development, strategy, or design because we can help you build the perfect website for your business in nice, small, easy to understand lessons. Also, by investing in this course, you're going to be getting access to a premium template, which you can use to build your website faster and get it looking professional and trustworthy in minutes. Then all you need to do is take some time to make the website look personal to your brand and business, and you have the perfect website ready to start attracting customers. Our single focus for this course was to make it as easy and simple as possible for any entrepreneur or founder anywhere in the world to make a website which is perfect for their brand in a fraction of the time and at a fraction of the cost. Instead of spending thousands on getting a really great website developed, you can learn how to do it by yourself and build it for your business and change it as time goes on and as your business grows. As a founder or entrepreneur, you need to understand how your website can grow with your business after it's been launched. Once we've actually helped you launch your website and helped you get to the top page of Google, which comes a little bit later on in the course, we're also going to teach you how to improve your website over time as your business develops. Also because you've invested in this course, and you've trusted us to guide you through this process, we're going to give you a couple more gifts. A little bit later on in the course, we're going to show you how to get free premium support for your website. This means that if anything goes wrong with your website at any time 247, you have someone there to help you get things back up and running as soon as possible. This also includes any questions that you have if you want to make any fixes yourself. It's basically like having a free assistant there to help you with your website day on night 247. I'm also going to give you exclusive access to our premium icons and graphics pack. These icons and graphics are custom designed by our team, and they are only available to students of this course. Use these axim icons and graphics for client websites that we're working on right now, costing up to $20,000. And if that wasn't enough, we're also going to ashore every single student who invests in this course how to install a software which can help you to track the mouse movements of every single visitor that visits your website. This can help you see where people are clicking, what people are not clicking, to improve your website over time to optimize conversion and get the best result. Now, I know you must be excited to get started and so am I. So let's dive into the course, and I will see you in the next lesson. 2. Why is Webflow the best?: So what is web floor and why is it so special? Well, as I'm sure you're fully aware, there's lots of different website builders out there online. However, there are some big differences between other website builders and web floor, and what web floor has to offer. Now there are many reasons why web floor is the fastest growing website building platform on the planet. And just one of the reasons why so many people across the entire world are leaving other older website builders like WordPress, Wicks, and Square space is because on web floor, you can literally create stunning websites that are result focused and can help you actually grow your business in a fraction of the time with no code and experience, and at no cost. You can initially build your entire website for free without any code and no experience in design and create stunning, professional, and trustworthy websites for your business. And that's not the only reason why so many founders and entrepreneurs are leaving other website building platforms like WordPress, Shopper fi, Wicks and Squarespace to actually get the full benefits of web floor and what web floor has to offer. If you've used any of the website building platforms, you'll see that they are quite restrictive in regards to what you can create. However, web floor is very, very different. Web floor gives you complete freedom to create whatever you want down to the exact pixel. And the best part is you don't do a single line of code because web floor does it automatically for you using EI. And as a brand development consultant, I personally build websites for myself and for my clients, every single dear, and every single one of my websites that I personally own is on the web floor platform. Web floor has allowed me to create custom websites without a single line of code being done by myself. Which has actually helped my business to grow. You can initially build a trustworthy website, exactly how you want it that looks professional in no time at all. One of the best benefits that I love is the fact that the EI behind web flow is so intelligent when it's writing the code for your website behind the scenes, it actually does it in a way that helps your website load faster and create a better user experience for your website visitors. It also makes sure that your website is fully responsive no matter what device your users are viewing your website on. And if that wasn't enough, The thing that really sold me on web floor many years ago was the fact that their premium support is unlike anything I've ever experienced from any company. I actually remember almost deleting my entire website. But thankfully, due to web floor literally get back to me within 30 minutes of me e mailing them, they managed to save the website and everything was absolutely fine. Now, in the next lesson of this course, I'm going to be showing you how you can get free premium support with web floor so that they can get back to you sooner and faster to make sure that if you have any questions whatsoever, they get back to you first as a VIP. I'm also going to be making sure that you have access to all of our templates to make sure you can build your website faster, our premium icon and graphics pack, and also the behavior tracking software to help you improve your website over time. But anyway, I'll go over that in the next lesson until then. Thank you so much for your time and I will see you in the next one. 3. Get your Free Webflow VIP Gifts: So how do you get your free web floor premium support, website templates, icons, and graphics, and also behavioral software so you can track exactly what your users are doing on your website at all times. Now, we created this free bundle for every single student that invested in learning how to use web floor, because we want you to have the best possible experience on the platform. So Webflow is more than happy to help us bring this together to give you the best possible experience. So in order to get these gifts absolutely free, all you need to do is go to Lancaster Academy of Design brand.com Forward Slash Webflow. A VIP. I'll also leave a link in the call so you can just click on it to get directly to that page really easily. Now, when you visit the page, you'll see something like this. Build your website better and faster. And if you scroll down, you can see that the first step is to click below and sign up for a web flow to get free premium support. Now, just to be fully transparent, if you actually copy the link, On this particular button and then search what it is, it is essentially a free VIP support link that we've set up with Webflow to make sure that you're taking care off when you're using the platform. And when you click on this button, you'll be taken directly to the Webflow home page so you can sign up and get started building your website, which will be covering a little bit later on in the course. Now, once you get on the Webflow home page, it's really easy to sign up. But if you have any issues, please let me know, just reach out, and I'll be as supportive as I can. So once you've actually signed up and you've vented your e mail address, remember that e mail address because you're going to need it in the second step of the process. Now, it's really important that the e mail address that you sign up with on Webflow The e mail address that you use in step two of the process are the same. The reason for this is really simple. Basically, when we send your free website template, we are going to send it directly to your web flow account. If you don't use the same e mail addresses for both steps, then ultimately the website template could end up in a different account and you may not be able to use it. We'll also be sending your icons and graphics pack there and also be sending the link to the behavioral software to the e mail address that you add in step two. And if you're a freelancer and you're building websites for clients, then feel free to use this link every single time you sign up a new customer or client, and you can not only get them free priority VIP support, but you can also get them a free website template so you can build their website faster. Just remember to make sure that the client uses the same e mail for the web flow sign up and also for step two of the process, so we can verify it and make sure that your website template lands in the correct account. Let's see, for example, I've already signed up on Webflow with my e mail address, and then I wanted to add my other e mail address here, and then get free gifts, matching Webflow e mail. Perfect. So as soon as we receive your e mail, we'll get back to you within 24 hours with your template, your icon and graphics folder, and also the link to download your behavioral software. Absolutely free. No questions asked. 4. $500 vs $10,000 Website: The truth is, if you've got any prices from agencies or freelancers out there, you'll see that you can pay anything from $500 to $10,000 for a website. Now to be completely honest, a $500 website and a $10,000 website can look very similar. So why would someone pay an extra $9,500 for a $10,000 website? If they can get something that looks very similar for just $500. Well, let me give you a little bit of an insight into my experience and how I went from charging $500 for a website to $10,000 within a couple of years. Now, although two websites may look very similar, the actual results that those two websites produce could be very different. And this is basically down to the structure of the website, the copy on the websites, the way that the actual website guides users to taking certain actions. For example, there could be a website that looks great, and it cost $500 to make from a freelancer, But the reality is that it takes 1,000 people to come to that website to actually get one converted customer that pays for something from the brand. Now, on the other hand, you could have a website which has been strategically developed and organized in a way to convert more traffic into paying customers, and this website only takes 50 customers to convert one customer. Now, as you can see, 51,000 is very different. This difference is not just down to how the website looks, but how the website is organized and how you are persuading and softly pushing the website visitors to take certain actions within the website. This was a huge learning curve for me around eight years ago. When I started to really understand what the differences were between a website that was truly developed around the businesses objectives and a website that just looked really good. Now, this does not mean that a strategic website cannot look good, but what it basically means is it shouldn't be the priority. It can look good, but it's not all about how the website looks. So as we've just covered, the first main difference between a $10,000 website and a $500 website is ultimately down to being objective focused. The $500 website may look good and it may even feel nice to use, but the $10,000 website is going to be strategically designed to actually help you convert more traffic into paying customers. Now, the second reason all comes down to calories. And by calories, I don't mean the food that we're eating, but I mean mental calories. So when we have a website, which really makes it easy for us to get the result that we want, use less mental energy, and that leaves us less likely to have mental fatigue. For example, if you ever went to a website and it's just been extremely complicated to use, and you're just using lots and lots of energy to try and find the result that you want. And then you eventually just get bored and you just leave the website altogether and find a different alternative. This is called mental fatigue. And this ultimately comes down to us using too much energy and calories in our mind to get the result that we want. Now, whereas a $500 website may make it more complicated for the person on the website visitor to get what they need, a $10,000 website is going to be streamlining that process to help them get to where they want to go far faster. This all comes down to structuring your website properly, which we'll cover a little bit later on in the course. Ultimately, we want to get the user from where they are to where they need to be as fast and efficiently as possible. As you can imagine from the first two points, the third benefit of why a $10,000 website and a $500 website is so different is simply down to the profits that it can create. Obviously, if you are converting one and every 50 users on your website as opposed to every one and 1,000, it's going to make a significant difference into the amount of money that you can generate every single month. Also going to cost you less to acquire customers, and it's also going to allow you to build more trust with customers to allow you to charge more later on down the line. So just to summarize the three main differences between a $10,000 website and a $500 website, all of which you're going to learn how to use in this very course in the coming lessons are making sure that your website is strategically focused on the objectives of your business. If that doesn't make complete sense just yet, do not worry. We're going to cover everything really soon. Secondly, a $10,000 website is going to be designed so that your users use less mental energy. Allowing you to get a better conversion rate on your website and ultimately make more money, which leads us on nicely to benefit three, which is to make more profits and revenue. I always think about my websites as the best salesperson in my business. Each of the websites that I have for each of my businesses should represent that particular brand in the best way possible. It should give us the best possible chance of converting someone who is just visiting the website into a paying customer. We can do that, and that's going to really help your brand and business grow exponentially. And the best part is once you actually put in the effort to building the website and getting it right and obviously, doing everything properly, which we're going to cover in this course, you never have to touch the website ever again. So you consistently have this digital asset, and employee almost working hard for you every single year to bring you more money and sales. Now, just as I mentioned before, we're going to be covering every step to help you learn how to build websites just like I've mentioned in this lesson. So without further delay, let's dive in to the next lesson in the course. I'll see you. 5. Creating a Seamless User-Experience: So how do you create a seamless user experience on your website? Well, the first step is to understand the difference between UX and UI. So what is UI? Well, UI is the interaction between human and computer. It's essentially how you is a user and the website interact with each other to create an overall experience, which then takes us on to U X, which stands for user experience. Now, user experience is how the website is visually built. This is essentially all focused around how the user feels they're actually engaging with your website. Now this is relevant for software and other digital platforms as well. But for now, we're just focusing on your website to make sure that you can create the most seamless experience for your website visitors. So what are the main differences between UI and UX? Now, the first main difference is focus of scope. Now where UI focuses on buttons and other things that the actual user will interact with, UX is a little bit different. UX on the other hand doesn't focus on specific buttons or elements, but moreso on the overall perception and the overall experience of the user on the website. The second main difference is responsibilities. Where UY is focused on how the website looks and what color things are and all that sort of stuff? UX is focused on how the customer is actually feeling and their actual journey to get from where they are to where they need to be for the brand to meet their objectives. So just to summarize, UI is focused on how things look, and UX is focused on how the customer or user feels when they're experiencing that particular website. So what are the benefits of UI and UX? Well, the green news is you don't need to be an expert in UI and UX to actually create a great website. And the reason for this is we've already built templates that you can use to build upon for your website to ultimately make sure that all of the main foundational rules are in place already. This means that no matter what you change on the template, it's always going to be based on the core fundamentals and best practices of UI and UX. So ultimately, as long as you don't completely delete the template, you can't go far. What are the main benefits of using UI and UX and actually thinking about it throughout the process of building your website. Well, the first is increased user satisfaction. Essentially meaning that when someone comes to your website, they are more likely to meet the objectives that you've placed for your website, which will come to a little bit later on in the course, and they also are going to have a more positive experience. Therefore, they're going to be more likely to revisit the website in future, which leads me on to the next benefit which is increased user engagement. This essentially means that people are going to be more likely to spend more time on the website, therefore, boosting you up the ranks on Google, and essentially get you on the first page far sooner. Do not worry about SEO just yet. We're going to cover that later on in the course because it's kind of one of the last things that you need to get in place before you actually launch your website. But just remember this. The more time someone spends on your website pages, the more likely Google is to trust you. And trust me, Google knows everything. So if we can use UI and UX to actually help you build a website which is ultimately getting more attention from users. Therefore, Google Sess as more trustworthy. It's more likely to be found on the first page of Google in the near future. One of the biggest benefits of using UI and UX throughout developing your website and actually thinking about it strategically is the fact that it saves you so much time and so much money in developing your website and actually making sure you get the best possible results far sooner. There's nothing worse than developing a website and doing a ton of different changes. It's just going to waste a ton of time and if you're paying for someone to do it for you, it's going to cost you a lot of money too. Making sure that your website is done first time perfectly is going to save you so much hassle in the long run. Now, one of the main things to really keep in mind from a UX and UI standpoint is to keep things clear and simple. And the reason that I keep mentioning mental fatigue and mental calories is because we want the user to use the least amount of mental calories possible as they're browse on your website. They're going to be more likely to spend more time on your website. They're going to have a more positive experience. And lastly, they're going to actually complete the objective that you have in place for your website to help your business grow. Now another key role for great UI UX is consistency. One of the more simple examples of this is the call to action. Should have one consistent call to action color across your entire website. This means that when you're trying to get the user to do a certain action or persuade them to go to a certain page, those particular buttons need to all be the exact same color, and those buttons need to stand out, and that is essentially something really simple that you can do in a matter of seconds, and it can really impact the performance of your website. Ultimately, we're training the user to understand that. This particular color leads to action. So you want to focus on this particular color throughout the entire website. Basically means that whenever they see a button in that particular color, it will lead their right to that particular button and they will be more likely to press it. And before I finish this lesson, I just want to give you an example of what UI and UX can do to really enhance the user experience. So if we just dive into this H&M example, where they essentially have a breadcrumb navigation feature on their website, you can really see how this could be useful for the user experience. For example, if someone is looking for a towel, and then they go to beach and cotton beach towels, but then they want to go back to towels to check out other options. Instead of going all the way back, or maybe starting the journey all over again, all they have to do is just click towels, and they can be straight back to the exact page that they need to be without any hassle or confusion. This is ultimately what UI and UX is all about. It keeps everything as simple and clear as possible for the user. Again, you don't need to be a UI or UX expert because we've already set up the pages within the templates to make this super easy for you. But the reason I want to share this with you is because if you're going to be actually building the website, you need to look for opportunities to make the actual process and journey as easy and as simple as possible for the people visiting your web page. Anyway, I hope you found this lesson helpful. Thank you so much for your time, and I will see you in the next lesson. 6. Worldclass Website Examples: E-Commerce: Okay, so by now, I'm sure you're ready to see some great examples of websites out there and to also understand why they are so great. Now, the websites I'm about to show you are for companies that actually sell e commerce products. So they actually are selling products online and they all use a very similar approach in order to do so. And this is the exact same approach that I'm going to be teaching you inside the course. So you understand exactly how to position your product or your brand as being desirable and ultimately being able to satisfy your customer's needs. Now, the first brands website that we're going to be diving into is none other than Tesla. Now, as you can see from Tesla's website, it starts off with a beautiful video of the product. And you can see that they're showing off the product in lots of different environments and in lots of different situations. And the reason that they're doing that is to showcase to the customer. You can integrate this product into your life seamlessly. Let's scroll down a little bit more on the home page and see what else we can find. Now, if we scroll down a little bit, you'll see some beautiful photography of the product. Again, increasing desirability, which is super important, especially when it comes to e commerce. And if we continue to scroll, then you can see more models and more offerings from the brand. These are essentially the different vehicles that Tesla can offer at this time. And they keep things super simple so that you can ultimately find the car that you feel suits your personal needs best, and then you can click on it to learn a little bit more. Now one thing that is super important to note is the fact that these images are super high quality. That is ultimately one of the biggest lessons when it comes to e commerce. You can literally sell twice, three times or maybe even ten times as much product by simply making sure that your product photography is perfect. Never feel bad about paying for good quality product photography. Because the better your product photography, the more desirable your product is going to be to the customer actually viewing the product on the website, and not only will it make them more likely to buy, but it will also make them more likely to be willing to pay more for your product or service, basically, increasing profitability instantly. Let's go down a little bit more to see what else we can find. Now, the Tesla website seems to be extremely visually focused, which again, is very important for e commerce websites, but you don't see a lot of information on the actual pages. It's actually very much just focused on the actual imagery of the product itself and the solutions, making it super easy for the customer to find the next page as to where they need to be. So, for example, if we want to look at the different vehicles and basically learn more about the model S, We're then taken to a sales page where we can learn more about the car and also be ultimately sold on its features and benefits. Now, having a separate sales page for each and every product that you sell is super important because it really allows you to get super deep immigrants to how much value and what value your product can provide to your target audience. And as you can see, even on the sales page, it is extremely visually focused. So Tesla aren't really selling you on the actual benefits and features at this point. They're still selling you on the sexiness of the car. Ultimately because they know that, you're ultimately buying a test because of the design of the car, and not necessarily because it has more boot space, or even because of the mileage or the electric nature of the car. You're buying it because it's a movement, probably because of Elon Musk to be completely honest, and also because of the savings, the tax break, but ultimately because of how ol looks, because the test the cars look nothing like any other car on the market. And let's face it, like this car looks extremely sexy, it looks great. And the best part is when you actually get to ordering the car, it actually makes it super easy and effortless, start to pick out the car that you want. So if you want the car in a nice, beautiful red color, you can change the wheels, and you can see exactly how your car is going to look at every single angle. You can choose the interior, you can change the color of the interior. You can literally have the car exactly how you want it. Now, I know that you can do that with pretty much any type of car these days, as long as you're willing to pay the money, but it's how Tesla actually shows you the car and all the different benefits in a visual format. They make it super easy for the user, that's me and you to understand what they're getting. And for example, can you remember in a previous lesson where I started talking about mental calories and mental fatigue? Think about this. Tesla has literally went into all of this pain and effort to showcase the enhanced autopilot feature in a visual format so that you can actually understand exactly what the autopilot feature does without having to read a single word of text? This literally shows the car that you are going to be buying in action on a road, ready to use the enhanced autopilot feature. So when it comes to actually selling this particular feature and benefit, you aren't just reading about it. You're actually seeing it in real time, which let's face it. Not a lot of car companies are doing. And this is what makes Tesla so special as a brand. They really love using beautiful visuals to sell their product. So let's see how Apple may do things a little bit differently. So as you can see, Apple is very much in the Christmas spirit as this is being filmed in December, so it's only a couple of weeks until Christmas, so you can see that they are well ahead of the curve. Now, if we scroll down, we can again see The actual product being used in real life situations. Now, I don't know if you can remember, or if you have the memory of a goldfish, which sometimes I do, but this exact same approach was used within Tests website. They were showing how the car can benefit to the user, integrate into their life in effortless ways. And this is a really common theme, which you'll see across all the commerce websites that actually understand how to sell the customers. Now if we scroll down, again, you'll see beautiful imagery again to increase desirability. And a really simple format of basically just links to learn more about the product. Now, we're going to go into structuring your home page as in e commerce brand and all that stuff later on in the course. But you can see that the home page's sole purpose is to get you to the sales pages of the particular products that you may be interested in as soon as possible. And you literally have all the most popular products that Apple is trying to sell right in front of you. You have the iPhone 15 pro Titanium edition. You have the iPhone 15 with a new camera, new design and new foi That's a new word. I didn't even know that existed, but you have the links to buy it and also to learn more directly to the sales page. You also have the Macbook Pro, the AP Hods Pro, the watch, the card, the trading. You've got literally everything that you need to get to the pages of the most commonly viewed products. And you can see that every single product, no matter which one it is, is flawlessly presented, so it looks crisp and beautiful, no matter which image you're looking at. Again, just reaffirming the fact that photography, when it comes to A commerce is super key. So do not go cheap on it. Make sure you invest in your photography. Especially when it comes to an e commerce website. Now, when you actually get into the Apples website and sales pages, that is when things really start to become clear. You see for the AirPods Pro, which is literally one of the unsexiest products in the world. You literally just stick them in your ears, and they are essentially wireless headphones. That is it. Apple has this way of really making their products look sexy. Now, this actual animation is developed using a lot of animation. And this is actually not that difficult to do as long as you have the actual media to do it. Now, we can go into that a little bit later on on the course, but just focus on how simple the Apple sales pages are. They never showcase too much information, and they keep things super simple. After all, they are literally just selling headphones and they are keeping it extremely basic. But even just by scrolling through this particular page, It's making me want to buy them. It's making the product look more desirable than it necessarily is. And in fact, that's one of the main reasons why I ended up buying these headphones because they were ultimately just looking so good on the website and I had to go into the store to see them for myself. And once I put them on my ears, then I had the noise canceling effect, it was sold to me. I needed to have them. Now, we won't go through the entire page. But as you can see here, Apple really focuses again showcasing the benefits of the product in visual ways, as you can see here and also here. And this is a very consistent thing. And you'll see this in Tesla's website, Apple's website, and also in the next website that we're looking at. They like to show off the benefits of the product visually. Again, going back to mental fatigue and using the least amount of mental calories possible. So we can all agree, Apple's website looks and feels really strong, especially when they're selling such a basic and boring product. But in regards to boring products, how boring can we get? Well, I thought we'd look at probably the most boring product in the entire world so we could see how they sell that product to their Tarko audience. So this is ring, and Ring is essentially a video doorbell that can help you see who's at your door without any effort, and you can monitor things in your phone and talk to people. It's pretty clever. But it's a pretty boring product. So how do they sell it? Well, let's jump in and find out. So, as you can see by their home page, again, you can see that their home page is simply showcasing all the different products that they can offer in a really simple and easy to navigate way. You can get to any of their products simply by using these boxes. Now, of course, you can also go to the navigation bar where you can easily get to any of the products here too. So let's go to the stickup cam and see what it's all about. Okay, so as you can see, this particular product page is a lot more conservative than the Apple and Tesla pages. Now, what you can see, though, is that the actual product photography, again, is really stunning. It looks incredible. And you can also see the different colors that they have, of the products, so they have it in white and black. And you can also see they have the product again, shown in certain situations, and you can see more of this. So, for example, you go here, and you can see, h, there's somebody looking quite conspicuous outside the front door. You can see who they are from the safety of your phone, no matter where you are. It is automatically sending you that image. So again, it's limiting the amount of mental fatigue that the user is spending to understand, what can this product bring to my life. Well, it can help you stay safe by not basically leaving you at the door when someone who's potentially dangerous is knocking on the door. And again, it shows you other benefits, like, for example, being able to monitor certain areas of the garden. You can also adjust it, so it's really easy to adjust and to basically charge up. Now, all of these little benefits and features are actually all summed up in this really easy to understand section. And again, this is ultimately to save customer fatigue. So always think about this when you're building an e commerce website, because ultimately you want to limit the amount of mental calories that the user is using. And as you scroll further down the page, you can see real interactions and real situations where the user could use the product. It's integrating it into your life. It's showing you that you need this particular product to keep you and your family safe. There's a reason why there's a man with his wife and little boy and a little girl, showcasing that for families, this is perfect because it's going to help keep you safe, and it's also going to help to keep your house safe while you're not there, and you're actually in a Italian restaurant eating pizza with your family. Ring actually does a really great job of understanding exactly why people would buy this particular product because they want to keep their families safe and they want to make sure that they protect their home and their family. And you can see how again, they are showcasing the benefits and the features of the particular product with this particular animation. They are showcasing that, you can literally monitor entire house, including your assets being your car and vehicle by simply just investing in this particular product. So hopefully, this gives you an idea as to how you can approach building your e commerce website. Now one thing you should be doing if you're looking at different websites that are in your space, and that is similar to the type of thing that you're going to be selling is ultimately to take as much as you can from each website, but don't copy it. So basically what I mean is, try and take the best parts that you like from each website that you find and then bring it together and form it to create a new website which is personal and unique to you and what you do as a brand. But anyway, this is just some inspiration to really get you started. We're going to be starting to build your website soon, so on that note, I'll see you in the next lesson. See you soon. 7. Worldclass Website Examples: Personal Brands: So if you're building a website for a personal brand, then it's really going to take a different approach to most other websites out there. The reason being is that personal brand and websites are not just about selling products. It's mostly about building your e mail list. And in this lesson, I want to show you some incredible examples of websites that really put you at ease and put you in a position where you really want to give your e mail address. And I'll show you how these three websites, in particular use really smart techniques to ultimately get your data to sell to you later on down the line. Let's die in first with Huberman Lab. Now, Huberman Lab, if you don't know, this very handsome gentleman, this is Andrew Huberman. He is a neuroscientist and a very popular podcaster. He's been on lots of different podcasts like Joe Rogan, John Peterson, and lots of other stuff. In regards to his particular website, he has many different ways to capture your e mail address. But if you can see here, his call to action, and this is a CTA here, a call to action to get you to take action. Okay? Now, when you click on this particular button here, takes you to this little pop up. Who knew it? It has a little video telling you how great this thing is that you need, how much it's going to impact your life. And then it gives you a little box here to da da da at your e mail address. Websites for personal brands is all about lead generation, so you can sell to that same customer again and again and again to nurture them as a lead. Now, let's dig a little bit deeper into what this website is all about. Now there's a lot of trust building. So ultimately, he's given as much value as possible to position him, has an authority within that particular space. And if you scroll down, it's literally just all about his particular areas of expertise. So it's all about creating as much value as possible. He's got a newsletter, which again, is all about lead generation. He's going to send you information, position himself as an authority. And then when the time is right, and he has maybe a product or something that he wants to sell you or maybe a sponsor that is relevant to what he's doing, wants to sell to you. He can take a commission for every single sale that's generated. Let's dive into his events. He's selling events, for example. You know, he's speaking. So he can actually sell tickets to his events, talking about the exact thing that he has positioned as an authority figure on. So, for example, he is in Melbourne, Sydney, Sydney, again, Los Angeles, New York, Toronto. So he's having these events and selling his time as an event holder to ultimately share his expertise in that particular setting. Now, if we go to the Con Mari website. This is very different. Now, this is Marie Condo. Now. I'm not sure if you've seen her. She had a really popular Netflix series, which was called Marie Condo Tidy Specialist, or Tidy Mh Marie Condo, something like that. Anyway. Now, this is essentially, actually, it wasn't, it was called Spark with Joy or something with joy. Anyway. It was really, really good, really therapeutic, and you could watch it and just feel really relaxed afterwards. It was kind of like meditation on that kind of, but also tiny enough. You can see here that Marie Condo has a couple of different ways to capture your e mail address now. She actually had a pop up, which popped up as I was coming onto the website, which unfortunately we missed. But she has a tiny course. She has a shop. She also has a newsletter in her footer, which is pretty much very standard for pretty much all personal branded websites. But what Marie Condo does very differently is she actually sells products and coaching, which is actually really unique, especially for someone who is essentially a personal brand. She's branched out and created another brand, Con Marie, around her personal brand. So her personal brand is all around tidying and being tidy and being organized. She has essentially created a coaching program to ultimately sell to people who want to become tidy like her, and not only become tired like her, but to offer that tidiness as a service to other people within their general location. So they can literally own their own business, which is super impressive, right? Now In regards to her particular website, you see it's super clean. You can see that she has an e commerce store. She has lots of different products, which is really, really great. She has so many different products, and it's actually incredible how many products she has. And you can see that all of her, you know, products and all of her, you know, different types of, you know, clothing and books. You know, she's got desktop organizers. Everything's focused around organization and creating a really beautiful space that sparks joy. This is ultimately one of her entire branding is about. Now, if you struggle with branding and you haven't got your internal branding done just yet, feel free to check out our strategic branding course, which is the first course of our brand builder pro program. It's going to have everything you need to really understand how to develop an internal brand much like Marie Condor here and understand what your brand purpose is, your mission statement, values, vision statement. Everything to really help everything become aligned within your brand. But anyway, let's get back to the third example, which is Ghetti. Now, ichi, if you don't know him, is kind of like a monk, a modern dear monk, what I say? I think he went to some sort of monk retreat for like six months, and then he decided, no, this is not really that good for me. I want to kind of go back to the modern world, but he took some of the lessons that he actually learned in the Monks village. In regards to this particular website, it's very, very similar. Now, he had a pop up, which came up before I actually went on the website, which you didn't manage to see. But ultimately, he's trying to showcase as much credibility and authority as possible, by showing him on the Ellen Show, by showing him on opera, by showing him in different movies, by showing his books. And again, he is essentially selling court. He's showing you, Okay, if you want to be like me, you can be a coach like J Shelly, right? You can be a coach just like me. Become a coach and a monk, Modern Day Monk, if that's what he's calling it. See here that it's again all about authority and building trust. Again, building trust is super super important. And again, as we get further down the website, you can ultimately buy coaching, courses, books, the podcast. Well, you don't have to buy the podcast, but you can listen to the podcast, but you can also book Je for speaking. Now, this is ultimately all around building as much credibility as possible. And when it comes to ultimately getting Je She to speak at your event, he's ultimately showing that he is an expert in that particular field by showcasing all of his experiences, all the different shows that he's been on. As a personal brand, you don't actually need to do that. You don't have to have went on Ellen or be endorsed by Oprah. But you just need to showcase that you know what you're talking about. You can do that in lots of different ways. You can do that with a blog. You can do that with video. You can do that with really informative content. You can do that with, you know, hosting workshops, seminars. All these things are essentially a way to build authority. And as you get better and bigger, then maybe one day you are going to be on Ellen or Opera, you know, on one of these really big recognizable platforms that you can ultimately use to catapult yourself into stardom. Now, listen, each of these websites are very unique and different in their own way. But one of the things which is common throughout is that they really focus on building authority within their particular space. This is essential if you're going to be building a website for a personal brand. What I would recommend is look at some of the people that are out there that you actually really resonate with. Maybe they do a very similar thing to the type of thing that you're wanting to offer within the website that you're building, and go to the website and then just write down all the things that you really like about that particular website because those are going to come in really handy later on when we're building your website. Anyway, I hope these examples give you a really good insight and an idea as to how you can personally approach your website development. Later on in the course, when you're actually building your own website, it's going to be really important for you to look at other websites out there that really inspire you. On that note, I cannot wait to finally get on to starting to build your website. Let's dive into the next lesson, and we will be there extremely soon. See you 8. Worldclass Website Examples: B2B Businesses: If you're trying to sell a service to either a person or a business, for example, then you need to understand how the best websites in the world are doing it, so you can basically integrate what you learn into your own website design. And it's really great actually just to learn how the big guys are doing it so you can learn exactly how you can approach it and do the best based on what resources you have. And the best thing about web flow is, you can literally create pretty much anything you want as long as you get the fundamentals right, which we'll be covering a little bit later on in the course. So let's dive into the first example that we have, which is Pentagram. Now, Pentagram is a design agency, which ultimately is located in four different places in the world, including New York, London, Austin and Berlin. So Pentagram have been around for quite a while, and they're quite successful. So there's probably a few things that we can learn from their website. So let's go to their home page, and then just try and understand exactly what they are trying to do with their home page. So, as you can see here, they have a slider showing eight different types of work, essentially showcasing that there are a design agency. Okay? They're not trying to sell anything to you. They're just saying, listen, this is what we do, and if you're interested in it, then, feel free to learn more. Now if we scroll down, then it's essentially just going to be more work. It's just showcasing the work that they do so that you can ultimately realize if this is the type of work or the type of style that you ultimately want to have for your own business. Now, what you'll see is they don't actually have anything about services. So you can't learn anything about their services. You can check out their work and learn a little bit more about the types of work that they do. But ultimately, they don't say, if you want a logo doing, for example, then you click here. It's simply just a case of checking out their work, and then if you like it, I suppose, you just get in touch via the contact bar and ultimately either visit the office or you e mail them. Now, when you actually get into the projects in Pentagram, that's where things get super interesting because you can really see their expertise within the different projects that the showcase. So, for example, this is a sportswear brand called Lens, where you can essentially see how dynamic the logo is, you can see how beautiful the color palette is. And basically, you can really get a feeling as to the type of brand that you're dealing with, you can see that they have really thought about the different, you know, nuts and crannies and details of the actual brand to really get the best possible result. You can see it's very visually appealing. You can see they are showcasing all the different colors that they are using throughout their app, throughout the website, throughout the advertising. They're showing lots of incredible visuals to ultimately showcase how great the brand is and how great they are doing their work. So if you were a sportswear company and you were thinking about potentially hiring pentagram you know they can get the job done. It's not even a question, you know? So this is the first example of a company who's selling the service as, you know, part of their business, and they are basically showcasing exactly what they do without even leaving any room for error or wonder. Okay, now, we've seen pentagram and we've seen how they approach things. How would a smaller agency approach thing? So I wanted to show you one of my businesses websites just to be fully transparent so you know that I practice what I preach. So if we go to the Clementine House website, you can see within a couple of seconds, and we'll come to this in more detail later on in the course. Because this is going to be super important when you start building your home page. But you can see within the first couple of seconds you know exactly why you are here. So, this is a company to essentially help, you know, brands find the best names for their businesses based on strategic positioning and lots of other factors. Now, this particular website has been designed in a way to build trust from the first second you land on the website. So you know exactly where you are, you know exactly why you're here. Next, we actually showcase some of the logos and names that we've developed over the years. This is very simply showcasing the exact work that we do and work that we've done in the past. Then as we go lower, it actually showcases this handsome devil, no idea who he is with a video to actually share what we do as a business and what you can expect from us as part of your journey with us. Now, you can see here we keep things extremely simple and easy to digest because it's really important for us to ultimately get across exactly what we do in the simplest possible way. We have tons of different testimonials from lots of different people, and we also have our pricing on our website. Now, some agencies don't do this. Some agencies like to keep things quite transparent so they can charge, you know, whatever fees their fancy to each particular client. I personally feel like transparency is super important. I feel like being honest at all times. And I feel like being transparent with the pricing is really important because it just showcases exactly what you get for what price, and it also just means that every single client that actually comes to the website pays the exact same. Now at the very top, We do have other types of services as well, like for example, website development, which we are actually learning right now. But naming is the first part of the journey. It's where we mate most of our clients, and then we eventually come to a point where we actually end up working more with that particular client to really help them get the best result possible. We've looked at my website. I don't want to spend too much time on here because we can learn a lot from it, but I want to move on to another website, which is a little bit different from an agency. I want to move onto a website which is primarily in the service of software. So actually helping you build websites in a way that is primarily around e commerce. Now, this particular brand, Shopify do ultimately just sell the ability to sell products online. That's all they basically allow you to do. They basically allow you to sell your product online using an online store. Now, some of their templates are quite restrictive, and that is why I generally use web flow to be completely brutally honest. But you can see how they instantly connect with the actual user that they are looking to target. So entrepreneurs, founders who want to sell a product They are basically connecting with them by showcasing entrepreneurs who are ambitious and passionate about what they're doing, which is something that a founder and entrepreneur is always going to connect with. You also instantly see a trust building section. Now this is something that we're going to come to again later on in the course, and it's really important that this particular trust section is here. You'll see that this trust section is also very important in my website as well, and it's also going to be important in your website, because unless you are a massive company like Pentagram who's been around for 30 plus years, it's always going to be worthwhile having a trust section in there because ultimately, you need to build a trust with new users that are coming to your website and have no idea who you are and what you do. Now, again, you can see here that they keep things super simple. And down to worth. It is not making things more complicated, it's keeping the mental fatigue as low as possible, giving you small bite sized chunks of information, and also making sure that they use visuals to showcase how easy it is to use the software. Again, as you scroll down, you're seeing more and more visuals, you're seeing graphics, you're seeing animations, which is essentially showing you that you can sell anything to anyone with a lot of different payment setups, and it's essentially trying to sell Shopify as the solution for E commerce company. Now again, the website is super clean, super minimal, and the structure, although this website can look a little bit complicated, It actually isn't. It's actually really, really simple. And every single section on this website has a purpose. It has a reason for existing. And we're going to go through all these within the course. Do not worry. You're going to understand exactly what each section of this course is doing. You're going to understand how to then take and learn as much as possible to then integrate that into your own website going forward. So you're going to be able to have a website, which is just as good, if not better, then shopify after taking this course and learning everything inside it. Now, one of the most important things when it comes to building a website, is ultimately to learn as much as possible from the websites that we like Then take what we learn into our development process for our website. And we're going to be building your website really soon in the course. We'll go through all of that very, very soon. But I just want you to understand that do not feel bad about taking certain lessons and taking things that you like from certain websites, because that is all part of the game. It's all part of learning what you want in your website and what you do not want in your website. And this only comes from exploring other people, including your competition to ultimately build a website which you think represents you and your brand best. Anyway, I cannot wait to get into actually building your website, and understanding the fundamentals of website design soon in the course. So I will see you in the next lesson. Please. 9. Growing your Brand with website design: Why is objective focus website development important? Well, the question that you may be asking is, what is objective focus website development? Well, it actually sounds a lot more complex than it actually is. It's really simple. And the reason I say it simple is because I think that every single business should have at the very most, just two objectives that they are trying to achieve with their website. So let me give you some examples of the types of objectives that the average websites out there would have. Now, obviously, it all depends on the type of website that you're actually building. For example, if a company is in e commerce brand, And their objective is to sell as much product at the highest price possible. And where that might be their primary objective, a secondary objective may be to capture as many leads and e mails as possible, because this then leads onto the first objective, which is to sell products to them later on down the line. Now if someone is building a personal brand and creating a website for that personal brand, then yes, of course, you can still sell products like books and digital products even or maybe courses or coaching. Also going to want to grow your e mail list as much as possible. Because with a bigger e mail list, the more influence you have. With more influence, you can also grow your following, which ultimately creates more authority which compounds to ultimately help you grow your personal brand faster. So for a personal brand website, it could be just the case that they want to grow their e mail list and maybe sell some products as a result. So for a website focused around personal branding. This is going to be focused around growing your e mail list as big as possible so that you can sell products to them later on and also a secondary objective of selling products in the meantime. Then if you're selling some sort of product or service digitally, ultimately, your main objectives are going to be along the lines of either selling the product or service upfront or creating some sort of appointment setup or some sort of workshop or seminar so that you can ultimately sell the product or service in person to get as many sales as possible. For example, within my brand development agency, I get the client to answer a couple of quick questions and then I give them an appointment booking system, which they can actually schedule a call with me to have 15 minutes chat to see if we're the right fit for each other. This then leads into a sales call where I can essentially pitch our products and services to help them get the solution that they need. Now, I really want to look at a couple of different websites that can give you an insight in regards to the different objectives that each website is trying to achieve, just so you understand exactly how to find the objectives for your specific website. So the question that you may be asking is, how do I find the objective for my website? Well, I want to share a couple of examples with you of websites from completely different sectors so you can understand how different companies approach finding their objectives for their website. And once you find the objective for your website and what you actually want the website to do for you as a job and a responsibility, it's going to make the website design process far more seamless and a lot easier. So for example, if we dive into the Gym Shark website, which is the e Commerce company in the UK that sells fitness apparel and leggings and all that sort of stuff, then you can see that they have extremely direct objectives. They want to start to funnel the different people within their home page into either the women's category or the men's category. So you can click here to go to Men's, for example, which then takes us on to all of the products that are focused around men. So it's pretty obvious what this company's objectives are. The objectives are to get the website visitors to relevant pages so they can eventually buy products as soon as possible. Let's look at another E commerce company just to drive this message home. So if we go to the website for Oak Monk, which is a really cool brand based in the USC, I believe, and they sell some really cool products, you can see here that they are pushing very specific products. Now, if you actually look at all of the different products that they offer, they have a ton of different products that they can potentially sell to their customers. They have things like match holders, they have clocks, they have timers, they have beautiful mugs, they have this puzzle sort of thing, which looks pretty cool, but I don't actually know what it is, to be completely honest. They also have things like tour boxes, for example, and stationary stuff, so they have a really large range of products available. But if you go back to the company's home page and check out the main products that they're trying to sell, which is essentially, I can imagine, is the most profitable product, you can basically see that they are trying to sell the analog and the weekly planning kit, which is essentially the two products that they're trying to push more than all the others. And when we're looking at this particular button, you noticed how it's a completely different color to everything else on the home page? This is because the brand wants you to focus on that particular button and see it pop out among everything else that's on the page. And when we click on that button, it takes us to a page which essentially has everything that is related to that particular product and category. So those are just two examples of how e commerce companies can have a very specific objective in regards to getting users to go to certain pages and kind of nudging them towards certain products even. How could a brand that is selling a digital product, for example, get someone to do the exact same thing? Well, if we go to the Hoot Suite website, you can see that their call to action is very clear. They essentially want the user to request a demo or more prominently, get a free trial with the service. Now, they have lots of different options and pages that you could choose from, but out of all the pages that they want you to go to, the start a free trial page is the option that they want you to take. And then when you click that button, it takes you to a page where you can say it's just for me. Or I have a team. And this is essentially funneling down the website traffic into relevant buckets, so they can create the best customer journey possible for those two relevant target audiences. And let's look at another example of a product that is selling a digital service that we all know and love, which is Netflix. Now, the Netflix home page is really simple. Now, it essentially allows you to either sign Oh, it's got this big red button, which you cannot miss, which essentially allows you to add your e mail address to join to day and cancel any time. Now, you can see how completely simple it is for the person to get started, and they're also saying that it's only 99 ti bat per month. If you haven't already noticed, I'm currently in Thailand filming this particular course, so that is roughly around $10. So basically what they're saying is it's non expensive, and it's pretty much risk free to try because you can cancel any time. As you can see, Netflix has a very clear agenda. It wants you to sign up so you can actually get into the platform, and it makes it seamless for you to do so. It doesn't overcomplicate things. It wants you to sign up as soon as possible to get into the platform so you can actually start enjoying the content and ultimately get hooked on it so you can start to pay them a recurring fee every month. Now, lastly, let's check out some websites for personal brands to see what types of objectives they have in place. So if you know Patrick Beck David, he is a podcaster, businessman, a very inspirational person. And he ultimately has lots of different objectives within his website. Now, this guy has been around for a very long time, okay? And he has a team working on building his personal brand. Now, what I would personally suggest is that you don't have this many objectives within your website. Stick to just one or two, one primary, and one supporting or secondary. The reason being is Patrick Beck David has a team of people managing his website and all the different aspects within the website to ultimately create this very large range of offerings, which ultimately is going to allow him to get as many touch points as possible with potential customers. But at the stage that you're at right now with just starting to build your website, you need to focus on just having one main objective and maybe two at a push to just get things started. As you start to build out your brand and really develop your website over time, start a spot new opportunity, so you can ultimately sell more to your customers and ultimately have more objectives in place. You can see here that Patrick Bec David has so many different offerings. He's trying to capture your e mail address. He's trying to sell his book. He's trying to sell coaching. He's trying to get you to listen to his podcast. He has so many different objectives, all based around the different offerings and packages and solutions that he can offer you as a customer. Let's look at another personal brand to see if they take the same approach. Now, Jessie Isler is actually one of the most inspirational people I know. He has a super infectious energy, and he's just a really nice guy. Essentially, that's how he comes across to me anyway. Now, he has another really great range of products and services to offer. But he's been around for a very long time. What I suggest again is to basically focus on having one particular product or one particular objective to focus on. Because ultimately what Jesse's doing here is he is offering coaching. He sells a calendar, which is really cool, which helps you plan your year. He also has a newsletter, he has books, and he also has speaking arrangements. It's the exact same setup. But ultimately, it all comes down to the same thing. If you want to boil down all of those services to one single objective, it's to sell as much product as possible. Essentially, if you think about the speaking arrangements, the books, the calendar and the coaching are all products. They're all products for Jessie to offer potential customers. I've actually never been on this website before, but if I go down to the bottom of the websites, I can pretty much guarantee that it's going to have some sort of newsletter or sign up function because he's essentially going to try to sign up so that you can join his e mail list so he can sell some sort of product or service to you later on down the line. So hopefully that gives you a little bit of an insight in regards to how you can personally find the objective for your website. Make sure you write this down and make it extremely clear within your strategy for building your website, you want to be trying to achieve one specific objective and one supporting objective for your website, no matter what type of website you are trying to build. So take some time to really understand exactly what you want the website to do for you. Think of your website as a digital employee, and you are giving that employee just two responsibilities to do extremely well. Because when you just focus on giving it one main responsibility and then one supporting responsibility, You can instantly see what's important to add on the website. So it's not going to get too cluttered. It's not going to look, you know, super busy. It's going to be extremely clear and concise on achieving that one single thing which we needed to achieve. Anyway, I hope you find this lesson in valuable, and I really look forward to seeing you in the next one. See you soon. 10. The 5-Second Rule: Okay, so how do you gain a website visitors trust in 5 seconds or less? Now, I'm sure you're fully aware that in the common day, people do not really have a long attention span with TikTok and Instagram and us being on our phones all the time. We basically give website 3-5 seconds to basically tell us, Okay, you can give me what I need. Tell me a little bit more. Now, when we actually come to a new website, and if you actually visit a new website in the future, you can actually be self aware and realize that you ask yourself these exact SM three questions in this exact sm order if you look closely enough. Now, when we go to a brand new website, if you actually take a step back and think about what questions you're asking yourself when you land on a new home page that you've never been on before, we generally ask ourselves three specific questions in the exact SM order every single time. This is really important to understand because if you are building a website and you've never built a website before, then you can understand how to capture your target audience's attention in the first three to 5 seconds, so they can spend more time on your website and realize that you could be the option for them to help them find a solution to the requirements that they need. So if you know how to grab their attention and help them stick around a little bit longer on your website, then they can learn a little bit more about what you have to offer and then ultimately choose you as a solution to the problem that they have. If you've ever built a website before and it's had a really high bounce rate, this is basically down to the fact that the website hasn't grabbed the attention of the person or it's been very unclear as to what it sells or can offer. This again, just makes it super important that as someone who's building a website, you need to make sure that people know exactly what you do, what you can offer them. The simplest and most clear way possible. So what are these three questions that we ask ourselves when we land on a brand new website? Well, the first question is, what do you do, and how can you help me? Now, that's two questions. So let's just stick with, what do you do because that just keeps things really easy. Now, what do you do essentially means, Okay, I have a problem, and I think you could be a solution. Why should I choose you? What is it that you actually offer me? Now, if you look at this website here, for example, you can see that it literally tells you exactly what they offer within the first second you land on the home page. It's literally telling the customer, this is what we can do for you, and this is why you should choose us. It's essentially saying, Listen, you are not going to waste your time by viewing our website, you are in the right place. Okay, so now we have them in the right place. They know that they're not going to waste their time. The next question that we usually ask ourselves is, Okay, I'm in the right place. You could have what I need, but can I trust you? Now, this is the next question that every single person asked themselves, when come to a new website. Is this brand legit? Is this offer actually genuine? Am I going to give them my money, and am I going to get back what I expect? Now, there's tons of different ways that you can build trust within your website. And this section should essentially come underneath the Hero section, much like this example, where you can just showcase that you have authority in that particular thing that you're offering? You're saying that, Listen, I can offer the thing that you need, and I have done this 1 million times before. So you ultimately are not going to be let down, and you are essentially in good company, like you are not the first person to do this, and you are not going to be the last to buy from Okay, so now you actually have the trust of the customer, and they know exactly what you can offer. What's next? Well, when we first come to a website, it's what can you do for me? Then it can I trust you. The next question is, Okay, Tell me a little bit more, which isn't actually a question, but you get the idea. So they know that you can offer them what they want. They also know that you're trustworthy. Now they want to learn more about the details and the benefits that you can offer them as part of your offering. And this is where you can go into more detail as to why people should buy from you. What makes you different as a brand? Why are other customers buying from you before? And how can you really get the person the result or the solution that they are looking for? Ultimately, it all comes down to building trust and then ultimately delivering on that trust. In any type of business, if you can basically set an expectation and then deliver or exceed on that expectation, you cannot really lose. So just to summarize, the first question that every single website visitor will ask themselves is, what do you do and how can you help me? Second question is, can I trust you? So show them trustworthy elements of your brand to build authority and to showcase that we are who we say we are, and you can trust us. And the third question is, Okay, tell me a little bit more about what you can do for me to help me with my challenge. This is why you showcase, all the features and benefits in a way, which is easy to digest. And this, my friends, is how to develop the perfect home page for any business. Anyway, I hope you found this helpful. And if you work with this structure, it's really going to help you to build a website which really gets the results that you need. Anyway, we've got a lot of momentum now going into the next lesson, so I will see you there. 11. Website Design 101: Alignment & Grids: So what does alignment mean when it comes to website design, and how do grids play a part in helping us create beautiful websites that really capture the eye. Well, the truth is that grids and alignments help to do so much more than just create beautiful websites. They can also make websites more functional, more responsive, and also help to improve the user experience. So let's start with alignment. What is alignment? Well, alignment refers to the relationship and positioning of certain elements on a common axis. When elements are aligned, it gives a sense of structure and professionalism to a website. Beautifully structured and organized web pages, really helps to give your website a professional feel, and it also significantly enhances the user experience by helping your users to navigate through your website by using less mental calories. Now there are some key points to keep in mind when focusing on alignment and using grid. The first thing is consistency. Now, using consistent alignment and grades throughout your entire website, it's going to be super important to make predictable pages that are not only professional, but also easy to digest by the user. This includes using the same alignments and grids for text, images, and even buttons as well. This is going to help you to achieve an overall aesthetic feel which looks really professional and trustworthy. Now the second key point immigrants to alignment and grids is hierarchy. You need to use hierarchy in regards to alignments and grids to ultimately showcase the most important information first and making sure it's presented in a way where it's clean, professional, and easy to read. This is where alignment and grids comes in. It creates a predictable experience on your website pages, so the user knows where to look next. And the last key point, which we touched on a couple of times throughout this lesson is responsive design. Using grids is really important to make sure that your website looks great on both mobile, tablet, and desktop. By being consistent with the alignment throughout your website and also the grids that you use to build your website pages, it can help you create a seamless on brand experience, which is consistent across every device that the viewer could be potentially browsing on your website on. And what I want to do is to share these two website pages with you and let you decide which one you think has the best alignment and gridding. And three, two, one. Now, if you didn't get a right, do not worry, just rewatch this video, and I'm sure you'll get it a second time around. But if you did get a right, then congratulations, you now know the difference between a website that is perfect in regards to alignment and gritting and one which does not use those principles in regards to its design. So now the fact that you actually understand alignment and gritting, you'll be able to create web pages that not only look and feel more visually appealing, but they're also going to be able to provide a better user experience so that your website helps your users burn less mental calories, allowing them to steer on your website for longer. Anyway, I really hope you enjoyed this lesson and a little exercise at the end, I will see you in the next lesson. See you soon. 12. Website Design 101: Visual Hierarchy: Visual hierarchy and website design. What is it and why is it so important? Well, let's first discuss what visual hierarchy actually is. Visual hierarchy is the arrangement or presentation of certain elements to showcase their order of importance. A well designed website using visual hierarchy can help the overall experience be boosted significantly. It enhances readability, engagement, and also reduces the amount of mental calories that the user has to expend to navigate through your website and consume the information that they need to digest. Now, there are some key elements which more commonly use visual hierarchy to get their message across more effectively. And the first of those elements is typography. Well designed websites that use visual hierarchy to really enhance the user experience, use different forms of typography which are thicker, thinner, and often a different color, ultimately by using the key principles of visual hierarchy. You can showcase the exact same information in a completely different way, one of which is extremely readable, and the other is actually a pain to read. Now another element, which is really important when it comes to visual hierarchy is color contrast. You can use color to draw the user's eye to certain elements. More vibrant colors that capture the eye can be used for call to actions, important buttons, and even important information. Now another approach which is connected to visual hierarchy is white space. Now, we'll learn more about white space in more detail later on in the course. But by embracing the use of white space and knowing how to use it correctly, which I'll teach you in a little while you can help certain elements stand out, again, enhancing the visual hierarchy within your website. Now, as a little fun exercise to finish off the lesson, I just want to show you two pieces of content and have you choose which one you think is using visual hierarchy to guide how it's been presented. So if you have to choose between these two pieces of content, which do you think is more readable, engaging, and more likely to provide a better user experience. And I'll give you 32, one. Did you get it right? Okay, so if you didn't get it right, then maybe rewatch this lesson, and maybe you can learn a little bit more about what it means to have an incredible website with great visual hierarchy. But if you did get it right, the congratulations, you now understand the difference between content which is just kind of mashed together and not really thought through and content which has actually been arranged with visual hierarchy and mind, so it's more readable, more engaging, and more clear to digest. Anyway, I really hope you enjoy this little exercise and also the content in this lesson. And I look forward to seeing you in the next one. See you. 13. Website Design 101: Fonts & Typography: So choosing the right fonts and typography for your website. How do you do it? And why is it so important? Now, one mistake that a lot of people designing a website make is the thing that choosing the right font or typography is all for aesthetics. It isn't all about how the website looks. Although that is still very important. Now, what choosing the right font and typography is more about is creating a visual language which can help communicate and create a perception around your brand, which can also enhance the user experience. And depending on the fonts and typography that you choose to use on your website, and you can create a completely different perception depending on the types of fonts and typography that you use throughout each page of your website. For example, you can choose a font which is more fun and playful, A one which is super traditional and professional, or you can choose a font which is super simple and modern. Or a form, which is more futuristic and creative. Now one of the key things to remember is that you should only be choosing either one or two different fonts to use throughout your website. For example, you have a main font, which is usually used for your subheadings and headings, and then another font, which is used for general content, which is extremely readable and easy to read. This is because the longer a piece of text is harder it is to stay gear, so we need to make sure the text is super easy to read to keep your user reading and not getting them mentally fatigued. Choosing the right fonts can help you evoke a certain emotion within your client or customer. And it can also showcase a certain level of professionalism and trustworthiness that can help you generate more sales and business. Now, there are a few key things to think about when it comes down to choosing the right fonts or typography for your brand. Now, we actually cover the process of choosing the correct typography and fonts for your website and brand overall. Course number two within the Brand Builder pro program. This course is all of our visual expression, and it literally tells you everything you need to know in regards to typography, fonts, colors, how to design the perfect logo, brand voice and all that good stuff. Now the course goes into so much more than just those particular elements. But if you feel like you need a little bit more support in those particular areas, then feel free to check it out. Now, choosing the right fonts with the right personality is super important. As I showed you before early on in the lesson, using different fonts is your heading and subheading font, give off a completely different message about your brand. For example, if I ask you which of these two fonts is used by a luxury brand, then I can pretty much guarantee that you are going to choose this one. This is because this particular font was created a long time ago. Therefore, it has more history. Therefore, it feels like it has more tradition, and tradition and history is more closely associated with the feeling of being luxury. Now, another real key point to remember is readability. It's organ and well choosing a font which is super creative and super unique. But if your client or customer cannot read it, then it's going to pose a problem. Everything that we do in regards to typography and fonts should allow us to create the best possible user experience. So if we're using a font or a form of typography, which is super hard to read, that is taken away from the user experience, which we obviously don't want. So make sure that your funds are easy to read, especially your main content font. That's going to be super important because it's going to be used for longer stretches of text, which is going to be very easy to fatigue your user and essentially lose their attention. One last key point to remember is hierarchy inconsistency. In regards to sizing, you should keep this general ratio for your header, sub header, and general content. Now, obviously, you'll need to make your text responsive depending on the device. For example, if I'm looking at a website on my computer, the text is not going to be the exact same font size as if I'm looking at it on my iPhone. So although the size of the text changes, the ratio between the size of the header, the sub header and the general content, stays the same. And that will give you the hierarchy that you need to make your content super readable. But just make sure that you stay consistent with using that hierarchy throughout your entire website. That's going to help you to create a consistent failing experience, which makes your user comfortable using your website pages and navigating throughout your website. Now, just as a little experiment, I just want to drive home the fact that you've probably learned something during this lesson. I want you to take these two examples of typography and basically tell me which of these two is better suited for a modern software company. So if you were the CEO of a software company, which of these two typeface setups would you choose for the website. And three, two, One, did you get it right? No if you didn't get it right, it isn't the end of the world. Just maybe rewatch this lesson and maybe you can pick up a few other things before you start selecting the typography and the funds for your own website. I'm also going to add some super useful resources to the course so you can actually pick and choose which funds are most commonly used within your particular market and industry. I'll make sure I add the resource within the course so you can find it easily, and you can find the perfect funds for your website without any hard work. Choosing the right funds and typography for your brand is super exciting, at least for me anyway. I find it super fun. But anyway, I'll see you in the next lesson where things really start gaining momentum. I'll see you there. 14. Website Design 101: Creating Colour Palettes: How do you create a great color palette for your website? Now, using the correct color palette for your website, Can we help to create the right perception, professionalism, and of gan motion within your customer when they're browsing your web pages. Now every brand should have three different types of colors on their website. The first is a background color, which is ultimately usually white or if you really want to be experimental, a super dark color. Now, 99% of brands should be using white or a really, really light grey as their main colors for the background color for their brands website. And the reason for that is it's really easy for a human to read black text on a white background as opposed to white text on a black background. It just uses less mental calories, which is ultimately what we want from a user experience standpoint. Now, the other two types of colors are accent colors and your primary colors. Now your primary color is ultimately the color that you want to be known for for your brand. Now, you can have two primary colors, but personally, I think it's best to stick to just one. Now we cover the process of developing your own color palette for your brand in far more depth and how you can really think about it from a strategic point of view. The second course of the Brand Builder Pro program. But just to help you if you don't want to invest in that program, which is absolutely fine. We do have an online tool on our website, which you can use to find the best color palette for your brand and website. This is called Color Pro Plus, and you can find it online. It's really easy and completely free to use. This is going to help you find a range of different color palettes that you can select and then begin using for your website, so you know that your website is going to always look great. Now, your accent colors within your color palette are really important. The reason for that is it essentially guides the user's eye to where they should be clicking. Accent colors are usually used to capture people's attention and also tell people where to click and what's important. Now, we're going to cover how to actually use your color palette in a lesson a little bit later on in the course. But for now, I just want to help you create a structure and a thought process behind each color within your color pallete for your website, so you know how to use it when you come to build your website later on. Now, a few key points to remember when you're thinking about developing a color palt for your brand is brand alignment. So make sure the colors that you use are relevant to your brand and the message that you want to convey. This is where the Color pro plus tool comes in really handy. Gives you a selection of beautifully designed color palettes that you can use on your website in seconds. And it also tells you the types of emotions and feeling that it's going to evoke within your customers or potential clients. Now, another thing to think about is contrast and harmony. You need to make sure that your website has enough contrast so that it's easy to read and it creates a good user experience. You also need to make sure that your colors merge perfectly together. Now there are a lot of different methods to creating a greater website color palette. But if you don't want to learn too much about color theory and color psychology, and you just want to have a really great color palette for your website because you just want to make it look good and be really presentable and trustworthy. Use the color pro plus tool to select a color palette and then see which one works best for your brand. All of the color palettes that are presented on the color pro plus tool have been designed by trained experts in design that understand how different colors work well together. You don't have to worry about learning color theory, or any of that's you have to do is select the color palette that you feel suits your brand best. Check the actual emotions that that particular color palette is going to convey and communicate, and then try out on your website and see how you feel. Now, one last point is consistency. Consistency is super important because if you start using different colors for different call to actions, just going to create a really confusing experience for the user. By being consistent, it simply means that you're using your primary accent and base colors in the same way throughout your entire website. For example, if you had all of your website with a white background and then just one single page with a black background, with white text, it's going to look a little bit off, and it's going to confuse your user. So consistency is super important. And just for a little exercise, a little bit of fun. Want to show you these two web pages and give you 3 seconds to decide which one you think uses Color best. And three, two, one. Did you get it right? The design that uses color best ultimately is following the principles that you've just learned in this lesson. It's consistent, it has harmony. It's using colors that work really well together. It has enough white space, and it's using white as the background to give the rest of the content within the page time and space to shine. The other design, however, doesn't quite do that. It's quite ill designed. It's not really using color properly, and we're actually going to be learning more about how to use color properly on your website design a little bit later on in the course. And on that note, I will see you in the next lesson. See you soon. 15. Website Design 101: Using Your Colours: Now you probably have a couple of ideas or maybe just one idea in regards to the brand color palette that you want to use on your website. Now let's show you how to use it on your website. How do you use your color palette on your website? Well, at this point, you've either used the Color P plus tool and actually have the color palette for your website, or you're trying to decide between a couple and you're not really sure which one to choose. By end of this lesson, you're going to know how to use the different colors within your palette so that you can do a little bit of experimentation and see which color palette you like best. Now, remember that using your color palette means basically using it for every different element that is on your website. This includes text, buttons, other elements, borders, lines, your logo, and the background. Never forget the background. Now, as I mentioned in the previous lesson in this course, you need to make sure that you're very consistent with the colors that you're using and how you're using them. For example, don't try and be too experimental when you're using your colors, but in this lesson, I just want to give you some fundamental rules and best practices so that you can use the colors in the best way possible to get the best result. Now, your primary color should be the most dominant color on your website. So for example, all your icons, your logo, the headers on your website should all be this color. Showcases what the brand's primary color is. Your primary color should be the most heavily used color on your website apart from the background color. If the primary color that you've chosen is not the most dominant on your website, apart from the background color, then you're doing something wrong. The basic rule that I always use is all the important stuff needs to be the primary color, apart from a call to action, which is the accent color. Then I always make the background white, and I always make all general content black or just off black, so a really dark gray. By doing this and keeping it really simple, you can make sure that your primary accent and base colors are all being used properly. And remember your accent color should be used in a way to draw the user's attention. And by doing this and using your accent color properly, you're going to be able to guide the user to click the certain buttons and key pieces of information that you actually want them to click. Now, as a little fun exercise, I just want to show you two different examples of web pages, one of which, which is using colors using the exact fundamentals that I've just taught you in this lesson, and the other which is doing things in a completely different way. So which of the two do you think is using color properly? And 321. Did you get it right? As you can see, this particular website just looks so much better. It just flows much better. You know exactly where they click and what's important and what's not so important. And it creates a hierarchy and an experience which the user can enjoy, as opposed to the other website design, which just makes things a little bit more hard work. It's not really straightforward, and it's a little bit confusing. Anyway, I really hope you enjoy this lesson. I look forward to seeing you in the next one. See that. 16. Website Design 101: Button Hierarchy: Button hierarchy, what is it and why is it so important? Well, designing great looking buttons can basically increase the likelihood that they're going to be clicked. There are a few key things that you should be thinking about when you're actually designing the buttons within your website to make them more clickable and ultimately get the user to do what you want them to do on your website. The buttons on your website Guide the user through your website to where you want them to go. They should help your user to navigate effectively throughout the website so that they can get to where they need to be in the shortest possible time with the least amount of clicks. So first and foremost, what is button hierarchy? Well, button hierarchy is essentially the arrangement or styling of buttons to create a great visual experience and to ultimately make the button more clickable. We use button hierarchy to showcase to the user, where they should be clicking. That we can get a desired outcome within the website. This helps us prioritize the buttons that the users should be clicking so they can go to the pages that we want them to. Ultimately, well designed buttons and a well structured hierarchy for your buttons should help to create a more engaging and fun interface for your users to enjoy. Now, a few key points to discuss in regards to button hierarchy, and the first of those points is size and placement. Now, the more predominant a button is, the more unlikely it is to be clicked. Color is also included in this decision making process as well, but we cover that in the last lesson so at the moment, let's just focus on buttons themselves. Now what you should be doing is making the buttons that are more of a priority for you personally, your business objectives, more sizable, more obvious and prominent, whereas buttons, which are less important are ultimately a little bit more subtle and a little bit harder to see. Now one thing that you do need to make sure Rob is that you are consistent with the styling of your buttons. Once you confirm your button style and system, that particular system should be used throughout the entirety of your website. So for example, if your call interactions are the same size throughout your entire home page, That should be the same throughout your entire website, too. Now, just as a really fun exercise, I just want to showcase two examples of button hierarchy and how some can be really easy to understand and really easy to click, and how others can be a little bit confusing and not as easy to understand. So which of these two do you think is the easiest to understand and which are you more likely to click on? I want to give you 3 seconds. So three to one, to get it right? Now, if you understood everything in this lesson, then you should have selected the correct buttons. But if you didn't, do not worry, just revisit this lesson and hopefully you pick it up the second time round. Now, one thing that will show you a little bit later on the course is how to create animations with buttons to really help bring them to life. It doesn't mean doing crazy things with buttons. It's just little simple professional animations, which you can do on web floor in a matter of seconds, and it's really easy to bring your buttons to a different level, a completely different standard where they come alive and engage with the user to create a better user experience. I'm going to show you how to do that a little bit later on the course, and it's really really easy, so do not worry. You don't need to know how to code, you don't need to know anything about website design. Literally as easy as editing a word document. So anyway, I look forward to seeing you in the next lesson, and I really hope you're enjoying the course. I'll see you soon. 17. Website Design 101: The importance of imagery: So why is it so important to choose the right imagery for your website? And most importantly, how do you do it? Well, before we dive into this lesson, in the next lesson in this course, I'm going to be showing you specific places online where you can get royalty free images for your website that look incredible. So stay tuned for that. But let's first talk about why images are so important on a website. Well, as we've already discussed multiple times in the course already, When someone comes to a website, the first thing that they're asking themselves is, I this for me? Can I use whatever this website is offering? So using the right images can be super important because humans are visual creatures. We see something and understand it far easier than if we are reading something and trying to figure out what the words actually mean. And by using the correct imagery which fits in with the overall feeling that we want to convey with our brand, It's going to help customers figure out who we are and what we can offer far easier and ultimately creating a better user experience overall. Now, the most important thing when it comes to selecting the type of images to using your website, what message do I want to convey? How do I want to be perceived as a brand? Do I want to be seen as more luxurious, or do I need to be seen as more childish and more playful? Or do I want to be seen as more modern, or should I be seen as more futuristic or even spacelike. Now that's the first step. You need to figure out how you want to be perceived and then select your imagery based on that. Now, another thing which is really important when it comes to selecting the right imagery is making sure that your imagery is high quality. One thing that I always tell clients when I'm working on helping them develop their website, if a website has an image on it, which is piled and not high quality, How do you think that reflects the service that the customer thinks they're going to get from that particular brand? It doesn't really reflect it very well, right? So selecting the right imagery is one thing, but making sure it's high quality is quite another. So make sure you keep that in mind, and if you're ever in doubt, then take it out. There are tons of different images that you can use out there. So don't be romantic about just one. It's not the best quality. If it's pixelated, do not use it. Now, a couple of things to think about when you're actually choosing imagery for your website, is it needs to be relevant to your target audience, and also what you're offering. As a human, we relate to people like us far more readily based on their ethnicity, based on their hobbies, based on what they look like, based on their gender, based on their height, based on if they're attractive or less attractive, or many different things. So using natural advantage. If you are a yoga brand, for example, or you're selling something regarding yoga, Then your website to showcase people within the imagery that are your ideal target audience. Because using the imagery, which is the most relevant to your target audience, is going to be the best and most effective at persuading your customer to choose you to be the brand that they buy from. Now, another thing which is really important when it comes to selecting the right imagery is a consistent style. For example, if you're going to do black and white images throughout the website, do it throughout the entire website. Don't start popping up different images with color or, in green hue, for example, that's just going to look crap. What you want to do is you want to keep the consistent nature of your imagery throughout the entire website. This can sometimes be difficult if you're using stock imagery. So if you are using stock imagery and the tone and the feel of the actual image is a little bit different, feel free to edit that on either photo shop or maybe get someone on fiber to edit it for you to make sure that they all feel very consistent and they were almost taken in the same photoshoot. This can be done via light room or photoshop, so anyone with even the most basic skills regarding those two programs can do this very easily. Or if you want to keep things really simple, just make them all black and white and they'll look all consistent regardless. Now, one key thing to remember when it comes to choosing imagery, is as humans, we like to see other humans do stuff. For example, there's a reason why pretty much every single e commerce brand out there shows the product in real life situations. For instance, they may show a handbag on maybe a blank background, but they'll also show that on the shoulder of the woman who is supposed to be the ideal target audience for the customer. So really, think about this when you're choosing the imagery for your brand. And obviously, in the next lesson, I'm going to be showing you why you can find a great range of imagery absolutely free without any issues. Now, just as a little fun exercise, I wanted to ask you which of these two sets of pictures and images work best together. So I'll give you 3 seconds, so three, two, one. Did you get it right? As you can see, these images are just far more consistent. And that's what you're looking for when it comes to your website. You need to make sure that you keep this in mind. Because as people are scrolling through your pages and obviously visiting different pages, you're going to be able to create a harmony between them. So it's going to create a better user experience overall. Anyway, I'm super excited to show you some incredible stuff in the next lesson, so I will see you there. 18. Website Design 101: Find great website images online for free: So where can you find incredible images for your website for free. In this lesson, I actually have two free options which are fantastic, and I use them all the time, and also two paid options. Now, I've actually created direct links to the specific web pages in the course, just to make it super easy for you to find each platform. Now the first website, which is absolutely free, and you can get as many websites as you want without paid a single cent is Pixab. All you need to do is just search for the type of image that you want and scroll down, and there are tons of images relevant to your search term. Now, one thing that I really like to do is I like to click into certain photographers that I really like the style of because usually, that allows me to get different relevant images that are from the same photographer with the same style, and usually they have the same torn and feel. So it's a lot easier to find consistent images for your website this way. You can actually use this exact same approach for my second free platform, which is Pixels. Now, this works the exact same way as Pixel beer. There is generally a few more options or different options on this particular website, but it works in the exact same way. So you simply just search for the types of pictures that you want and images, and then it will simply give you a selection of those Based on your search term. Again, use a little clever trick that I told you about searching for certain photographers or if you like a certain image, click on the image and then it should have the photographer down there, and they'll have different projects in different categories or collections, which they have done, which should have the same torn, feel, and mood. Now, on top of those two free platforms, which are going to give you plenty of images to choose from. There are two more premium options out there if you do want the picture which is super special. Now, the first is sugar stop. It works in the exact same way as Pixel beer and pixels, but the images just are a little bit higher quality. And ultimately, it all comes down to if you think it's worth paying a little bit for the image to get a slightly higher quality image. Now, personally, I've used **** of stock a fair few times simply because I really wanted an incredible image which fitted in my hero section on a website perfectly. Times it's worth just binding an image just because it is higher quality, and maybe it suits your needs perfectly. But obviously it's completely up to you. Now, another great place to get incredible images is adoby stock images. Now, personally, I actually prefer Shutter stock to a Derby for some reason. I don't know why, but it all depends on the images that you're looking for. I would personally recommend looking at all for and just searching for the type of images that you want, and then basically just choosing the image which you think suits you best. Obviously, there's no right or wrong answer, but just remember, I have created a resource which you can ultimately use to get to each of these platforms in the specific pages so you can start searching for images without any sle. I know this lesson was Sean Sweet, but I had to share that with you because there are tons of images out there that you can use, and I want you to find the best ones for your brands website. Anyway, I look forward to seeing you in the next lesson. See you there. 19. Website Design 101: Cropping & Framing (Rule of thirds): What is cropping and framing? And what is the rule of thirds? Well, if you have any experience of photography, then you should know the rule of thirds already. But ultimately, by understanding cropping, framing and the rule of thirds, you can really add so much more character and really create a captivating image from an image which at first glance wasn't really that interesting. It truly is a game changer. When you understand how to do this properly, it can really help to elevate your website design so fast. This is because when an image is cropped and framed in the right way using the rule of thirds, you can really help to guide the user's eye and create an image which can really draw interest. So what is cropping and framing first and foremost? It's essentially taking an image and resizing it and cutting off some parts to ultimately make the image more interesting. Now, you can do this by using the rule of thirds, and the rule of thirds is essentially where you section out the image into nine equal parts. This is done by adding two vertical lines and two horizontal lines directly on the image. Now they don't always have to be equal, but in most cases, there will be. Now, the rule of thirds is not just used in website design or photography, but it's also used in movies too. Using the rule of thirds helps you to draw interest to certain elements within the picture. Helps to create focal points and essentially helps the image come across as more intriguing and captivating. And you can use the rule of thirds to add different dimensions within the picture, different depths. You can also use it to play around with the visual weight of the picture, which is really interesting, which can really help you to stay away from a really boring centered approach, which is not going to be very interesting to look at. Now, one thing to remember is consistency. So if you're going to be using the rule of thirds across your entire website, simply make sure that you do it for every single image to add intrigue at every single point where people are seeing pictures on your website. So just a little exercise, I know you may not be a photographer or you know, a movie director or a website designer at this point. Although that's what we're trying to do, I would like you to just see these two examples and tell me which one you think is using the rule of thirds in regards to cropping and freeing. As always, I'll give you 3 seconds. Three. Two, I needn't you watch. One. Did you get it right? So as you can see here. This particular image is just more captivating. It's just more interesting, and it draws you in. However, with this image, it just isn't that interesting. It's just boring. It just doesn't seem to draw my attention as much as the other one. So if you got that right, then give yourself a pat on the back, clap your hands, turn around, touch your toes, and go meet yourself of coffee, to celebrate because we are about to start the next lesson, so I'll see you soon. 20. Website Design 101: Contrast (and legal requirements in the USA): The importance of contrast in website design. Why is it important and what does it even mean? Well, let's start with actually understanding what contrast actually means. Now, some people think that contrast is just some sort of visual trick when it's actually so much more than that. Because contrast in website design can help with readability. It can help improve the user experience, and it can also help the user get to where they need to be far faster by directing their eye and attention. And that's all extremely important, but something that's even more important is the fact that if you do not have a certain level of contrast in the USA and you fit their requirements, you could end up with a hefty fine. And these are heavily enforced as the ADA standard and also the WC AG standards. Basically, if someone who is visually impaired cannot tell the difference between certain elements on your web page because the contrast isn't there and it isn't good enough, then this could land you in some hot water. Now, you can actually check the contrast on this website below. I'll also add it to the course as well so you can actually check it out yourself and use it when you're building your website to make sure you're safe legally. Now we've got the born legal stuff out the way. What about actually using contrast to make your design look and feel better for the user? Well, one of the most important is the difference between text and background contrast. Now with everything that I've taught you in this course so far, you should be using a white background for your actual website, and then you should be using either black text or a really dark gray. So from a contrast standpoint, you should be fine. The only difference is if your primary color or accent colors are not contrasted enough from the white, and this could land you in a little bit of trouble. Make sure that you check on the website that I gave you a little while ago in this lesson, so you can just give yourself a piece of mind that your website contrast is up to scratch. Another thing which is really interesting in regards to contrast is visual hierarchy. For example, Apple's website use this for the navigation bar. It's essentially an engaging way to use contrast to engage with the user. It helps them know what they're clicking and where they're going. And it ultimately just adds to the user experience to really create an amazing website for them to brows through. Now, what I really want to do is just drive home the lesson of how important contrast is. So check these two examples out. And let me not in 3 seconds, which one you think is using contrast correctly. And 32, one. Did you get it right? As you can see with this website design, everything looks good. It's really clear, and I can see everything, and it's really easy to digest. However, on the other website, it's a little bit different. It's a little bit too artistic, and I can't really read some of the text. It's readable, but it's not really as easy as the other design. Keep this in mind when it comes to designing your website. Keep things simple. Honestly. One of the things that I tell literally every single student and founder and entrepreneur and designer that I work with over the past ten years is keep things simple. Don't have to reinvent the wheel. Use your common sense in regards to using black with a white background and choose a really unique color for your color palette but just make sure that you follow the standards in the US if you are there because I don't want you to get in any illegal trouble. Okay? I'll see you in the next lesson. 21. Website Design 101: Repetition & Consistency: Why is repetition and consistency super important when creating a beautiful website? Well, when these two principles come together, it helps to create a user experience which is predictable, helps the user to use less mental calories when they're browsing your website and creates a better overall user experience. It isn't just about duplicating everything and doing everything the same. That's not what it's about. What it's about is having certain systems in place within your website and the design to make sure that when the person is scrolling through your website page, it feels like one long, seamless experience. And it's not complicated to do. It's ultimately just making sure that your colors, fonts, images, and other elements are all consistent tone and the style of each of those elements is repeated throughout the entirety of the website. This can help to create an experience which the user can become familiar with. And by using repetition and consistency throughout every single page of your website, it can also help your brand come across as more professional and therefore more trustworthy. But this also includes things like buttons and the spacing between letters on your text and the space between the headline and the content. Lots of different elements that you can essentially bring together to create your overall website experience. So how can you make sure that your entire website is consistent and you're using repetition in a way, which isn't boring, but more so engaging and trust building. Well, think about it like this. All of your basic things need to be the same. But you can express yourself in different ways to create an engaging experience for your user? For example, on blog posts, you can have the call to action in the same place. This makes sure that whenever the user is reading different blog posts and trying to educate themselves, they know where the call to action is going to be at all times. Petition inconsistency is also super important with e commerce website specifically. Think about the product pages and how different product pages are ultimately all different because they are a different product, but the actual images that are showcased in the product are very similar. They have the same angles, the same style, maybe the same colored background. It all comes together to create a repetitiveness and also a consistency whilst also allowing each product to shine in its own individual way. Another thing, which isn't quite visual, but it's more so to do with the actual user experience is making sure that the functionality of each page is consistent too. For example, with your navigation bar, if your navigation bar is a different color every single time, it goes to a different page, it's not really going to look very great. So make sure that you keep in mind that consistency and repetitiveness isn't boring. It's actually something which your user needs. They need to feel familiar with your website so they can use it in a way which is the most effective for them to get where they need to go in the shortest possible time and with the lowest amount of clicks. Now, just as a little bit of fun, let's look at these two examples, and you tell me Which of these two is using the theory and the practice of repetition and consistency to create a better overall fiel, which feels more familiar to the user. Okay, I'm going to give you 3 seconds, so three, two, one. Did you get it right? Now if you didn't get it right, do not worry. We are going to learn and see a lot more examples as we move through the course. And consistency and repetition are going to be very evident when we're building our website later on. But if you did get it right, congratulations, pat on the back and another coffee for you. And if you don't like coffee, then I don't know. I don't know what to say to you. Anyway, I'll see you in the next lesson of the course? I cannot wait see that. 22. Website Design 101: Overlapping: Okay, so what is overlapping in web design? Well, overlapping is quite an unconventional way to develop your website because usually it's all about pd things very structured and organized. But overlapping can add a little bit of visual intrigue, and it can also make things look and feel a little bit more creative. By using overlapping, you can really pull the user in, and you can really, you know, capture that attention. So how do you actually use overlapping properly within your website? Well, you can use lots of different ways, but ultimately the main rule is to basically break the rule of using grids, overlap two elements so that they create some sort of intriguing depth. Now, what you're actually doing with overlapping is you're allowing an element to break outside its boundaries. And by breaking outside boundaries, our eyes are instantly drawn to it because ultimately it's not supposed to be where it is. It's actually crossing over into another element's boundary, which can make the page look a little bit untidy, but if it's done properly, it can actually pull off really well. Now, a few things to think about, if you're wondering if overlapping is going to be worthwhile doing for your particular website. The first thing is it can really give a nice modern feel. Traditional websites may not need the overlapping approach, but if you want them to be seen as a little bit different, a little bit innovative, and a little bit new and modern, then overlapping could be a great approach for you. Now, a really great way to think about overlapping is to use it like layers. So, for example, you have your base color of your website, which is the first layer, then you have the secondary layer, which is the first element, and then the top layer should be the other element, which is obviously overlapping over the first element. Now, the top element, which is overlapping, should be a little bit smaller because you should be able to see base of the website, the first layer and the second layer all at once. It shouldn't overlap too much because then that's going to ultimately hide the first element and completely contradict the entire practice of overlapping in the first place. Now, another thing to think about is using overlapping in moderation, because it does drag the eye towards the overlap, and that is because you can draw attention to the overlapped element, but you don't really want to use it too often, because it's going to lose its novelty. And user you're going to see it as being a little bit annoying over time. The best place I like to use it is in the hero section. I really draws people's attention, it brings them in Then you have their attention so they can scroll through the rest of your website. Also remember that you can use overlapping to highlight certain aspects of a website, like your call to action, for example. Because remember, you're using overlapping to drag people's attention to that particular element. Use it to your advantage, use it strategically. Now I wanted to show you two examples. Just a little bit of fun just to see if you can spot overlapping done correctly and overlapping done well, not so correctly. Which are these two examples do you think is best? Which one do you think is using overlapping in the correct way? Three, two, one. That's the one. Did you get it right? Now, if you didn't get it right, do not worry. Overlapping is not for everyone. And plus, we'll be covering a little bit more later on in the course, so you may pick it up then. But if you did get it right, well done, pat on the back, and I will see you in the next lesson. See you later. 23. Website Design 101: White Space: White space in website design. How important is it? What is it? And how can we use it to create beautiful websites? Now, as I said, early on on the course, I think personally that 99% of website should either have a white background or a really, really, really career background. And there's a reason for that because people like white. Specially me. I love white. Now, the reason that we like white is because it allows the elements within the website to breathe. Now, white space can be called many different things. There's micro white space, there's macro white space, which will cover a little bit later, but it's also known as negative space, which also kind of leans into logo design, if you're a logo designer. There are some things that are really important to remember when you're using white space within your website design to really get the best results. Now, what is white space first and foremost? Well, white space is the intentionally left space which has nothing on it. It's completely blank. The white space essentially gives all the content and the elements within your website room to breathe. And without that room to breathe, your website can feel quite constraint and quite busy, and we don't really want the website to look super super busy. We want it to be a little bit more modern, a little bit more airy, to make the person feel at ease as they're slowly scrawling through your website and finding out more about you. Now, white space can really help to create a really unclutted design. And that's the key. You want to make your content super readable for your users, so that ultimately they can have the best experience possible, and they can consume all the information that you need to digest. It ultimately leads to a more asteticly pleasing design. Now, if you don't use white space, then ultimately you risk overloading your website pages and ultimately turning people off from wanting to spend too much time see by Apple that they use tons of white space when designing their websites. And you'd be surprised how beautiful some simple text with a beautiful image and a lot of white space can really bring your website to life. In regards to website design, sometimes less is more. So having a ton of white space can really help to just create this beautiful experience which your users can look forward to. Now, what is the difference between macro and micro white space? Because this is really important. Now, micro white space is the bigger stuff, like, for example, your background, like the padding and margin between your headline and the content, for example, the space between the content on your website being the text, and then also the imagery that you have beside it, perhaps, like the space between the button and the bottom of some text above it, whereas micro white space is a little bit different. That is stuff like the space between the text on your website, just to give it a little bit of breathing room, or perhaps even the increased white space between text that is on a button, for example, to give it a little bit more breathing room and help it stand out. Now, it's a little bit of an experiment. Let's look at two different websites, one using white space properly, and one which is not quite using white space in the right. Which of these two do you think is using white space best? I'll give you a little bit of time. Three, two, one. Did you get it right? As you can see, using white space properly can really help you create an incredible experience for your users. But if you don't use it correctly and you just have your website being a little bit over cluttered and not really organized properly, you can also have a negative effect as well. So take some time, take a step back and always remember that you can always add and take away and experiment as you're designing your website. Anyway, I hope you find this lesson helpful in the examples. So I look forward to seeing you later on in the course. See you then. 24. Strategic Website Design: Defining Your Objectives: How do you find the strategic objective for your website? Well, in this lesson, we're going to learn how you can find the objectives for your website, so you can make sure that your website is working hard for you every single day, 247, seven days a week in 365 days a year. The way that I like to think about a website is like a digital employee. So my website is working hard to convert website traffic into paying customers. That all I need to do is jump on a quick sales call with them and get them over the finishing line. Now, obviously, every business is unique and slightly different in its own way. But the objectives that the websites for those businesses have to achieve are very similar. So how do you personally find the best objectives that your website needs to achieve for your business? Now, the first thing that I want to say is that although there are some websites that try to achieve many objectives at one time, This is the first time you're building a website, you should be focusing on either just one objective or one primary objective and one supporting objective. Don't we if that doesn't make sense to yet. We're going to dive a little bit deeper in this lesson. Now the reason that I see it to just focus on either one objective or two objectives is to keep things simple. This is because when a user comes to your website, the last thing we want is for them to be confused. And I'll actually show you some examples a little bit later on in this lesson of websites that use the one and two objective approach, which I suggest everyone use when they're first building a website for their company. Now, if you're building a website for an e commerce brand, Then the objectives that you should have in place are pretty simple. The first objective should be pretty self explanatory, and that is to generate sales. So everything in regards to your website should be focused around generating as many sales as possible. We're going to go into some special methods like upselling, cross selling, and various other marketing and sales tactics. But at this point, we just need to focus on the objectives that your website has and what it needs to achieve. Now, obviously, selling would be the primary objective for any e commerce company, but the secondary objective would ultimately be to gather as many e mail addresses as possible so you can sell to that particular person later on down the line. Building an e mail list that allows you to stay in direct contact with potential customers who are interested in what you have to sell. Therefore, allowing you to generate more revenue later on down the line. Now, when you're building a website that sells digital products or services, the approach is pretty simple and straightforward. Now in order for your business to be successful, you ultimately need to sell your products or services. And in order to do that, you mean to jump on some sort of sales call with a potential client to discuss their needs so that they can ultimately buy from you and feel comfortable doing so. So for a website that is selling some sort of service or digital product or something that is intangible like an e commerce brand, for example, then ultimately your primary objective should be to set up some sort of sales call or to actually generate the see if that's possible. For me, personally, with my service based business, I focus on generating sales call, so I can actually discuss the project with the client and ultimately close the sale from there. Now as a secondary objective, this could be to build trust. For example, for my branding agency's website, clementinh do, I have positioned my website to showcase all of the work that I've done over the past decade. I also make sure that I answer all the questions that potential clients may have with FAQs and adding testimonials with previous clients that we've worked with. And I also made sure to add some quizzes on the website so that we can actually start to generate leads from asking the clients questions in a digital environment. Reality is that clients don't know what they don't know. By asking them questions which are thought provoking, it ultimately positions us as an expert in the field of brand naming, brand design, and also website development so that when clients get in touch with us and actually start taking our quizzes and look around our website, they feel at least knowing that we know what we're talking about. Now, building a website for a personal brand comes from a range of different objectives that you can choose from. Now, these are the most common objectives that I see personal brand websites the first objective is to build your e mail list. Much like an e Commerce website, for example, you're trying to build an e mail list and a list of people that you can sell to later on when the time is right. You're essentially keeping in direct contact with people who are interested in what you have to see and what you may have to offer in future. So ultimately having some sort of lead generation or some sort of free download where people can exchange their e mail address for that particular asset, that is going to ultimately help you to grow your e mail list super quick. That would be probably your main objective. But what would be secondary objectives that you could potentially explore? Well, if you really want to add secondary objectives, that could be to increase your social media following. For example, someone may find you on YouTube and then visit your website, and by having little icons in your foot, basically showing that you are also active on TikTok and Instagram, people are going to be able to find you on those other platforms as well. So basically, you're creating this ecosystem and community of people who want to know more about you and ultimately want to follow what you have to say. Now, as someone's personal brand grows, obviously, the website may have to offer different types of products too. For example, if the personal brand has a lot of authority and trust, then that person may be booked for speaking gigs and, maybe brand endorsements. So you're going to have to add other elements to the website to accommodate that. Going to be looking at different websites and the objectives that they are trying to achieve throughout the course. Do not worry if things are not 100% clear just yet. At this point, all I need you to do is just start to think about the objectives that you want your website to achieve and write them down. Because when you write them down, you'll find that everything that you do, when you actually start designing your website and building your website makes it super easy when you have a clear focus on what you're trying to achieve. Anyway, I really hope you enjoy this lesson and I will see you in the next one. See you. 25. Strategic Website Design: Finding Inspiration: Before you start building your website, you're in need of some inspiration. Now there are two main places where you can find an incredible surge of inspiration when designing your website and thinking about ideas for your website. Now, the first comes in the form of coffee. And to be honest, that's pretty much where all my energy comes from these days, with a little bit of sugar and dessert. And Binsu. If you've never had BinSu, try it. It's amazing. And another place you can find inspiration is you guessed it? Online. So I actually recommend these three websites for finding inspiration online for your website development ideas. So the first place is awards spelled E W, W, W. Ard s.com. Awards is essentially the pinnacle of all website development design, basically. No, the websites are extremely well designed and they're essentially ranked by experts in website development, so you can get the best websites far sooner without having to rake through lots of bad websites, if that makes sense. So if you're struggling to understand what makes a good website and a bad website, you can check out these websites and know that they're all pretty much spot on. Now, you can actually click into each website and experience the website a little bit more and understand a little bit about how the person actually came up with the idea, why they did certain things, just to really get an idea as to how you want to approach your website development. Now, please remember, and I mentioned this earlier on in the course that when you're looking at other websites, you don't have to copy your website, you know, Spade for speed, but what you can do is you can ultimately look at what you like about that website, then take that as inspiration away from that website to use it as part of your own idea. So a great thing about awards is you can actually visit the website yourself and see it fully up and moving so you can actually experience what the designer has built. Now, another great place to find inspiration is a website called B hands. And again, there are so many different types of websites to choose from. So if you just scroll through and find something that you think looks cool like this one, for example, Then you can actually go through the process of ultimately how that particular designer came up with the idea. And again, you can just take the things that you like from the website. So maybe you just really like the font and how elegant it looks, maybe you like the color scheme and how the photography matches really well with the whites and grays and blacks of the websites. Maybe you like the fact that it's really clean and simple, and there's not too much going on. So take down as many notes as possible, because later on when we actually get to building your websites, you're going to be able to understand exactly what you like and what you don't like so that the final result is better than you could ever imagine. Be Hans, to be honest has the widest range of incredible websites for tons of different types of websites. So for example, whether it be a personal brand or service company or even a service company in a particular sector, you can search for the type of website that you want to see. And ultimately, B Hans is going to give you the most relevant examples that are also appreciated the most, so you're getting the best websites possible on the platform without any additional effort. Now, the last place that you may not have thought about when getting inspiration for your website design is Pinterest. Now, as you can see here, Pinterest has some incredible examples of website development, lots of different types of websites, for lots of different types of sectors, and you don't have to get inspiration from just the types of websites specific for your particular brand. You can look at websites from lots of different brands, and you can ultimately take the best from all of them to create a really unique experience for your user. And much like B Hans, you can search for very specific types of websites like e commerce websites, personal brand websites, or service websites, to get the types of websites that are relevant to your particular brand and business, so you can get inspiration far sooner. Also, much like B hands, Pinterest sticks, the best websites at the top, so you can get the best possible examples far sooner. 26. Strategic Website Design: E-Commerce Website Examples: Building an e commerce website means you need to basically sell as much product as possible for as much as possible. And if you want to be the best in your particular market, then you should be researching the best within your particular sector. For example, if you were a jewelry company, then you would look at someone like Tiffany and Co who know exactly how to sell high end products, right? Yes, indeed, they've been around since 18 37, but that just means that there are a treasure trove of lessons to be learned so you can find out what you like and what you don't like about how they do their website. Now, you can see here, all their product photography is absolutely flawless. They also cut into their products with some nice lifestyle shots as well, of their product being won by a lovely model. You can also see that they do this quite often where they are showing the model actually wearing the necklace, just to kind capture interest again for the user, and they're not just looking at mundane products again and again. You can see the user interface is really, really seamless. You can actually browse the different products. So you can really understand what you're buying before you actually click into the product to look at the finer details. And you can see how they actually focus on using a very simple color palette of grays and whites and, you know, kind of bronze tones to ultimately position the brand really well and to let the main color of Tiffany shine through. Those are just a few things that I took away from looking at the Tiffany and Core website for a couple of minutes, but you should spend more time on the websites of your competition to ultimately look at what they're doing well and what they're doing not so well. Take inspiration, take notes, and learn what you like and what you think is going to work for your particular brand. Now, as another brand that knows what they're doing when it comes to E commerce, to say the least. Let's check out Nike's website to find out what they do to really connect with their target audience and to ultimately create the best possible experience, which is on brand, to sell as much product as possible. What you can see here as soon as you come to the Nike website is they are very much focused on trainers. And a lot of Nike's revenue actually comes from shoes and sneakers, and in particular, the Jordan sneakers, which is extremely popular across the US and pretty much across the entire world. So what you can learn from that is that when you have a main product or a best seller, that should be at the forefront of everything that you do rem across your website. That should be the first product that you see. That should be the product which is featured most readily. And also, remember that when we're actually viewing a website, we view it from the top left the bottom right in that order. So we go across in lines. So ultimately, what you want to be doing is you want to be looking at it as if you're reading a book. Unless, in some cultures where you read right to left, most people in the Western world read from left to right. So keep that in mind and make sure that you're position in the products from the left to the right based on their importance and popularity. So again, I'm just looking at the different elements of the website and try to take as much as possible. Like, I actually really like this particular section quite simply where it's kind of like a gift card, right? All the greatest gifts. Nike. It just looks really cool. I love the color scheme, I love how the gold and the green work together. So this could potentially be something that I write down or maybe even screenshot to say, Okay, if I'm going to do a gift card, I'm going to do something like this. This is the type of style that I want. And I can take that into the next stage, which is going to be actually building the website and using that particular piece of the website for inspiration. If I'm looking to offer a gift card within my particular offering. So no matter where you get your inspiration from, whether it be B hands, awards, Pinterest, or your competition, All that matters is that you take the time to learn what you like and what you don't like. So you can build the best website for you. Anyway, I really hope you enjoyed this lesson. I will see you in the next one. See you. 27. Strategic Website Design: Personal Brand Website Examples: For inspiration for personal branded websites, you can see how incredible this particular website looks for UC and Bolt, who is this extremely fast guy that you do not want to be chasing after or be Chase by for that matter. Now, to be completely brutally honest, I really love this website simplicity, but apart from that, I don't actually see much about the website that I like. I wouldn't actually use a great deal of this particular website in my own design. I think that it's very simple are very minimal. I like how it's on brand with his colors, and I really like the logo. But apart from that, this isn't really what I'm looking for, and that's okay. So when you're actually viewing a website, you don't have to love everything about it. You can actually dislike a lot of things about it. Just take a step back and look at things from your point of view of the user, right? You know, if you were the user, What about this website, do you find adds to the experience and what do you takes away from the experience? Because by taking time to actually understand exactly what you enjoy from a website standpoint, it's going to allow you to make better decisions later on, but you only allow yourself to make those decisions and actually learn about what you like and what you don't like by taking the time to understand what else is out there? You need to view other websites that are in your space to understand what they're doing so that you can understand what's for you and what's not quite for you. If we look at another website by David Goggins, who is this really inspirational Navy seal guy who was originally, really overweight, and now he's just like an absolute Jack Maniac. He's getting you to buy his book from these different platforms. He also has great testimonials from the likes of Dyn the Rock Johnson and Joe Rogan. And ultimately, this website, as well, is not crazy. I'm not completely in love with it. But one thing that I really do like about this website is the achievements page. So he has a page, which is all around his years of athletic achievement all the way back to 2005. So these are all the different races that he has taken part in to ultimately get him to the point where he is now this absolute jacked Maniac, who can literally, you know, I mean, this is actually an example of him when he was back in the day before being a Navy seal. Now, he is, you know, I think, just one of the most fit and athletic people on the planet. He's just crazy, right? So, this website actually showcases who he is as a person. It showcases the type of mentality that he has, and he's not just telling you about it. He's actually showing you, I have done all these races. I came first, I came second. You know, I didn't place in this one, but I still did it, and it's like a 22 hour race, which is crazy. I like this particular page as a trust builder. So I think this is something that I can really take away as inspiration when I'm building my own personal branded website. A personal brand should be able to show people that they can walk the walk, as well as talk the talk, which is really important because you need to build trust and authority. So no matter where you get your inspiration from, whether it be B hands, awards, interest, or your competition, All that matters is that you take the time to learn what you like and what you don't like. So you can build the best website for you. Anyway, I really hope you enjoyed this lesson. I will see you in the next one. See you. 28. Strategic Website Design: B2B Website Examples: Now, in regards to getting inspiration from service based businesses or selling software, for example, monday.com is a really great example. Now, if you don't know what monday.com is, it's essentially like a productivity platform where you can ultimately, manage your day or manage your clients and all that sort of stuff. It's essentially a lot like notion, but it's basically more expensive. Now, in regards to monday.com, you can see here that they have a really nice array of options. So this is essentially as a customer, I'm going to choose, Okay, maybe I want to use it for creative and design, get started. So I essentially get started and it takes me straight to a sign up page. So I'm taking inspiration here thinking, Okay, maybe with my particular business, I want to showcase the options that the user should have, so that, you know, we can start to take all of the website visitors and put them in certain buckets so I can create a better experience going forward because when I click this button, it's telling monday.com to take me to pages, which are relevant to creative and design. If I click something like marketing, it's going to take me to a page, which is more relevant to marketing. If I click something like HR, it knows I'm going to be using it for HR. So think about this when you're actually looking at developing your website pages to get people to the relevant page as soon as possible. So they can sign up so they can start to give you money and work with you find a solution to the problem. Now, another really cool thing that I want to show you because this is just kind of how I think about websites when I'm just viewing them is just how cool it is, how these little things light up to interact with you from a user experience standpoint. Like, I just like the fact that they all suit the colors of the icons, and I just like the fact that I'm actually engaging with the website, and it feels like my hand is an extension of the website. So keep in mind because inspiration can come from anywhere. It can come from colors, it can come from funds, it can come from structure. Be open minded whenever you're going through developing a website or looking for inspiration, because inspiration can come from anywhere. If we go to this website, which is Canva, which I'm sure you've heard of. It's kind of like a design visual platform for everybody. Now, you can see that they literally use the exact same approach. They have kind of an interactive section where you can basically say, Okay, I am looking to use Canva for presentations, or maybe I'm looking to use it for websites. That's quite convenient. Or maybe I'm looking to use it for Instagram post. It makes it super simple for you to find the relevant page that you need to get to as soon as possible. And this is not by mistake. This is ultimately the best possible way to get a user to sign up because Canva and monday.com have the objective of getting people to sign up to use their platform. Because if they don't sign up, then guess what? They don't get paid and they can't generate revenue. So making it really simple for people to find the page or find the information that they need really easily and to get where they need to go as soon as possible, it's going to increase the amount of signups that these two platforms can achieve. No matter where you get your inspiration from, whether it be B hands, awards, pinterest, or your competition, all that matters is that you take the time to learn what you like and what you don't like. You can build the best website for you. Anyway, I really hope you enjoy this lesson. I will see you in the next one. See you. 29. Strategic Website Design: Strategic Website Structuring: Okay, so structuring your website pages. Why do we start and how do we do it? Well, if you remember from a previous lesson, when we talked about the home page and actually grabbing the person's attention in the shortest possible time, you'll know the structure that we need to use already. And that structure is all based around three key questions. Number one being, am I in the right place? Number two, being, Can I trust you? A number three being? Tell me more. So what does this mean for the structure of your website pages? No matter what page you're talking about on your website, you should be ultimately structuring the pages of your website around those three questions at all times. And if you follow the simple formula, then you can never go wrong when trying to build any page for your website. And this is because they're structured around the exact same questions that a website visitor asking themselves in their mind when they're visiting your website for the first or second time. So always think about the pages of your website in this order. And this goes for every single type of website out there, whether it be an e commerce website, a service website, or a personal brand website. Now, in the next lesson of this course, we're going to be covering how different websites take this exact same approach and just structure it in a slightly different way to make it their own. Obviously, every business is unique. I want to give you a solid trusted framework to follow whenever building a brand new page for your website. Because ultimately, your website needs to look good, but it also needs to get your results, and that's why we're here. Now one thing I find super useful when actually designing a website from scratch is to just take a trusty pen and some paper and actually sketching out a really simple and easy to understand diagram of what each section is and what the section should include. For example, for the home page, I would literally just put a box at the very top as the hero section and say, tell customer why they are here. The next section would be a trust building section. Then the section below that would be what we actually do and what we can offer you. This is going to give the customer exactly what they want in the order that they want it. And you can do this for every single section on the website. And if you take a time just to really quickly outline the experience on your website with simple boxes and just text, then you can ultimately spot any particular issues or challenges before you get to the website development stage, which is coming up later on. Be, for example, it's really easy just to scribble a box out and just change a few things on a piece of paper with a pen. But once you've actually put the time and effort into designing the section and then building it on your website on Webflow, it is ultimately going to be a lot harder to change, and you may have to go back to the beginning to start again from scratch. So at this point, we can make all the mistakes we want and we can experiment as much as your heart desires, because it just takes a few seconds to scribble everything out and start again and write down a brand new structure with a pen and paper. But just to make sure you're 100% confident as to the type of structure that you think will work for your particular website, We're going to dive into a couple of examples in the next lesson where you can see how some other businesses have used their website structure to really create a great experience for their users. So with our Fellow Delay, let's die into that lesson, and I will see you very soon. 30. Strategic Website Design: Why use a Website Template?: Can you actually use website templates, or is it worth building your website from scratch? Well, the truth is you can do both. But in regards to templates, as I've already showcased in this course multiple times, already, most websites are very similar. They mostly follow the exact same structure. And the things that are mostly different are things like the fonts that they use? Colors that are used, the logo and the imagery. Other than that, most websites are pretty similar. Now, one thing that is very different is the actual reason the website exists. So for example, you have e commerce brands, you have brands that are personal brands, then you also have brands that offer some sort of service or digital product. Those are ultimately the three different types of websites that are out there. At least the mean websites that you'll find online today. And I've worked with thousands of founders over the past decade, and we ultimately end up building websites that are very similar, but they're just different from a branding standpoint. Now, you may be wondering, Scott, is this even possible? Can I actually build a website on a template that looks and feels completely brand and personal to me? Well, let me give you an example that might just drive the message home. Building a website is a little bit like decorating a house. If you use a template. The house is already built. You already have all the bricks in place. Everything is well from a structural standpoint. All you need to do is give it a lick of pains, put some furniture in there, and you're good to go. Now you can by all means, build a completely custom house somewhere else in the middle of the hill with a nice view, but that's going to cost a lot more, and it's going to take a lot more time. So it all depends on what you actually need at this point in your business. Do you need something that is going to be really solid, really trustworthy, and look great? Or do you need something which is completely custom, and that's going to take a lot more time and a lot more energy and financial resources. It's obviously completely up to you, but the majority of the founders that we've worked with over the past decade have chosen the first approach. They've basically taken a trusted, well structured website template and used it to build their own website. And as you can see, there are lots of different ways that we can use the exact same template to make websites that look completely different. Now, please don't worry because later on in the course, I'm going to be showing you how to take the template that you should have downloaded by now from phase one in the course and take it and make it into a personal website that is perfect for your specific brand that feels completely unique to you. This is going to save you a ton of time, a ton of money, and it's also going to help you to really get an incredible website set up easily without any hassle or support. Now obviously, I'm going to be here to support you, but I just want to let you know that if you wanted to do this by yourself, which you are, then you can do so very easily because of all the steps that we have in this course and how well structured they are. We wanted to create the perfect solution for anyone, no matter how much experience they have with design or website development. Create a website that they can be truly proud of. Now, very soon in the course, we're going to be getting into web floor and actually learning how to use web floor to edit the template, started in images, starting in the text, and really taking the template, and making it your own. So make sure if you haven't already to follow the steps in lesson three phase one of this course, so you can get your web floor account set up can also get your template from us, so you can actually start building your website later on in the course. Remember to use the exact same e mail for both the sign up on web flow and also the e mail that you give us, so we can actually send the template to you directly. Anyway, I'm super excited to get into the web flow platform, and it's super easy to follow, so I will see you in the next lesson. See you soon. 31. Webflow 101: Webflow Packages: So I just want to take a little bit of time to explain the different web flow packages for you so you can figure out which one's the best one for you. Now, to be completely brutally honest, when I first saw Webflows pricing, I was a little bit confused as to what I'm paying for. It wasn't really super straightforward, and I was wondering, Okay, I'm paying, really good money here to host my website with you, but what am I actually getting for it? Now, the things that you actually get with the web flow platform when you're building your website on Webflow, not just what you get in the package, it's the overall experience. So for example, it depends how much you value your time, but instead of spending 10 hours changing something on your website, you can do something in about 5 minutes. So that's the first thing, which at least is super valuable to me. The fact that instead of going through a long, frustrating situation where I need to maybe hire someone to change something, or I need to spend a lot of time figuring out myself. Web floor makes it super easy and stress free, which I'm not sure about you, but for me personally, it's worth paying an extra couple of dollars just to basically make sure that I can spend my spare time doing what I actually enjoy doing, instead of trying to wrestle with a website that is really hard to manage. Now, another reason why so many people use web floor is their support. Now, their support is by far, the best support out there on any platform you can use when it comes to building a website. I actually remember an issue that I had with a website for a client a little while ago. And when I e mailed web floor, they didn't just get back to me with some sort of link to a community page where I'd have to figure it out myself. The guy from the web flow support team had gone into the website, made the fix and then showed me how he did it. Ultimately, if you don't mind having stress and wasting time, then other platforms are going to be just fine for you, and it may be worth saving a couple of dollar just to have that stress and that extra time wasted. Now, if you don't mind being stressed and wasting a ton of time, then by all means, you know, save the five to $7 on another platform, which may suit you a little bit better. For me, personally, I could not think of anything worse than wasting a ton of time trying to fix something and ultimately getting really average support and just getting pointed to articles to read when the problem could be fixed in a matter of seconds. And this is why I love web floor because it literally gives you so much spare time, and it helps you get the best possible website with the least amount of effort, and with premium VIP support, which if you've already signed up for that, you should have that already. Ultimately it just feels like web flow really care. So let's dive into the actual packages that they offer, and I can explain to you which one might be best for your particular situation. So if we look at the different pricing packages, they have two different types of packages. So one is general, which is for just general websites, like, for example, if you're selling a service or maybe, you know, doing a blog or perhaps even, you know, doing a personal branded website, or they've got the e commerce option, which is pretty self explanatory. Now, the great thing is you can switch from one to the other. So, for example, you could start with a basic package of $14 a month, and then once you are ready to actually sell a product and you have products ready to sell, you could switch to the e commerce package and go straight to standard. So you're actually generating sales as soon as you're ready. Now for the free starter package, you are limited to only having a web flow domain. So that basically means you can't have brand name.com as your domain. You have to actually pay for the hosting in order to connect a custom domain to your website. We'll actually have a lesson on how to connect a custom domain to the website a little bit later on, so make sure you stay tuned for that. So within the startup package, we do actually get two pages, 50 CMS items, which if you don't know what CMS items are, they're essentially things like blog posts, products or maybe projects that you've worked on from a service standpoint. And you also get 50 form submissions for the lifetime of you own on the website. Now, 50 form submissions basically means if someone tries to contact you through your contactors page, then ultimately they will send that inquiry or lead to your e mail address. We then go down to localization, which is essentially if your website pops up on a French computer in the middle of Paris with a French user, then the entire website is going to turn up in French, or if it's in Germany, then it's German, if it's somewhere else, then it's going to be a different language, et cetera, et cetera. Regards to limited traffic, this ultimately for the start up package means that there will be 1,000 visitors allowed to enter the website. Now, this is a completely free website and web flow are hosting this completely free for you at this moment in time, so keep that in mind, but also the 1 gigabyte of bandwidth essentially means that the website is going to load at a certain speed. Now, this might not be the fastest website loading that you've ever seen in your entire life, but it is going to load successfully. Bandwidth is connected to multiple other things, but that's the most important thing at least for me that I found. When I have a starter website, which hasn't quite been published yet, and it hasn't got a custom domain attached to it because I haven't got a paired option or a paired package attached to that particular website. It does take a little bit longer to load. So please keep that in mind because it will load faster. Once you get one of the peered packages Connected to the website. Now, if you move on to the basic package, this is $14 per month, which, to be honest is an absolute steel. And for that, you get your custom domain, so whatever domain you have for your brand, you can connect it really simply, and I'll show you how to do that later on in the course. You get 150 pages for your website, which is plenty. But one thing that you don't get in this particular package is CMS items. Now, we're going to go through CMS items later on in the course in a lot of detail. So we'll show you how to use those effectively to make your life 1 million times easier. Now, in regards to form submission, you get 500 monthly, which is quite a lot. In regards to localization, you get a free preview. So again, in France, it will come up in French in Germany, it'll come up German, et cetera, et cetera. Now, in regards to moderate traffic, we essentially get 50 gigabytes of bandwidth and 250,000 visitors, which, to be honest, if you're just starting a website, that should be plenty. It also means your website is going to load super fast, and it's going to be super great for your users. Now, if you move to the CMS package, this is the package that I have for pretty much all of my businesses that I use with Webflow. Now, the reason that I use the CMS package is because I want to make it really easy for me to add blog posts to add projects that we've worked on in regards to my brand agency, to add products, for example, if I'm building an e Commerce brand, it all comes down to efficiency. So instead of having to create a brand new page, all we need to do is just add a few things in the back end of the website, and it automatically creates the page for you using the CMS function. Now, also with the CMS option, you do get one KR form submissions three content creator, so people can actually go in and help you to create content within your blog or maybe your project page, or obviously whatever reason you're using the website. And for the CMS package, you get 200 gigabytes of bandwidth, which includes the speed of your website, but also the amount of content that you can actually upload onto your website. So, for example, if I'm adding images or videos for the project page, then ultimately those particular images are going to take up memory. But these can all be stored within the website so the website loads super fast. Now, you also get 250 k visitors with this package as well. And then we basically move into the business package. Now, to be completely brutally honest, I do not know anybody who would need the business package when just starting a new website. Me personally, I would keep it super simple. So when you're actually building your website, I would maybe keep it as a free package until you basically need to add more than two pages or you need to start adding CMS items in multiple categories. Again, if you don't understand what CMS is just yet, we're going to cover everything later on on the course, but it's going to be super useful for you and once you learn it, it's going to sive you a ton of time in the future. But once you outgrow the free package, the next option is essentially between the basic package and the CMS package. Now, to keep things super simple, if you feel like you really don't need a blog and you don't need to add projects, and you don't need to add the same type of content again and again, like, for example, examples of your work or, you know, client reviews or something like that where you can actually manage things really efficiently in one single place, then just use the basic package. You don't need anything more than that. However, if you do want to actually add a blog and just make things super simple within the website, The CMS package is only like $9 more, and it actually saves you ten times the amount of time that it would take if you just had the basic package. Now, just to be fully transparent, these prices are based on being billed annually, so you will basically pay once for the full year, and then your website is active for the full year without any interruptions. But if you wanted to pay monthly, it does go up a tiny bit. Just a few dollars, so it's not a great deal. But if you do want to save as much as possible, you can save up to 22% by just paying for the year upfront. Now for e commerce brands, things are a little bit different. So if we go to the e commerce section, we can basically see that there are three options. There are standard, plus and advanced. Now, again, if you're just starting out as a brand, I would not recommend you to take the plus or the advanced option. The reason being is you shouldn't be having more than 500 e commerce items on your website when just starting out. I personally would only suggest you having five to ten maximum. Now, each e commerce package comes with a different level of e commerce items, CMS items, and a couple of other features as well, which we'll go through right now. For example, the standard plus in advanced have different levels of items that you can actually sell on your website. For instance, the standard package gives 500. The plus gives 5,000 in advance gives 15,000. Again, I cannot imagine a new brand or a new startup selling more than 500 items. I would just suggest to stick to the standard. In regards to CMS items, you either get 2000, 10,000 or 10,000. And in regards to transaction fee, this simply means every single time someone buys something from your website, you will be charged 2% of whatever is paid. And this is on top of the peer pL or stripe fee, which will also take a small cut of whatever is bought. Now, the standard package will charge 2% and then whatever PayPal and Stripe charges, whereas the plus in advanced will ultimately charge just what Peer pL and stripe charges. So there will be no additional 2% taken if you secure the plus or the advanced package. Now, a really great thing about all of these packages is that they all include the CMS plan features. So if we remember, going to be paying $23 per month anywhere for the CMS packages. Now it's actually grid value for money if you think about it, because for the CMS package, you're paying $23 per month. However, if you want to upgrade at any point to an e commerce package, you can get the standard package, which is going to be plenty for you at just $29 a month, which is literally $6 more than the CMS package. So you're getting all e commerce functionality and the ability to actually sell products and services directly from your website, for an extra $6, which really isn't that much at all. And another great thing when you pay yearly with e commerce is you basically get a stupid amount of savings. You can save up to 30% on what it would usually cost you if you pay monthly. Now, obviously, it's completely up to you whatever package you think is best. But if you're unsure, please feel free to reach out to me because I'm more than happy to give you any advice or maybe share a story or two about what happened to me when I first started using web floor and which package was best for me then and which packages I'm using now for my websites, which I have on the web floor platform. As always, I'm here to help and support in any way that I can, so have an amazing dear. Thank you so much for your time, and I will see you in the next lesson. 32. Webflow 101: Webflow vs Other Platforms: Now, we all know that there are tons of different website building platforms out there online. But ultimately, there are five main platforms out there, word press, square space, Wicks, Shopify, and obviously web flow. Now, this is based on my experience of using different website building platforms over the past decade of actually owning my Brannan Agency Clementine House. Now, when I've used these different platforms, I the experience of ultimately being in really sticky situations with clients because the platform has let me down. And what I want to share with you in this lesson is just my personal experience based on all the different platforms that I've used and why some are good and why some are not so good. Now, I want to start with WordPress, because WordPress has been around for a very, very long time. And ultimately, it is the oldest out of all of the website building platforms out there. That ultimately means it has, you know, a wide range of people using the platform. But the reality is that from a maintenance standpoint, that was the biggest thing that turned me off from WordPress. The reason being is to change something that's super simple, you have to maybe click ten different buttons and then change it and then go out and then save it and then update it with different plugins and lots of other messy stuff, which makes it a real hassle to manage. So essentially, if you have to manage the website really consistently, over and over again, it takes you a long time to change something, that's not really worth it for me. I want something that saves me a lot of time that is really effortless to use, and also, which doesn't require a custom code to build the website and edit anything because, yes, you can use readily built themes, where you can just basically plug it into the word press website, and it's ultimately good to go, and you can just change the text. But it's very restrictive with what you can do on that particular platform. For example, if you have two different websites that are using the exact same theme, In order to edit those two websites, you need to know custom code to make them look unique. The thing that I love about web floor is the fact that you don't need custom code. I literally don't know a single line of code personally, but I understand how to use the web floor platform to let it do all the coding and hardwork for me. Now, next in line is square space and Wicks, and the reason that I'm putting these two together is for multiple reasons. So first and foremost, Square space is a little bit more responsive than Wicks. I've seen a lot of examples with Wicks, where essentially the website is not super responsive, and what that basically means is, if I'm looking at a website on my desktop, then it looks great perhaps. But if I'm looking at it on my mobile phone, it doesn't look anywhere near as good. And this is a huge problem. And I'm not saying that you can't get a responsive website on Wicks, but what I am saying is it is very difficult to do it and do it in a way where it actually looks good. The reason that I prefer web floor is because they make it super simple, and their system for making sure that the website looks consistent across every single device and every single screen type gives me the confidence that people actually viewing the websites that I build are going to be having a great experience, no matter where they view the website. Now, one thing that square space and Wicks have in common is there really terrible migras to SEO, at least in my experience. I built tons of websites on square space and Wicks many years ago before I actually discovered web floor. And the reality is that I never managed to get a single website built on square space or wicks to the top page of Google. Now this was simply due to the code that is used within those particular platforms is too complicated for Google to understand sometimes. At least that's what I was told when I spoke to an SU expert who was telling me a little bit about the different platforms and the pros and cons of each. Webflow, however, made it super simple for me to get every single website that I built to the top page of Google or pretty close. And this is simply through making sure that the blog posts and everything that I actually put into the website was structured correctly, and web flow makes that super simple. The only other website building platform out there, which is a little bit different to word press, Wicks and square space is ultimately Shoppi. Now, Shopper fi is a purely e commerce focus platform. So ultimately, there's no point in using Shop fi unless you're actually selling a product. Now, I have to be fully transparent with you. It does give you a lot of data to help you build your website and make it a little bit better over time. However, the behavioral tracking software, which I gave you in Phase one of this course, is literally going to help you achieve the exact same thing. The only difference is, you can actually see the mouse of the user that's actually on your website, so you can see exactly what's making them click and what's making them not click. You can literally achieve pretty much the exact same thing on web flow. The only difference being, and one of the big things that really annoys me about Shopify sometimes is the fact that Shopify is again, very restrictive, much like word press and Wicks and square space from a design standpoint. You have to pay around $350 to get a really great template first and foremost. And then when you get that template, it doesn't look all that good. Most of the websites look quite cranky, and they don't really shine through, and they don't look very unique. This can ultimately lead to most brands looking very generic. And much the same. And ultimately, for me, it just wasn't worth it. I wanted a template where I could basically add my own little unique twists and really create a unique brand experience for my customers. And web floor helps you do that. And another thing that really annoyed me about Shop offi is no matter what membership or what package you choose with Shop offi, they still charge you a transaction fee. Now, I've actually been fortunate enough to go through all the pain of trying every single platform as they've been released. And to be honest, web floor is the one that I have used since I was first introduced to it a few years ago. I've literally been using it ever since. And now I literally get asked to build websites for clients on different platforms, and I insist on only building on web flow simply because it saves us a ton of time when we're building websites for clients. It helps the clients manage the websites far easier, saving then time, and also reducing the amount of time that is needed to train them to actually manage the website. And because we can build the websites so much faster, and to be honest web flow is just so much more fun to use. We can create incredible looking custom built websites ultimately for a fraction of the cost of if we were building on Shopify, Wick, Square base, or WordPress. Anyway, I understand that you have to make the decision based on what platform is best for you, and I fully respect whatever decision you make. All I can say is, I've tried every single one of the main website building platforms out there online, and Webflow has came up Trump's every single time. It's mostly down to the freedom of what you have from a design standpoint to really create something that's unique to you. Not only that, but it's mostly the managing time of actually getting an incredible website and then managing it with pretty much no time at all during the week. So that's the most important thing for me personally. I'm not sure how important that is for you, but I want to be able to create whatever it is in my imagination so I can really create the website which suits the brand best. And then the secondary benefits for me is making sure that I'm saving as much time as possible when building the website, Webflow actually updates automatically. So unlike WordPress, for example, when you have to update all your plug ins and make sure everything's still working all the time, Webflow does everything completely by itself. Not to mention, Webflow also has incredible premium support, which if you've already signed up in Phase one of the course, you'll already have your free VIP support secured. And lastly, Webflow is just so much fun to use. It literally feels so immersive, and you can literally create whatever you want once you get the hang of the platform. And it doesn't take very long, and we're literally going to start getting used to the platform and all the different little tools that you can use in the next few lessons. So anyway, I'm super excited to get started and actually start building your website, so I will see you in the next lesson. 33. Webflow 101: Understanding Breakpoints: What is website responsiveness? Well, website responsiveness is very basically the website looking great on every single screen and device you can think of. This includes a desktop, a mobile screen, an iPad, pretty much any screen you can think of. Now, website responsiveness may seem a little bit scary if you've never done it before, but it's really simple, and it's made really simple, especially in web flow through the use of breakpoints. The question is, what are breakpoints, if you don't know what they are already? Well, a breakpoint is essentially a certain point in the website's dimensions where it will adapt to a different screen to make sure it is always looking incredible. Do not worry. We're going to make sure that the entire website that you build within this course is fully responsive across every single device, and I will show you how to do that, and it's super simple. But in this lesson, I just want to show you what a breakpoint is, and also how to understand how to set up breakpoints so that you know what to do later on in future. Ultimately, the breakpoint should already be installed in your template, so you shouldn't have to worry about this at all. But it's just really important that you understand exactly what Breakpoints are, so you know what to look out for in future. So let's look at a couple of examples of websites out there of brands that we know and love. So we can ultimately understand exactly what Breakpoints are and how they impact the experience within the website. So let's look at the Tesla website and see how their website adapts across different devices. So if you go to the website, we can see that if we start to adapt the size, of the screen, things start to change a little bit. You can see here there's a breakpoint where the navigation bar changes into a dropdown bar. If we just take that here and then scroll down. That is a breakpoint. You can see that little breakpoint happen where the navigation bar turns into this type of menu, which is super easy to see. Now, this is the same for pretty much any website out there. They all have different breakpoints. By just using this really simple method, you can see what your website is going to look like a desktop. What it's going to look like on an iPad, and then also what it's going to look like on a mobile phone. And web flow makes it super simple to make your website responsive on any device. And we'll be showing you how to do that a little bit later on in the course. But let's look at another example in the website of Nike to see how their website breaks at certain break points to adapt to the different device sizes. So for example, here, we have a nice big screen, and as we start to adapt it, you can see that this particular image starts to get a little bit smaller. And things started with DAP More. You can see that the actual navigation bar gets a little bit smaller, and we see here this is a break point where the menu changes. The actual image changes here to this image at that break point, and we also see that the menu bar here changes to a Hamburger menu. So again, every single website follows the same structure. And within this course, we're going to show you how to create a responsive website. So do not worry this is all super simple and easy to understand as long as you follow the steps in this course. Now, lastly, let's look at the Apple website. Now, the Apple website, obviously, we all know Apple are incredible. Selling their products and making everything look just super sexy, even AirPods, right? Now, when we look at their actual website, we can see that, for example, we have six different windows here, one, two, three, four, five, six. Now, let's just see how they adapt as we change the size of the screen. This is just an example just to show you how Apple does other types of sections within the website. Now we see here, we have a desktop, which looks great. Now as we adapt that and make it a little bit smaller, you can see these are getting squashed a little bit, but they're still in the same formation. Then as we scroll it down even more, We're waiting for the breakpoint, and sure enough, there it is. So we can see that within the breakpoint, the breakpoint happens here, where ultimately the text on the design changes size. So you can see the size of the text here, and then as it gets to a certain size, the text size changes because it's smaller, it's a smaller device. It's a smaller screen size. So we need the text to be relevant to the screen size that it's being seen on. Now, if we scroll this down even more, you can see that something else will change. The actual structure of each square. We've actually changed how the squares are structured. So for example, before, we had one, two, three, four, five, six in rows of two. But now if we go to the mobile version, we have one, two, three, four, five, six, but in the same row. Now each block is stacked on top of each other, because if we had it in the original form, which we showed before, which was made for tablet or desktop, it's not going to fit. So it needs to have that breakpoint in there so that the content adjusts to the mobile phone screen. Now, you can use this exact same approach with your website to test how the content interacts with different breakpoints. It's just see if you have a little bit of a teaser as to how web flow makes this super easy. You can see up here, these are your different breakpoints. So this here is your base breakpoint. So this is ultimately the most average size screen out there that people are going to be using. Then as you work up to a larger screen, this is ultimately looking at like a TV, for example, if the website is being viewed in a TV or even a big screen like this. And then as you work your way down, you can see that you have a tablet, you have a landscape phone, and then you also have a portrait mobile phone. Great thing about web flow is if you change something at the base point, it also affects the other elements on either side. So it makes it super easy, so you don't have to redesign the website across every single device. You simply just have to change it at once and then just adjust things as you go so that the website looks absolutely perfect no matter what device you're viewing it on. Anyway, we're going to dive into actually building your website very soon. So I look forward to seeing you in the next lesson. I will see you there. 34. Webflow 101: The Box Model: Okay, so what is the box model when it comes to web floor? Well, if you watch the previous lesson, then you'll know that I pair together the section, container, and diblock into one single system. I like to call this the home system because if you think about it in the form of land being the section, the container being the house, and then the div blocks being the different rooms within that house, you can create a really quick understanding of how to use each element properly. Let me just explain this pricing section on my website to show you what I mean. Now this section is actually quite complicated, and it took me a little bit of time to build. Now, you Man never need to build something like this. But if you do, let me know, and I'm more than happy to help and support you. Now what you can see is within every single din block, these di blocks are organized in the form of a grid, which will be covering a little bit later on on the course. But every single di block and grid is structured within a container, and then that container is then structured inside a section. So as you can see, by using sections as the land, containers as the home, and then div blocks within the container to create more structure, you can create highly responsive websites which are going to allow you to really get a website that looks and feels professional, no matter where your viewer is viewing it. So if you always remember to use sections, containers, and dI blocks in this way, then you'll always have a well structured website that can be responsive across every device that the viewer can see it on. Let's look at another example just to really drive the message home of how important it is to use the box method and ultimately use sections, containers, and dive blocks in this way. So as you can see here, we have a section. Now, within that section, we have a container, which is inside the section, which is in the body, and then within that container, we also have di blocks. So these dip blocks are called different things because they have other functions connected to them? You don't even know about that dh yet, but it's the exact same approach. We have dip blocks inside the container, and the container is inside the section. By creating the structure, you're making sure that every single website that you build and every section that you build is structured properly. And by structuring your website properly, you can then create effective break points within your website to make sure that no matter what device your website is being viewed on, it always looks fantastic. Now we're going to be using di blocks, containers and sections in the following few lessons. So do not worry if it doesn't make complete sense to yet? We'll cover everything really soon. 35. Webflow 101: Sections: Over the next few lessons, we're going to be using sections, dip blocks, and containers to ultimately build something really simple like this. Now I'm going to show you every single step of the process so that you can follow along. So I'd really like it if you can actually follow along with me within the course so that you can actually know exactly how it feels to create something really simple like this section here. Why do we start? Well, we always start with adding a section, so we would just go here add a section and drag it to the bottom, and you see that blue line at the bottom, that's where the section is going to land. So we drop it, and you can see we now have a section. Step one, done. Now within that section, we need to add a container because the container is going to allow the content within that container to be responsive at all times, and it's going to keep things in place. So how do we do that? Well, we go to the plus box again, then we add a container, and we drop the container inside the section, you can see here, it's going inside the section and we drop it in. Perfect. So now we have our container and we have it inside a section. Now, we can see that everything's lining up. So we know that everything is in place, why is there so much room at the top of this section and at the bottom? Why does it look like that? Why is ours looking quite flat? Well, this all comes down to a little thing called padding, and you can add padding to containers, di blocks, and sections. Now, padding is super important website development because you can create space between different elements. And again, this can be used in di blocks, containers, or sections. But for this particular example, because we're focusing on sections for this particular lesson, wanted to show you that, just adding 75 pixels of padding on the top and bottom, start to give us a look and feel that we're looking for from the section that we're trying to build. Now, obviously, you can create a little bit more, or you can create a little bit less, but it all depends how much space you actually want. But if we really wanted to get very specific with copying a certain section, we could just click on the section, and sure enough, it's 80 pixels per side, and then 30 pixels either side on the left and right. So if we wanted to copy that, we can simply just go 80, 80, and then 3030. So now, our section has the exact same padding as the section above. But why does it sill look different? Well, that all comes down to the elements that are inside the container. At the moment, this container has elements inside it. This one is empty. So the actual section is not expanding organically to fit in the elements within the section. It's just very flat. There's nothing in there. So we need to start adding elements, which we'll do in the next lesson. Now, another thing which you may be wondering is, why is our section white? Why is it not the same color as this one? Well, generally, whenever you add a section or container or dive block or any other element to a website, it's going to be white by default. So how do we change the color? Well, really, really simple. So if you want the exact same color as this, we can click on that section, then go down to this here. Then we will just steal this code, copy and paste, and then select our section and paste that particular code in that section. And then as if by magic, we have the exact same section, the exact same padding, and the exact same color. Now, in the next few lessons, we're going to be covering containers and bit blocks and finishing this particular little exercise that we're doing. So I will see you in the next lesson. 36. Webflow 101: Containers: Okay, so we've built our section, and now we have a container here, which we need to fill with certain elements. Now, in order to do that, we need to start adding some form of DID blocks to ultimately start to organize the section in a way where it looks and feels professional, and it basically copies the exact same section that we have here. Now, there are many different ways that you can actually build this section, but I want to show you the best way and the most efficient way that I would personally use if I was building this website for a client. And the first thing that I would do is add a grid. Now, the grid goes inside the column like so. And inside the grid, I would basically delete the bottom section. So now we only have the top two sections. Now the next thing that I'll do is I'd start to change the size of the gap here. So I want things to line up nicely so that there's enough of a gap for the image and the text to be separate. Once I'm happy with that, I'll press done. Now, we have the grid, and everything is looking very tidy and very nice. Now, at this point, I want to start adding my div blocks, and I add them by simply dropping them into the grid. Now I've added one diblock here. Now this, I'm going to add a little style selector and add this as text. So that's going to be my text. And then I'm going to add another dI block here, which is going to be my image. So now we have text, an image inside a grid, which is then inside a container, which is then inside a section. Okay, so we're at a point where we have our dI blocks, we have them named. We also have a grid in container in a section, and it's looking very similar to this section, but there's one thing that is missing, and that is the actual elements of the image, the text, and the button. Now there are two ways we can do this. The first is we could just simply copy and paste that exact image inside this particular di block. That's one way we can do it, but we don't want to be lazy. So I'm going to show you step by step. And to be fully clear, we can do this with text as well if we wanted to. It's really simple. All you need to do is copy and paste much like editing a word document. You can try this out and experiment a little bit, but it's that simple. Now, I'm going to show you how to actually build it from scratch, so you actually know how to build it firsthand. But when you are using web flow, do not be scared to use the copy and paste function. That's what it's there for to save you time and save you energy. So you don't have to do the same thing over and over again. But let's get rid of these three elements, and we're back to where we started. So the next step is ultimately start to populate our two d blocks. And that's exactly what we're going to be doing in the very next lesson. I'll see you there. 37. Webflow 101: Div Blocks: Okay, so we have our section. We have our container. We have our grid inside the container, and inside the grid, we have two d blocks, one named text, and one named image. Now, let's start with the image box to get that done first because that's the easiest. Now, in order to add an image to this particular box, we need to go up to the little plus button, go down to image, then dragon drop the image into this box. So now we have our dI block with an image inside it. Now in order to actually add an image to this particular image box, we need to click on the Little Cog. Go to choose image. And then it will take us to this box here where we can drag and drop files, where we can add different images. Now, this is just stock is a placeholder, so we're going to add something a little bit more interesting. So if we click the upload button, it goes to our home screen, and I'm going to add this beautiful picture of a swan. So we click open. It adds the swan, and sure enough, once the swan loads, it is then applied to the section. Now, to be honest, I'm not sure if that's a swanlo or a duck, but let's just say it's a very attractive looking bird. Okay. So now we've got our image set. How do we start to add text to the other side of the section? Well, that's really easy, Let's start from the top and work our way down. Now, if we inspect this element here, you can see that it's using the typography settings of aerial, 700 bold, the size is 38, and the height is 44. We also have the color code here, which is 333, and its alignment is left. So let's add some heading. Text to the section. And while we're there, we can actually add the paragraph text as well, because that is going to be needed next, so we just add that underneath, as you can see, the blue line there we go. And after that, we can also add the button, which can be done like so. Now, these are looking very similar right now, but how can we make them look identical? Well, the first thing to do is to make sure that the headers are using the same characters and principles, so Aerial 738 44, perfect, the exact same. So if we basically copy and paste this text, it should look identical. Sure enough, it does. But let's change this because that text is pretty boring. Swans are awesome. Exclamation, Mark. Awesome. Again, not sure if that's a swan of Dock. I'm just putting it out there. Now, in regards to the next text, you can see that this is Arial 400 normal 14 20. So let's check here, Aerial 400 normal 14 20. Now, I think we can all agree that this is quite a lot of text to read, and even this is quite a lot for a user to digest. So let's just change the so a little bit and just put swans are beautiful, but can also be a little naughty at times. Now, we've got this text, but it's a little bit small, right? It's a little bit hard to read on desktop. So let's make it a little bit bigger so we can just add this. We can add it a little bit different in regards to fun. So let's add this as Monsa maybe. Let's make it a little bit lighter. That looks great. Now, we're going to be covering typography a little bit later on, but I just want to give you a little bit of an insight in regards to how you can use typography to really help your content shine. Now as you can see here, it's still a little bit hard to read. So what I'm basically going to do is because I've heightened the size of the text. Your height should be around 1.5 times the text size. So I'm going to put that as 30, which gives it a little bit more, but I'm actually going to reduce that a little bit and make it 28 because I think that's better. Okay, perfect. Now, as you can see, our section is looking a little bit better, and it's also a nice size as well, which is the exact same as the example that we had at the start of the lesson. Now one thing that has annoyed me a little bit is the fact that this button is a really weird color. Now I want to make it super clean and super professional like this example here. So how do I do it? Well, the first thing I'll do is I'll click the button itself. Then I also need to make sure that the color is the exact same As the button here? Copy and paste that at this here. So this should be Arial 412 20. Perfect. And then if I click Join Swan Club, you can see that it's starting to look a lot more like the button above, but it still looks quite different. So why does it look different? Well, there are two main things at play here. The first thing is the actual text itself. So although the text is exactly the same Aerial 400 normal 12 20, and then Aerial 400 normal 12 20, there's something still different. And that is in the more type options. So here where you can see the letter spacing is normal, the letter spacing here is two. So if we add letter spacing two here, it's going to look a lot more like the example above. Now, it looks very similar, but there's still something quite different about the two buttons. Why is that? Is it the amount of text? Well, it could be, but that isn't the main factor. The main factor here is the padding within the button. Can you remember when we added padding to the section to give it a little bit of space to breathe? Well, it's really important for you to do this with buttons as well, because where this button currently has 15 and nine padding, this button has 12 and 25 padding. Now this is a really good ratio to use for most buttons. But one of the most important things to do is just make sure that you keep the same ratio, but you make sure it's consistent throughout your entire website. Now this is a really great ratio to use. So if we basically use this ratio throughout our entire website, it should look pretty consistent? And pretty nice to look at. So just literally 25, 12, 25, and 12. You can see now the room within the button has a lot of space to breathe. It looks a lot more aesthetically pleasing, and we'll go into creating buttons a little bit more later on in the course. But for this particular example, I just wanted to show you how to create a really simple button and why this button looks very different to this one. Ultimately, we want to create the best visual experience for our users. And creating a button, which actually looks quite appealing to click is going to help you to get a better performance and a better conversion rate on your website as a result. Now, I'm quite happy with how things are looking. But if you look at this section and this section here, there's something still not quite right. Now, within this particular di block, which we set out a couple of lessons ago, what is it about these particular elements, which is very different still to these ones? Now, if you take a little bit of time to think about it, you can see that the space between the heading and the text here is pretty much the same. There's a margin here of ten. Now, padding and margin are quite different, and we'll be touching on these throughout the course in various different ways. But you can see here that the padding and the margin for the header here The header here are literally identical, 20 on the top and ten on the bottom. Now this is quite standard four headers and you can adjust it however you want. However, for this particular case, it's not the header, that's the problem here. The problem is the text within the paragraph, because with this particular paragraph, we have a margin of 24 pixels, Was with this text, we only have a margin of ten. So if we change that a 24, now this is looking a lot better, and we have some nice space between the paragraph and the button and the headline and the image, but there's still something not quite right. And that thing is simply where these elements are placed. Now, this is why it's super important to have a container, a section and the di block working well together. This is because if we wanted to take this text like this example and make it central to the image. All we need to do is go to this section here within the diblock and click center. This just makes it look so much cleaner, so much more aligned, and so much more presentable. And this is why it's so important to have sections, containers, and di blocks working well together. Because if we didn't have this diblock, then we couldn't control where we wanted the elements to be. We could only have it in one single place. And by putting it central, it makes it look so much more presentable and so much more professional. That covers off everything in regards to sections, containers, and dip blocks. Now, we're going to be touching on these throughout the rest of the course as we build your website, so do not worry. But that should give you a really good understanding of how to use three elements together to create a really well structured website. Anyway, let's move on to the next lesson in the course. I'll see you soon. 38. Webflow 101: Grids: In order to create that grid, we're going to create a new section as always. And within that section, we're going to call this section the grid section sexy. Now, when we go into that section, we're going to add a container as usual, and much like before, if you remember, it now has zero padding and no real idea of how big it should be. So we're going to add a little bit of padding, much like before. I sounds about right. At either side. Okay, so we've got a little bit of breathing room now. Now, in regards to adding the grid, we need to first go to the bottom here and add the grid here. And this has given us a couple of options to choose from. Now we can add new grid sections here, and we can add another grid section here, for example. But I want to keep it to just two along and maybe three down. Okay? Perfect. Now, again, if we want to create a little bit of width here, then we can do so. And if we want to create a little bit of width here, then we can do so as well. Please keep in mind that if you change the size of this particular row, then you also need to change the size of this row as well, so it is connected at this point. Now, once we have the grid all set up, there's a couple of different ways that we're going to approach adding things to the grid. Now, one way is to ultimately do as we did before, add the di block. Then we could add another div block, and then we could add another div block, et cetera, et cetera. Now, this can get extremely tedious. Now what I would much rather do is just select this diblock, copy it, and then press the grid, and then just paste the same diblock across all of them. Now, I want to show you how you can use that in a way to really help you save a lot of time and energy. So, for example, I want to create a little grid to showcase some pictures that I've taken. I've taken some photography lessons, and I want to show my photography off to the world. So I've got my dI block, which is really important. So again, section containing di, always remember that, go down to image. Perfect. So I have an image inside my dI block, which is inside my grid, and then I have my container, which is inside my grid section. Well, my sexy grid section, obviously. Now, if we click, this image here, and we go to choose image. Then we upload all of the images which I have saved. Then it will start uploading all the different images that I have. Now once I have this saved, I can then start to save myself a little bit of time. And I can do that by simply copying and pasting the div block and pasting it multiple times across the website. Now, something that I can do is basically go to each of these images and then select a different image to add to each block. Now this is going to save me a ton of time and energy. As I start adding different images to my new photography portfolio. Now, one thing that is actually quite annoying is the fact that my images are not all the same size. One is a little bit bigger than the other. One is landscape, and one is portrait. So How can we fix that? So one way to do this is to simply just resize the size of the actual images themselves, but there's another way. And it's actually doing a grid effect without actually using the grid function, which I'm going to go through with you now. Now, this other way is to simply not use the grid function at all, but instead use a container. So again, within the actual section, we are going to add a container, and we're going to get rid of this section just to show you exactly what we're going to be doing. And within that container, we're going to add grid effect. And within that container, we're going to now add all of our images. So we're going to add this one. Then we're going to add this one, and then this one. I've only had three copies today. So that's why I'm a little bit slow than usual. Perfect. So now we have a couple of images, all still different sizes. And let's add the duck in there as well, just for good measure. Okay. So basically what the container is doing is it's just stacking all the images on top of each other, which you know, doesn't look bad by any stretch of the imagination, but it also doesn't look great. So how can we fix it and get some sort of grid effect going? Well, one way to do that is to actually go down two here, where it says columns. And when we click on the grid effect column, which isn't a grid, remember, it's a actual container. Now, you can see the images all stack up on top of each other automatically by default. Now, it doesn't look bad, but it doesn't exactly look great, right? You have to scroll down a long way to see all the images. So how can we fix this and make it look like a grid whilst not using the grid function? Well, we can do something using this little element here called the columns effect. So we can basically take the container, go down two columns, and type two. There you go, you literally have a really great condensed way to showcase your images. Now we could put three, we could put four, but I think that two actually looks a lot better. Now we actually have a little bit of space between the two columns. And what we could do is we could add a little bit of space additionally if we wanted to to create a little bit more of the gap. So we'll add that as 20 just for the meant. Now, that looks great, but what about below each image? Why is there not any space below each image to kind of, you know, break them up a little bit? Well, that's really simple, so all we need to do is just add the image, and then give it a little bit of padding 20. And there you go. We literally have the exact same padding on the side as we do for the image. And all we need to do is just simply go through the images and do the same for each of them, and we are literally good to go. So there you go. So there's two different ways for you to actually add your grid to your website in a really effective way. So one is a little bit more organized, and it's where you ultimately have images or elements which are all exactly the same size. But if they're not all the same size, and you want something that's a little bit more versatile and something that can actually be a little bit more dynamic ultimately than this option may be the best selection for you. Anyway, I really hope you enjoy this lesson. I'll see you in the next one. 39. Webflow 101: Link Blocks: Okay, so how do you actually add a link block? Now, link blocks are super simple. They're pretty much like buttons apart from they don't look like a button. They just look like a little bit of text. Now one thing that I'd really like to do is just show you the difference between a link block and a button. So if we just take this here, now, this is going to give me a full block, basically, so for example, I could put this image inside here, and a link block basically acts a little bit like a dI block. Now, a link block can be used in many different ways. Now, the main two ways that you can use a link block is ultimately as a way to get people to go to a certain page. So for example, we could put this here, then we could add this image. So we'll take the dI block away, and we'll add the image to the link block. And then basically, what we could do is we could take the link block, If someone clicks on this particular element or this particular link block, where the dI block used to be. So the dI block is basically being replaced by the link block ultimately, you can add another domain, or you can take you to a different page on the website, you can add an e mail, you can add a phone number. You can basically have any action taken when they click on this particular element. Now, this is super useful because if you want to take them to the Swans page, for example, or Duck, whichever you prefer, then This would make it super easy, and it's ultimately hidden, so you don't actually see the button. Now, this can be super useful for a number of other reasons as well. And one of the ways that I like to use the link block is to ultimately create almost an invisible button. So what I would ultimately do is I would take the link block, I would add it to the bottom. So let me just add this here, so copy, delete, paste. You can see here, we have the link block there. Now, I want to create an invisible button for this particular section. So I'm going to copy and paste this. I'm going to add some text to here. Okay. We'll get rid of that line in a couple of seconds, and then I'll pierce this here. So I've got the exact same feature in this link block, and I can link to the exact same page that the button goes to, okay? Now, when would we use a link block as opposed to a button for this particular purpose? Well, we would use it when the actual button isn't a priority. So for example, if we go to my website, clementh.com, then this button is a priority because this actually helps me to generate sales and leads. But if we go down, you'll see that this isn't as much of a priority. This isn't as much of a priority. This isn't as much of a priority, and either is this. If we go down a little bit further, this is a priority because this actually gets people towards the objective that my website is trying to achieve. If we go down, this is again a very important button. This is an important button because people can actually download an example of what we're going to provide them. This is pretty important because it can show you all articles, although this could also be put as a secondary link block. Also, as well, this is another important button to get people to go where I want them to go. So basically, the link block should be used for all secondary buttons, where they're not primarily focused on the objective that your company is trying to achieve. And the first thing to make it look basically exactly the same as this button is to make sure it is the same, it has the same spacing. And we can also make sure that it's the same color because at the moment, it is basically linked to that. So if we change the color, that changes that, which looks perfect. And then if we just click this little x here, then it takes away the underline, which leaves it looking a lot more clean and professional. So we basically have the button, so we can just delay this. This is left aligned already. Although if we wanted to put some padding and make it stand out a little bit, then we can do that really easily. But let's just keep it left aligned for the moment. So when I'm looking at this, this doesn't really look like a button, does it? We wouldn't know that's a button unless we actually looked behind the website, or if we actually clicked on it and found out that it went somewhere. How can we make this look more like a button using the link block function? Well, we can do that by simply using something like this, a little arrow. You can use these and find them online by simply googling icons, copy and paste, and I'll show you where you can find those. So if we literally go to our little link block and we use this, now that looks a lot more like a button. Now, there's numerous other ways that we can actually make this look even more like a button. And the way we can do that is by simply doing things like, for example, going to hover. And when it's under hover, we can lower the opacity to 40, I'd say. And then when we go back to non, which just basically means that nothing's happening to it. It's just standing there. It's 100% capacity. But when we hover over it, it turns transparent, which basically says to the user, when you click this, something's going to happen, okay? So when we do that, I think that's a little bit too fast. It doesn't really look very aesthetically pleasing, right? Like, it kind of looks a little bit Mm, jittery and unprofessional. So how can we make that look better? Well, what we can do is we can go down to transitions. We can go down to all properties, and then make it a little bit smoother. So the higher this number is, the smoother it is. About 500 should be okay. And now when we hover over it, it turns transparent in a smoother way. So that's actually done pretty good to me. But I do want to make it look a little bit more like a button. I want people to know that if you click this, you're going to go somewhere. So how can we do that? How can we make this button even more like a button and less just a standard piece of text? Well, because it's a link block, and you can do this with any element, but because it's a link block, it basically looks like it's a block of text, and it actually leads somewhere. So it's more discrete and it's a little bit more clean. What we can do is we can go back to Hover. We can go to two D transform and press this, and this is the position of the actual elements. So we can move this around. We can do lots of great stuff. We can even, move it left and right. And I actually think that could be a really great option. So let's just move this to left by 15. And then when we go back here, it should move out. Every time we click on it, which looks super professional and clean. And this is a really great example of how button hierarchy can be super important when you're designing your website. You can see here out of these two buttons, the primary button, and this little link block, which one stands out more? The one that has a solid background. This one is a lot more discrete and a lot more subtle, so you can use the different types of buttons to create more of a focus on the certain buttons that you want people to press. Additional buttons or bonus buttons, ultimately are the ones that are going to be adding more to the user experience, much like the Swan club, obviously. You can do the exact same thing as this with this button to just bring it to life a little bit, and listen, we're going to be going into lots of important and fun stuff throughout this course as we start to build our website together. So, for example, if we go to hover again, and go down to background. Then we could potentially make this a little bit darker. We could also heighten this up, maybe a little bit, so we can make this a little bit higher. Yeah, that looks good. Go here. And then all we need to do is transition all properties, make it a little bit smoother because 200 is still a little bit jittery. But about 500 is about right. 575 will look good. Perfect. So now, when we hover over this, it gets darker, and it kind of pops up a little bit in a nice smooth way. So it's just a really subtle little thing, but it makes all the difference. Now, just to make it extremely evident to anyone that is still wondering if this is a button, and this is a button or not, then you can basically go to the button, go up to Pointer, and the same with here. And then ultimately, if you just preview your website, every time you hover over, it is unmistakably a button. And the little animation and the little subtle, you know, kind of differences between when it's hovered over and when it isn't really communicate to the user using the least amount of mental calories possible that you're about to press a button and you're about to go somewhere. Now, I know we were supposed to just dive into link box in this particular lesson, but I couldn't resist showing you a few little tricks to really help your website come to life in a professional way. There's gonna be plenty more where that came from in the next lesson, so I'll see you there. 40. Webflow 101: Buttons: So how do we add buttons to our website on web flow? Well, it's super simple. So let's take this button here and just delete it. Bye bye. And then simply go to the plus button and press button, drag it over, and there you go. There is your button. Now, this particular button doesn't really look very good unless you really like blue. So what I want to do is, I want to show you how to design the button to ultimately make it look nicer and to fit your brand and websites aesthetic. So what we can do is we can actually start to edit a couple of things. So this is just editing the padding on either side. And if you just choose option or command on your keyboard, you can change them both at the same time. Let's add a little bit of padding to the sides. 30 looks good. Now, let's add a little bit of padding to the top. 12. That looks good. And then, two things to remember is, when you are editing the button, the button size is distinguished by the text inside, the size of the text, the spacing between each character, and also the padding around the text, okay? So if we change the text to Swan Club, And then if we select that again, go down and we increase the tech size, you can see that the button starts to change size as well. Now, what you can also do is you can change the spacing to two, for example, which makes it spread out a bit, a little bit like this example down here. But then what you can also do, and this is where things get super interesting is you can start to actually manipulate and edit the design and look and feel of the button, using things like the background color, which is here, so I can literally make that any color that I want. Let's do a nice gold one. That looks good. Nice. Perfect. So, I mean, that looks pretty good as it is. But let's maybe add some curves to the button. Let's make it look a little bit more elegant. Six looks good. And if, for example, you wanted to edit different corners at different styles, You could do that, which gives it this kind of sution effect. No, I want all the curves to be there, so I'm going to change that back. Now you're in a position where you have a beautiful button, but how can you link the button out to maybe a separate page or maybe in page or maybe if you wanted to do a button for Carnes, calling the Swan club? How do you do that? Well, all you need to do is click the button. Go to settings. And on settings, you will simply see five options. So the first one is phone. So when you click this, you can just add your phone number. Now, the second option is e mail. So this is basically the e mail that you want the button to take you to to essentially send an e mail to that particular e mail address. And then you also have the subject bar. Now, the subject bar is basically going to say something along the lines of, Hey, Swan Club, I want to join. Piece out. So that's essentially going to come up as a subject line. If I click on this button and it's connected to a certain e mail. Now the next option is page. So what I mean by page is, if I go down to here and call this the portfolio section, I can then link this to the portfolio section so that when I actually start to browse through the website, I can just click this, and it takes me automatically to this section. And let's go back. Now, this is a separate page. So, for example, this is a page which is internally within your website. Now, it's really important that you use this if you are going to be linking internally within your website because if you use the URL, the URL may change in the future. So therefore, if it changes, then the actual URL could be wrong, and it will probably just, you know, completely mess up your entire website, which is not great. So just keep this in mind. If you're linking outside of your website, then use this option, the URL option. You're basically going to be linking to a page inside your website, so staying within your domain, then use this option. Now, what if we wanted to have a Cars and an e mail us option? Well, we would have the Cars option here like this. Then what we could do is we could literally just copy and paste this. So we now have two buttons which are essentially exactly the same. In this button, we could essentially put emails. Then we could change this in settings. To the e mail option. Swans at swans.com. Then you've got swans. Oh, you're a swan. Okay. Exclamation, Mark. Okay. So now we have two buttons. One is for calling this O club, and the other one is to e mail this one club. Now, it kind of looks okay, but two things are really bothering me. The first thing is, I don't like how these buttons are stacked on top of each other. So how can we fix that? We can fix that with a dF block. So we add the dip block. Then we add this, copy and paste this. Now you can see that they're side by side, which looks ten times better, but there's no gap in between them, and it's really annoying. So what can we do? We can add a little bit of margin. So the inside elements is padding, and the outside elements is margin. So it already has a margin below, which is great, but we can actually take that away because we don't actually need it, but we can give a little bit of margin to the right, and that helps to break up the two buttons. Now, these two buttons are looking great. But something that is really important is to have button hierarchy, which if you've already taken that particular lesson in this course, you'll understand what I mean. Now, if you don't understand button hierarchy, go check that lesson now because it's going to be super valuable for you. So what I'm going to do is, I like how these two buttons are looking. But I want to make the callers button more prominent and the emails button less prominent, okay? So what I'm going to do is I'm going to call these two buttons, something different. The reason I'm doing that as well. Let me just show you, is because if I change the background or the text on this particular button, it's going to change them for both. However, if I call this button button four, Carl us and this button e mails, they are no longer connected, okay? So they can basically be designed in any way that I want. So what I can do is I can take this, I can take this, add a little bit. Go or even this. Complete, take that away. And then I can also add text. I looks a lot better. There you go. That looks ten times better. Now, what I'm also going to do is I'm also going to add a little bit of ear outline around this just so it is nice and even. Perfect. Now, when we look at this particular section, we can now see that there's a button high rocky here. We want people to press this button first, but if they want to e mail us, then they're free to do so. That option is still there. But how can we bring these buttons to life a little bit? Because when we hover over them, nothing really happens. We're just kind of the little hand comes up to show that it's a button, but it's not really doing much. It's kind of annoying. So let's look at how we can bring these to life. And one way you can bring them to life is by using hover animation, which is really easy. So you can go to this, press hover, go down, and you can ultimately take away a little bit of pacity to 65, go back to none, and then when we play, you can see that the Carlos button has a little feature which shows that it's being pressed or it's been hovered over, should I say. Now, it doesn't really look very good, if you look at it. It kind of goes to 65 pacity very, very quickly. And we don't want that. We do want is we want it to be nice and smooth. So we had a transition, and we take this to around 500. That is going to look a lot smoother. You see that? No it looks a lot more professional and a lot more trustworthy. Now we can go one step further. We can go to the hover section again, still on this button here, the callers button. We can go down to two d transformations. We can go to this section, and we can move it up a little bit by four. That's just four pixels. Now we go back to none. We go back to this. And we might as well just change this to all properties. So before it was just set to Apcity, now it's all properties. So any changes that I do to this particular button are done with a 500 millisecond gap, okay? So let me just check this out. This button, still the same. This button. Ah, looking good. Look how smooth that looks. Very nice. So, how can we animate this button? Well, there's a couple of different ways that we can do it. If we go to Hova again, we go down. We can see that the text is currently gold. Let's change that to white. And then I want to change the background to this color. Looks good. In fact, I want to make it a little bit darker. There we go. Let's see how that looks. I'm also gonna change this. Perfect. Now I'm going to go back to none. And then I'll go to transitions, remember. Go to all properties. Go to 500, 525 will be good. Okay. So now, when we test out the two buttons, Call us looks good. An email us looks good. So now we have two buttons that are fully animated. Now, this is just basically, you know, bringing different animations together. I wouldn't actually recommend using these two animations next to each other. There should be an element of consistency there. I just wanted to show you how you can create really great buttons in a really short period of time. And once you actually have the general animations for your buttons, all you have to do is just copy and paste, and you can just copy these particular buttons anywhere on the website that you want. And it will always be the same in regards to animation, and you can even change the text. Perfect. So hopefully, that gives you a little bit of a crash course in regards to adding buttons to your website, so I will see you in the next lesson. See you there. 41. Webflow 101: Typography: So typography on web floor. How can we make our typography on web floor? How can we make the text on our websites look and feel incredible whilst also understanding how to edit it to get that perfect website that we want? Now, in this lesson, we are going to cover everything in this beautiful little box. So you know how to use typography on web floor perfectly. So let's start playing around. So in regards to the font, this is pretty self explanatory. You can select any of the standard fonts on web floor? But you can also add custom fonts. And the way you do that is by simply clicking here, which will then take you directly to the Fonts section in the settings panel. And then all you need to do is upload your font file of your choice, press save, and then press publish and publish the website, and you're good to go. So, let's say, for example, we want to change this to Mon Serrat. Perfect. That looks awesome because swans are awesome. If we wanted to make this a little bit bigger, we could use this tool. So this is essentially the different weights that we have for that particular font or type face. Now, what you'll see is not all fonts have the entire selection. So you may have to add them manually if you specifically need, you know, aerial thin, for example, because it isn't available as default on web flow. But luckily for us, Monsat has every weight available, so let's choose extra bold, and let's look at that. Mmm. Not bad. Now this is where things start to get a little bit more interesting, so we can edit the size of that front here by just clicking up and down, or we can even put a number in there, and we can distinguish how big or how small the actual text is. I actually think that's a little bit too small. Let's go for let's go for 35. Perfect. Now, the height is a little bit different. So the height is, let me just show you because the half wings, obviously. Now, the height is the little space between the lines of words. So if we go to 40, you'll see it gets a little bit tighter. If we go to 60, you'll see it gets a lot wider. Now, best practice is roughly around 1.5 times what you have here. So if this was 30, for example, then if we put this as 45, this is roughly about the right amount of space that you want for your headers. And the same goes for your paragraph text and every other piece of text as well. So we've covered all the basic stuff. Obviously, we know what color is, so we donate a dive too deep into that. Alignment is pretty straightforward. It's simply just how the text is aligned within the box that you have it within. We can make the text italic. We can also add a line through the text, align below the text, and also a line above the text. I'll be completely honest. I have no idea when you would put a line above the text, but the options there if you need it. Now, these additional settings down here are basically hidden in this more type options bar. So if we just click this, then we can start to change things like letter spacing, which is basically the amount of space between each letter in the box. Then we've got to text indent. So if we put this as ten, this is going to indent the first character of the text. Let's say, for example, we wanted to indent a slightly five, or maybe we wanted to start it even further. We'll put 30. To be honest, I don't really use that very often, but it is there if you need it. Now, in regards to columns, we actually use this here before. So what we can do is if we put this as two, then it basically breaks everything down into two separate columns to simply make it a little bit more captivated, I suppose. I'm not really sure when you would use this for a headline, but you may use it, for example, if you are creating the effect a little bit like a newspaper where you have two lines of text going in either side and you read the left first and the right second, that could be when that is used. But to be completely brutally honest, I would not use that for headers at all. Now, the capitalized tool is really important because it can actually save you a lot of time. For example, if you want your headers all to be capitalized, then you can press this and you can change that as you wish. You can also make sure that every first word You can also make sure that every first letter is capitalized as well. So even if I have the letters typed out like this and I press this, it automatically capitalizes every single word in that sentence. Or, of course, you can also just have it with all lower case letters as well, which is also great. Let's just get rid of that for a second, and let's just actually choose capitalize, so it looks a little bit better. Now, this little function here is essentially direction. So at the moment it's going from left to right, but if I change this here, it then starts to go right to left. Again, I'm not really sure when you would use that particular function, but it is there if you need it. Now, if you've done the website responsiveness lesson in this course already, you'll know what breakpoints are. But if you haven't, a breakpoint is essentially the moment when the screen gets small enough, for example, here, where the actual lines start to break at certain points, depending on the size of the screen, that you are viewing the website on. And this has a couple of different options. So for example, it has break a, so basically, any letter or any word can ultimately be broken up, depending on the size, or you can even select keep all, which is essentially just keeping everything on one line and not breaking things up. Now you can do this per word, or you can also do this per line. So experiment a little bit with this if you really want to, but I'll be completely honest. I've never used these two elements in any designs that I've created over the past ten years, whether it be on web flow or a different platform. Now, in regards to rap, I'm not actually a rap fan myself. I prefer rega, but I can say is in regards to this particular function, I think that if you are going to use this, then you may be making the website a little bit more complicated than you needed to be. And the reason I say that is, you can actually wrap the text manually in the text itself. So for example, I could wrap Great. So it's separate, and it's actually, you know, contained, then I could even put a little six and six margin. Looks good. Well, that's 60 scot, so let's divide that by ten. Perfect. Then what I think we could do, Mm. Interesting. Let's move this to white. Okay, so we cannot see that at all right now, but then let's steal this gold, and let's change this background to gold. Oh, my God. That looks incredible. And you can do plenty of creative things with this particular function. So when you select any text, you can essentially add a link if you really want to. I'm not sure how great that would look or when you would do that, but maybe you can come in handy. You can wrap with spam, which is basically what we've done here, and you can also clear the formatting. So for example, if I wanted to clear this, and I wanted to completely clear everything, then I would just click that and take it back to normal. But I kind of like that, so I'm going to keep it as it is. Anyway, I really hope that this has given you a little bit of insight in regards to how to use typography properly on web flow, so I look forward to seeing you in the next lesson. See you soon. 42. Webflow 101: Images: Okay, so we've already actually added and replaced images in this course already, but I just wanted to dedicate one single lesson to showing you everything you need to know about adding images on web floor because it's super simple and easy to figure out. Now, if we take away this particular image and delete it, which is great, then we essentially have nothing on the right hand side, which is just what we want. So how do we add an image? Well, we go to the little cross here. We then scroll down to the image bar, and we just pop our image in there. Now, at the moment, we simply have a placeholder image, so we don't have anything to actually show anybody, which is not good because it's not really an image. It's just a placeholder. So how do we add an image? Well, it may just be this little button here that says choose image. So if we click that, then it's going to open up our assets bar here on the left hand side, and then all we need to do is select an image that we want. And here, Presto, the image is now here. Now, as you can see here, the image is its own element. So, for example, if you select the image, you can then go to style, size, and you can add 50% to half the size of the image. Now, although this particular image will be 50% on this desktop, if we go to the laptop, which is essentially the core to all that is responsive on web flow, you'll see that the image is at 100% or auto at the moment. But if you go back to the large desktop, you'll see it's still set at 50. So why is that? Well, the reason that is is because if we take this away, For example, and we just stick this back to Auto, then it's back how we had it before. Now, if we go back to the center, which is the core, if everything that is responsive on web floor, if we change something here with the little star in the top right hand corner, it will automatically change everything to the left and everything to the right to be exactly the same. And this is how you create responsive websites on web floor really easily. So, for example, if we went on here, and if we changed it to 70%, see it changes the size here, but it also changes the size on every other device, too, whether it'd be bigger or even smaller. So what if we wanted it to be 70 on this particular page, but then we wanted it to be 100 on mobile. Well, we can just select that here, put it as 100%. And here, Presto, it's back. And because this is at the end of the responsiveness ladder, you can essentially make sure that you are only editing this particular device. This will not impact any other device settings across the entire website and its responsiveness. Let's just pretend that we take way auto. And we take this back to order as well. So what if we want to change this image? What if we don't like these lovely kids fishing? Well, really easy. Just click the cog, got to replace image, click the new image. And there you go. So anyway, I hope you found this lesson helpful. Immigrants to adding images to web flow. I we'll see you in the next lesson. See you there. 43. Webflow 101: Videos: There are essentially two ways that you can add videos to web flow, and I want to show you how. The first thing you need to do is to actually add the video to web flow. So the first thing you do is go down to Media, Dragon drop video. And then it should pop up with video settings. Now, for the URL, you can either add your video video, which is usually what I prefer because it looks a lot cleaner, or you can just add a YouTube video, like so, type the URL. Presenter, and it automatically comes up with the video. Now, what I just did there is I basically had to add a little bit of width just to actually showcase the video. So about 400 works perfectly for this, and you can see it. And if we actually view the website, you can see that the video will pop up and it will play effortlessly. Log in. Now, if we go down, to the other way that you can ultimately add a video in Webflow. So you have this here. We're going to put the YouTube function directly into the hero split. And again, we're going to add this 400 pixels which shows it, URL. And the great thing about this particular function is you can add the start. Say, for example, we wanted to start at 1 minute and 15 seconds. You can set auto play privacy mode. You can also show controls or not show controls, you can also mute it. And you can also limit related videos to channel. So then, if we play this now, and shout start, CMS items. A 150. The CMS items are distinct perl color. And that is ultimately how you add videos to web floor. Now you can also add videos to web floor using the background video function. And the way to do that is very simple. So first and foremost, you would need a section, which we can add down here. And within that section, we're going to add the background video function, which is down there in the advanced settings. As you can see here, you ultimately have the background video, all you need to do is upload a video file. Now one thing to remember is that you only have 30 megabytes of file space to upload for a background video. So first and foremost, make sure that the video is high quality because the last thing you want is a pixelated video just to showcase that you don't really care about what's on your website. That's not what we want. But secondly, you need to make sure that the video is short, because that's going to keep the actual size of the file far smaller and allow the video to play smoothly. Now you can choose if you want to lot the video, which I would recommend play the video, which I would recommend, and also include a play or pause button, which I would not recommend. And once you do that, you can simply just press play, and your video will play at the bottom of the screen. Now, once you have the background video all set up, you can actually add the video like this, and it may take a little while to load up and to format. But once it does, your video will play automatically, and it will loop, and it will auto play without you even needing lift a finger. So as soon as someone comes to your website, you'll be able to see exactly what the video includes. And so after it's been formatted, you can see the video here. Let's check it out in the player button. Can see here that the actual video is a little bit pix lied, but that's simply because I downloaded a file, which was only 11 megabytes in size. If you downloaded a one which is a little bit bigger, then it's going to look far cleaner and it's going to have more pixels in there and it's going to look higher quality. Now, the great thing about background videos is the essentially active section, so I could actually add this container into the background video, and essentially have it so that all of my elements are there. If I put this into a container and just treat the background video like a section, basically, then I can basically have the exact same thing as this up here, but with a background video playing behind it. Now, I'm not sure how this is going to look. This might not look very good, but we can certainly see the potential of using a background video as part of the website design. Now, I wouldn't recommend doing this. I actually think that using website videos is not really great for backgrounds in a lot of cases. It's far better to actually add the video itself, but it is there if you want to use it. It is another way to express yourself, but just be careful because the contrast here is not great, and it doesn't really do a whole lot for user experience. And ultimately, as you can see here, it does actually slow the website down by quite a bit. Now, just because this isn't loading fast enough, does not mean that you shouldn't be doing it anyway. I really hope you've enjoyed this particular lesson in regards to adding videos to web floor, but I will see you in the next lesson, and I cannot wait see you there. 44. Webflow 101: Lottie Animations: What are lotty animations? Well, litty animations are very useful for a number of different things, and I want to show you one of the best ways to use them within your website design. Now, in order to add a lot of animation to your website, it's really, really simple. And all you need to do is just to create a new section, which is going down here. And in order to add a lot of animation to your website, all you need to do is to have a container, which is here. And within that container, we shall add your di block. That hasn't went in the container. So let's just copy and paste that inside there, so that we go the dif block that's inside the container. Then inside the di block, we will add our lottie animation. So this is the Lottie animation here. Okay, so that has not worked. So let's copy and paste that. Then paste that inside the diff block. So there we go. So we have our lotty animation inside a diff block inside a container, which is inside the section. In regards to a lotty animation, it's exactly the same as adding an image or a video. You simply press the little cog. You would replace the lotty sequence with a new lotty sequence, which I'll show you where to get that in a little while. And then all you basically do is you just say built in duration, so you would just see how long you actually want it to last for. You also press loop, which means that it will just constantly loop over and over and over again, so it looks very seamless. And then you can also press here to play it in reverse. Now, you may be wondering what a lotty animation actually is. Now, your animation is essentially a really smooth animation. You can add it like an image, but it's kind of like a gift, but it's a very smooth animation, which can ultimately go forever without ever stopping. And this can be super useful if you're looking to showcase, for example, certain stats about your business or maybe clients that you've worked with or you know, publications that have featured you because Having this on your website in the form of a Lotty animation can come across a superpfessional, and really clean and it just looks really nice. Let me show you an example of a lot of animation that I use within my website. So this is essentially two lotty animations. This one is going at a slightly faster speed, and this one here is going at a slower speed. And as you can see, it just looks super clean, superpfsional, and really helps to position us as experts in the realm of branding, showcasing all the different brands that we've developed and created over the past few years. Now, where can you actually get a lot of animation? Or can you even create one yourself? The truth is you can create one yourself if you really want to. Now, I personally don't know how to do that, but I do know where to get lot of animation super cheap. So you can initially get a lot of animation for $15 on sites like fiber. You can even get them free even cheap on that to be honest, they're $5, which is really, really great. And all you need to do is just simply tell them exactly what you want, give them all the files, and they should be able to figure it out for you. And then all you simply do, once you have your file is just upload it to the website, by just clicking the Cog, replace a Lott of sequence, and the LottI sequence should be here, and it should be uploaded here. Now, lot the animations come in the form of JSN files. So if you can get the JSN file from someone from Fiber or someone else who is a designer, maybe you know somebody, or you have someone in your family, as soon as you have that JSO file, you just simply add it to your website as if it's an image, and then as soon as you actually publish your website, it will start playing automatically. So I really hope that you can find some time to invest in a Lotti animation if it suits your website, but hopefully you find it lesson helpful, and I will see you in the next one. 45. Webflow 101: Forms: So how do you build a form on web flow? Now, I can tell you now it is very, very easy. I'm going to show you exactly how to do it in this lesson. The first thing to do is if you're wanting to build a form in a section, for example, is to go to the forms section by pressing the plus sign and then add the form block element, which you would simply put in there. And as you can see here, it doesn't look great. I'm going to copy and paste that inside the DIF block. And now at least it's centered. Now, this is the first step to building a form. You need to have everything inside a form block. So add the form block first, and then we can start building it out. Now you can build any type of form you like. And everything that you need to build a form is inside this little box here. So, for example, let's actually use each of the elements inside this particular box to show you how to use each element. So we've already used the form block. Now let's add a label. So if we are going to add a label, then we essentially need something else to add to the form block. So let's add this text area here, which is not going in the box. So let's add this copy and paste that inside the form. Perfect. And then the submit button should be at the bottom, so let's add that here. Perfect. So we've added this here, which is essentially a text area, which looks great. Then let's add a label, which is here. Let's add that above the text block. Oh, so that's below that. So let's just add that above that. Perfect. So now we have an additional text field, our e mail address box, and also our name box. So let's just do this here and name this message. Perfect. Now, it doesn't look great, but we are getting there. We are making progress. So let's just be patient. Let's dive in to the other elements. So maybe let's add a check box inside there as well. And we will put change the name to opt in marketing e mails. Start checked, required. Put this down a little bit and add a little bit of more margin. Okay, so the margin for some reason isn't working, and I think that is because this is a little bit too big. So we're going to make that bigger. We're adding a little bit of margin. So 20 Then we'll add 20 on this one as well. There we go. So now we've got a little bit of breathing room. Now I don't like how squash this is. It doesn't really come across as that great, so I'm going to add 20 in between these as well. I'm going to change this submit button by just clicking it to send message. And then I'll change this to sending message. There we go. So that's looking a little bit better, but it still looks really cramped. So how can we fix that? Well, if we press the section and press vertical and we stretch it out, That should work. But then if we go to DIV block container, then we can start to really understand how to stretch things out even more. There we go. So we've basically just released any kind of constraints from the section block, so it's allowed the form to be fully expanded, which is looking a lot better. Now, I kind of like this, but I think that these labels just don't look very clean. I would rather have them inside the boxes themselves, just to give a more seamless experience for the user. So how can we do that? Well, We could just delete it, then click the little cog, and then just put the word Name here, which looks so much better. Let's do the same for e mail address. Perfect. And then let's do the same for message as well. Perfect. Then we can delete that. Excellent. That looks so much better. Now once we do that, let's add a little bit more of a gap. Looks good. Marketing e mails. There we go. So that's looking a lot better. I'm going to add a header above it, which doesn't actually need to be inside the phm block, it just needs to be above it, but I am going to put it inside the container just so it's actually in line with the rest of the elements. And the best way to do that, I think is to just get this and do it above the phm block. There we go. And then I want to add a little bit more space here. There we go. That's not looking too bad. It's not looking too bad at all. The name section is annoying me a little bit. So what if we could put first and last name in the form block? How would we do that? Well, it's actually pretty easy. So the first way to do it is to basically, or the best way, should I say, is to add a dI block. Then inside that di block, which is currently here, we had a grid, which is here. So we had that inside the di block there. Now we have the grid, and inside that grid, we'll also add two new dI blocks. Remember dI blocks are just the rooms inside the house. So we're just creating some extra rooms inside the house, okay? Then we'll just copy and paste that. Perfect. Actually, no, let's not copy and paste. Let's put it in manually. Let's do it properly and stop being lazy, Scotty. Okay, so we've got everything up there now. Now, what I want is I want to add an input box inside the d block. Perfect. Now I'm going to add another input box inside the di block. Excellent. Pretty happy with that, to be honest. Okay. Excellent. So I'm going to edit this grid. I am going to look at the spacing here and tone that down, so I don't like that, being too much. And this is actually looking pretty good. So now I'm going to delete this. So I don't need that anymore. This is there. This is there. This is there. So I'm going to change this to first name. And I explain what the name and the placeholder text and the difference between those are afterwards. But for now, I'm just focusing on the design of it. Okay, perfect. So we now have the form pretty much finished. Now, in regar using the form, what I'm going to do is I'm going to add a little bit of padding, so I'm going to add maybe 15 here and maybe 45 here, that I'm going to take this dive block and basically make it Let's make it a different color. Let's make it. Are we gonna make gold again really? Why not? Let's make it gold again. Perfect. We're gonna make this white. And we're gonna make this white. Actually, no. Let's not. Let's make it a really dark gold. Okay. That doesn't look too bad. Let's just keep a light that because we're not focusing too much on design. I just want to show you how to actually build a form block and a form for your website. So we've got that it's looking pretty good, but the thing that's annoying me is the space between these two elements is not the same as these. So that's really annoying me. So what I want to do is, I want to go to the grid. I'll check out an grid. So there's 16, there's 16 pixels between the two columns here, okay? Now, I could either change that or I can change the amount of space between those sections, which, if you do this, should help us out a little bit. Thing about these is the best way to do this may just actually be to do it by I, because there's some pixels already there. That looks a lot better. So now I'm going to add another seven pixels to this one. There we go perfect. It's all in proportion now. Excellent. I'm happy with that. Awesome. Now, in regards to actually formatting, the different elements within the form, all you need to do is just make sure that when you are adding, say, for example, the first name block, the surname block, the e mail address, the text message, the message box, which is here, and then obviously the opt in for the marketing e mails. You need to make sure that when you click into the Cog, these are named because when the data gets sent to your e mail address, you need to make sure that they're labeled because if they're not, then you'll just get the information and you won't know what it is, so you won't know if it's their first name, if it's their surname, if it's their message. So labeling these is super important. So the placeholder is the text inside the box, whereas the name is going to actually come through the e mail which you are sent when someone gets in touch with you. So we check this one. This one is required obviously because we need to know their name in regards to this one, Surname, yet, that's name, that's good, and that is required, perfect, e mail address. Okay, that's good. And the type. So we've got five different types of data. First is plain, which is just normal letters. Next is e mail address. The next one is a password. The next one is phone, and the next one is just a number. Okay? So depending on the type of data that you're trying to get from the user or the website visitor, you need to select the type of data that you're trying to get the person to input inside this element. So for example, here, it's e mail, it says e mail at the top, and it says e mail address, which is perfect. Now in regards to message, let's check this one just last. So this still said field. So we don't want it to see that. We want it to see message required. Write your message here. I like that. That's the placeholder text. Excellent. So now everything looks pretty good, but why is this one gone a little bit crazy? I do not understand. Why is this going a little bit crazy? Let's refresh it and see what happens. Okay, so everything seems to be in order. So we can actually check this. We can actually check this form. And before we actually check the form, let's just look at what is happening outside. Okay. So name form. If you want to redirect to a different URL, you can put this here. In regards to actions, this is at a web flow default, and you would only have to change this if you want to link it up to an e mail provider like Mailchimp, for example, or something like that. And which if you want to connect it to an e mail provider like mail chip or a different e mail based platform, check out their specific tutorials, which they will have on their website because every platform is slightly different. So we go in there. Everything looks good. We will put message form. P. And then we are going to just check the back end in the settings. Okay, everything looks good. Everything looks good everything looks good. Perfect. And then if we click success, this is what's going to come up when a successful ultimately form is being submitted to you. So, we just want to change this because it currently looks real, real, real bad. Change that. Change the text here to white. Perfect. And then what happens when it is unsuccessful. Error. Perfect. That looks good. Awesome. So when we actually try this out, so we go in there. Let's actually take that off. Perfect. There we go. Let's try it. Okay, so Scott Lancaster, scott@gmail.com. I love swans. Okay, opt in, send me a message, and it doesn't work in preview mode. But if this was actually published, which is what we'll do now, and if we check it out online, if we went down the bottom and we test it out for real, and then I love Burger's Exclamation mark. A message, success. So we've literally built a form in a matter of what 10 minutes, 15 minutes. And, you know, it's not the worst looking form in the world. Obviously, you can take more time and look around for inspiration. But now you know exactly how to edit a form and even build a forms from scratch. We've just done it ourselves within the last ten, 15 minutes. So you can build a forms from scratch, but remember as well that the templates that we're going to give you as part of this course all have forms already arranged for you, so you don't have to build a form from scratch if you don't want to. Anyway, I really hope you find this lesson helpful, and I really hope you enjoy building forms in the future for your website. I look forward to seeing you in the next lesson. See you there. 46. Webflow 101: Navigation Bar: Okay, so let's say, for example, you wanted to add a navigation bar to your website. Now, again, the templates that you were going to be using within this course will all have navigation bars already built into them. But if you want to create your website from scratch, then you can find the navigation bar just down here. And all you do is just drag that up to the top. Let it go. And here, Presto, you have your navigation bar. Now, once you have your navigation bar set up, now you just need to style it and add your logo, for example. So we will go to the little brand box here. And then what we need to do is, we need to basically have this go back to home. So every time this is pressed, no matter what page it's on, it will automatically take us back to the home page, which is what we want, okay? So the next step is to start styling the navigation bar, so we'll go to style and click the navigation bar. We'll go down, and we're going to make it nice and white. So I stand out. Perfect. And also, as well, I want to add a little bit of extra space and padding between the top and the bottom. So I want to just hold option and just add around eight pixels of padding either side, which looks good. Now, I want to put a logo inside here. So how do I do that? Well, go to the plus sign down to image. Add the image inside the box. So as you can see here, the image is inside the brand link box. And then all I do now is add the logo. Now, in regards to a brand logo, there is a logo that I've been working on for quite some time from a little company that I'm just building on the side called Amazon, which yeah, if you've heard of it, then congratulations. I don't think many people have heard of us, but we are getting there slowly, but surely. Now, as you can see, this logo is kind of attached to the top of the container for some reason. And to be honest, I'm not really sure why. So what we can do to fix this is just add a little bit of padding to bring that down. And the Presto, the logo is now in the middle. Now all we need to do is to change the naveln. So by this point, you should know what pages you need for your website. So, for example, we don't need a home page because the link underneath the image actually goes straight back to the home page, and it'll always bring us there no matter what page runs. So we don't actually need a home page link on our navigation option. So we've got the about us. Maybe we need a contact us. Yeah. And then I think we need services. Now, I want to add an extra nav link here for services. But how do I do it? Well, we can just copy and paste, the about us. Change this to services, and there you go. So as you can see here. It looks pretty good. We've got the logo, which takes us back to the home page. We've also got to the about us, the services, the contact us. Now at the moment, it doesn't look bad, but it also doesn't look too good, right? So what can we do to kind of bring these elements to life a little bit? Well, what we could do is we could reduce color here a little bit to maybe this. And then we can just copy this for each of the elements. And this is kind of the same approach that Apple does. With that website, and I love the way that they do it as well. Okay? So we've got the three options. Now, maybe we want to add a little bit of space between them, maybe 25, 25, as well. Perfect, it's got a little bit more space. And then when you hover over, I want them to go far darker. There we go. I look so much better. And we also press selected as well. When it's selected, when it's pressed. We should also go to this option. Perfect. So you can see here how it's actually turning a darker gray when we hover over and also when we press it. So all we need to do is just do the exact same for each of these other options. Awesome. And then all we need to do is go back down to here and select transitions. All properties. Around 425 should be fine. Properties 425. Just make sure they're all the same just so it looks all nice and consistent, which is great. Awesome. And now you can see it looks super clean and super professional. So they have it. You know how to make a navigation bar really simply in your website with minimal fuss. Remember, within the templates that we offer within the course, they all have navigation bars already built in. You don't have to do all this work, but I just want to make sure you have the full ability to create everything within your website from scratch just in case you want to. I hope you find this lesson helpful, and I will see you in the next one. 47. Webflow 101: Symbols: Okay, so how can you create symbols to save you tons of time when building your website? Well, let me show you how. So this little symbol here, pardon the pun, is essentially what we like to call symbols in web flow. So you can call them components, or you can call them symbols. I like to call them symbols because you can use it to repeat certain elements of your website throughout the entirety of your website with minimal fuss. And the best thing is, when you create a symbol, like so, and you ultimately create this duplicate. Then when you change something in this particular element, it changes it across the entire website. Now, this can be super useful because, for example, let's see we want to create this as a symbol. So we go to that section, we simply click it, we create this section. This is our info section. Perfect. So now we have a new symbol here. So let's say, for example, we want to add one of these further down in the page, okay? So we take it, we copy it, we paste it. There we go. So now we have two in four sections at the bottom of the page. Now, if I change this down here, and you have to click in two symbols to actually change them as well, so you will click this, and then it actually allows you to change it. You're going to say the same Scott is ugly, just kidding, then guess what? When you go to the bottom, it changes it automatically. Now, this can be super useful for things like forms if you want to have the same form at the bottom of each page, or maybe you want to add reviews, and you want to update just one single box without updating every single review across the entire website and you want reviews on every single page. It can be super super useful. So use symbols, whenever you want to save time, use it for your NaF bar, use it for footers, and you can have multiple symbols, pretty much as many as you want to save you as much time as you need. Anyway, I really hope you find this little tip helpful. And I look forward to seeing you in the next lesson. See you soon. 48. Webflow 101: Lightboxes: Okay, so what is a lightbox and how can you use it? Well, I actually use lightboxes quite a lot on my website, where I basically have a little button created by a lightbox link, which then you can ultimately see opens to showcase some sort of video or image. So I use it here, but I also use it a little bit further down here so that when someone wants to watch client video testimonials, they just click on this link and it automatically comes up with the video. Now this is just a really simple way to have videos and images, whatever is relevant to your particular brand, pop up when someone clicks on a link, and it's a really simple way to do it. And I'm going to show you how to use a Lightbox link in this video. Okay, so we're back on our little experimental website, where we are not really bothered what happens if anything breaks, and I don't really want to mess around too much with my Brandon agency's website because I've been refining that website for the last ten years, and I don't want to break anything. So L et's dive in and see how we can ultimately use this Lightbox link function to ultimately get, you know, a really nice experience for our user when they are visiting our website. So, the lightbox function is just here. So we're going to add this to the container. And for some reason, it doesn't want to go in there. So what I'm going to do is, I'm just going to drop it here. And then what I can do is I can just copy. So when you're doing this, it automatically puts an image inside the Lightbox link. So what I'm going to do is, I don't want the actual image I'm just going to delete the image and just take the lightbox Ling, so I'll copy and pierce that. Then I will jump into here. Again, remember that you have to double click to go into symbols, which we mentioned in the previous lesson. Double click. Now we're inside. You can see that this section is highlighted. Then I want to remove this button, and I want to add a lightbox link. Perfect. There you go. So now we've added the lightbox link to this particular section. Now, I do not want the lightbox link to be underneath. I want it to be to the side, okay? So let's see how we can do that. So I would just copy and paste it again. The button is inside the d block. So if I press paste here, here press do, it goes to the side. Now, I want to make this lightbox link look like a button. So how do we do that? Well, One way that you may think you can do it is just by adding a button. However, you cannot use any element which links out or has a link associated with it within the Lightbox link because that would be confusing for the computer and for web flow as a platform. You're basically telling them to do two very different things with the same element, which just isn't going to work. So we can't add a button. So how can we do it? Well, well, if we think about the Lightbox link a little bit like the link block, and if you've actually followed the link block lesson a little bit earlier on in this course, then you'll know exactly what we're about to do. So what we can do is, although we can't put a button in there, we can put text in there, so we're going to add some text, which is great. Now, don't worry about this being underlined at the moment. That's all going to change in a little while. Watch reviews. Okay, so perfect. So we have the text. We're going to go down here, which is currently underlined. Remember the typography lesson. If you haven't checked that out, check that out now. We will remove this, and then we will remove the link that's associated with. So to take away that line, what we're going to do is we are going to first and foremost, change the color of the text. And then what we're going to do is, we're going to actually go to the Lightbox link, and we're going to remove the line underneath, like so. So now we have the text inside the Lightbox link so that whenever that's pressed, a video is going to pop up. Now, how do we add the video? So, we simply just select the Lightbox link, go to settings. And what you'll basically see is something called media inside the Lightbox link settings. Now, all you need to do here is either add an image or a video. Now by adding the video, you just upload your video to vimeo, and then you basically add the link in this particular section, which will showcase the video when it's all popped up. Or you can just add images. Now, the image which is currently in place is this little placeholder, but we don't want that to happen. So we basically will replace that with this picture of this fine gentleman here. So now when we go back. And for example, you can add more media as well. So we can add this image. And then we could add another image. So you can add as many images as you like. Now, one thing to remember is that you can't add images and video, and you also can't add two videos. Okay, you would have to basically edit those two videos together so it's one single video. Okay, so we've got three images in play now. So if we click off that, then this should be all set up. So let's go to this section, click this. And sure enough, there are three images popped up. Now, you can use this particular function for many different things, and it's just a really simple, clean were to hide everything. Now, one thing that you could do, for example, is if you wanted your portfolio to be, you know, a little bit cleaner and not as sort of messy, then what you could do is ultimately add a lightbox link to this section in the grid. And then within this particular image, you could ultimately change this image to that guy, again. And then when this is actually clicked, you could go to settings and you could add this guy. And you can actually add videos to the media as well as images at the same time. However, I wouldn't suggest it simply because it may be a little bit confusing for the user. But we can add lots of different images and basically create a much cleaner experience for the user. So for example, let's just add one more image here. There we go. Now, for example, instead of our portfolio having turn, obviously, we can, you know, add a little bit of margin underneath, like so. There we go. Now, for example, when we go to our portfolio, instead of having every single image that we have, We could potentially have, you know, if we had more images of this particular gentleman, we could have it so that when someone clicks on it, it actually showcases the other images which are relevant to that particular picture. So all of these could be different projects, and then when you click on it, it goes into more pictures, more pieces of photography, you know, more pieces of media, more examples related to that specific project. Okay, so I really hope that you enjoyed this quick lesson on using the Lightbox function, and I look forward to seeing you in the next lesson. See you soon. 49. Webflow 101: Sliders: Okay, so how can you use sliders in web flow to ultimately create a great user experience? Well, we recently arranged ear slider function for ear brand that we were working with, which ultimately showcases all the different testimonials for this particular company. So how do you actually create a great slider function on your website? Well, it's actually really simple. So if you go down, we will add another little section here, which we'll call the slider section. Although it doesn't actually want to go here for some reason. There you go. We finally got there. So now we have the section. Let's add container inside. L et's add a little bit of padding. Let's say 100, 100 here, 30 either way this side as well. There we go. So, in regards to adding a slider, we just simply go here. We go down to the sliide function, which is here. We pop that into the container, and we actually have the slider pretty much done already. How can we start to edit it? Well, the first thing that you need to do is edit your slider now. So go down here. Now, there are tons of different options here. Now, what I like is I ultimately like to arrange the slides to be as minimal as possible. What I mean by that is, I don't really like them being numbered. Nobody really uses numbers within slides anymore. It's very old fashioned. This looks a lot cleaner and looks a lot better. You can also select whether it is rounded or squared, so you can see here, how it's changing. I'm going to keep them rounded. Now you can also add a shadow if you really want to, which can sometimes look pretty cool, but I like to keep it nice and sharp and nice and minimal. You can also invert color, so you can basically make them darker. It obviously all depends on the type of website that you have. But in regards to this particular case, I'm going to just keep them white and gray just because I like the minimalism. Now, you can also increase the spacing between the slides if you want something which is a little bit more modern and futuristic, then you can add it to maybe ten. But for this purpose, I'm just going to keep it as five. In regards to adding slides, you can add slides pretty easily. What I'm going to do because it's quite hard to see these particular buttons on a slide, if say, for example, the slide is white. Now, usually what I like to do is I like to take the slide Nav and put it outside the actual slider. But in this case, the background is white, I'm just going to keep it as it is. Otherwise, I would have to basically change this to either have a shadow or to invert colors, for example, and that would allow me to then put it outside the box. But in this case, I'm just going to keep things as they are. So, now we actually have the slider. How can we start to use it? So, in order to add a slide, all you need to do is simply just add the slide here. So we've now got three slides together. And the way to get to those slides is simply by pressing this button in the settings. So now we're slide two, now it's slides 3, now it's slide one, so it's as easy as that. So how can we start actually editing these slides? Well, this slide is essentially like a dI block. And what I mean by a dI block is you can do pretty much anything you want with it. So you could, you know, add, for example, a grid. Or you could do something simpler actually. You could just add an image, for example, which will go inside. Choose an image. Let's choose the swan. Okay. Then within that, you could basically add some sort of image. Choose the image here, and we go to center it, if you the image. Also, we've got the swan there. So you can just add an image like that if you really want to, but then you would have to basically go to slide two. And within slide two, you would add another image inside. Again, just select the image which you think is best for you. And then you can just place it however you like. There you go. So if we actually played this now, you can see that it's scrolling through different images. Now, you can use this for, maybe a portfolio, maybe for products, or whatever you need it for for your specific website. But to add a slide, it's really, really simple. And ultimately, if you want to do something a little bit more, I don't know. Complex. Then you could. Let me just take away this image box from inside here. Perfect. So now we're back to the start. Now, if you wanted to create something a little bit like the testimonial section, which I showed you at the start of this lesson, then we could do it a little bit like this. So I'm just going to create a really simple one. So this is a diblock, but we can put a diblock inside a diblock. So how do we actually get the slider to autoplay on its own? So we don't have to actually use these arrows, and it just automatically happens for the user. Well, what we can do is, we can have the duration here, which is essentially 5 seconds. Then what we can do is autoplay slides. Time and delay. Unless you want a time and delay, I would suggest putting zero. So we can delete these icons, but it completely depends on you obviously what you want. You can either delete this particular section here by just clicking this. You can also click the left arrow and hide it like this, so it's a lot cleaner. And then when we actually play it, you can see down here that the elements will change by themselves after around 5 seconds. There you go. After 5 seconds, it automatically goes to the next slide. So Now that's done, we can start to add reviews. So how do we do that? Well, at the moment, the actual element itself is gray. So it has a gray background. Now, we don't want that. We want it to be completely transparent. What we're going to do afterwards is because we can't actually see these elements down below now, what we're going to do is we're going to do settings add a shadow, and maybe invert colors actually. There we go. That actually looks a lot better. Now what we're going to do now is we're going to actually start to add the reviews, so we can add the reviews by simply adding a grid, which is here. Then we're going to delete this bottom section because we don't need too many sections at the bottom. We only want two. And then within each of these, we're going to add a div block. So we're going to add a dI block here. We're going to add another diblock here. Now, a little trick that I'm going to show you is much like the tricks that I've been showing you in previous lessons of copying and piercing di blocks, you don't need to di blocks in these two sections. You need to design one diblock, and then when you do this, then you can multiply that throughout the entirety of the slider. So, for example, here, we're going to just add a really simple header. For the person's name, paragraph underneath. We're going to add some sort of image, which is going to need to go into another dI block. So we'll add another image, which should be here. There we go. Perfect. So now we have our header, which is person's name. We have their review. Skirts. Webflow course isn't. Bad at all. I managed to pay my milk man this week. Good news. There we go, and then we just need to check that spelling. Now, for this, what we can do is we can actually add a five star review, for example. So let's go to Google, Five Star reviews, go to images. And here, what we can see is basically five stars. Now, this doesn't look very good. I actually like this one a little bit better. This one's a PNG, so we're going to use this one. So save this image. Then we're going to go to save that to desktop. Obviously, you can create your own if you really want to, choose image, highlight. And then that should have the five stars come up nicely in the finder. Now you can see here you can't actually see them. Now the reason that is is because the image is too big. So what we can do is we can make it smaller, great. That's good. And then what we can do is because basically this image is a square, which I don't really like very much. What I think we should do is instead, and you can do this a little bit more professionally, but I'm just showing you for quickness is just Let's give me four stars. There we go. Instead of using this big square version, I'm basically going to change it with the screenshot, which is basically just form add a little bit better. And as if you didn't know, this is now. It's maybe being a little bit small, just made a little bit bigger. There you go. So now we have the review. Now, how do we make it look a little bit better? Well, we've got the diblock? We can give it a little bit of padding, I think, just to make it look a little bit more when we go. And then what we can do is as well, we can maybe curve the corners a little bit. We can add a little bit of a shadow, move my head out the way. Outside. So now I've got a little shadow there now, for some reason, the shadows being cut off on the top and bottom of the slider. And the reason for that is because it's basically overlapping with the actual slide function. So what we need to do is we need to add a little bit of padding to the top and sides of this. I want to just do 15 just to be nice and give it a nice number. 15, 15. And all that's doing is, it's just giving the actual shadow room to breathe, right? I know this is a really simple shadow. Let's see it from David. There we go. So David Copperfield. There we go. David C. Again, what I mentioned before is we can just duplicate these and just create as many as we like to be completely provely honest. So we can then even duplicate the actual slide itself if we don't want to redo things over and over again. So this is from Parla H. Say literally the exact same thing because obviously the webflow course is fantastic, obviously, although she wouldn't be here. Let's go to here. We're going to go to the next slide, and this slide's blank. So we basically need to rebuild everything from scratch. Now, I really don't want to do that, right? So let's just delete that. Let's go to this slide, just press copy, and then go to mask and paste. So now what we've got are multiple reviews, which we can edit and change after we've designed the first box. So after we're designing this first box, we literally don't have to do any more work. All we need to do is copy and paste the other reviews in there, add the relevant star rating that we've received for our product or services, for example, and then you can just manage them super easily. If you have any questions in regards to this particular elements, I know it's one of the more complicated elements within Webflow, but to be honest, it's pretty easy and pretty straightforward. So if you need any extra support, please reach out and let me know, but that should be pretty much everything. So I will see you in the next lesson. See that. 50. Webflow 101: Tabs: Okay, so what is a tab and how can you use them to create beautiful features on your website? Well, we actually use the tabs function to do many things on my Brand Agency's website. So, for example, we will organize blog posts in a really simple and easy to understand way. And the most important one, I think, is when we use it on our portfolio. So, for example, if someone comes to us and the R A fitness brand, for example, then They can ultimately come and see the type of work that we do. If they're looking for a brand name, then they can see all of the different brand naming projects that we've worked on. On the other hand, if they are an E commerce, fitness apower company, for example, and they want to see, okay, what type of services or businesses have you worked with in the commerce space, then they could come down here, check out e commerce and check out all of the e commerce related brands that we've worked with over the years. And what this does is it just simply gives the user really simple and easy way to find the information that they need, because when a client is looking to hire a branding agency, for example, they are looking for examples of work that is relevant to what they want to achieve for their brand. So it's just really great. So tabs are just a really great way to organize the information on your website to ultimately allow you to give the user what they need in a much easier and simpler way. Okay. So now we're back on our little test website, which we don't really care about breaking too much because we're just playing around. How do you actually use tabs? Okay, so let's add a section here in between these two elements. If it's going to let me. Yeah, if it doesn't actually let you add the sections or add elements in particular places, either copy and paste it or actually use this navigator bar here to ultimately showcase exactly where you want it, and then it's going to be a little bit less hassle. At the container. Then what we're going to do is, we're going to add a little bit of padding as usual. So that's just maybe just yeah, 65 seems good. And we'll put 40 either side. That looks good as well. Perfect. Okay, so now we have that in place. We're going to go down to the tabs function here and drop that straight inside. Now what you can see here is we have three different tabs. And if we actually view the website, you can see that each of these tabs are currently active, okay? So how do we start using these tabs to do something useful with them? Well, let's do something really simple, first and foremost. So what I want to do is I want to showcase the different types of images that I've taken as a photographer. I'm not a real photographer, but I'm just kind of using this as an example where you can select the type of image based on the tab that is selected. So, for example, I'm going to put animals, people, buildings. Okay? So I'm a photographer and I'm creating this tab function to showcase to potential clients? If they want someone who can take a picture of a person, then who they want. And if you want someone who can take a picture of buildings, here's some examples of buildings that I've taken pictures of. And obviously, animals, that's a given B animals are awesome. So how do we actually start making this look good? And how do we start to add pieces of content to the tab panes? So let's dive in first and foremost. So how can we actually start styling this tab menu? So how we can do it is we simply go to the tab link. Color. And we can color this one green. For example, let's make that text white as well. So the black and the green are not really doing it for me. Oh, that's extremely low contrast. Let's make that a little bit better. Slightly better. Okay. Perfect. For people, let's choose again. Go for white. But this time, let's go for a nice red. That suits that animals. Okay. Perfect. Now this is by far not the most asthetically looking color palette, but I just want to basically show you and keep things really simple and clear while we are developing. Okay. There you go. Perfect. Let's just add this to this. You. Perfect. Okay, now we need to start actually adding these images inside here, so what we can do is we just add a dif block. Into the tab pin. Now, a tab pan is essentially just a dI block inside the tabs function, so keep that in mind because it's just going to keep things super simple for you. Now, if we actually select a diblock, we can then start to add the image or images of the actual duck that we have or swan. There we go. Perfect. And then if we go to people, why is it not changing? Hm. Interesting. Well, what we need to do is we simply need to go to Tabs menu, click settings. And when we go to settings, you can see this little feature here. And when we click on Tab two, this means that Tab two is selected, so we can start to, again, add our diblock. Add our image, and then we can add a picture of a person. Is that a person? Perfect. And then we simply do the exact same for the building section add Dave Block. And once you start using these elements, it's going to become a lot easier for you to build websites. It all comes with practice. Actually, remember the first time I started building websites and basically had to you know, learn webflow within a week, which, you know, was definitely, you know, high pressure for the project that I was working on because the client really wanted to use web flow. But after a week of really focusing on learning the fundamentals, you really get used to it super fast. Now, one thing that I'm sure you have picked up on is that basically, depending on which of these is selected, it changes the actual buttons on the top. Now, obviously, we don't want that to happen. So what I'm going to do is Tab one style. So when it's actually selected, it has current attached to it. Now, what we're going to do is, we're going to go to this, Tab two. We're going to do this with that. There we go. You can get super creative with, you know, how these are arranged, and, you know, you can have them pop up with different colors, for example. But ultimately, what you're trying to do, if you just want to make sure that it's consistent across the entirety of the tab function. So the next one that we'll do is p, go down here, and we can go to this section. There we go. So this needs to be updated. There we go. And then all we need to do is the last one, which is Tab three. So for some reason, this one is selected, so it's going to give us a little bit of sle, but let's move on to this section here. There we go. So now, when we actually play it, when we're selecting the different options, you can showcase certain images which are relevant to our specific tab that we've set up. And you can use this for pretty much everything. You can use this to showcase projects. You can choose this for showcase and different products. You can even use this to showcase different packages, right? You could have ear a core package, a pro package, and a plus package. All of these include different things, and when you select that package, it can ultimately be showcasing the different types of packages and what's included in that package. And when you get a little bit more advanced, you're can even start to do things like what we did for this client here, where basically they have the different packages in both a one time payment option and then a finance option. This is literally the exact same thing as what we've just done on the Test website. The only difference is within the DIV block, of the tab. We've essentially just changed that to add more information. So we're not just adding an image, but we're adding all this information here, which is obviously, you know, at the higher end of how complex the tab should be or could be. But I'm just showing you the actual potential of using tabs in the right way because it's just really simple and easy for the person to navigate between one time payments and finance options. It's just a really great tool to have in your toolkit. Anyway, I really hope you found is less in valuable. I hope to see you use tabs on your website because they are super useful if you know how to use them properly. So I look forward to seeing you in the next lesson. See you soon. 51. Webflow 101: Adding Social Media Buttons: Okay, so how can you add really nice looking social media icons on your web flow website? Well, it's actually super simple. So if we go to our website, which we are currently just messing around with obviously, throughout this course, now, we can add these buttons really really easily. So, as always, we're going to add a section. If it lets me. Perfect. Now, We're going to just add them in the center just to show you how to add them and how to do it in a really simple way, so we'll add a container. As usual, we won't be to add any pattern at this point because it's not really useful to us. And then within that container, we will add a dif block. Remember, the section is the land that the house sits on, the container is the house, and the diblock is the room. So remember that when you're building your website, and you're going to be a k. So we now have the di block. Now, all we need to do is if we wanted to add, for example, I don't know, Facebook, Instagram, and Twitter or X, for example. Let's go to grid at this. Then we can also use one extra little grid elements. Okay. And then what we can do is we can actually use the dF block to make these more central. So we'll bring these together. So the grid is more central. And then all we need to do is just add dI blocks within each of these grid sections. Okay, so we've got the structure set up now, so we can just add our elements. Now, how do we add our elements? Well, there's a couple of ways that you can do it. And to be honest, you don't even need to add these di blocks. You could just use the actual link block directly, but I personally like just adding dI blocks just because it gives me a little bit more structure when I'm building my website. So then I can just drop link blocks inside. Now, you don't actually need to add these dI blocks. This is just the thing that I like doing because it gives me a little bit more structure with the website. But once you have the dI blocks, all you need to do is drop the link blocks inside. As you can see, it's actually pushing them out, so I will just copy and then pierce it in each one. So now our link block is inside every dI block inside the three section grid. Now, how do we start at our icons? Well, If we want them to look like this, then we can ultimately do something on this website. So where can we actually get the icons for the website? Well, there's a couple of different ways that we can do it. So, for example, if we want them to kind of light up like this, so they look really cool, we can go to Google, type in free icons. You can put a space, or if you're lazy like me, you don't need to put a space. Go to this website, which is flacon.com, and then let's just put social media icons. What you should be left with is essentially all these different options for icons for social media, so we want Facebook, Instagram, and let's just do TikTok, just because why not? So we're going to download it, PNG, free download. Perfect. So now we have all the icons that we need. Now, for me, personally, I'm going to need to get these and add these to my desktop, just because this is how my lovely computer works. For some reason, that one isn't working. Now, one thing to remember, when you're actually selecting the icons for your website is make sure they're all consistent, because if they're not consistent, say, for example, if you had two circular and one square, not going to look very great. If you look at the Nike website, they're all very similar, and they're all in the exact same size circle. So when we actually add these to the website, and we're going to add them to the website now, so add the image inside, choose upload. We're going to choose Instagram and TikTok. Then we're going to add these all to our asset bar. There's Facebook first and foremost. Then we can just copy and paste this inside, and then change the images Instagram, and this one, change to TikTok. We're going perfect. You can see they're all the same size. Now these are obviously way way too big. So how can we make them smaller? Well, we simply just add them. And you can see here we've got 75 75, so we'll basically just be able to add this here, 75, so they're all exactly the same size. And then you go, you have your icons there. So how can you actually start linking these up to your social media accounts? Well, it's really easy. Just go to your link block. Click the Little cog. And then here, you just put the URL to your social media platform. So, for example, I'm going to go to Instagram, go to my profile, click the Little link, and I will just add this, and sure enough, if I go in and click on this link, it's going to take me to my Instagram page. Now, this looks pretty good, but it doesn't look as good as Nike's version. Now, you can obviously do it white or gray or however you like. But how do you get this nice little hover effect that when one is highlighted, it just kind of jumps out. Well, it's actually really simple, and we've actually covered this exact same method in previous lessons if you haven't learned it already. So how can we do it? Well, the best thing to do is to go to the DIFF block, go down to opacity, just here, and type something like 50%. So that gives us a nice, greer look and feel. So we're going to do this one as well. Diff block, 50%. And then last but not least TikTok, 50%. Okay. So now if we play it and hover over it, it still doesn't light up. So how do we get it to light up? Really simple? Go to div block, go to hover, go down, to pacity, and turn it up. Full throttle. Do the same here. Hover. Go to capacity, 100%. Awesome. We are making so much progress. Hover, 50%, and then we go. They are all linking up nicely. Now, obviously, if you've watched any of the previous lessons in this course, which you should have. You'll know that if you add a little transition, it's going to look 1 million times better. Now, just a little experiment, let's look at the three different levels of transition that you can do in regards to speed or smoothness. So this is like, you know, 950 is very, very, very, very high. But look at these. So, TikTok has literally no transition capacity setting, so it just literally should go. Black, gray. Black gray, really, really sharp. Black, gray. Black, gray, black, gray. Facebook, however, has 500 set as the capacity smoothness when you're ultimately trying to change it. So it does look pretty good, right? Smooth. Now, Instagram has 950, I think, so this is going to be extremely slow, but it still looks very, very nice. So, this one's a little bit faster. This one's a little bit slower. Now, You can choose whichever you personally like best. It doesn't matter really. There's no right or wrong answer. It just comes down to personal preference. All I can see is, I know that from, you know, just looking at. Might be the example. Look here. There's also is extremely smooth. So this is roughly around 500, I think, or maybe 400. So it's very much closer to the Facebook settings that we have right now. The Instagram one is a little bit slower. It's like double the speed or smoothness. So it is going to be a little bit slow, but it does look a lot smoother. So it's all down to personal preference. Select whichever one you thinks best for you. So that pretty much ties up the adding social media buttons to your website lesson. So I hope you enjoyed it, and I look forward to seeing you in the next one. See you. 52. Webflow 101: Classes: Okay, so what are classes? Well, classes are a really useful tool within web flow to help make your life so much easier. So let me show you how they work. Now, if we add a container here, and then add a couple of buttons, and what you can see is all of those buttons are the same. And let's just spread these out a little bit just to give them a little bit of space, and there you go. So each of these buttons at the moment, have no classes assigned to them. How can we change that? Let's start designing this particular button. So let's type gold ticket. In this one, let's type Golden Dog. And in this one, let's type Golden cat. I have absolutely no idea why I'm using these words, but just bear with me. That's not important. But the next thing that I'm about to share with you, that is very important. So if we edit this particular button and we make it gold, for example, then you'll basically see that it does not affect in any way shape or form the other elements within that section. So although the golden ticket button is gold, Golden Dog and golden Cat are not. So how can we change that? What we can do is we can take the button, and we can add a class to it. At the moment, this edit is classed as button five. What we're going to do is we're going to rename this class. So let's put gold button. Now, at the moment, this button is called the gold button, but this one is just cold button, and it has nothing attached to it. So how can we make this button gold like this one? Well, there are two ways. One is we copy and paste this code, and we add it. However, that's a little bit too long for me. So let's do it the smarter way. We go into class, and we take the existing class which is attached to this button, and we apply it to this button, like so. And you can do this with any element that you wish, including section. So for example, for this particular section, it currently is connected to the padding, and this is the class that has those characteristics assigned to it. But what if we add golden? The background turns gold? So basically, what you can do is you can use classes to make your life a lot easier. If you want all of your buttons to be exactly the same. So, for example, if we now start to edit the padding, on this particular button. It's going to affect all the other buttons with that particular class as well. But let's say, for example, if we don't want to edit every single button to be exactly the same. Now, I don't know why you wouldn't do that, but let's say, for example, if we had another section below, and the buttons here were a little bit different. So let's add background color like this, and let's add white. Now, these sections are still connected through the section five class. But this one on the top has a different class, which is white. This one does not have that additional class. So if we change the background to this particular class as white, then it's going to turn white and it's going to stay there without affecting this particular class. So ultimately, if you add an additional class, then whatever you add and whatever you change on this particular class, it's going to overwrite what is done on the standard class. Now, let's say, for example, if we change this to gold. So if this is a gold background, and you can hardly see the buttons. Now, if we change these buttons, to Black, for example, that's going to change all of the buttons that have this class attached to it. So how can we change that? Well, We could, for example, make a completely new button. I like this button. I like the fact that it is nicely sized, the padding is nice, the text is nice. So how can we just change the background color without, completely messing up the rest of the buttons that are great on a white background? Well, it's actually really easy. So we would just simply add an additional class to overwrite the gold button. Basically, this class here is still very much active, but this class overwrites this class. So what we would do is we would just add black up here, change this to black. And as you can see here, that particular class is now overwriting the previous class. And you can use this for any element on Webflow. You can use it for icons so you can get the same feeding across every single class. You can use it for reviews. You can use it for text so that all of your headlines are all exactly the same size. You can use it everywhere. So hopefully, you find this sting helpful, and I look forward to seeing you with the next one. See you. 53. Webflow 101: Backgrounds: So backgrounds. What are they and why are they important? And how can you actually change them? It's actually really simple. Now there are two different ways to use backgrounds. Now the first way is to change the background of a particular section. So obviously, we can select this section, go down to backgrounds, then we can basically change the color or We can do a number of other things, so we could actually add an image as the background, like so, or we could potentially add a gradient, which is done like so. Or we could add a circular gradient, which is basically the exact same as the gradient option, but it just obviously gives you the darker color or the alternative color around the outside. Or lastly, you can just add a normal color. Now, the reason that you can add these different things is because you can actually add them on top of each other. So for example, we currently have this as a background, but we could also add ear grading as a background as well. So let's just change this a little bit darker. And then we could ultimately change the order. So basically the element that is on top is going to be the one which is the most prominent on the page. And we could add this and basically set it up to 100%, and you wouldn't see anything, or the less opacity it has, the more easily you can see the element behind it. Now, this can be used in numerous different ways. So what I like to do is if I have this is kind of like an overlayer section, I would add something like an image, which you can do here, and we can add this image here, which doesn't look too bad. Now, this section here is essentially why you want it to be positioned. So if you want it to be positioned higher, then you would basically select this option, if you want it lower, here, on the left, here, on the right here, and then in the center there. Now, what you can do is you can also select contain cover or custom. Custom means you actually have to, you know, manually select how high it is, how small it is, and all that stuff. I tend to just go with CVs, it just makes things super easy. And then you can select what position you want. And that one actually looks pretty good. Now, for example, what I'm going to do here just as show you is we'll use the contain option, which basically just makes sure that the full image is used as the background as many times needed to actually fill the space. Now, what you can do here is because this just looks a little bit weird, is you could add this overlay above the image, just make this section stand out more, which ultimately, as you can see, just helps the element to stand out a little bit more and just helps it become more prominent. Another thing that you can do in regards to your section is let's just delete all of these from here and just get this to agree like it was before. So another thing that you can do is you can actually change the background of the entire body. So, for example, if you wanted to change this to be completely red, then you could do that. Now, I don't know why you would do that, and it would be pretty weird for you to do that. So let's change that back because I think the fact that this is all red is giving me anxiety. So let's move this back. To white. Now, you don't actually need to put anything as the background color for your body, but you can also add images. So, for example, if we wanted to add this as the overall image, then, this doesn't look the greatest, and it's actually extremely confusing, but you can actually do it that way. You can use it. And this is just the power of web flow. It helps you to create really creative designs really easily without the stress and coding. Helps you do everything super easy. Now that's ultimately how you can use backgrounds. It's really simple, really easy, and you can get really creative with the type of backgrounds that you use. For example, if we go to my brand agency's website clementinhous.com, you can see these circles that have a shadow behind them, which is super subtle, but it just looks so good on the website, and it's just a really nice little feature just to make the background stand out a little bit. Also used a very similar approach for this website for a client, where basically we are these little patterns, little circles and Xs, just so it isn't super boring and mundane. So feel free to let your imagination run wild and obviously, don't discount the background as just being white, you can add little elements to make it look more interesting. Anyway, I hope you find this lesson helpful, and I look forward to seeing you in the next one. See you soon. 54. Webflow 101: Display Settings & Responsiveness: Okay, so display settings and making your website responsive across all devices. How can we do this? Well, it's actually really simple and straightforward, and your display settings can be seen up here along the top of your screen. So currently, we have four different breakpoints in play. We have your base breakpoint, we have your tablet, We have landscape mobile, and we have portrait mobile. Now we can add three other breakpoints, one being the 12 80 pixel, which is ultimately good for your Macbook Air and other Apple devices, and you can also add your 14 40 pixel breakpoint, and also lastly, your 1920 pixel breakpoint. Now, why is it important to have all these different breakpoints? Well, the reason that it's important is it's going to help your website to be responsive across all devices. And I'll show you how to do that now. If you are actually viewing the website as it is, you can see that it works well across tablet, landscape, portrait, and also across all the other break points as well. Now, if we actually start to change the size of the website, you can see that it changes quite significantly. Now, if you go back to our test website and just try and play around with this particular section, which we've built previously in the course, then we can see here that it's currently responsive on the 1920 pixels and up, but it unfortunately looks very different when we start going down to the mobile section and even the base point. So How can we change this? Well, what we need to do is we essentially need to start to rebuild it as the base point. Now, the base break point ultimately dictates everything that happens going up and everything that happens going down. So let's rebuild this particular section at the base point, and then we can basically start to understand how the responsive nature of web flow works. So let's go down to build a new section, or we can create the exact same padding. We'll make a little bit of padding on the side there. That's add a container. Perfect. There we go. And then we can start to essentially add. And remember, we're actually building on the main break point, the core breakpoint, the base breakpoint. We're not building on this section, which is not going to affect any of the elements. Because when you build on the base breakpoint, then you are affecting everything going down to mobile and everything going up to a bigger screen as well. Whereas when you edit something on the highest breakpoint and also on the mobile portrait breakpoint, you are not editing anything else. So remember that the base breakpoint cascades down and also up But when you are editing at the end of the breakpoints, you're not editing anything else. This also applies if you are editing the landscape breakpoint. If you edit here, it also affects this breakpoint here, as well as if you edit in the tablet breakpoint, it affects these two as well. It also happens the other way too. So for example, if I dit this breakpoint, it affects this breakpoint in this breakpoint. However, if I added this breakpoint, then it doesn't edit this one, but it will edit to the left. So keep this in mind because it's going to be really important as we start to understand how to make your website responsive, and I'll share with you in this very lesson the process that I use to make sure that my entire website is responsive at all times. You're always designing on the base breakpoints. So please remember that. Now, if we're rebuilding this in the base breakpoint section, then what we can do is we can just take this hero split. We can add a diblock to this container. We can add a grid. We don't need two. We just need one, so we can do that. Then we can take this, add a dif block to the grid. On the left at this, which looks good so far. Then we can just add another di block to the other side and then go back. A the YouTube video here, and there you go. Now at this moment in time, this is currently looking extremely squash. So why is that? Well, that is because the max width on this particular element is currently at 46%. We do not want that max width. For example, if I start to increase that, then it starts to fill its way out. So if I just change this to none, then it's essentially going to fill up the entirety of the section. But we do want a little bit of pattern in there just to make sure it doesn't go too close to the image. So I'm pretty happy with that. Now, you can see because we've duplicated everything on the base break point, it's only actually activated on the last break point within the system and the responsive nature of webflow. So basically what we need to do is we need to start to design it here. Okay? So if we take this, for example, we can start to look at how this looks. So I'm happy with how this looks. I' happy with how this looks at the moment. But what we can do is we can start to change this particular button. So we change this. We can get rid of this for the meant. We don't actually need this right now. So we change this. We change the color to gold. We can change the padding on this as well to make it look a little bit nicer. Again, just holding down option to make sure that I'm changing them both at the same time. We can also add a little bit of breathing room as well, and then we can start to edit. The lightbox element, which is simply just by changing that, changing the color. There we go. So once we're happy with how a section looks. We can then start to look to see how it looks in other devices. So let me just add a colored background here just so we know exactly what we're doing. And let's actually change this to a nice purple color. Just to suit. There we go. Perfect. Actually know a little bit more blue. Perfect. So now we have this section. So let's check it at each break point to see how it looks on a slightly larger screen. That still looks good. I'm happy with that. On an even larger screen, still looks good. I'm happy with that. We get here, and this looks good on this section two. So now let's go down to tablet. Okay. This is where things get a little bit tricky. So at the moment, this is obviously a little bit squash, right. It doesn't really look very good, so what can we do? Well, we can make this a little bit smaller. Now, remember that when I'm editing here, it doesn't affect anything going up. I only affects going down. Again, if you go here, this is still 38. I was here, it's now 30. Now, as I said, this will also affect going down. So if I edit it here, it's going to affect the two mobile options as well. So if I edit it in tablet, it's going to also affect the two mobile settings as well. So I'm going to edit this to make it look a little bit smaller, and then I'm going to reduce the size. I think if I'm going to have them side by side with each other, I need to make this a lot smaller, so let's just pull this down to ten. In fact, that doesn't really look very good. Maybe I should just keep it like that and put it like this. And then I can just reduce this, make it look a little bit smaller. And then here, I can center this, so it looks more centered and make this a little bit smaller. And that should. That looks a lot better, okay? Let's just reduce this a little bit. There we go. That looks a lot better. That's a lot more aligned. Now, we've got to look and get on tablet, so let's now look at what it looks like on landscape. So this is where things start to look very, very cramped, okay? So we don't have a lot of space. And if you think about it, when you're actually holding your mobile phone, it is going to look really crap, and you're probably not going to be able to see all of the elements. So how can we change this? Well, we can go to grid, we can edit the grid, and it's not really working this way, so let's try adding a section below and do it a little bit like this. So that actually looks a hell of a lot better. Now, this has a little bit of an element down here, so let's maybe reduce the grid to make the row smaller to bring those closer together. And that looks ten times better. That looks 100 times better. And we can even if we wanted to, if we want to closer, pull it up a little bit, which is going to make it look even more compact. But we don't have to do that. You can just keep it as it is. But as you can see, because I've edited here in the mobile landscape breakpoint, it does not affect anything going up. It is still the same. So it's responsive across all devices as long as it's going down or it's going up from the core breakpoint. So here, we've got it looking pretty good here. So let's see now how it looks on mobile portrait. And remember that if I edit it here, it's going to cascade down into mobile portrait. So It already looks good. It already looks like it's very well presented. So this is ultimately how you need to look at designing websites that are responsive. First and foremost, you build it at the core break point, the base breakpoint, and then you essentially edit down and then edit up to make sure that every single section is perfect, no matter what device you're looking at it on. So I hope you find this lesson helpful. If you have any questions, please let me know. I am here to support you however I can, but I look forward to seeing you in the next lesson. See you there. 55. Webflow 101: Image Optimisation & Lazy load: Okay, so in regards to the image optimization and lazy load, this is what you need to know, and it's really simple. So, for example, if you have an image which is on your actual home page in the hero section, and you need it to load faster than any other elements on your website. Then ultimately you need to make sure that this particular image is prioritized because when someone views your website, you don't want to be waiting for this image to load. Because if you have a website which you're visiting, and then ultimately the image doesn't even load up until 3 seconds later, this is not going to look good in regards your website design. It's going to reflect your business very badly because if you can't have a website work properly, then how are you supposed to serve your customers properly? So how can we change that? And how can we prioritize the images that load on our website? So they load as soon as possible? Well, there are actually a couple of ways to do it. So the first way is to ultimately select the image itself. And press this little cog, which will ultimately bring up something very similar to what's in this section here, the image settings. Once you've actually clicked on the little cog and you have ultimately got yourself access to the settings, there are a couple of options in regards to load, which you can see here. Now, the first is lazy load. Lazy load basically means it loads in the order that the page is set. So it's not going to prioritize anything. Now the next option is eager load. This means that it loads with the page. So it's essentially going to load as soon as possible, and it's going to be set as a priority. And then we have auto. So this essentially means that whatever the browser feels is the highest priority, that will load first, which obviously we don't want to do because different browsers can have different priorities, so we're going to select Eagle load. Now this is going to make sure that when someone basically visits our website. This image is pushed to the front of the queue. It is loaded first, which is what we want. So this is going to be really important for a number of different elements. So, for example, you really want to do this as well for your logo. You don't want your logo to ultimately be loading after everything else on the website. So you want to make sure that assertive, and it is telling the website, listen, I need to load first because I am very important, and this is ultimately what people are going to see as soon as they come to your website. Make sure that you prioritize your images, and especially images in your hero section, which we'll be learning a little bit more about as we go through the rest of the lessons in this particular phase. And any images that you personally feel are a priority for your particular website or your business or brand, Make sure you prioritize them with eagle load because it's going to get them loaded first, and it's going to give your user the best possible experience on your website. Anyway, I really hope this lesson was valuable. I know it was short and sweet, but I just wanted to make sure that you understood the difference between the two loading settings to make sure that your website is the best it possibly can be. I'll see you in the next lesson. 56. Webflow 101: Positioning: In this lesson, we're going to be focusing on positioning. We currently have static, relative, absolute, fixed and sticky. What do they mean and how can you use them? Let's start with static. Static is essentially the default option within web flows. If you add any new element or image or text or whatever, then it's automatically assigned static as its position. Now, what if we change this two relative? What does relative even mean? Well, relative is actually very similar to static, but it offers more positioning options. Now, if we choose relative, then it allows us to change the actual position of the element relative to itself. Now one thing to think about is your Z index, but we'll come to that a little bit later. Now the next option is absolute. When you select absolute, you can see here, and it actually describes it here within the actual website itself, absolutely positions an element, relative to its closest positioned parent or it falls to the body element. So if we look at this here, the image is actually inside the section. So the section is the parent to the image. Now, at the moment, the section doesn't have any settings. So the image is automatically going to be absolutely positioned in relevance to the body, which is the closest parent. So how can we keep the image inside the section? Well, it's actually really simple. All we do is put the section positioning to relative. And here Presto, now, you can make sure that the image is relevant to the section because the section is the most relevant parent to the image, as you can see here. Now, what happens if we choose fixed? Now, fixed ultimately means that the element is relevant to the browser window and it stays in place as the page is scrolled. So for example, choosing fixed and then having it in the top left hand corner, no matter where we scroll to, it is now fixed to that top left hand corner. You can see here that it is relevant to the body, and this cannot be changed. How can this be quite useful? Well, if we choose this Navbar as the element, and at the moment, it's just set as relative, which is, just the standard for a Navbar, but if we put it to fixed, then you can see here that it is fixed to the top of the navigation bar. So no matter where we scroll, it will always be here. Now, what we can do is we can actually spread this across so that when we scroll out, the navigation bar is always in place. Therefore, you cannot lose the navigation bar, no matter where you scroll on screen. Now, this is extremely useful because when you're building a web page, you want to be able to see the NAF bar as you're scrolling through the page to ultimately allow your user to be able to navigate throughout the website without having to scroll all the way to the top again to get back to the navigation bar. So this can be really useful for us. Now there's another way that you can use sticky basically, where Sticky is kind of a more unique approach to fixing the position of the element. And I'll show you why. Now, sticky is essentially the same as fix, but it does have a couple of extra settings which you can use, which ultimately means that you can actually manipulate the positioning of the sticky element to basically make it more responsive and just have a little bit more control in regards to where it scrolls down to, and ultimately when it stops scrolling. One thing to watch out for is the Z index, because this can be extremely useful as a tool. So when we take this lot of animation and set out this relative, Obviously, it was static before, which is standard, but if we set it as relative, then if we basically scroll down, the page, you can see that the navigation bar currently goes over the lottie animation like so. Now, what if we, for whatever reason, wanted this particular element to be at the very forefront of everything on the website, so that even if the navigation bar scrolled over it, it would still be classed as being above the navigation bar just to make the web page interesting. Well, we can do it like so. The Z index section here, essentially makes the highest numbered element, the most prominent element. So, for example, here, we've put 99999 so that when we actually view it and we scroll the web page down, it actually goes over the navigation bar, which is pretty interesting, but we can actually make it even more interesting. So we can put this particular image as relative. We can put this image as relative, this image as relative, and this one is relative. Now, what we can do here is we can simply just make this super high from the Z index standpoint, no matter what scrolls over these images, they will always be at the very top. They cannot be scrolled over. And just to actually show you what the Z index does. If we scroll down now, you can see the lotty animation, which has a higher Z index than the navigation bar. It goes over the navigation bar. But you can see here this image doesn't have any Z index settings. This one does. This one does, this one doesn't. So let's see how it affects it. We scroll over. You can see here that overrides the navigation bar, and it goes on top, which can look super cool. So anyway, I hope you enjoy this lesson non positioning, and look forward to seeing you in the next lesson. See you soon. 57. Webflow 101: Hero Sections: Hero sections. So how do you build the perfect hero section? This hero section is debatably perfect, but you also may nothing it's perfect. What actually makes a great hero section for your business and brand? Well, it depends on the objective that you're trying to achieve. For example, if you go to this brands website, this brands website is trying to funnel individuals, couples and teens into their marketing funnel, and the marketing funnel is specific to their specific needs and requirements. So for example, if you are an individual and you are having panic attacks, then you would click this button, and it would take you to a page which is specific to panic attacks. Again, if you were a team and you are ultimately expressing anger and you want to get it sorted, then you have a page which is specifically related to anger. Now, this is obviously something which is different for every single brand. Ultimately, the hero section in every single website should literally give you exactly what you need to know from the second you land on the home page. So, for example, for Clementine House, my Brannan Agency's website, we tell people exactly what we do in six simple words, naming the ambitious start ups of tomorrow. Okay. So we are literally telling you this is what we do. We name the ambitious startups of tomorrow. Now if we go to this example website, we can see that the hero section tells you exactly what to expect from this website. So this is obviously a fitness influencer called Sandra Leon's. Get your fitness scores achieved. After getting a bachelor's in nutrition and fitness training, I started working with people all around the world and changing their lives forever. So you know exactly what you're getting as soon as you land on this home page, and you know exactly what to expect. So you can basically make the assumption, a This is for me or this isn't for me. Let's look at another example, which is HubSpot. So HubSpot literally tells you exactly what they offer. HubSpot Customer platform. So grow better with HubSpot. Software that's powerful, not overpowering, seamlessly connect your data, teams and customers on one customer platform that grows with your business. You exactly what you're going to get. And you'll see every single brand out there that is really focused on achieving a certain goal and really positioning themselves in a certain way, it's going to make sure that it does this exact principle. It tells you exactly who they are in the first 3 seconds of landing on the home page. Now, if you're working on Webflow and you want to build your own layout and your own hero section by yourself, then that's absolutely fine. Now, we obviously provide templates which you can use, and they already have hero sections included in them. But if you want to choose your own, then you can ultimately go to the ad layout section. And basically choose a layout, which is very similar to the one which I've just shown you. Now obviously, you may have to change the text around a little bit and change the color and add a few patterns and add a background. But ultimately, you can use this to create a hero section which can really grab someone's attention because that's the key. You need to make sure that in the first 3 seconds of building your hero section, that you are ultimately telling people, this is what we do, this is how we can help you. This is going to be one of the most important things to make sure that people don't come to your website, then leave instantly. They need to know exactly what you can offer them within the first 3 seconds of landing on your home page. This is the hero section. This is exactly what you should be focusing 80% of your attention on before you start building out the rest of your website. Make sure this is perfect. Make sure the letters and the words that you use are as minimal as possible. As simple as possible and showcase exactly what you can offer the client. Make sure that it has a call to action and also make sure that the image is relevant and showcasing what you can offer to the potential client or customer. Anyway, I hope you enjoyed this quick lesson on hero sections. I look forward to seeing you in the next lesson. See you soon. 58. Webflow 101: CMS & Dynamic Content: Okay, so what is CMS and dynamic content? And how can we use it to help us manage our website content better? Well your CMS is essentially your content management system. And I'm going to show you an example of one of my websites and how we structure our CMS system to make it super easy to manage the website. Now, as you can see here, this is the CMS settings, and we have multiple different CMS systems in play. Now, one of them are the projects. So within the project setting, we have every single client that we've worked with over the past, a couple of years, which is updated on a regular basis by our team. Now if you click into each project, you'll see that we have certain tabs that need to be filled in throughout every single project. So for example, the name of the client, the slog, which is essentially the extension for the URL. We also have the brand name specifically, project insight. So this is essentially, an insight in regards to what the actual business does and the market that it's in We have the logo, we have the services delivered left, services delivered right. We have the problem that they have, the solution that they were given by us. The client and the name and the role, we have an actual testimonial from the client themselves, more images related to the actual project, and then we actually have a linking to the next project in the pipeline, and then also a project link so they can actually see the project when they click on it on our home page. Now for the CMS, it is actually really easy to create a CMS system, and all you need to do is to simply click the little button here to create a new collection. Now, when you create a new collection, what will happen is you are ultimately given the choice to add different fields. Now, by different fields, I simply mean the different things that you want to change on the main page within your website. So for example, maybe I want to create a collection, which is all focused around the blogs and the news that we produce on the Clementine House website. So for example, if we go into our blog and news, you would simply just press add field, and then we would basically create the fields that we need for every single page for every blog post. So for example, if we go to the Clementine House website, and we go to an actual blog post, Let's just choose this one, for example. Can see here that we have the mean image, which is ultimately the image which is here. We also have the secondary image, in case want to add another image within the actual block post, a third image, in case want to add another image, text regarding the article, which can be found on here. Then we also have the topic select. So basically, which topic is the article relevant to? Is it brand strategy, brand identity creation or brand naming. We also have the published time and date, which you can see here, just below the title on the actual blog post page. We then have the link to the project page, which is essentially the URL, which is actually activated when you click on the image on the main blog page. We also have the author, which can be seen under here. So you can save yourself so much time when you're adding new blog posts, for example, or new products or new projects. You can just manage everything in the back end like so. So for example, if we wanted to change, you know, the title of this particular blog post, why brand loyalty is complete nonsense, we can go to the blog post news, and then we can basically go to why brand is nonsense. Click it here for real. So instead of actually changing every single element within the actual website itself, we can just edit these elements here. Change the actual text of the article. We can add more images. We can change the actual image of the actual thumbnail, which is this. We can change who actually wrote the blog post. We can change the insight text to actually get people to read the blog post. So for example, if we actually publish this for real, and we save it, and then we publish it, then if we go to check on the real website, Then you can see that it's automatically updated on the main web page, even though we just changed it within the CMS system in the back end of the website. Now you can add a CMS element to your web page by simply just adding the collection like so. And you can use all of the lessons that you've already learned in this particular phase of the course to then add, for example, a DIF block to each section, then you can also add the image. Then all you basically need to do is double click go to the actual system that you want to connect it to, and it automatically drags forward all of the elements that you have within that particular CMS system, and you can ultimately display it any way you want, however, you feel best. And you can add, say, for example, an image within that particular element, and it automatically populates every other element for you. For example, we don't want to choose an image. We want to actually get the image from the blog post. So we'll add the main image. And here press do every single image, which is in the back end of the website and the CMS system without us having a lift a finger. So we can initially add as many as we want. We can add the header, for example, within each Dave block. And then instead of having to type all of them out, all we do is we just had the name of the actual section, and that's the ta. Now obviously, that doesn't look very good, but you kind of get the idea, right? It is all about saving as much time as possible. And if you can do that, and if you can really use the CMS system to your advantage, then your website is going to be super easy to manage, and you're going to save a ton of time in regards to changing things and ultimately just making your life a ton easier with managing your website. Anyway, we're going to be going into CMS systems more later on in the course. So stay tuned for that, but I hope you enjoyed this lesson, and I'll see you soon. 59. Website Building: B2B Website (Part One): Okay, so we're going to be starting from scratch and building our website together. So, the first thing to do is to create the structure of the website. And we can do this really easily by using some of these libraries build inside Webflow. I've had a couple installed already, but you can get plenty of them. The ones that I usually use are ones that have basically the most options. When I'm building a website, I want to make sure that I have the, different formats and different sections to choose from. And this one's one of my favorites. Let me see. These ones don't really have that much choice. This one doesn't have that much choice, but let's you can just simply install it by clicking that button, and then you just select the website that you want to install it to. Now, I actually have too many libraries in my website already. So I can't install a new one. So let's head back and I can just use because these are my favorite libraries anyway, so you can choose whichever library you want. But for the purpose of this video, I'm just going to be using the one that I'm kind of the most familiar with, and also the one that I think is just the best. And obviously, you can choose that one if you really want to, and it's actually a really great library to use. And basically what a library is is it's just a selection of sections that can help you build a website ten times faster. So, okay, let's start by building the home page. So we're going to use untitled UI, which I really love actually. It's got tons of different options. It's really great. Let's choose a Navbar. Okay. Let's choose this one. No, actually, let's choose some other ones. Yeah, let's choose this one actually, because those are photos down there. So you just literally drag and drop the NaF bar into the body of the website. And it's done. It's super simple. Now, I'm going to show you how to create a universal Navbar later on in the course so that if you change your Navbar on one page, it's going to change across the entire website, and it's super easy. Don't worry. But yeah, I'll show you how to do that a little bit later on. At this moment in time, remember, we're just focusing on creating the structure of the website pages. We're not looking at colors, we're not looking at imagery. We're not focused on anything else apart from getting the sections in the right place. So here what I'm looking for is a hero section, which I think this one actually will work quite well in regards to what we need. Yeah. Okay, perfect. Yeah. So you know, that's going to allow us to literally tell people exactly why they should spend more time on our website. Remember, the three questions that every single person will ask themselves when they come to your website. Number one, first, am they in the right place, so you need to make sure that they know that they're in the right place. Number two, can I trust you, which is why now we're looking for kind of a features section? Um, to kind of show the different people that we've worked with or, you know, the different logos that we've created, or the different brands that we've worked with, for example. Obviously, it depends on the type of service that you are offering. And then the third question that they'll basically ask themselves is, okay, what can you actually do for me? So remember, this when you're building any home page. First question, am I in the right place. You have to answer that question. Number two, can I trust you, which is why we've had the features section added? And then number three, What else can you do for me? How can you actually help me? And that's when we can start looking at different services? So we can actually showcase the different services. Let's look at this features section. Okay. Maybe this one. Maybe this one. Yeah. This should look pretty good. So I just literally clicked on it, and it's added straight to the website. Okay, perfect. Perfect, perfect. So this is looking pretty good. And again, we're not focusing on colors, we're not focusing on anything at the moment apart from the structure. The reason that we do that is let's just look for some testimonials or review section. The reason that we do it this way is simply so we can focus on getting the website built, and then we can focus on the finishing details afterwards. That's the way that it should go. Because if you try and do everything together, you end up spending far too long on trying to get everything right and get everything perfect, instead of just getting 80% of the work done when you're actually building the structure of the website. Okay, so we've got a testimonial section that's good. Let's look at the adding, like a little blog page, just to kind of showcase that we are experts at what we say. Okay. Perfect. We've got that. That's looking good. And then I think all we need now is a footer. Okay, let's have a look at the footers. See which one suits us best. Okay, this one is nice and simple. And listen, remember, we're going to change like, you know, the tabs and, you know, everything else afterwards. Now, one thing that sometimes happens when you use these templates is they have preset widths and sizes and heights and stuff in spacing. So sometimes, especially with this particular template and this library, It always has the width set at 126. I'm not sure why it's really annoying for me, but it's worth it because it saves me so much time. So I have spent 5 minutes just literally changing a couple of the elements. If it looks a little bit weird, just check it, and it's probably set at 126. So yeah, just set it back to auto and you're going to be fine. Okay, that's all looking pretty good for the home page, to be honest. Okay awesome. In that case, let's start looking at creating kind of a blog page, an article page, for example. So let's start create an article page. So again, we're just going to add the Navbar. And again, this NAV Bar is going to change a little bit later on down the line, so do not worry. I'm going to show you exactly how to do that. Um, we've got the fodder. Okay, let's just add that. I'll show you how to use the footer as well so that you can create a universal footer. This is going to save you so much time. It definitely saves me so much time when you can create one single section, which can ultimately be the same throughout the website. And if you change it on one page, it changes throughout every single page. So I'll show you how to do that a little bit later on. But this is, yeah, this is going to save you so much time. Okay. Let's let's dive in and put this here. I'm just making sure it's connected to the body and not any other sections, so I'm just turning it right to the left. Okay. There we go. That should be good. Awesome. Okay, so that's something good. I like that. That looks pretty good. Okay, let's start to just, um, check a few things out just to make sure everything is in place. Now, in regards to articles, we're going to be creating a CMS later on in this lesson. Now, what a CMS is is basically a way to create multiple pages around the same page structure. So for example, blogs, articles, they're really great for this, as well as projects as well. L, for example, if you are, you know, selling, you know, logo design, for example. You can create a project page where you just simply change, the actual logos that you've obviously designed, the writing, some other elements like the title, the brand name. And what the CMS does is it basically creates new pages. And I'll show you how to do this later. It's super super simple. It basically creates unique pages really quickly without you having to create them manually so that all you have to do is just change the name, change the logos, and it automatically populates all of the pages to showcase your work. It's super clever and really, really efficient. It really saves you a ton of time. You may be familiar with using CMSs before. If you are and that's great, I'll show you how to do it on webflow. If not, do not worry. It's super simple to setup, and it's going to save you a ton of time going forward. This is just an example of an article template, which I use for Lancaster Academy. But I've got tons, I use CMSs for everything. And all you do is you simply just take the custom field. So for example, we've got the article main page, we've got topics, topic color. You don't have to do it in this amount of depth, you don't have to be kind of, you know, this detailed. You're mainly going to be using the text the text button, the rich text, the image, and the link, and maybe a video. You're not going to need a lot more than that. But basically, what you do is once you create the fields in the CMS section of the website. Then you can basically link it. So for example here, I've got this linked to the topic so that in this case, it's branding. This connects to the re time, whatever the re time is in the CMS, it'll see it here, the main article image, which is here, and so on and so forth. It's really, really great. And here, I think I have 47 different articles, and you can see they're all connected to a different custom field, and you can be as complex or as as simple about this. You don't have to go crazy like I have, but You know, just keep it super simple, but we'll set all this up a little bit later. Now, in Margo, I just want to check this yet. This is 126, as I said before. So I need to make sure that is changed. I Mogo, I don't think we need three different contributors. So let's just change out of one. I don't think we need the social media buttons there. You can keep them there if you want, but I don't think they're much good. Change that. Okay. I'll tell you about, let's start creating another page, and let's start creating your article page overall, because that's going to be really really helpful to just organize all of your articles and everything that you want to share. Because ultimately as an agency, you want to showcase that you have expertise, you know, in different areas, right? So that's going to be super important. So having a blog and just making sure that you showcase it in a really professional and minimalist way. It's going to really help to, you know, just win the customer over and get them to trust you, which is ultimately what you want them to do before they actually, you know, book in for a call with you or hire you for your services and you know, ultimately give you money. Okay. This is looky. Good. Okay. We can Arrange all of this a little bit afterwards, but you can see here the link box is set at one, 26. It just looks a little bit weird, so let's fix that. And yeah, Okay, that's looking good. I'm happy with that. And we can, we can change these little things afterwards. Overall, we're looking pretty good here. And you've got to, you know, appreciate here as well, because of these libraries, we are literally building an entire website in no time. I mean, it's only literally been about 11 minutes, 12 minutes since we actually started. And we've literally built like three or four pages now already. And these pages look good. Like, these pages actually look professional. And they're going to look a lot better once we've actually finished them, and you know, colored them and did all of our other stuff, sorry. Okay. Let's do the contactors page. Contactors pages are generally quite simple. So we'll just add the Nav and the fudder. And then let's add the contact du section. So we just want something nice and simple. We don't want to get too crazy. I think that one's probably the best lo you want to be completely brutally honest. Okay. Let's have a look at this. Okay. Let's add this here. Okay. Perfect. So let's create this, and then let's check it again. Okay. So's move to 126, as you can see. And then we've got Okay, that's all there. Okay, perfect. Perfect. Perfect. Okay, that's looking good. Now, let's move on to the privacy policy page. Now, in regards to privacy policies and legal pages, overall, they're all built pretty much exactly the same. However, they're actually really easy to do. The only difference is, obviously, the content in the actual in the actual page. So the way that I like to do it is, I was looking here for a section to be ready built, but I think it's actually easier to just do it manually. So I can show you how to do that. It's just as easy, but, it doesn't have to look super pretty, so you don't have to have, you know, really intricate design for a privacy policy page. To be honest, no one's really going to read it. It's just there from a legal standpoint or from a disclaimer standpoint. So we're going to just build it manually, I think. So I'll show you how to do that. Okay, check. Bumper. Okay. So we just added a section there, then we're going to add a container, and then we're going to add a header. Then let's add some paragraph. Now, it could work with a paragraph. I'm not sure if it's going to work with a paragraph section or rich text. We'll see. But yeah, if it doesn't work with a paragraph, then we'll just basically do it with rich text afterwards. So it's not going to be a huge issue. So the privacy policy can be created just using this website, free privacy policy.com, and the great thing about this particular website. I'll add all the links for you know, privacy policy, shipping and returns, terms and conditions, cookies, all that stuff. I'll link everything in the course so that you can just click on it and go straight to the actual section. Website. Sorry. Now, what they try and do is they basically try and charge you for the if you want, like a really professional privacy policy, which, I mean, to be honest, I mean, I'm not a lawyer, but I've never actually used, you know, a super professional one apart from from my agency, which obviously I did with my lawyer. But, um, Yeah, you don't need it to be completely honest. I think that when you're just starting out as a brand, just click, I don't want one, like a professional privacy policy, and you can just get it for free. So, yeah, that's what I would probably suggest. Here, you don't need to put your correct e mail address. So yeah, I don't feel the need to do that. But basically, now, you can either, look at trying to copy this, but on some computers for some reason, it doesn't let you. You could copy the clipboard and you can basically do it doing, like, almost like a like a coding. So you would just copy that into like a custom code, a HTML code. Now, if you don't know how to code, then there is an easy way to do it, and I can show you how to do that. Now, the best way I think is they should send you like, like an e mail. Let me just check my e mail so I can try and show you what you are would be sent. They bum bum, let this load. There we go. So they'll send you something like this. But to be honest, that just usually sends you straight back to the original policy page. So what I usually do, which usually works the best is downloading it as a like a word document. And you can do that by just going down here to generate files. So if you go to generate files, then just click. I usually use the Doc file because that's already formatted and stuff. And then if you click on it and open it, it should allow you to just just copy and paste it straight into your website. Okay, let's just move this to work. Okay, now it's working. Perfect. There we go. So you can see here, it's already fully formated. It's already pretty much ready to go. So let's try and add it to the paragraph section and see what it looks like. Okay, so you can see the problem here, right? You can see that the problem is It hasn't formatted it. The reason for that is it's simply paragraph section is just for one single block of text. It isn't for like a formatted block of text. So what we need to do is we basically need to swap this out for a rich text section, which is going to be a lot more useful. Okay, so let's just do that. So you can see here this different format, so you can see here. I've just copied and pasted the exact same text, and we could change, the spacing between some of the sections and stuff. But overall, it looks great, like you know, it looks professional. It looks well formatted. You know, could we alter the spacing slightly? Yes, definitely. But you know, all the information is there, and it's done in the right way. One thing that I would watch out for is making sure that sometimes they see things like learn more about cookies at free privacy policy website. So they basically just advertise themselves within the actual privacy policies. You can delay those if you want to look a little bit more professional, because obviously, then people know that you got the privacy policy from a free privacy policy website, which isn't a bad thing, but, people may look at that and think, maybe they're not as professional as I thought they were. Now, With the About Us page, we're essentially trying to, you know, tell people on what makes us special? What makes us different and why you should choose us as an agency, right? So, what we're going to do now is build up the About section. Now, we've got the NAF bar, we've got the Fuda like we should have. And now we need to ultimately start to tell our brand story, our company story, and what makes us different. So what I'm doing here is I'm just looking for, do I want to add a video? I'm not sure if I want to actually add a video to be completely prudly honest. Do I want to add a video? Well, this is a lightbox. So basically what a lightbox is is you can hide some media, so whether it's an image or a selection of images or a video inside the lightbox so that when people click the image or the lightbox, it comes up with the actual video, which is, um, Which is super super helpful. I'm not sure if I actually want ear a video, though. That's the thing. So I might just go for something a little bit more simple, like just an image or something like that. Let me just see if I can find anything on there. Okay. How was that looking? How was that looking? Here. This is looking pretty good. I just want something that's like quite simple. I want just something quite simple, but I'm just not sure what I mean, that's not too bad. What about that one? Yeah, we can do that. Okay, awesome. Okay, let's do that one. Perfect. And then I can change the images and stuff out a little bit later on. That's not a big deal. But it's got everything that I need. It's got a header. It's got a little bit of text. Okay, perfect. Let's start looking at some other sections to add underneath that as well, just to check things out. Okay. Again, with the About Us page, we're just trying to tell people what we can actually do for them. So this is who we are, and this is what we can do for you. A little bit like the home page, but the home page is kind of like here a landing page to try and build trust. The About Us section is when people are actually interested in what you have to do and how you can actually help them. And that's when they're actually starting to ask for more details, so you can be a little bit more technical on the About Us page in regards to telling people what type of services you can offer them. So we're going to add a little services section here. L et's just find something that looks good. Mm mm. And this library, in particular, I use this for so many different websites. You can use it for agency websites, personal brand websites, e commerce websites, and you can edit it to, make it look however you want. Yeah, it's super super useful, really useful. And a great thing that I love to have an about page is because people are going to have questions to ask, right. So I always add an FAQ section because it allows us to answer questions. About ourselves in a really short space of time and space on the website. So yeah, instead of, you know, reading like 20 different sections about, you know, answering different questions and doing it in a really long winded way, we can just have one little FAQ section, which basically highlights all of the most commonly asked questions from the client so that then they can just basically just make a decision whether we're the right fit for them or not. Now, I really like this little section at the end of the FAQ section on this particular library because it kind of has, like, a call to action. But again, like the images there were they had a little bit of padding, so I had to change that. And then, for some reason, I think this is not forwarded properly. Oh, excuse me. Yeah, it's not formatted properly, so I need to change the change the format of this and move the footer down. Yeah. Okay, so you can see here that there's a little bit of an issue because the section is inside another section, which is obviously a problem. So, the way to fix this is to basically separate them. So I'm going to do that by just clicking the body. Making sure I'm copying in the buddy, you can see here the paddings being a little bit screwed. So I'm just going to add this section again because, I don't want to again, when I'm creating the structure of the website, I want to make sure the structure of the website is perfect so that I can just focus on design afterwards. Design is the fun part. Design is the part that I love the most. The structure is just really important to get right first, because if you don't get the structure right, then you basically have to start all over again. So just really focus on doing that. So I just collapsed the navigator bar, and I'm just going to add the footer to the bottom. So let's just add that so. We've got the hero, we've got services, we've got the FAQ, we've got the foot at the bottom. Perfect. That's looking good. And then we can I think for these, I'm not sure. Let's just add two, actually. Let's just add two services because we don't have to go too crazy. You can add as many as you want, but let's just add two for the main time. Okay, perfect. Okay, so now let's look at, you know, a single project. Okay? So if you are, you know, whatever type of service you're offering, whether it be logo design, photography, you know, copywriting, whatever it is, you need a single project page to actually explain and almost create a case study for the different clients that you've worked with. So that's super important to get right. Now, what I like to use is, I like to use a very kind of sleeky trick where I basically use an article template for the project page, which works really, really well because it's just so functional. So I'll show you what I mean in a little bit, but I added the NAP bar, I added the Footer, Now what we're going to do is just tidy things up a little bit because this particular template is just super useful for, you know, like, a project page, and it just looks super professional. Once it's all finished anyway. Okay, so just change that a creator. So who actually worked on the project. We don't need any of that because there isn't an article. So just change that. Okay perfect. And then what we should probably add is some text. So with add a paragraph afterwards, just to write a little bit about the actual project. So we've got the title of the actual project. Okay. Perfect. This isn't looking too bad. We'll probably make a few changes just just to get it up to scratch. But okay, let's add a do. Let's add a grid. What I want to do is, I want to showcase So other imagery, especially if you're like doing like logo design or photography, you know, you want it to be very image heavy, right? You don't want it to be, you know, just kind of, you know, just text or too much text should I say. So yeah, let's add some images to the here. Okay, so we've added a grid box, we've added a d block, and then we're just going to add an image to that d block. There we go. Perfect. So you can see here, it's got a little bit of padding, just take that away. That standard with every single, image on web flow basically, so we just have to take that off. I'm just going to add it to 100%. So that base is going to fill the div block completely. And then we're going to copy and paste a diblock, so we've got lots of different images. So's just y, Let's maybe put six on that, which is going to look great. And then let's y, we need to be able to explain The actual project. So let's try and find something. In fact, what are we going to do here. What am I looking for? What am I looking for? Let's, FQ section. Let's add. I don't want the FQ section as a whole. I just want the call to action. That's the thing that I want the most. So I'm just going to get the FAQ section, but then I'm just going to delete the FQ section and keep the actual call to action. So yeah, I don't need all of these questions. I'm just delete all of those. Okay. There we go, just to take that. And then we've just basically got the nice call to action at the bottom, which is perfect. Let's just reduce the padding, so it's not as big. Reduce this padding on the image. Just take that pattern away. There we go. Awesome. Awesome. Now we've got a nice little call to action at the bottom, which is perfect. There we go. Reduce that pattern a little bit. And that's looking pretty good. I'm pretty happy with that right now. That's looking pretty good. Awesome. Reduce that pattern a little bit, just to bring things together, because I want the space to be about the same. Take that away. Okay, that's looking super clean. I love this. Awesome, awesome, awesome, awesome, awesome. Okay. Amazing. All right, let's check out this. Okay. Okay, so now we're going to build the actual portfolio page. So the difference between the single project page and the portfolio page is that the single page shows a single project, the portfolio page shows all of your projects, okay? So let's build a structure for this. And again, we can be a little bit clever and use this section. Okay. So we don't want to showcase our team. We just want to showcase obviously the different work that we've done. Um, so this is again, format of 21, 26, so we can fix that. These are all fixed. There's a little bit of margin on these, so just take that off. Okay, that's looking pretty good. So obviously, here, we're not going to be using these for showcasing our team members because I'm not sure if you have team members, if you do, then fantastic. If you don't, then that's fine. We're going to basically use this to showcase our work. So let's just delete a few of these just so we have a little bit more space to work with. Okay. Yeah, I think three is good. Okay, do Let's do that. Okay, that looks good. Perfect. Now, let's start looking at how we can you know what we actually need to sell people on, you know, looking at the work that we've done. So what we can do is we can just focus on just creating one. And then once we create one, the way that we like it, then we can just duplicate it and have it for multiple different multiple different projects that we've worked on. Okay, so here, for example, we've let's just change this to, for example, a little bit about the project, look Okay. Okay delay that. I'm just trying to get this to look right because obviously it's a portfolio page, so I want to make sure that we get it looking good. So we can duplicate that and have multiple different versions of it. Now, this might look a little bit strange at the moment, but just bear with me. This is a work in progress, so I'm just kind of working through this with you. Again, I want a call to action, like in the single project page, so I'm going to add the FQ section again to the body. And then again, I'm going to edit it so that I don't have to have all of the different questions and stuff. Delay that. Delay this. Here we go. Perfect. G awesome awesome awesome. Let's take this away. Let's reduce that. Okay, that's looking a little bit better. And again, I know I've mentioned this a few times now, but we're just focusing on the structure here. We don't care about anything else. Just the actual structure. Let's reduce that a little bit to four. Okay. That's looking pretty good. That's looking pretty good. We have the structure there. So now we have the structure, and everything is, you know, in the right place. Let's start actually designing the website, right? 60. Website Building: B2B Website (Part Two): L et's start actually designing the website, right? So all the structures done across all the pages. Let's start designing the website. So here we want to add some images. These are just some images that I arranged just to make the workflow a little bit faster just so I can get through it with you a lot quicker. So I'm just going to add some images. So let's change the logo. I just found this logo online on Google, creative in. Let's just add this here. Let's delete this. Actually this little icon. We don't need this icon. Just delete that. Perfect. There we go. So that's all there. What you can do is you can take the nav link and just press the little ****. And then set that to home. So you can do the same in settings where you just basically just click this, choose a page. So whenever anyone clicks your logo, you are going to send them straight back to the home page. This is a pretty common thing. And it also means that in the NAF bar as well, we don't actually need the home tab. Just change the quick image there. Let's keep these logos just as clients just obviously save some time. Let's just pretend that we've worked with coin based, web flow, slack, Zoom, et cetera. With this little section here. So what I'm doing here is I'm changing the images within the icons. And the way to do that is you simply get an image, click this copy paste, and then you basically have an image inside, which you can change. You can't change the icons. You need to add an image and then change the image to a PNG. So here, for example, I have three PNGs, one star, which is here, and then I just get the size right because the size is a little bit too small. Yeah, I need to get that size up a little bit. I'm just deleting those. Let me check the size out. That size is a little bit better. Again, so I'm just going to copy and paste. Copy and paste. There we go, so I've got the bigger one inside, and then I can I can just change the actual image. I've got the size in right. I'm going to just change the PNG inside. And a PNG, if you're not familiar with a PNG, PNG is just simply an image without a background. It's just transparent. Okay. So the actual reviews look good. If we don't need to change those. We're not going to spend a lot of time changing all the texts and stuff because that's something that you can obviously do really easily. It's just like editing a word document. Okay. Let's change some images within the blog section. Okay. Let's look at this. Perfect. We've got that. That's looking good. Obviously, we can change the blog titles and stuff, but it's not necessary for this. This is something that you can do in your own time. Um I want to be as respectful as possible with your time. Okay, so we've got that, we've got that. Okay. We're just changing the logo exactly the same as before. Again, we can connect this to the home page. Okay. Now, let's have a look at, the social media icons. So for this particular, are we on Facebook? No, are we on Twitter? No. Roni on Linked in inn Instagram, so I've just deleted those. And just delete them, you just literally click on them and just press to late like in a word document. Super simple. Okay. Let's go to here, for some reason, I think that looks a little bit weird, but actually, it looks okay. It doesn't look too bad to be honest. But let's just let's just go on to making this, um, this look a little bit more on brand. So just put my brand. Okay. And I think 2077 is fair Wile away, so let's just go to 2024. And then, so I mean, this isn't looking too bad, right? We've got the images in place. You know, we've put the logo there. Everything's looking pretty good at the moment. I think the next step is to do the About Us page, because the About us page and the actual home page is actually quite similar, right? They are very similar. So what we're going to do, and I actually changed, the about us structure a little bit, because I didn't like the image on that particular section beforehand, and it was a little bit harder to, to change because there was multiple layers to it. So I just changed that out just to show you the simpler way. But again, we're just changing the actual the logo inside the actual footer. Just to get everything on brand. And this is kind of the fun part, right where you get to actually go through the website and, you know, change the colors, change the images, change the text. I generally change the text last just so I can, you know, kind of get the image get everything looking right, and then we can basically, really take the time to get the copyright. I'll probably create a copywriting course later on down the line, but this is Just for the meantime. Now, in regards to Navbar, we're going to create that universal Nav Bar in a little bit. Now, you can see here that we have this Navbar here, which is on the home page. Now, we don't need this button, so we can delete that. We don't need to sign the one up, so we can just change that to the most important objective, strategic objective for our website, which is to contact us. We can change that to a nice pink. Okay, L's crimson, should I say? Let's change that to crimson just to match that. Now, That pink isn't the same as the logo pink. So let's disconnect it. So I'm going to get the crimson again, and disconnect it. And then I'm going to adjust it slightly until it's the same as the logo. There we go. That's a little bit better. Okay, I'm going to take the outline away. But okay, when I hover over it, it turns purple. That is super annoying. Okay? So let's go to hover. Let's go to the color section. Let's just choose the crimson. Okay, perfect. And then now when I hover over it, it kind of goes like a darker red. So it's shown that I'm engaging with the actual button, which is exactly what I want. And that goes the great thing about these templates is when you change one thing, it changes all the buttons across the entire website, so you don't have to do it multiple times. So for example, here, I'm just connecting the contactors button to the contactors page. Here, we don't actually need home, so we can tlate that because the logo already takes us home. So we don't need home section. Here we can change this to something else like services, for example. And that can just go to our about us page or something. And when we hover over it, we can change it so that it actually turns pink, which looks on brand, there we go. That looks pretty cool. Now, the reason that it doesn't do the same for resources, but it does the same effect for pricing is because resources is a drop down. It's a dropdown element, whereas the services and pricing is a tab element, okay? So, you know, you can do the exact same thing, but just to explain why that happened. Okay, so we've got the NaF bar there. Now what we're going to do is we're going to create a new component. So what is a new component? So If we create a component called Agency NAV Bar, then that is going to allow us to just use that component across the entire website at all time. So you can see how it's green. We can now take that component and use it on every single page across the entire website. And when we change something, so for example, maybe we add another page to the NAV Bar. Once we change it there on the first page, it's going to change across the entire website, which is exactly what we want. It's going to save us so much time, so much time. So We can use this for tons of different things, and we'll use it a little bit more later on for the fodder, most importantly. And then yeah, I just wanted to show you not just how to build the website really quickly, but also how to set up things so that when you are managing your website, you can also manage it really quickly as well, because that's going to be a super important super important element because your time is super valuable, right? So you want to make sure that the website is set up to make your life as easy as possible. And that's one of the reasons why I love web flow. That's why I invest in the in the Webflow CMS system, because the CMS system just saves you so much time. And time is super valuable, and it's super important to, you know, not waste time. So okay, let's go to the blog blog articles page. It's actually taking us to the contact page. Let's do this one first. So here, obviously, you can add your e mail address, you can add your details and stuff. I just want to actually change the actual color to pinks, obviously at the moment, it's purple, and it doesn't look very good. And if you click that little purple button up here, it just takes you to lots of different colors, like you can save colors, which is super cool. So, t's just so I'll save this. I'm just going to select the same pink. So it just saves you from finding the same color again and again or adding the same hex code again and again. Super super smart. Okay. Okay, now we can just obviously add our universal NaF bar because that other one was the other one was the old one. So we're just adding that there. You can see how quickly and easy it is to create a really on brand like contactors page. It literally took us like 5 minutes to do. It's not difficult. It's really, really simple. Okay. Let's have that look. Okay. There we go. Perfect. Okay. Now, this is looking pretty good. Okay. Let's move on to the single project page. So this is why we can start to, you know, get things looking really, really good. And the project page is really important for any agency or service provider because you're simply, you know, it's not as much a project page, but it's like a case study page, right? I'm just using a project page for this particular circumstance. It's really important to showcase your work in the best light because that's what's going to get you hired, okay? So, let's just swap out this fodder. So yeah, making sure that you like investing the time and really showcase and your work in the right way and doing it properly is going to save you so much time and energy in acquiring new clients later on. Basically, the better your website looks, the easier it's going to be for you to get clients. We currently have, our website in a really good place and we've refined it over the last decade. And now our website makes you know, or gives us, you know, anywhere 30-25 leads a day, and we reject most of those leads because we don't want to work with those particular companies. So it just shows the power of, you know, getting nice imagery and showcasing your work in the right way. So I'm just going to add some images here just for kind of like placeholders. But one thing that I would say as well, and I've mentioned this in other courses and also early on in this course, is make sure that you check out the best in your industry within the services that you're providing. And learn from them, learn what they do, how they present their work, and then do it in a very similar way because then you're going to be able to, you know, you're going to be able to sell your services so much easier. Because, you know, they're the best of what they do. So there's a reason why they're so good and why they can charge you a fortune, like Pentagram, for example, a brand design firm who have offices all over the world. The charge like hundreds of thousands, if not, 50,000, 50,000 to 100,000 per brand identity development project. So, let's add some texts because that's going to be important to explain what we're actually doing within the project. I'm not going to actually add the text because that's obviously going to just waste time, but you can obviously take time to write a nice little project review. Okay. Let's add a little want to work with us. Yeah. Let's add that there. And then just link that up to the Contact us page. So people can get in contact with us. Which is awesome. Okay, this is looking pretty good. You can see how, we haven't spent a ton of time building this website. We're literally building the website. And I think it's around, you know, 40, 46 or 47 minutes. We've been building the website. And it seriously isn't hard. But the reason that we've been able to do this so quickly, is because, you know, I had all the images prepared and obviously, I'm not writing the text. But like 90% of the work of actually building the website. You can get that done. And then it's just the 10%, which you really need to take your time over. And I would really recommend taking your time over, you know, the finer details like how to showcase your work, how to write the text, all that stuff like that stuff's really important. Okay. Let's just change the NaF bar and the fodder. Perfect. And once you get confident with web flow, and you start to, you know, add more stuff and figure more stuff out. Your website just continues to get better and better and better. And with the website as well, one thing that I will say is adding here a behavioral tracking software where you can actually see like the mouse. Okay, so what I'm going to do here, just to kind of stop for a second. I'm going to add the CTA, the call to action to the other page. In a far easier way. So I've got this. I've selected the actual section. I'm going to create a component. Remember the same as the Navbar and the fodder. And I'm going to create a discovery call session or section, where we can basically add this to different sections, and it all goes to the same place for discovery call section. There we go. Capital D. Perfect. Create. Okay. So now you can see that's green. That means that across the entire website, it's going to be exactly the same. So let's add that to the portfolio section as well. Because I could keep this one currently the blue one. But the reality is, I'm going to it's going to be more work for me later on because I'm going to have to edit two different sections, where instead if I do the work now, I can delete this. And then I can just add the other discovery call section, which is universal, so it changes across the entire website easily, and I don't have to do the same work twice, which is, you know, really important. Okay. Let's have a look at this. Okay. That's all good. That's all good. That's all good. Let's start adding then we're going to start to add some b, b, bum, bum. Oh, yeah, what I was saying before is about adding behavioral tracking software to improve your website. So every month, after you've built your website and it's live, you're going to start getting customers. Okay? I'm just going to add some images while I'm talking to you about this because it's really important. When you start to track your website visitors every month, right? So just one day of the month, at the end of the month, most likely, you just watch recordings, and I can show you how to install the the Hot Jar software, I've actually got a link where you can get you can get it for free, basically, it's attached to this course. When you apply something like Hot jar to the website, it shows you how your visitors are kind of behaving within your website, and then you can basically make changes based on the actual behavior that your website visitors are making. So instead of just guessing and just changing the website because of what you think looks nice or whatever, You can actually do it in the right way for the right reasons to get the results that you want. And there's a massive difference. You know, someone who's just changing the website because it looks better. They haven't got a clue what they're doing. They're going to be going around in circles because they're not making decisions based on what's actually happening. They're just making decisions based on what they think is happening, which is, you know, it's kind of pretty stupid, right? So what I'm doing here is I'm just going to I'm just going to create like a photography, like a photography website here. So this is going to be a photography studio. And then we can change this. So again, like, you know, we can fiddle around with the texts and stuff, but overall, this is looking pretty good. So, um let's have a little look at this. So what I want to do, I start to create some sort of animation or some sort of cool cool effect when someone hovers over. Because at the moment, when we hover over it, nothing really happens. It just kind of it just kind of looks pretty, pretty boring to be honest. Like, I don't like okay, so now when I hover over it, it changes the capacity. Okay, that's good. So we've got that. Okay perfect. Okay, Let's do Let's do something else. Let's do something else pretty cool. Let's change the Maybe we can add, like, a maybe we can make it a little bit bigger when people click on it or hover over it. Not by much, just by maybe, like, a tiny little bit. Let's check how big that makes it. Okay. It doesn't make it that much bigger, so let's make it a little bit bigger. Okay. And then let's maybe add. What else can we do? What else can we do? What else can we do? I don't want to make it too, like too crazy. Let's maybe add like maybe like a filter or something. Let's ad a filter? Yeah, let's add a filter. Let's add some blur. Let's add, we don't want to do any of that sort of stuff. That sort of stuff's getting a little bit too intense. Let's let's add a blur. And we don't want to add it too blurry, but just just a little bit, just to make it interesting. Okay. So now when you hover over, the um the image. It should basically look look blurring out. Just go to transitions beforehand and then go to all properties, and then just literally just get it for about 375, and then just ease that out a little bit more elegantly, so just enhance those. And then what you're going to be doing is clicking off that and that automatically saves. And now, when we actually hover over it, you can see it kind of has this cool kind of glassy effect, which is which you know, looks so much better. Okay. Now we actually now they actually know, it's kind of like an artistic effect, right? And you can do whatever you want with this. Really takes some time to play around with this because this is, you know, it's one of my favorite parts of website design, just adding little animations and cool imations like this. I'm going to add a pointer so that when people actually hover over it, it gets it turns from a mouse into a hand just so they know that it's clickable. Um yeah, apart from that. I think this is looking pretty good. This is looking a lot better than I expected actually. Okay. Let's look at maybe because this isn't actually clickable at the moment. This is just an image, which is a problem, obviously, because if people can't click it, then they can't go to the project page, so we need to add a link block. So we're going to add a link block here. This could cause a little bit of a problem. So we're going to work through this together. Just so I can show you exactly how you should approach it. Okay. So we've got this. I've copied and pasted it. Okay, so that's obviously way way too small. We're going to do this auto. Okay. So now it's like now it's like underlined, which doesn't look very clean, right? So here what we can do is we can add the actual the page that we that we wanted to go to. But I don't like how it's underlined. Okay let's click this. Let's get rid of those lines underneath. Okay. So let's just select the item. Then the link block, and then just click that and click that, and then we're good. There we go. Okay, Also. So now, everything is, everything should be good to go. Now, in regards to the CMS, this is where things can get ale bit more interesting. 61. Website Building: B2B Website (Part Three): Okay, so with CMS sections, I just want to show you how to set one up. And you can use CMS sections for literally everything. You can use it for your articles, you can use it for project pages, you can use it for products if you're in the commerce website. But for this example, we can literally just, you know, create a create a collection for our portfolio examples, right? So, you know, we're adding the main images, the type of work, you know, the type of project. We can add, obviously, we have the name above in plain text. The slope, which is, you know, basic info, we need those, the Blurb Taser text. So this is going to tell people a little bit about you know, what they can expect. And then if we actually create it, then we can just add five items. These are just placeholders, so we don't have to actually obviously use these, but it's just going to show you how to actually add it. Okay. So then when we go to P 40 page here, Instead of creating, you know, adding links and doing everything manually. We can actually do something pretty cool where we can we can just create this without any hassle, right? So we just add the NaF bar. Let's add that section, so I'll just copy it and paste that section in right down here. Got the call to action. And we're going to also just add the footer. And then you can see here that this isn't connected to the body, but it is now, but it wasn't. Let's go to the footer. Okay. So we've got that page again, but we've actually created, you can see in the top left hand corner. It's a purple box now. That means that it's in the CMS section. It's not a static page, it's in the CMS section. So what I can do is basically start to look at, I'm wondering if this might be the best way to do it actually. Ba, ba, ba, ba, ba. Okay. Let's create a conta, separate conta. Then let's just reduce the margin on the side to about 30. Roughly. I think 30 should be good. H. None. So that's full. Okay, you can see how it's filled up the entire screen, which is good. And then then we can play around with the margins and stuff and do all that sort of thing. But let's just add the CMS block to this C see here. It's called the collection list. So we just drop it in there, which is great. Then double click, select the source, which in this case, is portfolio examples. And then you can see here that there's the five articles are kind of like placeholder items which we had before. Now, if you go to collection list and click grid, then it basically breaks things up so that you can have it look nice and profesional. It's pretty much the exact same as what we have below. Now, what you can do is just copy this item, so click the link block. Copy and paste this into the above. So now you've got this, you know, looking very, very, you know, well, it actually doesn't look very good. Okay, how can we fix that? Because I want to make sure we can fix this together. Okay, main image, let's just connect it to the image and then see what happens. Okay, that didn't work either. So right now, let's just connect the actual data and then see what happens. So we're just connecting to the different items, for example, type of work. H, k. Ah, so that's why it was that's why the reason that it wasn't working is because the actual the amount of the amount of content wasn't enough to fill up the entire space. Ah, ok, okay, okay. And now that makes sense. Okay, so now we've got it then. Now we've got it. Now, all we need to do is just change the CMS in the back in the back end. Okay, perfect. So there wasn't actually a problem with the template. So if we added the content from the beginning, we wouldn't have had a problem. The reason we had a problem is because we basically ended up, you know, not having the content in there. Okay. So what we can do now is we can just delete this or get rid of it because we don't need both Okay. And then what we can do is we can add some elements to the actual CMS back end, which is going to all of these elements. So the actual the images, the text is all getting dragged from the portfolio examples in the CMS collection. So let's delete those two. And let's let's add three projects just to show you kind of how this works. It's really simple and easy, so just follow along. Okay, so let's replace one of these. Okay. Let's just call this plant. And then, the slogle generally populate itself, but obviously, for this case, we're just going to change it type of work. So this is the actual type of works or photography. Okay. And then the blurb or Teaser text. This is just a little bit about the actual project and what to expect when you actually click on it. Okay. Okay, Also. Let we go. So now once we actually finish that, we can that's already populated the actual element on the portfolio page. So it's already been edited for us. We don't have to do anything else, which is why I love the CMS systems so and the collections and using them because they save so much time. Um, so, again, I'm just going to change that to head. Let's just change this to photography. Let's change this to I love my head shot. There we go. Sif. And then for the last one, we'll, we'll just do I don't know. Let's just choose this There we go, and then just do something else related to it. And obviously, like with the CMS collections, it takes a little bit of time to get used to using them. But honestly, as soon as you get used to using them, you are going to, like, it's one of those things where I want you learn it. You're so glad that you did, and you just wish you learned how to use it earlier. So building your website, this way is going to help save you so much time. Okay, so there's the three items. So now when we go back to the portfolio page, You can see that it's edited it, and but yeah, for some reason, this one is still being a little bit annoying. Okay. So this is what's happening. Okay? It's still giving us a little bit of issue. So what there must be something else? There must be something else that's causing an issue. Let's let's problem solve and get this dealt with. Okay. Let's go to the dif block. So the dif block is what's going to be formatting it the most. Ah, k. This gap, Okay. Mm. Sometimes it's just about fiddling around with things and then going back on yourself to figure things out. Options, fit cover. Mmm Max Width. That's not it. Okay. There's definitely something that's causing this not to look perfect. I just need to figure out what it is. Mm. Okay. Di block. G di block. It's only going to take a couple of minutes to get to get this right. Collection item. Okay. Collection item. I think it's definitely the collection item or the div block. It's it's one of those. Or maybe it's, maybe it's the image actually. Let's check this out. Okay, let's just play. Okay. Ah. Okay. Mmm. I thought that might have been it, but none. Okay. Let's try this. I'm just fiddling around right now, trying to figure out how to. Let's just completely blew that out. So let's take that back. Let's put that back. And just click, command Z, command Z, to get that back to where we wanted it. Image wrapper. Ah, it's the image wrapper, maybe. Maybe it's the image wrapper. I didn't see that before. Maybe it isn't that, then. Maybe it's this. Okay. Mm block. No, that's not it. Flex. Link block. So I'm just working through the options. At this point, I'm just working through the options, trying to figure out what it could be. And as you can do that, then you can start to see the different, Okay. Ah, there we go. So let's just let's just go back and just see how that was fixed. So we've got the lock flex. To. Flex block. Go to the dif block. So we can just go to the dif block. Let's go to the dif block. Click right center block. There we go. So basically, the dif block was set as Flex instead of block, and it's just fixed it literally straight away, so that looks great. Okay, perfect. Now that's fixed. I guess the last step is to just start to kind of finalize things and finish things off. And then we can and then we can start to really get the party started. You can see here. Okay. So let let's look at this little drop down here. Setting this shot. So you can see here that. It doesn't look very good. Now, if you remember from before, we have the width set at one, two, six. So if we change that, that's going to change everything and it's going to look 1 million times better. Awesome. Okay? And again, we can use that to link to different things, et cetera, et cetera. But obviously, we've already shown you how to do that, so we don't have to go through that again. Okay. Now, we basically have a situation where the website is pretty much done. You know, obviously, it's a very basic website. It's nothing too crazy, but obviously, you're going to spend a lot more time. You're going to go through everything. Do we Do we actually need that little element or not? Do we need that? Maybe we just, uh, we can change the color if we want. We can change the color or we can just delete it. It's completely up to you. Okay. There we go. I just change the actual color of the section. And then we can and then we can basically move on to the settings. Okay, so let's just disconnect. Let's move that over. Perfect. Awesome awesome awesome. There we go. Okay. So we've got that. That looks good. That looks good. Hangs out to pink. Changes to our crimson, sorry, again, crimson. Keep getting that wrong. Crimson crimson. There we go. Okay. Okay, k. So everything else is looking good. Obviously, we can link up all the buttons and stuff, but it's, you just click on it and click the little cog and then you can just choose whichever button you wanted to or page you want to go to. Everything else looks pretty good. This here. Obviously, you can change the text, change the colors. You can actually do a CMS section for this section as well, if you want to. I sometimes use it if I have more than three articles. But usually what I do here, as I just put the most popular articles here. The ones that I want people to actually read, which just helps keep things nice and organized. Okay. Perfect. We've got that here. Yeah, yeah, we can just add this as the CMS if we want to the same way as we did before. But yeah, I mean, everything's looking pretty good. So let's go to the settings and just cover off a few important things that you should be looking at when finishing off your website, just waive this to load. Very quickly. Okay. The first place this is going to take you to the general page. The first thing you need to do is add your fabcon. Now, a favicon can only be 32 pixels by 32 pixels, and your web clip has to be 256 by 256 pixels. With the fabcon and the web clip, keep them super simple because if they're too detailed, or they've got too much going on, they're going to look really stupid. It doesn't look very good. So keep them super simple. Then we'll go to forms. Go to here and just basically put like, sorry, go here and add your e mail address. This is the e mail address that all of your forms will go to. So for example, if someone gets in contact with your contactors form, this is where the e mail will go, then make sure you click Save. Then let's go to plans. So if you want CMS and I have CMS for every single one of my websites with Webflow, It's $29 a month billed monthly, it's a little bit cheaper if you build it annually, but it's so worth the money, because it saves you so much time. If you do not want CMS, but you still want a custom domain, then the basic option is probably best for you. But if you just want, like a web flow domain, you can just click the starter plan. The starter plan. So obviously, I'm on the CMS, the CMS package. But with the starter plan, the thing is, like, if you don't have a real domain connected to your website, as an agency, people are not really going to take you very seriously. So that's that's going to stop you from being able to charge a lot of money. So yeah, and then obviously, you can connect your domain and you're going to go, but I hope you enjoyed watching this website get built. If you have any questions, let me know. But yeah, let's move on to the next section of the course, and I will see you there. 62. Website Building: E-Commerce Website (Part One): Okay, so we're going to be building this E commerce website from scratch in Webflow. Now, the first thing that we need to do is we need to set up our libraries. Now, I've got some libraries already downloaded on this website. These are just my favorite ones, but you can choose whichever ones you want. The ones that I like best are usually the ones that have the biggest selection. So you'll see here that, you know, this one has like 283 different elements. This one has 226. This one has 200. So I generally go for these ones, just because there's so much options. There's so many options, sorry. Some of the other ones don't have as many options, so it's a little bit less attractive to me. But then you just install the library, click the website that you want to install it to. And then, I think for me, it won't let me install anymore just because I've already got so many uploaded, but for you, it should work, and they're all free at least at the moment of recording this. So yeah, you can check those out. Let's just load things up. And I'm going to be showing you how to create a website, an e commerce website, for your brand or for Ear brand in real time. It's not going to take very long. It's going to take maybe around 45 minutes to an hour, overall. And we're going to show you every single step. It's going to be super easy. So the first thing we're going to do is we're going to go into our ear library and add a Nav Bar. Okay, so let's add this Navbar. And one thing to say, and well, let's just add a photo as well really quick. One thing to say is at this point, we are literally just focusing on creating the structure of the website. That's how we start every time. The structure of the website is the strategic skeleton of the website. Without the structure, you know, the website can be super pretty, but the structure is the strategy, okay? So We need to okay, I think for any commerce website, this could work, but also I want an image which really kind of looks the part, you know? Let's try this one. Let's see if this works. But I think I think this is a little bit too complicated. Mm. Yeah, it doesn't I'm not sure. I'm not sure if I like it or not. Let's take this away, Let's delete this because I don't want it to be too complicated. Okay, this has lots and lots of different images in there. Okay, I definitely don't want that. I definitely definitely don't want that. Okay. Yeah, let's change that because we don't want it to be we just want one image. How can we just find one image? Let's just find a nice hero with just one single image. This is usually a pretty cool section for that sort of thing. I like this library for that sort of for this sort of minimus fives, but it doesn't seem to be anything there. Let's go to let's go to these. Ah. There we go. That looks pretty cool. Mm, let's try that. Let's try that. That looks pretty good. Awesome. Okay, I'm not sure how I like it being on the right hand side. I think right hand alignment, if you took the alignment lesson earlier on in the course, it looks very weird. I think I'm going to take this order to the left because it just looks better. So let's take this or to the left. And just click this element and just take left a line, left the line, left the line, take this button over. There we go. Perfect. I mean, that looks ten times better. The reason that that looks better is because most cultures read from left to right top to bottom. So it's just more comfortable. It's more familiar for us. I know some religions and some other cultures read differently, but for the vast majority of cases, you know, this is going to be the best option for you. So let's add another section. So, if you remember, when we are creating he a website, the home page should answer three questions. Number one, I'm in the right place. So in the first section, the hero section, you need to tell them that they're in the right place. You are not going to waste your time. The second section, which we've just added there, is like a featured section, right? It's like to build trust, like we've been featured in, you know, this place, this place, this place, and this is going to showcase that you are serious and that you are credible. The next section is going to be, you know, ultimately for the Ecommerce website, but for another website it would be ok, what can you offer me? What can you actually do for me? So for an Ecommerce standpoint, We are okay, let's just add this to Auto. Yeah, what you'll find is with some and let's just limit this down to four. With some of the libraries that you use, they always like set certain elements to 126 for some reason. I don't know why they do it. Don't ask me, I didn't build these libraries, but You sometimes have to adjust the width from 126 to order. So if something doesn't look right, then just check that out, and that's probably the answer. So yeah, what was I saying about the section? So yeah, first section, am I in the right place. You have to show them that they're in the right place from the first, second, they'll land on your website. Secondly, can I trust you? This is going to be a featured section or, maybe customer reviews or something like that. Then lastly, what can you actually do for me? So add some sort of product, add some sort of, you know, service or whatever. Obviously, for any commerce website, we want to showcase the products. And at the moment, we're using a meet our team section. But we're going to change that into a product section real fast. Remember, at the moment, we are literally just focused on the a see here, this is 126 auto, and it looks a lot better. At the moment, we're not focusing on the text, we're not focusing on the imagery. You can see that image there has a little bit of padding, so we just took that away. We're just focusing on the actual structure of the website. The story that we're trying to tell. We do not want to get caught up in, you know, creating lots of different images and changing images too much right now. At the moment, we're just focusing on getting the website structure in place. Because afterwards, this is going to help us to get things finished ten times faster, and we're literally going to be building a website in real time in 45 minutes to an hour in this very video. So, I'm going to show you that it is possible. Okay. So we've got our first couple of sections on the home page. Let's add a block section at the bottom just so that we can showcase that. Okay, so you can see that this looks a little bit weird, right? So you can see that the that looks a little bit weird. Let's change that to zero. Bah, bah, bah, bah. You can see that the headle Excuse me. The headline is 126. Change that auto. Good. Okay. This is also 126. Let's change that. Okay. Perfect. Let's change the margin on this to zero. Ideal. We've got the block section, we've got this, this is this is looking really awesome. I love how this is looking. Okay. Let's change the size of this a little bit just so we get the structure right. I mean, that's looking pretty good. From a structural standpoint it's looking pretty good ok. Let's add a block example. Let's check this out. A a block page. Again, we're just going to add a Navbar and a footer. We're going to create me. We're going to create a universal Navbar and footer later on in the course. So do not worry. I'll show you how to do it. I later on in this video, should I say? So do not worry about that. I'll show you how to do that. And what that's going to do is it's going to allow you to change something on one page, and your Navbar and photo will automatically populate across every single page. So yeah, let's dive it to adding. Okay, I think this one's are pretty good. I really, really like the structure. I think this one's the best one out of all of them that I've seen, and I've used quite a lot, but this seems to be the most professional and engaging one. Make sure it's all the way to the left so that it's connected to the body of the website and not the section. Okay. And now we go. Okay, so that's already all built for us. We've done that already. We can maybe take a few things off, so we can maybe take off a couple of those contributors because there's a few too many to be honest. But yeah, in regards to the actual blog, what we'll do is we'll set up a CMS for either the blog or the products a little bit later on on this video, so I can show you how to do it. As you can see here, a CMS is basically like a collection of similar things. So for example, in this case, articles or products, and you can store information. So for example, here Look, you can store information so that it creates pages unique to that particular article or product without you having to create a new page from scratch. Okay? I'll show you how to do this later on, but it's super super useful. The reason that's super useful is it allows you to create multiple pages in like a fraction of the time, and they all look exactly the same. So they're all perfectly on brand. You don't have to worry about sizing or anything like that. Super super beneficial. I absolutely love using the CMS system. And I'll tell you a little bit more about it a little bit later on, but I just think it's super useful, really useful. You can see here, I use it for the articles for the Lancaster Academy website. We use it for product pages. We use it for my branding agency. We use it for the actual project, like the actual projects in the case studies that we create. But here we just use it for content. And it's super useful, because you don't have to manage multiple pages, you just have to manage one single collection, which is really great. I'll tell you a little bit more about it a little bit later, but I just want to highlight how important it is. I think I've got like 47 different articles at the moment. And obviously, we've got main product page, the actual article, if it's featured or not, it doesn't have to be that complicated for you personally. You don't have to do it super complicated. But generally, the only things that you're going to be using out of all of these, to be honest when you first start off is plain text, rich text, an image, maybe a video, and that's pretty much it. You're not going to really need any more than that to be completely brutally honest. And then All you do is just connect the title. To the title and the Ls, for example, here, we've connected the article topic to this, so in this case, it's branding, the re time. So just little details that are going to change throughout every article, but you can a product or whatever, and then you can basically add it to the page without actually adding it to the page. So you just type it in and it just does it for you, which is super clever. But you can see here that, you know, for my articles, we have you know, maybe about 15 different elements that are all working together. And I don't have to build those again separately over and over again. I just do it once, and that's it. So let's dive back into building our E Commerce website. And we'll talk a little bit more about CMSs later. But I'll CMS collections later. But for now, let's, let's delete a few of these because I don't think we need three contributors. Let's delete the social media icons. Let's look at the other pages that we can create. Okay okay. Let's create the the blog articles page. So that was the actual article page. This page is all of the articles together. So this is, you know, all the different articles that you have on your website on one single page so that people can actually find it, okay? So I find your article. Should I see and find the best article for them. I think that this is probably going to be the best option. Let's check a few more out just to see. But I think for, To be completely honest, I think this could work, but also Um, yeah, I tend to keep it quite simple. I tend to go for the same the same layouts all the time, just because they look so good. Like, this one personally is like my personal favorite. I use it for all of my websites, to be honest. It looks so good. You can see here, it looks a little bit weird so you can see that it's a one, 26 problem again. So just click this off. This might not actually happen for you, but it always happens to me for some reason. I'm not sure if that's maybe some settings in my website, but yeah, just to bear that in mind. Again, 126. I've literally I'm going to trademark the 126 problem, because it is literally the problem that comes up the most. There we go, but it doesn't take long to fix, so that's all good. Okay. Is that something good? Yeah. Do we actually need the tab option above? Maybe, but also maybe not, I might just delete that a little bit later. Okay. Okay, but we've got that now. So let's do the Contact Dust page. And again, guys, like, remember that we are just building the structure of the website right now? We're not doing anything else? We don't care about colors, we don't care about photography, don't care about the imagery, we don't care about the text. We don't care about anything apart from the structure of the website. What that's going to do is that's going to help us actually build the website, so do like 80% of the work really quickly so that we can then focus on the other aspects of the website. So for example, the imagery, for example, the copywriting, because the copyrighting should come last in my opinion, because that's what should really take the most time. You can see here again, 126 problem. That literally happens far far too much. Um yeah, just building the structure of the website just helps you see the website, how it can look. And then you can figure things out and kind of change things and tit things as you feel fit. But just getting that done, you know, really early on is really, really helpful. So the privacy policy and, you know, delivery and shipping and, you know, you know, disclaimers and stuff, those types of pages are really easy to create. And, Basically, I think that the best way to actually do it is not by using the templates, but just by adding the texts themselves. I think that it just needs to be kept super simple. Trying to overcomplicate it. It's going to just leave people a a little bit y confused and it's just unnecessary because let's face it. Who actually reads the privacy sections anyway. The privacy policy, the disclaimers, you know, all that stuff. It's just there for legal legal issues. So terms and conditions and stuff, you can just add the elements separately. So add a section. Then just add container. Well, you can add ahead of first, but I think adding the container is better just because it makes it responsive. Yes, so we add a header. And then we can add the um, We can try it with a paragraph, but to be honest, I just want to show you the difference between adding it with a paragraph and adding it with rich text just so you can understand the difference between the two elements. Okay, so we've got the header, put privacy policy. And just to let you know, I've added a link within the actual course. You should be able to find it to the different links to the privacy policy, doing getting free shipping and returns policies, all that stuff. And it's often pretty much the same website. But it's just super helpful to have all those links. Just add all obviously your website details and stuff. And then you can, um, yeah, just get all of your get all of your legal stuff out the way. They do try and charge you for, you know, like, official documents? Do you need them at the start of your business? I would argue not. I think, you know, if you're creating these for either a client or you're creating the website for yourself, and you're just starting out, do you really need all these big legal things in place? You know, Maybe you're in a particular sector where you okay. So yeah, it's trying to get us to actually buy stuff, but we don't need it. So we just click, No, I don't want a professional privacy policy, and then just generate it. Now here, you don't actually need to put your correct e mail address. In some cases you do, but in this one, you don't because you can just there's a couple of different ways to actually add this to your website. So the first way is to try and copy and paste this. Now, I found that on my on Safari, sometimes this doesn't work, and sometimes on Chroma doesn't work. So sometimes you can copy to the clipboard. And what this basically does is, this would basically mean embedding the data, which is if you're not sure what that means, do not worry. It's all about HTML and code. You do not need to know how to code, but you can just basically copy that code into an embed box inside Webflow, which is kind of like where you're going to add custom code. You don't need to learn how to do that. I just want to show you the e mail that you get when they actually send you the privacy policy just so you can see it. Okay, there you go. So they'll basically just send you back to the same page. So what I generally like to do. But a nice thing about that is it actually has all of the links to the different other websites that they have, so if you need anything else, that you can just basically get it there, really, really useful. So you just checked the bottom of the e mail, and it should have a link to all of the different forms and policies that they can create for you. Now, the way that I like to add the policy to the website is by basically generating files. So you can generate a doc X file, which is basically just a word file. And then when you open it, It, um, let me just generate this in in Chrome. For some reason, it screws around with safari a little bit. C, open it up. Perfect. So when we actually copy and pierce this into the website, if we do it into a paragraph section, so this is the section here. If we do it into a paragraph section, it looks terrible, right? It's not formatted, and the reason for that is paragraph sections are not meant for big blocks of text. They are meant for, you know, a small amount of text underneath a header or a little bit of text, you know, maybe Underneath a video, for example, It's not meant for long blocks of text. So what we actually need to use is something called rich text block. So we basically add this here. You can see this is very different. And when we copy and paste the exact same text, it's all formatted, and it looks a lot better. This is just, you know, so much easier. You know, you could see that the spacing needs a little bit of work, but overall, it looks a lot better, and you know, you can be you can be a lot happier with this. Now, something to watch out for when you're actually using these free policy providers and policy, you know, document creators. Is there sometimes add free policy privacy sort of free privacy policy website ad article advice. So they'll link out to their own website, which we don't want to do. So feel free to delete that. But, yeah, you just basically get, you know, just take some time to read through that and just make sure there's nothing in there that's being said that shouldn't be said by you or your company. Okay, so the A US page for any commerce website. Again, we'll add the NAF bar. We'll add the fodder. And remember, we're going to be creating universal NAF bars and universal footers a little bit later on so that it's the same throughout the entire website. And again, we'll just focus on the structure right now. Just keep that in mind. I know the website right now doesn't look like any commerce website, but by the end, it will. And it's only going to take about, you know, like, 45 minutes to an hour. Okay, so let's add Section here. So the About Us page for N e commerce website needs to tell a story, okay? We are telling people why you should buy from us because there's tons of other people or brands that you can buy from pretty much the exact same product. You know, Not many products are very unique. So why should you buy from us? What makes us special? We can make our brand seem more special by telling a story. And this is one of the most powerful things. So if you go to, for example, Rolex website, you know, they tell a great story in regards to each of their watches, and, you know, it just looks, you know, that the imagery and everything. It just makes so much sense. And you can see why they're a premium brand. For this website, obviously, you know, we're not going to have Rolex imagery, but we can definitely still tell a story. So what I'm trying to do here is, I'm going to create a little product page. So the first section is the Haro section. We're going to tell a bit we'll see a little bit about what makes us unique there. And then we are going to add a section here for the products. Now, we can use this team section. That's fine. It's got a really great structure. Let's just take away these elements. Here. Okay. Let's just take off. Yeah. The spacing here is pretty bad, so let's just change that up. So we don't actually need all of this way. We're just going to be, again, a, let's take the u let's take the what you do first, just to keep it simple for you. Okay. Firstly, let let's arrange the list so that so that we can get things four by well, I just want four items. I just want four products. So I don't actually want, you know, tons of tons of products there. So let's re re add these into a section. Okay. Then we can add a container. And then, actually, we might not even need to do that. I'm trying to think of the easiest way to do this for you. Okay. Um, I think we just keep things simple, actually. I think we just keep things simple. Okay. Let's, uh, this. Let's have this here. This grid. Okay. I actually don't think this is the best way to do it either. Okay. So now we're going to add. So now we're going to add some products. So let's take the team section again. Be a little bit creative. Okay. Then obviously, the formatting of this is base. Let's take off here that will go that looks ten times better. Let's take off some of this. Actually, let's take these buttons away. Let's take the spacing away. Having the eight products is generally quite a lot, so let's take this away. Okay. There we go. Falls plenty. We obviously don't need the social media icons because that's just silly. Let's look at Okay, that looks a lot better. And obviously, it still looks like a tam page right now, but we are actually, let's add these back. Yeah, that makes a lot more sense. Okay. Yeah, we definitely don't want social media icons. But let's look at The fact that this is obviously a team section, but we're going to create it into a product section. So when you're choosing sections, don't look at the actual imagery in the section. Look more at look more for the actual elements that are in the section and the format. Cause you can always take things and put things like, you know, take things away, add things. But I don't know if I like this FAQ section. Yeah, I'm going to get rid of that I think. That FAQ section is not my favorite. Let's get a better one because there's definitely better ones out there. Okay, Let's bom bom. Let's add this here. I think this is going to look a lot cleaner and a lot better. There we go. That looks. That looks a lot better. A lot cleaner, a lot easier to read. Perfect. And this type of animation would literally take it would take someone, you know, maybe an hour at least or 2 hours at least to do this type of animation, while, you know, like, the answer in the FAQ section is, you know, kind of revealing itself. It literally takes like 2 seconds to do here. It's so so easy. And that's what makes web flow so great. That's what literally makes the the website building element like so fast, and it's going to save you so much time. Okay. Okay, let's add this here. So again, we've got the section, the section is looking okay. We're going to add all the different, you know, images and stuff later on. But at the moment, we're just focusing on the section structures, okay? The structure of the pages. Okay. Now let's get to the interesting part and add a product page. Let's add an actual product page and see how this is going to unfold. Because one thing one thing about the web floor sort of the web floor libraries and templates, they don't have a product or e commerce focused template yet. They may have in future, by the time you watch this, they may have it. But let's build a product page here using this blog template. And this is literally the exact same article template that we've used before. But I think it just has a really great structure. I think that if we delete this stuff here, which, I think that just looks a little bit better. We can probably we can probably take that away, to be honest. I'm not sure if those social icons look good. But yeah, let's just really gout this out and take that away. Okay. So what we're doing now is, we're going to build the product section. Let's just bring everything back just so I can show you exactly how I want to do it. So we're going to add the product item there. We're going to take this Uh, we're going to take this stuff away, I think. You can see here how it like scrolls, and it just looks really good when it like scrolls down. I think what we can do is we can probably add the title here. So we don't actually need that top section. We can just add the actual title. Then add the Mm mm mm. Okay, get rid of that. So we just left with the bottom bit, which scrolls really nicely. Maybe that's a little bit too high. Let's add two. Okay. It's a little bit better. And you may be wondering, how does this look like a product page? Trust me. It's going to look awesome. Trust the process. So, we're going to get rid of that. We're going to get rid of all of that stuff. All we want is the actual function behind the builds, right? The structure, the actual page itself. So we want to add a little grid here. Excuse me. And then we're going to start adding images. So we can get rid of all of this text. I mean, you can keep the text there if you want, but for the purpose of this, I don't want any text. I want this to be all visual. Okay. Let's add an image here. Where's the image? Just type image. Okay? Okay, I'm not sure what happened there, but, then just copy and paste this, take the take the padding away. Copy and paste this into the dip block, make this a 100%. Perfect. There we go. So as long as the image is square, it's going to look square. Okay, then just paste that. And then basically what we've got here is, look, we've got the actual we've got the actual title. So the product name, the price on the left hand side, which we can edit in a minute. But then we've got a nice scrolling run of images, which looks great. It looks really elegant. It looks really cool. So, I mean, This looks good. I'm excited. Does this look better? Depending. Depending on the type of product that you're selling, you could just put, you know, the grid as one column. But I think for this case, I'm just going to keep it as 222. Okay. Let's start to play on with the gap. So I'm just adding a different class, so, you know, you can do this however you want, but I'm just adding a little bit of a gap to each of each of the elements in the left hand side. So I've got the title, so the actual product page, so the header. Then I've got a little bit of a paragraph just to basically explain a little bit about the product. Then I've got inlate that actually, then I've got the price, and then all I need now is like a button, right? Like a buy button, which I can I can add below. Okay so copy delt and then just paste it into that section. And then I can just put by now, obviously, not like that. Okay. And then all I need to do is just add There we go. Perfect. Perfect, perfect. Perfect. Okay. I mean, that still looks absolutely terrible, but it's going to look better. I trust me. Okay. We can figure out how things look and stuff later, but functionality wise, it looks like a great looking page. Okay. Okay. What else do we need to do on here. So I think I think that's pretty much I think that's pretty much it. Maybe Mm, maybe we add something just to the bottom. Maybe we add, like, like an additional products section, maybe. That could be cool. So let's check that out. Above that bum bum. Let's check that out below. Again, so here, you can see that it's the same problem. And as well, what I'm going to show you how to do later on is use the components function in web flow where you can basically create you can create a a universal element, which changes throughout the entire website. So we're going to use it for the NAPPar. We're going to use it for the Footer. We're also going to use it for the products as well. So for example, if you've got four products that you're trying to sell, to, you know, a specific, you know, audience or during a specific time of year. You can change the products, so the four products, you can change them, and it will change site wide. So you don't have to change every single page, which is super super useful. And so I'll show you how to do that a little bit later on in the video, but for now, just stay tuned, and we'll go into this. So here, we're just going to add a little call to action below, just to make it look a little bit more professional. And then let's talk a little look. Let's have a little look. 63. Website Building: E-Commerce Website (Part Two): Here. Okay. So we're looking through all the pages now. We've got all the pages, roughly where we want them to be. Let's start actually, you know, changing things now and actually designing stuff. So I'm just going to add some add some images that I've kind of brought together, just to kind of speed things up a little bit, I suppose. And so we're going to change the logo first. Now, this does not look like an ecommerce website right now, but it's going to look a lot more like an e commerce website by the end. Trust me. Okay? So we're going to add this first. Let's just add this here. Then we can change this. This looks like it's been stretched a little bit for some reason. Let's just automate that. Max Wit. Okay. I'm not sure why it looks a little bit weird. Let me click on that again. Okay, it's the padding actually there we go. So you can see the padding squash net. There we go. That looks a lot better. Awesome. So yeah, we've got that, which is perfect. And then All we need to do is just check out the other elements now. So now what we've basically got is we've got the full structure of the website done. Now what we need to do is just arrange the other elements of the website. So for example, changing the fonts, and you can take as long as you want to play around with this and really get something that you're super super happy with. But to be honest, like, this is the funnest part. Like you've done the structure of the website, which is the biggest work to be honest, like putting the website pages structurally in place. Now it's the fun part. Now you get to experiment with things, you get to create, you know, di different versions. You get to add different imagery, you get to write the copy. This is the part that I love. I could literally spend all day just building a website for fun, you know? Okay, let's let's just play around with this a little bit. I'm just changing the fonts and stuff. I'm just playing around. PT S seems seems decent normal 400 weights. That sounds right. The, I'm just changing the colors. I'm just playing around just to see what looks good. I'm just going to go with, like, a nice black and white theme. I kind of like how how when I hover over the button at the top though, it kind of turns to this, like, sort of really dark green, this really elegant green. Okay. Okay, k. Okay. Okay. Now I'm going to change this. So I'm just going to link out. You can just go to settings and change your your logo to go back to the home page. That's pretty standard. You can also obviously link all the other pages up. I'm not going to obviously go through all of those with you, but you can do that on your own. Next step is to basically start looking at changing the well, creating the components, so we can actually start making our international elements. So for example, here, you see how that's green. That basically means that the NAF bar is going to be the same across the entire website. We're going to do the exact same thing with the footer. So let's just get it perfect first. Let's just de, delay that delete that. Delete de delete. Okay perfect. There we go. There's no padding there, perfect. And then all we need to do Let's just add the add the home page. Take that off. Oh, actually, that's that's actually really, really big. Why is that so big? So crazy. Why is that so big? I might just actually put that back to 126. I actually want a 126 problem there. Okay, let's do that. Let's delete that. I just want it nice and clean. I don't want it too busy. Obviously, you can change the text at the bottom if you really want to, but how you create a component is you just select the element, which you want to be the same throughout the entire website. Click, create a new component, and then just give it a name and then click create. And then as soon as it turns green, you know that it's the same across the entire website. So you can see here, you can see here. We're going to use it again for the products. But yeah, just for now, just bear in mind that this is going to save you a ton of time. Okay, let's start playing around with the imagery and getting things in place. So we've got this image here, which is great. Again, get that in place here. Okay, that looks good. Obviously, coin base and all that sort of stuff. We don't want that there, so let's let's just change these Yeah, let's just change those around a little bit. So we can have, like, featured, like featured in the daily mail, CBS, New York Times, just to give it a little bit of credibility. Okay, that looks good. Okay. Then we can start to add. Obviously, we can change the texts and stuff. We can, you know, this is obviously, you know, I'm not going to go through the copywriting aspect, but, you know, obviously, you can Arrange things however you want. And also, when you are designing your website, make sure that you use the other elements of the course, like, for example, the previous lessons on, you know, website design, on, you know, web flow, you know, like the crash course on web flow elements, to answer your questions to get the answers that you need and to get your website looking and feeling, like, for example, how to use text, you know, the different types of typography, you know, how to create your color palette, how to use your color palette. Here, I'm just going to edit these corners a little bit so that it matches the button in the top right hand corner. Okay. Perfect. Okay, let's start diving into this section, and let's create our little array of products. Okay, cool. So let's add four. Perfect. There we go. Then. Let's make this super simple. So we've got the sol there. Awesome, awesome, awesome. There we go, there we go, there we go. Okay, new releases. And obviously, you can put whatever you want, but this is just, okay, let's just add some images. Let's just add some bags. This is for a fashion brand, some grit photography. One thing as well about, if you're building an e commerce brand and you want like the The website look really great. Your product photography is literally the most important thing. It's pretty much the most important thing if you want to sell anything. And one thing that I've found, which is so super beneficial is to find, like a really light gray or a really light blue and use that as a background color instead of white, just so it just looks like it just helps to frame things and make things look super super professional. Obviously, then you can, you know, add the product name and do all that sort of stuff. I'm not going to waste your time and go through all that. But and see here how, you know, we've got the different products now all arranged. But what we want to do is we want to create a link to go to the actual product page. So at the moment, if we click on that, it's not going to go anywhere. So we're going to get the link block. That's a little bit of an issue. That's not really looking too great. So let's go to the link block and funny enough. It's 126 auto. Let's click that out. There we go. Good stuff. Now we're got to go. Okay. And then what we're going to do is we can literally just duplicate that three times and then just literally just copy and paste that, copy and paste that, copy and paste that, and then we're go to go. Then we've got everything with a link block so that if we wanted to link out to a product page, then we can. I don't like those lines underneath the text, so let's just click that off. Okay. Perfect. And then let's look at this is simply just, you know, choose the page that you want, and then it will just automatically link out to that particular page. And then when we get to this section, just add a add a nice image. Okay. Awesome. Perfect. And then, obviously, we're just writing a little bit about the brand story, and we're just getting people to learn more about the brand at this point. Okay? Okay, so let's check this out. Okay. It's looking pretty good. Okay. Okay. And I've just literally just copied and pasted the texts from above and the button and stuff just so I don't have to create it again. Like, I just want to keep everything consistent. And you can literally just copy and paste like edit in a word document. It's super easy. You can do this with all the buttons. I'm not going to waste your time and you know, really kind of go in to the nitty gritty details, but, you know, you can do it in your own time, and I just want to show you once just so you understand how to do it. Okay, so we've got all that. Okay, let's edit the blog just because obviously this block. These block posts don't really look too great at the moment. There we go. So just make these a little bit more brand, I suppose. Awesome. It's looking good. Okay, perfect, perfect. Perfect. Okay, fashion, fashion fashion. Awesome. Okay. Now we're just putting the finishing touches now. We're just literally wanting to, you know, get things in place, get all the imagery in place. You know, change a little bit of text, and we don't need the collaborators. I think it doesn't look as clean. Change this to black or, like, a grey or something. Yeah. Just keep things nice and simple. But yeah, at this moment in time, we're literally just playing around with things, and I could spend hours doing this, like, literally just, you know, doing different colors and, you know, trying different things. It's literally my favorite part of the entire process. I absolutely love it. So yeah, take your time with this. You know, you've done the structure. That's the most important part. Well, they're both equally important, but The structure is important because it's actually going to help to create the the experience for the user and to get them to go where you want them to go. But now you can you can have some fun with the actual aesthetics and the actual look and feel of the website. This is where things get super interesting. So here's the article page, so again, you can just change this. I'm going to show you how to set up a CMS system later on. It's super simple, super easy, so do not worry. But I'll show you how to do that for this particular brand in a little while. We don't need to contributors. I don't think. We definitely need to subscribe to our newsletter because the e mail list is king. So we've got all that. We've got all that. Okay. Now, we don't need these nav bars anymore because we have our universal NAV bar, which we can do so is make sure you connect it to the body footer, there we go. And then we are good to go. And then we can do the exact same thing with the nav bar at the top, which is going to be great. And then there we go. So literally that Nav Bar, and that footer is going to be the same no matter where on the website, we go. It's always going to be the same. It's always going to give us the same look, the same feeling. If we change anything, it's also going to change on the other website pages as well. Again, you can see here, usually we would have to create the NAV bar from scratch all over again and do it again and again and again and then change it again and again and again, but you don't have to when you create the component. So make sure you do that, it's going to save you a ton of time. Okay. So here, obviously, you can change the the color of things if you really want to. Obviously for this, I'm going to just keep it. I'm just going to keep it black. You know, change your details, all that sort of stuff. I'm just going to change this, so it's a little bit more on brand. Perfect. Okay, cool. This is done, you know, L, we're literally building a website in like 45 minutes to an hour, and it's pretty much done now, you know. It's like, not too far away. Okay, let's add this. So in real time, let's just check out this one here. So, amazing bags. Obviously, We're going to tell people how amazing our bags are. Let's just add here a new image. Okay. Just add this image. To showcase the founders of this bag company. It's lovely founders. Okay. So we're at a point now where we literally have to create the bags, the bags and stuff again. I don't want to do that. I want to be as lazy as possible when it comes to creating the website and managing the website. So what we're going to do is we're going to create a component. So we're going to go back to the home page while we've done that work before. We're going to get the actual section, okay? We're going to make sure that it's the correct one, then click, create a new component. So look. Okay, so get the one closest to the body. Then click component. Then we are going to products ec, there we go. B, bam bam. Then we are going to go back to the page. So we've created the component now. That's going to be the same across every single website page. Okay? So let's dive in and look at the cifa loads. Okay. So we've you know, we need to add it on this page as well. So let's just take that away because we don't need it. Section, delete. And then let's get this. There we go perfect. Awesome, awesome, awesome, awesome, awesome, awesome, awesome. There we go. A, b, bum, bum, bum pa, ba, ba, ba, put put, bum put. Let's have a little look at this. Look at that. Okay. Let's just wave for this to load a little bit. One thing that I have found is web flow tends to work better on Safari, and I'm not sure why. Sorry, it works better on Chrome. It doesn't work as well on Safari, and I'm working on Safari right now. And yeah, it's a little bit slower, but it's not too bad. It still works, but it's a little bit slower. Yeah, so you can see that I've used the component and just slapped it straight in, and it's the same across the entire website. Helpful. So make sure you're doing that if you want to have the same section or the same, you know, part of the website on multiple different places on the website. Make sure you add it because it's literally go to save you so much time and energy, guys. Trust me. Okay. So I'm just adding a little getting touch section here. Okay, just connect us to the contactors page. Perfect. Okay. Now, again, we don't need to create the photo again. We can just literally just delete that and get that, get that added from the component section. There we go. Awesome. This is looking so good. Can you remember how this didn't look anything like an e commerce website? Now it's actually looking like an Ecommerce website? The magic of time, time and patience. Okay. So we can see here now, obviously, you know, the text and stuff can be changed, but, you know, we've got a pretty good start here. This is going to be the actual product page. So this is going to probably be the thing which is, you know, important to get right. So we've got the additional products which are there? That's good. Let's start to spruce this up and get things get things started. So again, with that, you can see how this isn't on the body. Get on the body. There we go. Now that's better, and this one as well. So again, we don't need to do this again. Oh, wait a second. We've already done this before, right? We've already actually done that section before. We don't need to do that section again. So let's go back. And again, this is how we should be working guys. So we need to be making sure that we save ourselves time in the future, because your future self is going to thank you for it. So you need to go back to the section, create, so just select the section that you want to copy. Then create the, I'm actually searching for it. I'm actually searching for it here. I don't know why I'm doing that. Okay. Let's, This is wrong. Okay, what am I doing? What am I doing? Scott, get your act together. So what I've done there is I've basically added the footer into that section instead of creating a component. So instead, I'll select, create a new component, Contact us. There we go. Now we've got that in green. Now we can go to the product page, and now we can add that to the bottom of the section, which is here. There we go. And we can just add that here, and everything is going to be a okay. Perfect. There we go. Nice and clean. Looks great. Okay. Now, let's get rid of this ugly fodder, and let's get our good fodder or our branded fodder installed. Okay, awesome. And now let's Let's start to get this, you know, refined and get this arranged because I think I think we just need to get some images on here for the product and get this all arranged. Okay. I've got some images arranged already. Let's check these out. There we go. They should look pretty good. I just got these off here and kind of a template online. So again, this isn't the product that I actually own or anything. I just found these online, so I thought they'd be pretty cool to use just to show you. Okay. So we've got that. Just add these images. Really simple. You can see now, the page is starting to come to life a little bit, right? Just because of the imagery, and let's add two more. I think about six images is about right. There we go. Here we go, we go there we go. Okay. Awesome. Okay. Good stuff. Looks good. Looks good. Looks good. That bag looks really big actually when she's holding it. I didn't realize it was that big. Okay, awesome. Okay, Button, let's just steal this contact button, and just pop that in there. And we'll just change that as by now. Obviously, we're not going to go to the contact DS page. We would go to either, you know, a payment processor or the commerce plan on web flow, which I'll go through with you a little bit later. And it cost a little bit more, but it's define it's definitely a good investment if you were an e commerce brand. Okay. So, yeah. Okay, the actual price. Let's not give it away for too cheap. We don't really need that. We don't really need the section, do we? Yeah. Let's just get rid of that, but then we can add, like limited stock or something here just to create a little bit of urgency. But this pink color isn't really doing it for me, so what I want to do is I want to I want to use like a blue or something, like a cool blue. I think that's probably going to look a little bit better. Let's go down to backgrounds. Nice blue. There we go. That looks I mean, yeah, that looks decent. That looks decent. I'm happy with that. Okay. Then blog shop. It's looking pretty good, now. It's looking pretty good. Obviously, you would add the text, the actual product page, the product item name, all that stuff. But now what I want to show you. I want to show you CMS really quickly because CMS is going to save you a lot of time like components. CMS is going to save you a ton of time. Now, this is the Actual e commerce section. Obviously, that's something that, if you actually pay for the e commerce plan, then you get that and it's already fully built, it's already all set up so you don't have to worry about anything, so just buy the plan and then you can just set everything up. And if you have any questions, either ask us or you can ask weblow directly. Webflow are usually best for the actual e commerce stuff because they can actually guide you through it with videos. But with the CMS, you can create a CMS collection for the different products that you sell. Now, the reason that this is super helpful is For example, let's look at these assets. So these are all the products that we sell at Lancaster Academy on our website. This is literally just to help people to, you know, build their brands in the easiest way. So we have different things like the name, like, you know, the sales point, you know, what makes the thing special. But we can actually create a CMS collection for the products. On your website. It's really simple. So for example here, we're just going to play around, right? We're just going to use this existing CMS collection and just create like a markup of it. So for example, let's just delete all of the stuff on that page. So let's just copy this. Copy. I've copied that. Okay. And let's go to the other section here. So if you look at this page here, this is just for like a product page that we used to design before. And we can literally take the page that we've just designed for the E commerce brand and use it to build something in the CMS. So a CMS collection, which is going to allow us to add products and manage products and change products so much easier, and I'll show you what I mean in a second. So we delete everything off this page, and we will copy and paste. So we've got that, which is perfect. Then we can just add our NAF bar and fodder. Here here. Okay then just add the foot of there. Then we are going to start to link everything up. So, for example, we'll just do this quickly. I won't create a brand new SMS collection. O CMS collection, should I say. We are just going to rebuild the page. Inside a CMS collection. Because at the moment, this is on a static page. This is the CMS page. The purple pages are the CMS page, as you can see on the top left hand corner. It has the little purple box. That is the CMS page, the sign for a CMS page. Okay, so let's just re arrange things here. So that things look good. Okay. So we're just adding our component again with the different products. Looks perfect. Okay, awesome, awesome, awesome. There we go. Okay. That's looking good. Now, when we look at creating a page or a system on the CMS page. You can see here when we click on stuff, we have the option, not just to change it, but to also link it to something. Okay? So let me show you what I mean. So we go to the CMS section. Blog collections. This is just a collection, which we're just kind of playing around with. Let's edit it a little bit. So let's just delete this. And then let's just block collection. Okay, see here, this is all pre existing stuff from a block collection that we did a while ago. We've got a new one now. But for example, if we just look at the imagery, let's just use the image fields. Okay? So we've got four images there. Let's add two more. So we'll put image five. Then image six. Okay. Perfect. Then we've got the name. So we can just use that as the product name. We've got this. We can just use that as the content. And then we have block Author, which we can change to pricing, a? So again, we're just doing things super fast here just to show you how to do it, okay? So Save collection. Bless you. Excuse me, should I say? Can you see here, how instead of changing the image, we're connecting it to a field inside the CMS. So we're clicking a little purple button, and we've done number one, number two, number three, this is number four. Okay. So we could click replace the image, but we don't want to replace the image. We want to connect it to the actual CMS. Okay. So we've got it there. So Connect this one to five. And then connect this one to image six. There we go. Perfect. These two, let's just connect them and see what happens. Connect to four, then connect this one to three. Okay. Cool. So let's connect this to the name or the title block title, but it could be product name, whatever. This connect this to the content subject. Connect this to the price. If we're going to find it there we go. And then connect this to the link. We would essentially link this out to, you know, what, whether we're doing like a payment, like, like, a payment. Processor, or we're doing, you know, the actual like add to the card, for example, we're just linking it out to a processor for this case like P pal or Pioneer or Air walx or something, but you can do it either way. So now, everything's gone, which is a problem, but it actually isn't a problem. Let me show you why. So if we add five kind of place order placeholder, sorry, items, on here, you can see that we have this. Now, if we actually just delete four of these because they are wasting our brain energy, and we go back to the the block collections, and we just add bag example and we look at the images. Just ignore everything else, just focus on the actual fields that we are focusing on. We've got six images that we need to add. You can see here, look like at the moment, bag example, and we've got six images which are completely unrelated to bags, ok? And the text doesn't make any sense. So let's go back to the actual CMS item. And let's add a picture of the bag. Let's add another picture. So we're just adding the pictures of the bags right now. A this here. And then obviously, let's add the other two items, or the other two images at the end. Okay, good. And then for content subject, y, let's just write something crazy like, you know, what an amazing bag. I wish I could spell. Okay, cool. And then price, let's just stick something in there. We'll just stick a little bit more text in there. Everything seems to be in order. Image five and six, for some reason, hasn't updated, but yeah, that's a different one. Don't worry too much about it just yet. Okay. So I'll show you actually because image five and six hasn't been updated yet, so I'll show you what that means. Price, let's just change the price very quickly. $79. Make sure you put $1 sign in there. And then let's try and save it, but it'll actually kick us back because the link is wrong. There we go, so let's just add the slog. Save it says, it's not right. So if you go back down, we'll see. So we need to actually add a link in there, like a real link. For this example, let's just grab a link from the domain. Okay. There we go. Save it, and it should work. And then everything should be perfect. Apart from two images should be wrong, because we haven't updated them yet. And sure enough. There we go. The two images below are wrong. Okay. So what can we do to that? Okay? So we basically need to go back into the CMS and add the images of the bag. That's the only fix that we can kind of do it this moment in time. They're both connected to the correct things, but they're just not connected to they're not connected by to the correct image. So let's go to, that's all right. That's good. That's good. That's good. Let's just change these two to the pictures of the bag, and then we are good to go. Okay, go cool. So that should automatically set things up there. And then I think I quite like having the pictures of the girl at the bottom for some reason. So let's just get that down the bottom. So I'm just going to copy and paste that copy and paste that at the bottom. There we go. There we go. Take There we go. Perfect. Awesome. Okay. Ideal. That looks good. I'm pretty happy with that. Okay. Amazing. So yeah, so everything is pretty much all set up now. Yeah, I mean, that's how easy it is to create a CMS collection and to create a really good looking product page where you can just have all of your products. You know, like, we've literally created a full e commerce website in less than, like, you know, less than an hour and 10 minutes, really, really fast. And one thing that I do want to just show you is in the settings. So if we go to site settings, So a few important things that I think you should know before the things to keep in mind are fabric, make sure it's 32 pixels by 32 pixels, your web clip, make sure it's 256 by 256. Don't make them too complicated. Otherwise, they'll look terrible. Forms. Make sure you put your e mail address in the form. That is going to just make sure that all of the people who contact you, everything goes to your actual e mail address, the relevant one, and make sure you save it, make sure you publish it. Also as well planned. So for e commerce websites, you need to make sure that you either select an E commerce site plan. So one of these, I don't think you're going to need anything else apart from the standard to be honest, but obviously, you know, it's completely up to you. But I think you can also link out to a payment processor, like pay pL or something else and let them let people pay that way and just use the CMS or the basic one. If you just have one or two products, then you could just use the basic and just use it and just do it that way. The problem with the starter is you don't get to add a custom domain, so you don't really look very professional and credible. So people are going to be very unlikely to buy from you. And also, you know, you can't create more than five pages, so it's a little bit annoying. But if you want to add your domain, you can do it here, I've got another video later on in the course where you can actually learn how to do that. But just make sure you publish everything, and that's pretty much it. Pretty easy, pretty straightforward. And yeah, it's just really, really good to break everything down, and I hope you enjoyed this lesson as much as I enjoyed making it. Okay. See you soon. Bye bye. 64. Website Building: Personal Brand Website (Part One): Okay, so as you can see, we are starting from scratch and building this website from the ground up. Now, the first thing we need to do is we need to start to build the website structure. And the way we can do this is by going to the web flow layout and then adding some basically templates from the library. And there's some really good ones here, for example, this one is really good. This is one that I use quite a lot. Um, simply discuss it's got the most selection. I like the ones which have you know, the most options just so I can play around with different formats. So yeah, the ones that kind of, you know, have the most selection in there, those are the ones I'm going to choose. And then you simply just add it to the library. They're all completely free. And then once you add them, then you can just use them. And it's absolutely fantastic. Now, I've already got too many in my accounts, so it's not letting me add an additional one. But I already have the ones that I want to use anyway, so I can just use them without having to install them again, okay? So let's just waive this to load, and then we can continue. But building the website structure is super important because that's literally about, you know, 50 to 60% of the actual job. You know, building a website, you need to make sure the structures right. So, let let's start just by, you know, looking at one of these libraries. Let's use this one. Now, the first thing we should be looking at is creating a NAV bar. Now, a little bit later on, I'll show you how to create the NAV bar so that you only have to create it once, and then you never have to create it ever again. And we'll create the photo as well, but we'll do that a little bit later. So let's, let's check out this one, maybe. Yeah, that one looks good. Okay, perfect. Now, we're going to change the logo, you know, a little bit of, you know, the fonts and the colors and stuff a little bit later. But right now we're just focusing on the structure of the website. So don't worry about colors and images and stuff yet. We'll do that later on. Right now, we're just looking for a nice hero section for our website. And obviously, this website is for a personal brand. So we're looking for something that can represent the personal brand, you know, in a great way. I mean, that one looks pretty good, actually. That one looks pretty versatile. It's got a nice big image. It's going to be super responsive. Yeah, Let's go with that one. That one looks pretty good. We can play around with things, delete things, change things afterwards. Right now, again, we're just focusing on the structure of the website. Okay? Let's look for another section to add underneath the hero section. And again, this is super easy to use. You can just drag and drop them, and, you know, it's super duper easy. Honestly, like, I do not understand how web flow has made it so easy to create super beautiful websites. Okay, let's add this little trust section here, which basically says that we've been featured in, or at least we can use it as a featured in section. Just make sure we get it on the left hand side, so it's its own section because otherwise it's going to be kind of married up to the previous section. Okay. So that looks good. We can change this afterwards, but again, we're just focusing on the structure right now. Don't worry about the colors and stuff because otherwise, it takes a lot longer to build the website. Just focus on creating the structure. Okay. So yeah, we can change that a little bit later and maybe had a little, featured in section, which will be good, and that'll build some trust with our website visitors. Now, let's look at something. For the services or the things that we can essentially provide. Yeah, that looks good. Okay. Perfect. We can change the icons, we can change the text later on. That's not an issue, but I like how that's looking because we're ultimately starting with the hero section. So again, this is why you're here, we're telling you exactly why you're here. Then you're telling us, well, then we're telling them that they can trust us with the featured section. And then afterwards, we're telling them what, well, the website visitor, then we're telling them, Okay, this is what we can do for you. Like, this is the services that we can provide, or this is what, you know, as a personal brand, I can do for you. Okay. A nice little review section now. That looks good. And we can just add, you know, maybe, you know, some testimonials from either employers. You know, whatever your personal brand is, you can add it here. And let's add a block section, actually. That would be good. Just to show our expertise. And I think we're going to make this into a a fashion on modeling website for a fashion on modeling personal brand, which should be pretty fun. Okay. Awesome, then let's just add a fodder. Okay. That one that one looks pretty clean. Okay, perfect. That looks good. Okay. We can change some of these things afterwards. One of the things is for some reason, the width in the sizing, they sometimes automatically set it to 126, and you can see it here, it doesn't really look very good. And you can change it super easily, literally go to the element that is 126 and just set it to auto, and it puts it right. It basically sets it all up properly. But yeah, for some reason, it does that. But it saves me so much time building websites that I don't really care. I'm happy to change these, take 10 minutes just to change these because it saves me so much time building websites by using these ten plates. They are super helpful. Okay. Perfect. Awesome. I'm pretty happy with how the home page is looking. Let's start looking at building the next page, which I think is going to be the blog, I think. Let's start building the blog page. Okay. So again, the footer. Now again, for the footer and for the NAV bar. We are going to show you or I'm going to show you how to create a universal NAF bar later on. You do not have to worry about adding, you know, you know, the titles or anything else. Just focus on building the structure of the website. I know I keep saying that, but, yeah, it's really important because I just want to show you how you can literally build an incredible website in literally 45 minutes. Like we're literally going to it's going to take about 45 to 50 minutes to build this website. Okay. So let's have this block section here. Which is going to again, just make sure it's super on the left so that it doesn't intervene with any other elements, so it's on its own. Okay, that looks cool, and we're going to edit this afterwards. So don't worry. I know it doesn't look very fashion like or personal brand light right now, but I'm going to show you how to edit it a little bit later on. So do not worry. Okay, Awesome. Okay, we've got this. Now, we've got the SMS settings, which I I'm going to show you how to set that up because it saves so much time. So, for example, here, you can say I've got tons of articles. This saves me from creating lots of different pages for different articles. So instead of creating you know 50 or 100 different pages, I can just create one page. And, so this is, for example, the Lancaster Academy blog. You know, I've got maybe 50 to 80 articles in there and just one single page so that if I wanted to, I could literally have like thousands of different articles, and I never have to make the same page twice. It's literally just one page, and it just autopopulates it so it looks and feels, you know, super professional and brand every single time. But it's just taking the time to get it right once. Then once you get it right once, then you never have to create it again. So I'll show you how to do that a little bit later on and near the end. But for now, I'm just, showing you a couple of different things that you can do just to, you know, make the actual block page look a little bit nicer. So we're going to change the colors and stuff a little bit later. Don't worry about it, but this is what a good block page should look like. You know, it could definitely be improved. I could definitely tie you up the actual content a little bit. But this is ultimately what it should look like overall. Okay. So, and this is all the different articles that I have yes. So I've got 47 altogether, and I'll show you how to set up the different CMS settings later on in the course because this is going to save you so much time. And it does cost a little bit when you actually host the website if you do want the CMS settings. But by selecting the CMS setup, you can just make your life ten times easier. It's just it's such a worthwhile investment. So, for example, here, look, you can see that the name of the actual blog article is connected to the back end of the website, which is ultimately, you know, telling the page what to put. So it's telling them the title. It's telling them how many minutes reading time it is, what topic it is, what image to put. You know, it's driving the content forward. So it's literally so so helpful. And I'll show you how to do it a little bit later on, but honestly, that I cannot like, explain how much time this is going to save you. So, yeah, I just want to really, really get that across. But L Let's start to look at the our actual blog page. Let's start to look at k, so this is 126, so let's change that. Okay, so that's looking good. Everything's looking pretty good to be honest. It's not 1 million miles away. We maybe just take those off because we don't need three contributors. We don't need that. We definitely need a little sign up to the newsletter. That's definitely going to be helpful because as a personal brand, you really want to be growing your e mail list. That's literally the most important thing. So, Awesome. Let's do that. Blog articles, Awesome awesome awesome. Let's do that. Let's actually do the kind of the main blog page where we actually show all the different blog posts that we've actually created so that people can actually read our content. Okay. Which one looks best actually? That one looks pretty cool, but I kind of just want to see them all together. Okay. Yeah, let's use this one actually. Let's just see how this looks. And again, guys, remember, we're going to be we're just creating a structure right now. We're literally not focusing on anything else. We're going to change everything in, you know, roughly around 20 to 25 minutes. So do not worry. Hang tight and we will get through it, and it's going to look great. Okay, yeah, that was 126, so I just needed to change that. Again, we can change all the texts, you can see this here. This here doesn't look great. So we need to check that. Yeah, that's 126 as well. Change that. That's 126 as well. Yeah, so, I mean, this is a little bit annoying to change when you're using these readily made templates, but they save you so much time, honestly. So it's really worth it, you know? Perfect. Perfect. Perfect. That looks good. That looks good. That's gonna look so good when we actually get some, you know, blog posts in there. Okay. Let's move on to the contact page. Now, this page is going to be super simple, so we'll throw a NaF bar in there. Which is nice and easy. And again, we'll brand that a little bit later on. Let's also do the contact form. That one looks good, but I think Mm. Which one looks? That doesn't even look like a contact or section, does it? I think that one's probably the best, right? Yeah, that one looks good. Okay. Let's use that. Again, just make sure it's fully on the left. You can see on the right hand side there. You need to make sure it's not nestled in any other containers or sections. Okay. Perfect. So again, just take those of because that's 126. You can see when it's kind of scratched a little bit. You can tell. Okay, that looks good, that looks clean again. We'll change all the colors and stuff a little bit later. But that looks pretty good. I'm pretty happy with it. Okay. What's next? Let's do the privacy policy page, because, yeah, these types of pages are super important for pretty much any type of website to be completely honest. But especially for a personal brand, where obviously, you want to make sure that you just, you know, have everything in place legally. I actually show you how to get, like, your privacy policy text and all that sort of stuff a little bit later on. I'll show you how to do that because it's really, really simple. But, Yeah, it's just going to help you to get things in place really, really easily. Because, you know, nobody wants to write out a full privacy policy or even pay for one. That's definitely not what you want. So yeah, we're going to look for a section. I think I actually think just doing it like manually. We don't even need to use a template for this. Let's just add a section here. Just a normal section. Again, just make sure it's connected to the body. Then let's add a heading. Now, actually, let's add a container. So the container is just going to make sure everything's nice and responsive and it doesn't, you know, spill over to the sides. We'll add a header, and then we'll add the normal text, the paragraph text. Also, we'll add a little bit of margin in between those. On the top of the section. Then we'll also add a little bit of margin between the header and the paragraph as well, just to make sure. So this is the actual website that you can get you can get your privacy policy for. I'll add it somewhere in the course just so you can get it, but it's essentially free privacy policy. It's real really easy to get. And I'll add the actual link in the course somewhere. So, just make sure you check that out. And use it. But it's really easy. They will try and charge you for, you know, like professional privacy policies. But you know, at this point in your business, I'm not sure if you need it, but you can see here they're trying to charge you $24 $14, $24. You know, Ultimately it's a business, so they're trying to get money out of you, but you don't need to do it. They make it seem like you need to do it, but, you know, you really don't, to be completely brutally honest. Okay. There we go. So let me just go next step. Okay. It's asking me to do Yeah, we don't want as a professional privacy policy. Yeah, so yeah, just give me my privacy policy, and then we're all good to go. Awesome. You don't actually need to put your e mail in for this. You can just take it directly from here. But for some things, you do need to put your exact e mail. So, you know, you can put your correct e mail, but this is ultimately our privacy policy. All ready to go. Now we can copy it to our clipboard. Let's try that. Let's try copying it to the clipboard. And then we can try and get it to the website so that it's all formatted already, which would be great. And you can see, like, this privacy policy literally took me maybe I don't know, 5 minutes to make. So it was super fast. Let me check to see if they sent me the e mail. Okay, yeah, they sent me they sent me the e mail already. Okay, Let's see the best way to get it. Okay. So they've just sent me back to the actual page. Okay, I'm trying to figure out the best way to do it for you specifically, just to save you a lot of time. Well generate files. That's probably going to be the best bit. Okay. Perfect. Let's do that. Let's do a duck file. Okay. Awesome. And then let's open that. And then I think we should be able to just copy and paste this into rich rich text section. So we might have to change that. Let's do that. Let's just add this to a rich text section. I'll show you how to do that. We've got to download it. Awesome. So there it is. We've literally got a full privacy policy ready to go formatted with headers, subheaders, spacing, everything. We might have to tidy things up slightly, but, you know, this is, you know, this is there. So you can see there, the reason that that's happened is that's here a paragraph element. And we would essentially have to do all of the the spacing ourselves. And I don't think that's going to be that's going to be such a waste of time. So I think doing a rich text. There we go. Let's use this. This is going to save us tons of time. Okay? So we just literally copy and paste it again and look at that. I looked ten times better. Awesome. You know, maybe we put a little bit a few spaces in between things, but overall, you know, you can see everything, everything's there. You know it's all worded. Be sure actually check out. You can see that. It says free privacy policy generator. You can delete that if you want. That's just linking to the website to kind of get other people. You can see it again, their look. It tells you can just delete that. That's not necessary. But yeah, you can see that it's got everything that you need, and it's super quick and easy as well, and you don't have to pay for it, to get a privacy policy for your website. I think that's a little bit of a waste of money, especially for a start up. So yeah, we've got that. Perfect. Let's start the About Us page now because the About Us page is super important. We want to tell a story. We want to have a space where we can actually, you know, show people why they can trust us, what we can offer them, you know, what our positioning is in the world as a personal brand. So this is a great opportunity for that. So let's get some some sections in there to allow us to tell our story in a nice digestible way. Okay? This looks good. Okay, we can maybe add a video there, maybe. Mmm, maybe. Okay. So this is basically a lightbox. So what a lightbox is is when you click the lightbox, when you click the little player button, it will come up with a video or, or, you know, um, a picture even. So, in this case, it is coming up with a video. So we can change that video. So we can have, like, a personal branded video to tell people about us and, you know, why they ultimately, you know, trust us or choose us or buy from us. But, I don't think I want a video in this particular website. I think we'll just keep it nice and simple with a nice image. Let's find something that's just really clean. I'm not sure if there's actually anything in this one. I use this particular set of templates a lot, and I don't think there's anything in here that I can use. I mean, there probably is something, but I don't think there's anything that's, you know, going to be super groundbreaking. Okay. I mean, that could that could work, I suppose. That could work. I mean, it's clean, you know it's not too overbearing. Okay. Let's let's check some more out. Let's check some more sections out. And at this point, when you're actually building your about May page or about us page. Again, you're not wanting to overwhelm people. You just want to tell them a little something about you. You want to tell them, you know, you know, who you are, what you're about, you know, what makes you different, all that sort of stuff. That stuff's the most important. What I'm looking for now is I'm looking for some things so that we can tell them what we do. So the top section is always okay, like, what's like the overall mission? Like, what's like our overall positioning, you know, what makes us different? Then we can start to tell people, okay, like, this is what makes us different, but this is what I can actually offer you. So this is a service or, you know, our products that I offer and that I can sell you to, you know, if you're a fan or whatever. Okay, so yeah, let's try this section. Okay. Yeah, we can add those. We can arrange those. That's not an issue. That looks good. And we can just add, you know, maybe we don't need all four, maybe we just need two, but we'll see. At this point, it doesn't really matter. We can delete stuff afterwards. But, yeah, we just need to make sure. Sometimes this can be a little bit fiddly, by the way, when we're trying to get sections and put sections in sections, and, you know, it just it can be a little bit of a nuisance sometimes. So just be ready just to fiddle around with things. So we're just wanting to add a little FAQ section. And we've, there we go, we've just collapsed everything, and then okay, that looks pretty good. You can see here that's being squashed, so we're just going to okay. Yeah, we just need to take away the margin, I think. There's a 13 margin. There's always a 13 margin on images for some reason, and it's super annoying. But again, it saves you so much time. Yeah, it's worth it. Okay. So let's add this FAQ section down the bottom, and then that should be. I think that should be pretty much our overall about page, pretty much done. I don't think there's much more for us to actually do. Yeah. So we're just trying to figure out the actual structure of the page right now, just because we've got the pieces that we need, but we're just struggling to well, I'm struggling to get them in. Okay, that looks okay. Okay. We've got the photo at the bottom. We've got the the frequently asked questions section, Ah, why is this down here? Okay. Let's, let's get this changed to something else. Okay. Yeah. Actually, let's just keep this one. Yeah, that looks good. That looks good. Okay, then let's just arrange the so just collapse everything, so it's a little bit easier to manage. We add the foot down the bottom, and then we add the FAQ. There we go. Perfect. There we go. That should be good. Awesome. And that website page looks super clean, super professional. It's responsive, which basically means that it works on any device because it's already set. Let's just knock that down at two because we only want two. We don't want to overwhelm people. But that page looks, you know, super good. Okay. 65. Website Building: Personal Brand Website (Part Two): So, let's start playing around with the Napa. Let's actually start designing the website because we have the actual structure now. Let's start designing things. I changed the colors of the buttons to paint just to see what they look like. But right now, I'm just going to add some images and some icons and stuff, which I previously selected. So obviously, you can take some time to, you know, find these icons and, you know, images and stuff for yourself, for your own personal brand, or maybe your client's personal brand. But yeah, we're just adding a logo here, so just a really simple script logo, which I found on Google. So I'm just going to I think it says Evelyn's. So let's just make this website for Evelyn. So again, we've just deleted the little box, and that's literally just clicking on it and deleting it, like you would on a word document. We are going to's late that button there. The login button because we don't need it. But what we want to do is we don't need that home button because we can just get the logo, go to the link here. And then we can literally in settings, we can literally set it so that when you click the logo, it goes back to home really easily. And that's very standard with a lot of websites. If you click the logo, you go home. We'll do this to about me, so that's good. We'll change this to yeah, let's just do it a shop. It isn't really important at the moment, but I just want to make sure that we that I show you roughly how to change things, like text and images. And then, you know, you can do things yourself. Once you understand how to change images, how to delete things, then you can just do you know, things to your own liking. Okay, so welcome to my personal brand. Okay. Then we're going to change this image. Change it for this one. Okay. Perfect. Now, in regards to this section, obviously, you know, we haven't been featured in web flow or Zoom or, you know, content for or spotify or anything, or maybe you have been featured in Spotify, but we just want to add some more relevant logos of just like news outlets, Netflix, and stuff like that, just to make it look a little bit more realistic. Excuse me. But yeah, with the actual logos, with these types of sections, I like to keep everything the same color. If I can, just because it just looks a lot cleaner than having like tons of different colors. So I just had them all arranged in gray. So it just looks a lot cleaner. Okay, then, Yeah, you can just change the buttons to whatever you want. And obviously, you can choose, what you put in the text. You can change things however you feel fit. You know, I'm just showing you a rough idea of what you can do and, you know, giving you some ideas, and then you can just do whatever you feels best for your brand because it's your brand, it's your company, it's or your client. So you can use your expertise on what you've learned previously in our other courses on website design or this course, and just simply, do your own version. That's really important that you do your own thing. Okay. So, so now we're just going to change these icons. The way to change the icons is really simple. So instead of changing the icons, you can't actually change these icons. So instead, you just put an image, so you click the icon, then you copy and paste an image, and then you just size it differently and then just delete the actual original icon. So this is the original icon. You copy and paste the image. And then you just literally, just change it. So it's super simple. And obviously just make sure it's small enough to fit in the little bubble. And then yeah, these can be, you know, stand for, like services or whatever they want. Obviously, this doesn't need to change very much. I'm not going to waste your time and add reviews and stuff, because that's obviously something that you can do in your own time. But let's add some more relevant imagery for the blog. But obviously, you can use the CMS section for this, and I'll show you how to do that ale bit later on in about ten, 15 minutes time. Okay, so we just delete these because we don't need. But I think it's a little bit too busy. You can keep those if you want, but I just wanted to delete that for now. I think that, let's change the color of these buttons, because for some reason, the pinks just standing out and it just doesn't look good. So let's change it. There's a couple of ways that you can change it. I like the eye dropper tool. Yeah, that color looks a lot better. Okay. Awesome. That looks good. Okay. So now we can we might as well change this as well, so they can just change the image, and then just delete that. So delete, delete, delete, delete. And then it just formats for you already. Say, for example, you're not on Twitter, just delete it. Linked in on it, Facebook and Instagram. Let's just keep those two. Okay. Okay. Then obviously, with the links, just literally go to the link. Yeah. So when you're on your Facebook, you can just add your link here. And that's going to link out to your Facebook. You can click open a new tab as well, that's sometimes pretty useful. That just simply means that it doesn't take away from the website page, so they're still logged into your website or have your website open, but they just open a new browser in their phone on their desktop. So yeah, I wouldn't recommend having any more than three or four tabs in your footer. So yeah, we've just got a few different tabs here just to show you that you can change them, and it's really easy. You just literally just click the link. Here, look, the EI footer link. Then you literally just click the little cog, and then you can just choose whichever page it goes to. I'm just going to change the hover color. So for example, there we go. So we can basically change it so that when someone hovers over, it changes to a different color, and we can do the same with this one. So just literally click the link. Go up to hover. Then just disconnect it. That's really important. Click the little eye dropper tool. There we go. Then we've got we've got those two done, but we haven't done the resources yet. That's the thing that we haven't done. So we'll just get that. We'll do the exact same thing ho. There we go. And then we've literally got disconnected, disconnect. There we go. And there we go. Then we can just add the Hex code, and we are ready to go. We are ready to rock and roll. Awesome. Okay. I mean, obviously, you can add, different links in the Navar and stuff, but I just want to show you kind of roughly how you can do it just to keep things really simple for you. And then you can play around with fonts, and you can play around with color and figure out exactly what you want. But this is just a crash course in building the website. So what I'm doing here is I'm creating a component, so ultimately a universal Navbar. So what you do, and I'll show you again with the footer. So you select the element. So in this case, it's the footer, okay? So you can see how the footer is selected the whole footer. Okay. Then go to this little box, click Create new component, and then just label it, just create it. And see here, it's now green. When it's green, it means that as long as that element is green. No matter what page on the website it is on, it is going to be the same. So if you change it on one page, it's going to change across all pages so that can be super super useful. Okay. Let's start to design the blog page. Let's take a few things off actually because I don't want it to be too busy. Let's change the color. So change that, change that color as well. Let's change it to dark blue. Okay. I changes to dark blue as well. Why we just keep it actually keep keep it as pink. That's an image. So again, I just got a few images before arranging this just to make sure that that I had them ready, and I respected your time. Okay. So for some reason, that isn't loading. Let's just house one of these for the moment. Perfect. And then this content. So I'll show you how to set up the CMS in a second. And once you actually understand how to set up a CMS, It is going to literally change everything about how you actually work on web flow. It's super easy. Okay, so for example here, the Nav and the footer are both the old version. Okay? So now we can add the new version. Okay So add this up here, there we go. Oh, wait a second. It's not fully there. You can see how it isn't connected to the body, there we go. Now it is. That, so that's connected to the body, pull it all the way down to the bottom. Make sure it's to the left. There we go. Perfect. So now, if we change anything on the NAF bar on the home page, it's going to change sitewide, every single place on the website, where that particular NAF bar is, it's going to change. Okay, we can let's check out this blog page. Okay. So with the block page, actually, let's do that a little bit later because that's going to be how I can show you the CMS. So let's do that a little bit later. Contact ors page, this should be pretty easy. Again, you can change the e mail address, the phone number and stuff. I'm just going to change the color, and show you how to change the color because that's kind of the most difficult part. Obviously, I don't know what your e mail address is or your phone number, so you can change this however you want. But yeah, let's just add the NAF bar up here. Again, just making sure it's connected to the body. Then we choose the fodder. Okay. Perfect. I mean, that's pretty much done now. That's pretty much finished. So now let's move on to the about us page. Okay. Okay. Okay. Now we've got actually, let's use this one. I create a second about us page. And it was quite similar. But I just wanted to add a few other things just because it was I just wanted to make it a little bit more different to the home page. So yeah, so I just changed the structure slightly. But this is pretty much the exact same thing. So I will be doing the exact same thing. It's just a different layout. Okay, let's add a nice, nice, humble headline there. And let's add some I don't know. Let's add some images. I'm not sure what images we should use. Let's maybe add these ones. Let's maybe say that she's, you know, into photography or something, and maybe say that she is, you know, showcasing her photography skills. Awesome. These are just like stock images from a website that I found. I think it was pixels.com, which I actually mentioned earlier on in the course as well. And, you can just delete these elements or you can add text to them. It's completely up to you, obviously. I'm just showing you, kind of a simplified version of what you can do. Okay. I also take great photographs of photography. My work. There we go. So then we can just write a little bit. But the thing is, like, the reason that it's really important that we use templates and a little bit of spelling there. The reason that we use templates, and the reason that we set things up this way is to save us a lot of time and to also make sure that the website is responsive. So this website will work well, as long as you use the templates, and you don't change too much in regards to the form ing and you just actually, either delete stuff or, you know, change the actual text or the images, everything's going to be perfectly format. It's just the way that they're built. So, for example, here, look, you can see, you know, the little um you know, opening and closing of the FAQ section. That would take so long to create by yourself. By having it like that, it literally just makes it so much easier to build a website and to create a good looking website, which is actually functional. Okay. So in this little section here below the FAQ section, let's just add, you want to book with me. Yeah, you can book me below. Put, let's write something like book me. That's Pink hover over it. So if you want to change that, then just literally go there. Disconnector. L let's make it a little bit lighter. This curve here, so the curve that I've just showed you is basically, as long as you pick any color on that curve, it's going to suit the main color, so the darker color. That's a little tip for you. Okay. So the Nav bar on the foot is still haven't been changed, so let's change that. Okay. Okay, there we go. A with that, it isn't connected to the body. It's connected to the section. So let's change that. Is that's to that's connected to the body now. That's good. Awesome. Okay. That's fine. That's fine. That looks good. Awesome. Okay, let's start to look at the blog articles. I think that this is where I can show you how to use the CMS. This is going to be the best example of it. So let's keep things simple and just delete the tabs opening. You can add that if you want to, but it's a little bit more complicated, but I just want to keep things as simple as possible for now. And then if you want me to add an additional lesson to the course, then just email us and we can arrange it. So I'm just adding a container. And then within the container, I'm going to add a CMS component, which I'll show you once I open this and put it in the right place. There we go. You just click the little plus button, and then just the collection list. That's what it's actually called, but it's a CMS element basically. Put it inside the container. Then the source needs to be the CMS a collection, okay, which I'll show you how to do in a little bit. You can see here there's no items yet, but we're going to add some items in a second. Okay? So we can see that, empty state. So there's nothing there. We want it to be in a grid. So we're going to do collection list rubber and then press grid. This is going to break things up and we want three columns to suit the columns below. Okay. So we've got that there. That's perfect. Now the next thing that we need to do is go to the CMS setting. So this is the collection that we've got set up with the CMS, and we're just going to add five. They're just mock up ones. They're not serious. They just add like placeholders almost. So we can add those. Let's just a lat a few just to make it a little bit easier to manage. And then we can take one and just look at changing the thumbnail image. Let's just change the thumbnail image to something that we think is a little bit more relevant. There we go. That works. And we can just add block one, perfect. This one, let's just change it to blog two. We'll change change the actual Okay, change the image. And lastly, blog three. And you can see here that in the CMS section, it's so much easier to change stuff, and it's so much more organized. Now, this is actually a pre existing CMS setup for like my actual website so that I can show you all the different details and stuff, and I'm not just starting from scratch, but Like, yours is going to be a lot simpler and a lot easier to manage. Obviously, it's going to be unique to you. So at the moment, look, you can see that I've just copied and pasted the element, the elements from the design of the previous template. So, let me show you. Okay. Let me just try and figure out why that's not letting me paste that in. Okay. Let's add that collection list back in again. Go to block collections. Perfect. And then the wrapper. That's there. Let's open that out a little bit. Collection item. There we go. So now we have copied and pasted the element. So we literally just took one of these elements and we just copied and paste it in. So now we don't actually need this anymore. We just delete it. That's gone. Okay. Perfect. And the thing about the collection element is once you change something in one it changes on all of them. So instead of replacing the image, what we can do is we just click this little purple button here, and then we just literally click thumbnail image, and it changes it automatically. There we go. There we go. Perfect. Now, for some reason, so that's giving us a little bit of margin, so take away that 13, perfect. Now, for some reason, that middle image hasn't changed, but we'll change that later, a sudden issue. So we'll change this one to the title, see block one, block two, block three. We can change that if we one, we can connect it to the CMS, but for the purpose of this lesson, let's not do that. Change that to the content. And then for this. Again, here, look, if we change the link, link the current block section. This is what you want. So the actual title and the links in each of the collection items, you want to link them to the current current item section. So look here. Then current block collection, sorry. There we go. So this middle image hasn't updated. So let's go back into the CMS, block collection, block two. Ah, I didn't actually save. That's why. Okay, let's replace it. Let's go in, let's make sure it actually loads up this time. Seems to have loaded up, let's save it, and then let's check it. Let's make sure it updates. Does it work? There we go. Awesome. So now, we can add 50 1 million, so you can see that. I changed it to the topic to fashion on one single item, and I literally changed it on all of them. So this is the same for everything. You can have 1 million different articles. I think there's unlimited amounts of articles that you can create, and it changes them so easily. You don't have to change them one by one. That's the power of the CMS setup. So, we've got that set up now. Let's just change this Foer and Nav Bar, because that's annoying me. Okay, there we go. Let's have a little look. Bah bah, bah, bah. There we go. And let's just change this. And obviously, this might take you a little bit longer than 45 minutes, but I'm just showing you that if you have all of your images ready and everything formatted you, you know, with a little bit of practice, you can get these done like super super fast. And it might take you a little bit longer the first time that you do it, but afterwards, it's going to take you no time at all. Okay. So I mean, we've got a pretty a pretty strong website here, wait for this to load. But, you know, like, we've literally built this in, you know, 45 minutes flat. The website is responsive. You know, you know, it's took us 45 minutes to create this website, and it's literally I mean, you can actually add the CMS, by the way here as well. So you can add the exact same function and limit it to three, so you can just show, like, the most recent articles, for example. Um, Yeah, just to let you know about that so you don't have to do that manually. But I mean, the website overall looks really good. I want to show you a couple of things in regards to settings before we finish off because that's just going to help us to finish of everything. But yeah, I mean, you know, in 45 minutes, we've managed to build I mean, if it loads a little bit quicker, that would be fantastic, but I think my Internet was just running a little bit slow. You know, when you can build a website, which is responsive, ready to go in 45 minutes, you can't really, you know, complain too much about that. You know? It's pretty awesome. The fact that you can do that. Okay, so let's have a little look at this. Okay. I mean, all the pages look good. The static pages are the most important things. So for example, you know, this here is on a static page. So this is here is on a static page here. Okay. But for the article, for example, if you want the page to auto populate by itself, then you need to create the actual CMS collection pages, which is, here's an example of one here for the Lancaster Academy website. So for example, if I change, if I create a CMS element or a CMS article, it auto populated to the actual page, and it creates a separate page without creating an extra page if that makes sense. So, you would just click here. I don't think I've got too many, so it's not going to let me I would basically have to upgrade my plan, but the CMS plan is perfect. So let's just show you inside the blog collections. So you can see here, I've got tons of different elements. Sorry, I I've just hack upped. I've got tons of different elements like the rich text, image link. Those are the main ones that you're going to use, plain text, rich text, image, video link and link. You're not really going to use much else, but you can use other things if you want to. Just create the things that you need that you need, commonly on every single page. Then just create them. It's really, really easy, really, really simple. Okay. Let's look at some settings now. Let's go to the site settings bar. Now, the first thing to mention just before we finish off is the favicon and the web clip. So this needs to be 32 by 32 pixels, and this ultimately goes you know in the tab every time someone visits your website. The web clip needs to be 256 by 256 pixels. Now, in regards to plans, you can just stay on the starter plan, which is free, but you can't connect a custom domain. The CMS, option will actually allow you to set up the CMS, which again, is super super helpful, so I would really recommend it if you have the money to invest in it. And it also gives you a custom domain as well, which is great. The basic option basically gives you the ability to connect the domain, and it gives you slightly faster hosting, but it doesn't give you the CMS option. And then once you have a plan, either the basic or the CMS option, then you can add your domain, which you've just seen there. The form option, so make sure you add your e mail address here. This is where if anyone gets in contact with you in regards to your contact DS form or anything else, then I'll contact you there, but then once you're finished, just publish it, and your website's finished. It's all done. Yeah, good job. Okay. I'll see you in the next lesson, but yeah, thank you so much for giving me the time to go through this with you, and I hope you have a great day. See you soon. 66. Website Launch: Getting your website on Google's Page #1: How can you get your website ready and get on the first page of Google as fast as possible? Well, there are some key things you need to keep in mind when you're actually getting your website, SO ready. In this lesson, we're going to cover all of them. Now, the first thing you need to get in place is your keywords. Now your keywords are essentially the words that you can be associated with for your brand and what you can actually offer, which are unique and distinctive to your specific brand. Basically go to Google Keyword Planner and then search for relevant search terms that someone would put in new Google in order to find your brand. Basically, think about the words that you want to be associated with for your brand. Then check the Google keyword planner to make sure that there's enough search volume, which basically means that there's enough people actually searching for that particular term or word so that you can make sure that there's enough people searching for that term to find you on Google. Now, another thing to check is to see which terms and keywords have the least amount of competition. The trick here is to make sure that the search term that you're being known for is as unique as possible. Therefore, when someone actually searches for it on Google, you're more likely to pop up. Now keywords are not the only things that you need in order to get found on Google. Other thing that you have to really have in place is on page SEO. This basically means making sure your headlines and sub headlines are all relevant to the type of thing that you're offering. This is going to help customers to actually find your products online, and also make sure that when you're adding images to your website, make sure they have a descriptive text attached to them so that Google can actually recognize what the image is about and what it's relevant to. Also make sure all of your URLs are nice and clean and concise. For example, don't make your URL super long or add unnecessary words because Google is not going to know what to do with your URL, and you won't be found on the first page anytime soon. Now, another thing which is really important for SEO and getting found on Google is quality content. This is actually one of the approaches that I've personally taken for every single one of my businesses to make sure that people are finding my website and ultimately then going on to purchase my products and services. Essentially, when it comes to quality content, this means writing blog posts or maybe posting videos, to keep users on your website. Google cares about two simple things when ranking your website. One, how long the user spends on your website. Because the longer someone spends on your website, this tells Google that the quality of the content is a lot higher, and also the relevancy of the content to what the person is searching for. And these two work hand in hand to tell Google, when someone searches for this particular search term, if you show them this page, they are going to be satisfied and get the answers that they're looking for. Google essentially cares about giving the person what they need as soon as possible in the best way. So if you can actually resolve that problem and give them the best, then ultimately they're going to spend more time on your website, and Google is going to work in your favor and put you at the top of page one. Now, another thing to keep in mind is page speed. Now, you can literally find online tools to check the speed of your website, by just Googling, check my website page and then you just add your URL. So that's super easy to check, but make sure that your website is as fast as possible. This means not adding really long deep and big files as videos on your home page, because that's going to ultimately increase the bounce rate. And when I say bounce rate, I basically mean people coming to your website then leaving straightaway if your website doesn't load instantly. So simply make sure your website loads really fast, and it's going to allow people to get to where they need to be and spend more time on your website because it's going to provide a better experience. Now, another thing that you need to make sure of is user experience. Now, we've already covered this early on on the course, but making sure that the customer or the person can get to where they want to be in nice, easy to follow steps is really important. This means that they won't get frustrated and they won't tick off the website, and they'll spend more time there, which will tell Google that your website is high quality, therefore, given it a better chance to rank highly. Now, a few other things which are really important for your website are internal linking and back linking. Now, internal linking is where you have lots of different blog posts, and they all link into each other to ultimately build a network of blog posts that all compliment each other nicely. For example, in one blog post, you could be talking about the same subject, which you've already written another blog post on, so you could link out to that blog post to keep people on your website for longer. Now, back links are slightly different. Back links are essentially links from other websites that Google already knows and trusts. So, for example, if you were a brand new company and you're just building a website from scratch, you could always reach out to different websites that are in your niche to ultimately back link from your website pages to theirs and vice versa, to basically share traffic and also build some trust with Goole in the meantime. Now, I know this is a lot to take in. But personally, what I would do if you feel a little bit overwhelmed is just to focus on creating high quality content and blog posts on your website. This is something that I've did personally for each one of my online businesses, and it works extremely well. Simply because when someone comes to your website and they say you have lots of quality content on there, they tend to trust you a lot more. And ultimately, if they spend more time on your website, then Google trusts you a lot more too. So anyway, I know this isn't an SEO based course, and we May 1 in the future, but in this case, we just wanted to give you a quick outline as to the things that you can be thinking about when you're building the SEO and your digital presence for your website. However, if you have any questions in regards to the SEO, please feel free to reach out. I'm more than happy to be as supportive as possible. But other than that, I shall see you in the next lesson. See you soon. 67. Website Launch: Securing a great domain for your website: So why is it so hard to find a great domain for your website these days? Well, ultimately, just to give you a little bit of a backstory, people have started buying domains over the past couple of years and then selling them for a premium. So, for example, if someone came across a domain for $20, which is generally how much a domain should cost, and they don't want to use it personally, but they see it as a domain which someone else could potentially use for a business or for some sort of project. What they'll basically do is they'll buy the domain for $20, and they'll pay $20 per year to keep it. And then when someone else comes across that domain and searches for it, they will list it online at a premium for maybe four or $5,000 at minimum. Now, I think this is one of the worst things about the domain industry. I actually work with a lot of companies to help them find the perfect brand name aman. One of the things that a lot of companies want is a great demand for their website. Now, to be completely brutally honest, if you're looking for a brand name, which is less than six letters, it is going to be very, very difficult to find a domain anywhere 2-5 letters, which is available, and especially available at less than a very high number when it comes to the cost. And not only available, but it's probably going to cost you an arm and a leg if you actually want to buy it. Now, do not worry. We've actually got a couple of really interesting tricks that you can use to basically get a domain which is super valuable for your business, and also saves you a hell of a lot of money. You may already have your brand name in place. And if you're completely set on your brand name, then a great method to use, which we use all the time with clients is to add a relevant word. For example, if you're in a commerce store, then you could add something like store, for example, or you could even add shop before the actual brand name. So for example, if your brand name was Nike, then it could be shop nike.com. Or potentially, you could always add store at the end, which is essentially nike store.com, or if you're an agency, for example, you could always use the word agency within your domain as well. Basically all you need to do is make sure that the word that you add is relevant to what you're both selling now and also what you could be selling in future. And actually, there's a lot of businesses that if you can't afford the clean.com domain, so just your brand in the.com in the initial stages of building your business, a lot of businesses, including Facebook in the very beginning, by a domain, which is basically just a $20 domain with an added word in it, but later on when the business is super profitable, they buy the claim.com domain because they have the funds to do so. So that's the first approach, basically adding a simple word that is relevant to what you do and what you offer to your domain name. Now, if that approach doesn't work for you, then you can always just pay a premium. Now sometimes you can negotiate and get a really great deal for your domain name. And ultimately, the person who wins that negotiation is the one who cares least. So if you have a backup plan like adding a word and you are offering someone really good money who's been holding onto this domain for quite a long time, you could get it at a pretty decent price. Now, obviously, not every person selling a domain is going to be the same, so someone going to be more orbit to negotiation and others, well, not so much. But all you can do is just inquire and ask the question, and if they come back with a ridiculous price, it's probably best to look at other options. Now, another really clever way to get a really great.com domain is to change the spelling. For example, we had a brand that we worked with a little while ago called Spruce, but instead of using the common spelling of SPUCE, actually changed the C to an S, which still came across as spruce, but it essentially had far more distinctiveness. It was better for SEO, and it also helped us get a claim.com domain, which was only five letters. Now this is actually almost unheard of when it comes to finding domains with five letters, and that looked that great. But we managed to find it, and we just got super lucky. So feel free to check that out if you really want to and try and use this approach to see how lucky you are when it comes to finding your domain. Now, if you don't want to change the spelling of the name, you don't want to pay a premium, and you also don't want to add a word. There's always the option of changing the extension at the end. Now, most people do want a.com domain to be completely honest, but it's not the only domain out there. There are lots of other options. So for example, if you're based in England or France, for example, you could use dot at UK or do fr, which is relevant to your particular geographic location. This may be not the best option for someone who's looking to do business internationally like in a commerce brand, for example. If you're looking to just focus locally, that could be a great option for you. If none of those options are working, and you're not even that sure about the domain name that you're looking to use or the brand name that you have, then it could be worthwhile exploring a different brand name altogether. Over the past decades, both myself and my team, at Clement Tn House Brand agency have helped thousands of different entrepreneurs using our unique approach to brand naming to find the perfect brand name for their company. Now, unfortunately, we awfully booked down until 2025. However, we do have our process set as an online course, which you should be able to find if you check out our profile. So make sure you check that out, and that could actually help you find an incredible brand name for your business. I really hope this lesson has helped you to understand how to maybe get a really great domain name for your brand. But other than that, if you have any questions, please let me know I am here to support you and help you as much as possible. But I cannot wait to see you in the next lesson. So I shall see you there. 68. Website Launch: Adding a custom domain to your website: How do you attach a custom domain to your web floor website? Well, it's actually really simple. So let's dive in and I'll show you how to do it. So the first step is to actually come to your website. Now, this is obviously the Lancaster Academy of Design and Brand website. And when we go to this section here, you'll see a little button called Site Settings. So that's where we want to go. Now, when you click on Site Settings, you'll then be taken to this page, which then just leaves you to click on Publishing. And you'll find yourself here where you see production and your custom domains below. Now, as you can see here, I already have custom domains attached to my website. But if you just look above those domains, you can see a little button that says add custom domain. Now, the best way to add a custom domain in my experience, if you have your domain with either Go Daddy or Google Domains, for example, is to simply just select Quick Connect domain. Because what that will do is essentially open up a quick selection process where you can ultimately start to add your domains or WWW dot, domain.com. It actually takes away the WWW dot as well, and then click Continue. It will then analyze the domain, detect the DNS provider, and then we will also start to actually set up the details. Now, obviously, I don't need to connect this domain to this particular website. Once you've connected your domain using that approach, it's really simple to get your domain published. Now, sometimes it takes a little bit of time for the DNS settings with your domain. Connect up with the web flow platform, and that can take anywhere between a couple of hours to 48 hours. But once it's been successfully linked and everything's perfect, it will see connected beside each of the domains. And at that point, all you need to do is actually publish your domain by clicking this button here and then pressing publish two selected domains. Now, if we go to another website, I just want to show you what it looks like if you don't have a domain readily attached to your website. Now this is basically telling me that if I want to add a custom domain, I need to add a paired website plan. Now in a previous lesson, I actually showed you the different website plans, and ultimately, that should help you make the best decision based on what's best for you. But ultimately in this situation, I need to click on this button and then choose a website plan which suits my personal needs best. Now, just to summarize, again, the startup plan, you cannot add a custom de me into this particular plan. Now, the basic plan is for you if you don't need to add some sort of blog or some sort of CMS function. But if you need to add a blog and you want to actually add content onto your website, then choose the CMS function because that's the most popular because it's simply the best. Go for the CMS option for every single one of my websites, and I always pay yearly just because it helps to save a little bit of money. Now, obviously, if you're an e commerce brand, you need to make sure that you select an E commerce site, and usually the standard is going to be more than enough for you. So once you select a plan that's best for you, simply pay for it. And then when you go back to the page, you should be able to connect your custom domain using the technique that I showed you earlier in this lesson. But anyway, if you have any questions or anything in regards to connecting your domain, please let me know. I'm more than happy to try to help as much as possible. But other than that, I hope this lesson was helpful, and I will see you in the next one. 69. After Launching: Installing Hotjar: What is Hot jar? How can it help you improve your website over time and get ultimately a better performance from your website? And how do you install it? Well, Hotjar is ultimately a software where you can track exactly what your website visitors are doing when they visit your website. Using the Hotjar platform, you can literally see every single mouse movement that someone makes when visiting your website to make sure that you know that your website is performing and doing what it's supposed to. Because, as you can see here, I literally have hundreds of recordings from all around the world of people who have found my website and are ultimately leaving recordings so I can actually see exactly what they have done on the website, why they have visited, and also why they didn't buy if I'm trying to sell them something. This basely helps you find out exactly what's happening within your website without doing any guess work and wondering if you're right or wrong. Because you can actually see the mouse movements that the person is making on your website. You can see what they're clicking, what they're hesitating about, what they're not clicking. Maybe if a button isn't working, that should be. You can literally see everything, and you can refine things and perfect things as you go. Now, the best thing about the software is it's absolutely free, and you don't have to pay a single penny for it up to a certain number of website visitors. Now, once your website gets super busy, you can basically get 100 daily sessions instead of just the 35. But I personally feel like 35 is plenty for me. It just helps me to see a couple of sessions every single day and refine my website based on those sessions. Don't feel the need to upgrade to 100 sections or even 500 sections because I don't feel it's worth it for me personally. And I actually wouldn't suggest you to do that either until your website is getting a great amount of traffic. So obviously, we know the benefits that can come from seeing every single website visitors performance and behavior on your website. You can help you overcome challenges and refine your website more easily and a lot faster. So how do you actually install Hotjar onto your website? Now with webflow and Hot jar working so effortlessly together, it makes it super simple, and I'll show you how to do it in this video. Now, the first thing you need to do is to create an asset on Hotjar. So if you go up here and click Add New site, Then you can just add the apa add new Scott Limited, ad organization. Then ultimately, you would add the name, which is scotlncaster.com, for example. Site URL. Let's just use the exact same one. In the industry sector, Let's CT commerce. I hereby declare that I own this site Ad site. Now, make sure you actually copy and paste the link into this section because for some reason it doesn't like it when you don't put the HTTPS in front of it. Then just click Add site. And then you'll basically be taken to this page where obviously, I have a lot of different websites that I'm managing at once with my branding agency. So at this point, you simply go to this particular section, which is relevant to your website and click Install Tracking Code. This may seem a little bit scary, but it's really easy. Trust me, Let's follow it through step by step. Now, if we click Install tracking code, you'll see this code here. You do not know anything about code to install this on your website, and I'll show you exactly how to do it. So all you do is go to this top button here and click Copy Code. Once this is copied, simply go to your web flow website and click on site settings. Then when you come here, simply click on custom code. Now, remember, we're not doing any coding here with just copying and pasting. It's the same as copying and pasting text in a word document, and it's super simple to do, do not worry. Now once you get to this section, you're going to have head code and photo code. Now, the head code that you need is where you want to be pasting the text. Now, you'll see here that I've actually pasted this text here. Now, this is the exact same text that I have on Hot jar. It literally says Hot Jar, and it ends with script. Now, once you add this, this is obviously the one for Lancaster Academy of Design and Brand, which is a little bit different because it actually has the different business name, and it obviously has a different set of code behind it. But it's the exact same thing. All I did was press copy code and then added it in the head of code. And once you do that, all you need to do is press publish, and then go back to Hot Jar, and basically verify installation. And what will happen when you verify the installation is it will give you a nice green take, and you know that Hotjar and web flow are working together to start to track your website visitors. Then anytime you want to see any of the recordings from your website, you simply go to hot jar.com and you check them out because they'll be all nicely organized for you and you'll be able to see them and review them and research them to make your website better over time. I actually review my hot jar data every month to simply see why people are coming to my website, what they're doing on my website, if there's anything like can improve Then I block out time throughout the month to basically improve the website, so my website is constantly getting better and better as time goes on. I always do it the first or every month just to make sure that I'm staying on top of everything and that my websites are working perfectly. Any, if you have any questions in regards to Hot job, please let me know. I'm always here to support and help, but that should be pretty straightforward, and I look forward to seeing you in the next lesson. See you soon. 70. After Launching: Creating A Website Marketing Strategy: Okay, so you've built an incredible website for your business. So how do you actually start getting traffic there? So people can actually buy from you and find out more about what you have to offer? Now, this all comes down to website traffic, and developing a marketing strategy, which can help you get relevant website traffic to your website so people can find out who you are and how you can help. Obviously, this is a website development course to help you build an amazing website to represent your brand perfectly. But if you think it would be useful for you to learn how to develop an actionable marketing strategy for your brand to drive relevant traffic to your website to ultimately get you more customers and generate more revenue and sales, then the next course in the Brand Builder P program could be exactly what you're looking for. And within that course, we help you set your business and marketing objectives, and then help you get there no matter whether you have the biggest budget in the world. No budget. Ultimately, we wanted to give every single entrepreneur, no matter how much money they had the blueprint to help them get their marketing perfect. And within that course, we cover the marketing funnel, which is essentially what every single business out there uses to generate customers for their brand. Now, this is a four step process, and it all starts with awareness. So ultimately, the first step of getting someone to actually buy from you is to make them aware of what you have to offer them. Now, there are tons of different ways to do that like YouTube Instagram and tons of other ways that are completely unrelated to social media, which we actually cover in the marketing course in more depth to find the best solution for you. Ultimately, if someone doesn't know who you are or what you can offer, then they can never buy from you. But once they do know who you are, the next step of the funnel is consideration. Now, this is where they actually consider you as a potential option or a potential solution for their challenges. This is where they are checking out your website. They're trying to learn if you're the right option for them. And then ultimately once they have decided that you are the best option and the best value for that particular situation, Then goes to the third stage, which is conversion. This is where they actually buy from you. This is where they take their hard earn money out of their pocket and give it to you in return for what you have to offer. Now your website is a key part in actually getting that conversion successfully. Because if your website isn't up to scratch, which if you've took this course, then it should be, then ultimately you're never going to get that conversion because your website does not trustworthy, and it's going to not give the customer the peace of mind to put their hand in their pocket, give you their cash, because they're not going to believe that the thing that they receive in replacement for their cash is going to be worthwhile. Basically, a customer feels peace of mind when they feel they are going to get what they expect or maybe even an exceeding of their expectations when they give you their money. This is why brands actually exist, because when we give a trusted brand our money, we know we're going to get something in return, which is in line with our expectations. If we've never done business with a person or a brand before, then we ultimately feel a little bit uncertain when we are handing over our money because it's a little bit more risky. Now, you're probably wondering what the last step of this marketing funnel is. And that is ultimately retention. Now, once you've converted a customer, you've put in so much effort to actually get that sale. The next best thing to do is to keep that person loyal to your brand and what you have to offer. This is why brands like Netflix, for example, and also Apple are super lucrative businesses, because ultimately they can have reoccurring revenue because they're getting paid on a consistent basis every single month. For example, I may have bought these headphones and this computer from able, but I also pay $10 every single month for my Cloud, where I basically store all of my files. This is money instantly going into Apple's pocket every single month. And the only way I can take that back from them is to ultimately take all of my files and put it somewhere else. Isn't really worthwhile. Netflix is the exact same. If you stop here Netflix, then you stop getting access to all the great content. So ultimately, you basically just give Netflix the ten to $12 a month so you can enjoy your lazy evenings with your partner. Now, this is actually something which we cover in a lot more depth and a lot more detail in the marketing course. But obviously, we want to respect your time here. Now, in regards to building a business, In your first customer or getting a customer is the first step. But keeping that customer is where most of the profit is made. So if you can try to shift your business model to ultimately sell more to that single person to really maximize the CLV, the customer lifetime value, then you can get more juice out of every single orange that lands on your website, AKA customer. Ultimately get as much revenue as possible within the shortest amount of time. Now obviously, it's a little bit more complicated than that. And obviously, we can't cover it all in this particular course because this is primarily a website development course, but feel free to reach out if you have any questions whatsoever, I'm more than happy to help and be supportive as possible because I want to see you succeed. Anyway, I hope you find this lesson helpful, and I will see you in the next one. See you soon. 71. After Launching: Refining your Website to Optimise for Conversion: How can you refine your website to optimize conversion and performance? Well, the first thing that I would highly recommend that you do is book in one day per month to check out your hot jar data. Now, if you checked out the previous lesson in the course on how to install Hot jar, you should have that on your website already, and you should be ready to go. Now once you have it installed, book one particular day per month, potentially the first of the month, which is what I use personally, where you basically take some time to view all of the viewings and all of the people who have viewed your website and actually did something on your website and maybe clicked or just explored within that month. Now, ultimately, this could be quite a few recordings if your website's popular. And if it is, that's fantastic. But what I would suggest is spending as much time as possible reviewing those recordings and then just taking notes by the side to basically say, Okay, On this particular page, people tend to not find the call to action button very easily. How can I take that button and make it more prominent on the page? That's something that I learned very recently within a particular page on one of my businesses, which ultimately allowed me to increase my conversion rate for leads generated by up to 4%. Originally, I was only getting 2% conversion, and then that show up to six just by that one single change, which even if you're ballot math, you can tell is a pretty decent result considering all I did was change one single button on the page, which leads me onto my next approach when it comes to actually optimizing your website on web flow? Now, this all comes down to something called AB testing, which is not rocket science. It's actually really simple, so do not worry. Now the thing that's really important to remember when you're testing different things on pages is not to change too much in one go. For example, if I took that page with that single button, which I changed and I changed three or four other things on the page, then I would never know what was actually impacting the higher conversion rate. It could have been the button, of course. It could have been the headline change. It could have been the foota change. It could have been the image change that I did. If I did all of them in one go, then I wouldn't have any data to reflect on the new behavior. So what's actually far better to do is to basically take the existing design and change one single thing before then going on to change another thing and slowly, but surely getting better and better as time goes on. Because, for example, if I change that single button and the conversion rate got worse, then I would know to put that button back the way that it was. And if you can track this and you can keep an eye on this and take a very gradual approach with how you are, designing your website and improving it over time, then gradually, you're going to end up with a far better result at the end of it. But what most people do is they try to rush try to change their entire website in one go. And they don't have anything to compare with because they don't know what's working and what's not working, so you're constantly in the guessing game. I actually had a website where I built it for a client. It cost around 15 grand. And within two weeks of me handing the website over to the client and basically making sure that they had everything in place, they ultimately changed pretty much the entire home page. Now this obviously wasn't ideal because we didn't even know what was working and what wasn't working. We were simply just as knowledgeable as we were at the very beginning when we had zero data. Now, people are being going to the website, and luckily, I managed to catch it and kind of get back to close to what we had before before things got too messy. But ultimately, we need to make sure that we take a very careful approach when we're developing our website, when we are optimizing things, when we're trying to improve things. Because if you have nothing to compare it with, And you don't really know if you're improving or not. You don't really know what's making the improvement. And therefore, you kind of just stay in the same place or even worse. Now, it does take a little bit of time and it does take a little bit of patience to really do this approach properly. Now, if you have any questions in regards to using Hot jar or maybe assessing your website data, please feel free to reach out. I'm here to support you in any way that I can. I truly want to see you succeed, so please feel free to reach out if you need any additional help. But I hope you find this lesson helpful, and I look forward to seeing you in the next one. I'll see you. 72. After Launching: How to know when your website is perfect: So, how do you know when your website is ready and perfect? Now, at this point, you've put in a lot of work to understand how to build your website, and you've probably got it to a place where you're fairly happy with it. But how do you know it's right? Well, there are a few things that you need to know when it comes to actually building a website and knowing when it's perfect. And the truth is, it's never really perfect. And the reason that I see that is because there's always room for improvement. Now what I offer, every single student that invests in this course, for me to give them a little bit of feedback in regards to their website design. Now, you've invested in this course and ultimately trusted me to guide you through this process. So the least I can do is give you a little bit of feedback in regards to how your website looks and feels, so you can make it the very best that it possibly can be. And in order to do that, I actually need to see your website. So once you finish your website, share it with me as a project on this course, because it's going to essentially make sure that I can give you the constructive criticism or just tell you how great you are so you can feel fully confident that your website is ready to be published. And I want 100% promise that if you share it as a project On this course, I will want 100% to get back to you and give you full constructive criticism and any feedback that I have to help you make the website better. Now, you don't have to listen to all of my advice, but I just want to give you my honest thoughts that you can make the best decision for your business and your brand. And once you've actually done that and you have your website perfectly in place, the next step is to actually start to drive traffic to your website. Wanted to really briefly cover the steps of a marketing funnel just so you understood what part your website played in converting someone who was completely unaware of your brand initially into a paying customer and how that all worked. But in order for you to create an actionable marketing strategy for your brand and your business and actually start growing your brand and business, need to have a strategy and a plan in place to drive website traffic to your website so they can buy from you. But in order for you to actually start driving traffic, so your website can start converting them into pay customers, you need to have a plan in place to actually get your marketing right. And if you've taken any of our courses, and if you've taken any of our courses in the Brand Builder Pro program already, then you'll know that the next step in the Brand Builder Pro program is your strategic marketing course. This is going to cover everything you need to creating an actionable marketing strategy that works in the digital world that we're in today to drive relevant traffic to your website so that you can create more customers, generate more revenue, and ultimately more profit. Anyway, I'm so thankful for you investing your time and your energy into trusting me to help guide you through this process. I cannot wait to see the website that you create. Please make sure you share with me anyway that you can, and I look forward to seeing you hopefully in a future course. Thank you so much, and I will see you again soon. 73. Website Project Time: Just want to give you a little bit of a takeaway, just to test your knowledge. Now, I want to make sure that you ask any questions that you have in regards to strategic website design, but I also want you to just take a screenshot of a website that you think is perfectly designed and uploaded as a project on this course. And this website could be on Pinterest. It could be something that you find on Google. It could be a website that you actually know. It could be even a website that you've built that you now know follows the key rules to strategic website design and beautiful website design for that matter. So make sure that you share at least one website as a project on this course, just to show that you understand the key fundamentals in regards to strategic website design. And feel free to leave some notes as well. I want to see that you understand the lessons that we've taught You always know that I am more than happy to support you and all of the other students that invest in our courses as much as possible. So feel free to reach out. If you need to e mail us, please feel free and check out our website. We've got tons of other tools and resources on there to help you on your brand building journey. Thank you so much, and I will see you in the next one. Se.