Squarespace 7. 1 Essentials - Beginners Guide to Building Professional Websites

1. Introduction: So there are other Squarespace tutorials out there. But I wanted to create one that was up-to-date with the latest changes squarespace have rolled out. And one that helps you first decide whether Squarespace is the right platform for you. So we'll look at some of the pros and cons of using it. And then lets you quickly start building and cuts through a lot of the unnecessary advanced options. We're not going to go through every menu in detail, but I'm going to show you the quickest possible way to start designing something that looks polished and professional. Squarespace is a fantastic option for those wanting to dive into professional web design. Minus the long learning curve of options like WordPress, which I also used by the way, if you're great at designing and creating, but you don't like the idea of coding or developing, then this is a great option. You can really create very impressive results with a minimum investment of time. Hi, I'm Jason Miller, a graphic and web designer based in London. I have over ten years experience, and I've spent over seven years working with both Squarespace and WordPress as platforms. So this class is divided into three parts. Firstly, I'll provide a comprehensive overview and answer some frequently asked questions, which I'm sure you have two. What is Squarespace? What are the pros and cons of using it? How long will it take to become familiar enough to build websites? And how much control or freedom to Squarespace give you over your design. After the first section, we should be in a good position to decide whether this is for you or not. In the second section, I'll give you a refined streamline tutorial on designing using Squarespace. This section is really designed to orient you and get you designing and creating using the platform as soon as possible for best results, I'd recommend following along and actually creating your own sample website. As I guide you through this, I'll be creating my own sample website for evoke brewery, fictional brand I created in my last Skillshare class. Lastly, we have an understanding of how Squarespace works and having now created your own sample website. I'll share with you some tips, tricks and best practice. But I've picked up at during my time creating websites with Squarespace. And that's it. The class project is to follow along and create your own sample website using a free Squarespace trial account. So I'm ready for this. When you're ready, let's get started. 2. Is Squarespace for me? FAQs: So frequently asked questions, a good one to start with is, well, what is Squarespace? Squarespace is a platform just as social media apps like Facebook or Instagram, they allow you to present and share content. Squarespace is a web platform, so it allows you to create, organize, layout, and then share with the public. Content from a website of a web platforms include WordPress, which is perhaps the most widely used, Wix, Webflow, and others. So no web design in itself isn't too advanced. Perhaps at first, you have to have a knowledge of servers hosting, coding. So there was quite a steep learning curve. But these days, many of the items we designed for digital use, they end up being shown on a website. Anyway, the difference between web design and designing, say static pages on an app is often the software, the interface that you're using. So SquareSpace for all intents and purposes, it acts like an AP, an interface. A platform is a technical term that you login to, then you use to design and create your layouts. It can be as simple as that, but it has the ability to go a lot deeper and offer some advanced features if you need to take advantage of them. I would say these days if you're a graphic designer, it's well-worth branching out into web design. And Squarespace is a great place to start because it's not too advanced. You can use the principles you would use on static design and immediately translate them into creating beautiful websites. Most, if not all of your clients are going to need a website at some point and they'll love it as their preferred designer. You are able to take care of this as well. So it doesn't take very long at all. I would say, to become familiar with all of the options, all of the advanced features will that can take weeks of use. But to create something that's professional, that's fit for purpose, you could definitely aim to do that within a day, if not a few days. Squarespace actually market their platform as a tool that's so simple that individual business owners can use it and create something professional. Now that might be true if someone's simply swapping content in and not making any other changes. But I think to really get to grips with it and to understand best-practice, it does take a little more investment of time than that. All of this said, my goal is that by the time you finish this short class, you'll be in a position to create something that's professional. You will understand the essentials you need to create on the client's behalf and you'll feel very familiar with Squarespace on the whole. So for results can look very professional indeed. In fact, if you looked at my portfolio, I think you'd struggle to tell which websites were created using which platform. I don't think it would be obvious which sites have been created using WordPress and which sites using Squarespace. That said, we're awesome. Advanced features about a platform like WordPress offers of at squarespace isn't really designed to cater to. So e.g. if you had a client who was a real estate agent and you needed to create essentially a database that would list different properties and serve results, answer search queries will then WordPress would be your platform. But for the large majority of businesses who want a website to really showcase their brands to provide information, Squarespace is an excellent option. So there are a few limitations and we'll go through some of those in the next lesson with are pros and cons. But one of the key differences is that WordPress is open source software, so it welcomes contributions by a larger community. And many people have created various plugins that you bolt onto Wordpress and that enables you to solve specific problems in a bespoke way, Squarespace does allow you to add a few third party modifications, but there's nowhere near as many as WordPress has to offer if you have a look through the sample templates, but squarespace offers, you can generally tell quite quickly if it has more features you're looking for or if there's something more bespoke, but it won't be able to cover. Squarespace does allow a very wide range of customization, but it doesn't allow you to customize beyond the features for the preset. So while WordPress is completely bespoke, you'd literally mock something up in Photoshop and then go away, build it and create it. Squarespace has predefined parameters and options, which are heavily tested and work really well, which is great news for smaller businesses that don't have a budget for completely bespoke design. All in all, I would compare Squarespace to buying a suit off the shelf, but then having it tailored, customized to fit your needs. Where WordPress, well, it's the same as picking the individual fabrics and materials, coming up with a style from scratch and having a suit completely tailor-made. So often the end result is very similar, but the process is welds apart. Hopefully that answers some of your questions. In the next lesson, we'll look at some specific pros and cons to help you decide if this is for you. 3. Squarespace Pros & Cons: In this lesson, we're going to quickly overview some of the pros and cons of using Squarespace compared to other platforms like maybe Wix, WordPress. Now for first pro is for squarespace is easy, I mean seriously easy to use. Now Squarespace actually marketed this as a tool for individuals could use to build their own website themselves with no prior experience. Now, from feedback I've had from various clients, it is a little too tricky for people to jump into and use themselves for your average business owner, unless they've got quite a bit of time to learn how to use with software. But for creative professionals, it's really simple to use and it's well-worth V initial investment of time to learn how to use it, how to get it just right. For next Pro, it's fast. So fast tends to go along with easy. But there really are a lot of tools, templates and shortcuts in Squarespace, all designed to help you put something together that looks professional, but as quickly as possible. Now, again, we've had some efforts. I've seen them pop up on YouTube. I'm claiming someone could build a website in 1 h. Maybe if that's possible. I don't think you could build a very professional and very comprehensive website that quickly. But certainly in a day. That's possible, Depends, I suppose, how high you're setting the bar, but it is fast, very fast. Now, this is a big one for most people. There are no servers to manage. Now, that comes with a few cons as well, which we'll consider later. But it means Squarespace don't actually give you access to the core website. Everything is left in their hands to manage, to backup and to troubleshoot. So you don't have to have any knowledge of managing servers. You don't have to put any of our infrastructure in place. You can simply create a Squarespace account and start creating websites and then pass them on to clients when you're finished. So potentially, this saves a massive headache. And templates, squarespace have some fantastic templates. In my opinion, they're much better than the templates that you're given by a platform like Wix. Some of the best templates for I've come across. Now, although I do tweak and customize them, they're good enough that the fundamentals of air, but it really does give you a great starting point when you're creating a new website. So the templates, particularly if you're starting out a great way to learn and get yourself up to speed with what works and doesn't work by reverse engineering. Some of the fantastic starts we give you. So now we come onto the cons and there are a few design limitations to Squarespace, e.g. with the headers for navigation for a large number of options. But if you want to go beyond the options that are given to you, it's very difficult and potentially dangerous to customize that. If you customize beyond set limitation, squarespace has given you. Well, it means when future updates rollout, something could potentially break on your website. So if you are happy with the option Squarespace gives you, it's fantastic and is a growing and growing number of options. But if you want to do something that's truly bespoke or if you're working for clients. But you know a very particular and meticulous and won't accept here or maybe 20 or 30 options, but I can't go beyond that. Will then yes, you may run into some issues. I would say for the vast majority of clients, the options that you're given are all best-practice. What works? Good enough that there's always something for anyone. Now, this is the con, associated with not being able to host for website on your own server. So for some of us, if you have a number of WordPress websites, although you do have a huge headache, you have to offer help and support. You have to take care of backups and so forth. You do charge your clients for that service. It can form part of your residual income. If you're using Squarespace while you could host it on their behalf and make a mock-up. I wouldn't suggest doing that because anyone could Google what it costs to have a plan with Squarespace. And they might not be happy if you're trying to charge on top of that. So generally speaking, you hand a website over to the client at the end and you let them directly have Squarespace account link to their website. That means Squarespace and making money from their yearly hosting plan. But you are not. So this is another con, a lack of revenue from making changes. Now for me, I don't really want to make a large portion of my income from just making little changes and tweaks, but aren't creative in nature. It's simply that on the site like WordPress, platform like WordPress or client isn't comfortable to make certain changes themselves, or to update or to implement changes that come from new plug-ins. None of that needs to happen on Squarespace. Once you hand this over to a client, it's so easy for them to change and update themselves. But quite likely for most things, they won't be coming back to you to tweak this or fix that. They'll be able to do it. So that's potentially a pro to your client, but it could be a con if you're relying on getting an income from making specialized changes. Squarespace is a platform where your clients really will be able to make most of those changes themselves. That said, I hate it when I get emails asking me to make technical changes or updates to a website I'm here to create. That's really what I like to make my money doing. So for me, this is good news, but I know for some of you, this could be a con and our final con, and this isn't a deal breaker by any means. But while the SEO on Squarespace is, it's decent, I would say it's good. It's not as good as WordPress. So if you're pushing for really competitive search terms on Google, you would notice a WordPress website has, has an advantage. You're not going to notice that difference or that advantage unless you're really, really optimizing and going through extremely competitive keywords. But even so, it's a factor to consider is SEO is okay, but it's not outstanding. So hopefully that honest overview of some of the pros and cons informs you to make a decision about whether this is a platform you'd like to use or not. I use both Squarespace, WordPress. I've had a quick try with a few sites on Wix and Squarespace is one of my favorite platforms. I use WordPress to for more bespoke or sometimes more demanding jobs. And but Squarespace for many of my clients has been absolutely fantastic. If you're convinced, join me in the next lesson and we'll actually start creating using Squarespace. 4. Lets Create - Pick a Starting Point: To get started, the first thing we need to do is visit squarespace.com. Now I've done that without being logged in. And this is the screen you will see. You're looking for v gets started by them. Pin the top right here. I'm going to walk you through this as if I've not created other Squarespace accounts. I actually have a different screen. I would visit to do this because as you can see, I've created quite a few squarespace websites before. In fact, they don't all fit on this page. There's 32 of them. So I'm going to walk through this with you. I will jump over to my account. But you will see a page like this and click get started. There's a, I guess you used to call this a wizard that guides you through the steps. If you wanted, you could skip this wizard, which is just designed to show you templates and ideas that are relevant to you. So I'm actually going to click skip, skip, skip. And this is the page I want to arrive at here, where I just get to look and choose which templates that are of interest to me. So I'll close this. And for my purposes, I'm going to create it. So this is linked to my account. As I'm teaching this class, I can log back in and I can take you through the stages. So here we are at this screen. Bear in mind, you won't yet have a Squarespace account, so you'll need to create one once you've selected your template. Now about the templates and this is one of the best features of Squarespace. You can find something that comes as close to what you're looking to create as possible. And then rather than try to envision and create everything from scratch, you can begin by tweaking and customizing and swapping your content in. Now as a professional designer, you'll probably want to swap a lot more of a new leaf. You'll be playing with layout too. You're not likely to accept a template exactly as it comes from Squarespace. And if you're doing this professionally, that's what others will be hiring you to do to really put your own creative take on it. But this is a great place to start and you can see there's a wide range of templates available. So if you wanted, you can explore the various categories. I'm obviously creating my sample website for the fictional evoke brewery. So I could look on the foods, see what templates people have tagged under that category. I could perhaps also look on the restaurants. Might have for kind of look and feel I'm going for. But you get the idea. There's lots and lots of templates to choose from. And if you're really sure of the template you want to use, you click start with, but I would recommend clicking the preview first rather than judging it from the thumbnail. And click the preview and have a look, scroll through, see what you think of a template. Now, if you wanted to, you could click, get started without a template and just start from scratch and create a website from blank pages. That's an option. But I think reverse engineering some of these templates is really going to help you initially to understand what can be done. And it's much easier to tweak than create from scratch when you're not yet familiar with Squarespace. So perhaps pause the video here. If you're following along with your own project, have a good look through the templates and pick one that you feel is relevant for you. Um, you of course, don't have to pick the same template as me. Now it's worth saying this isn't like platforms such as WordPress, where the template you pick, it means you have certain limitations. In Squarespace. Template is just a starting point. So I could, if I went through the style settings and made changes, I could turn this template in the center here into this template here I could make it look exactly the same. There's nothing I'm going to come across which because of a template, I won't be able to do. So. You still have full access, customize all of the settings. So what are you looking for in the starting templates? Well, it doesn't have to necessarily be fonts. Those are very easy to change. The colors are easy to change. Sometimes I look for just for general layout, the look and feel they've used which template is going to give me less work to do, and which template as I scroll through, Do I see layouts, but I think this would work well for my brand. This one looked good, but as I scroll down, I'm not sure these kind of offset headings, the images from those Denver left. I'm not sure of that. That's really the right fit for me. Okay. Here's one. I quite like not sure how you pronounce this. Kolyma maybe. But I'm definitely going to have quite a dark theme. I think a matte black background. I quite like the large text. Like some of the layout ideas, plenty of full bleed images. So yeah, for me, I think this would be a good starting point. So you can click to view a full demo sites up here if you want, but would open in a new tab if you wanted to compare a few side-by-side. But I'm happy. So I'm going to click Start with this design. Do the same with your preferred template, and then join me in this next step. So squarespace will now, for me, it's adding this to my account. And I straightaway arrive at a page where I can fill in details specific to this website. For yourself, you would just have to create a Squarespace account. So the usual things you'd expect, enter an email address, choose a password, things like that. So once you arrive at this page, I'm going to name the site evoke brewery. Do the same, give v, cite the title relevant to your brand. And these pages are just letting us know what we can do now with a new and improved Squarespace and where we are. So let's orient you with what we have in front of us here. The sidebar to the left. This is essentially your way of navigating the back-end of Squarespace. So the front-end, what the visitor sees once we're site goes live will be everything to the right of that sidebar, which I can pop-up to go full screen by clicking that button in the top right. So this is the front-end your visitors would see. This sidebar helps us navigate in V backend. At squarespace gives you a certain amount of time, which has varied over the years. It's usually around two months because I have a Pro account, a circle account, I get a little longer, so I actually have 182 days, which is quite generous. You can always contact them if you are working on behalf of a client and you need a little longer, but that's the amount of time you can build a site without needing any paid plan in place. Where does this website exist? For the time being? While you can pop a domain name, domain name you've purchased either from Squarespace or elsewhere. You can pop that in place quite easily. But for the time being, Squarespace assigns a temporary domain main name. So it's worth bookmarking this page. This is what you'll revisit in order to access with back-end. And this can be customized. It's given me a random string of words here, alligator Cat seven. So if I go to Settings and domains, you can see that as well as having the option to buy or connect. A proper domain, Squarespace gives us subdomains for free. Which means while we're developing this, if I click here on this randomly assigned domain name, I could actually pick one that's more relevant to the brand, which I think is a nice professional touch. So I'll use, assuming it's free, evoke brewery and click Rename. And just like that, you'll see that's changed. And this is now via dress I visit to access the backend of a website. We'll talk, although we're going to come back to this when we're looking at what you do to launch the website, we will look at the site visibility and permissions that Squarespace sets up by default. So if you go to Settings, Site availability, you can see by default this is set to private. So only yourself or someone that you provide that specific link to. And you don't need v, the bits on the end here, it's just fess up to.com. If you provide someone that link and they're not logged in, they won't see anything. So you could change that. You could select a password protected option and select a password. That way if you send your prospective clients or someone you wanted to view of a website. If you send them via URL at the top here, together with a password you've selected Bell actually be able to save a website right now. Any changes you make will be reflected in real time. So that's quite a nice touch when it comes to working with clients and sending them. Maybe you send them updates of your progress or you send the website stages to get some feedback from them. Quite nice to be able to do that and have a nice professional looking URL. So this is one of the things I must say I love about Squarespace. If you're working with WordPress or other platforms, there can be quite a bit of admin work behind getting a domain name in place, setting something up on the server, just getting ready to start designing. With Squarespace. You can literally do it with just a few clicks. So here we are. We've selected our template. We have a temporary domain in place and we're ready to start customizing and designing. So we'll do that together in the next lesson. 5. Lets Create - Customising the Template: In a previous lesson, we prepared our starting point and we now have this in place. This is our chosen template, some sample content, and we're ready to start customizing. So what I'd suggest, again, this course is not to show you what every single menu and button an option does, is to walk you through a streamlined process to just get creating and to learn the essentials to creating something that looks professional as quickly as possible. So I recommend starting from the homepage. And if you want to check what page you're currently viewing in V Squarespace sidebar. If you click Pages, you'll see grayed out in capitals next to each of our sections. It has the word demo. That's to let you know this is just demo content that you're using. We're currently looking at the homepage which is highlighted. And when it comes to doing styling, I think this can be quite a good page to look at because it's got a mixture of content. So all of this is going to make a little more sense as we dive in. Personally, I start with the header. So you enter edit mode. First of all. And you've got a little button in the top left. Butt takes you into edit mode or you can double-click anywhere on the page. So I'm going to click the button to enter edit mode. And you see this now loads up the page minus our Squarespace sidebar. And as you hover over different elements, you can see the blocks that make up these elements on Squarespace. They're also divided into sections. And you have a little bit of control over settings for each section, for each block and for each entire page. So we'll go in a little more detail into that once we start customizing the content. But let's start by just looking at the style and keep this demo content in place for now. So the header, if I hover up towards the site header, and as long as I'm in edit mode, you will see this Edit Site header option appears. So I'm going to click that. And as I said, we template you choose. It doesn't lock options. It just gives you certain settings to start with uncertain demo content. So I could achieve any type of header I like just by altering the settings that we have here. So on the site title and logo, we've got the choice to add our own custom logo, which I'll definitely be doing. But first I'm just going to go back. And I'm going to look using this tab here at the desktop view. I want to select a layout that I'm happy with, the header. So I'm going to click Header Layout. And I'd quite like to see how things look. I think we have our logo in the center. That little box represents your social links. And then the navigation would be on the left. I might change that. It's quite easy to change that reverted in future. I'm going to click that for now and head back. Something else I'd like to do. I don't want this to be transparent. I'd quite like to be able to see a solid color behind the header. So for that, I'm going to go back to these globally applied settings, which is this little globe tab at the top here. And if I click style, you can see if a moment, etcetera dynamic. I would like to select theme as we style. And that will let me choose one of the colors, but it's present in my theme. The other option, solid, that lets you choose any color you like from right here. But I'd quite like to tie that to my theme colors. So I'm going to select V dark option has actually quite close to what I'm looking for, for my brand. But I'll run through customizing these colors with you. Next. If I go back into site title and logo now, I'm ready to swap my logo in. So I'll navigate to that. Or you can simply drag and drop. And I have a file prepared, but it's just right. So you wouldn't want any negative space around the logo. You want it cropped nice and tightly. And for my purposes I need a light version of my logo. I'm not going to use for full logo, which I can show you if I pop it up just here, this would be my full logo. I'm instead going to use this, which is just for logo type. So I'll drag that on to vet logo section. And that's it. It's put it in place. So that's a little smaller than I'd like it. And you can see you've got some options here to adjust the size. It only gives you the option to adjust for height, but for WIP for then follow accordingly. So let's increase for height 80 pixels, That's looking good. And then a mobile height. I'll move this slider so it's kind of matching. You can toggle, by the way, between the desktop and mobile view using the two buttons at the top here, which is quite helpful. So if I do that, that's how it's looking on the mobile view. So I'm quite happy with those settings. It's worth mentioning any changes you make to V content, even the style you need to save them, they won't automatically go live. In the top-left over where it says Done. If you hover over that, you've got two options to either save or discard your changes. So I'm going to click Save. And that's now saved V style for this new header. But I've set up now all of the other style changes are actually made, not live on the page, but then a special section. So if we navigate back to the home part of our Squarespace sidebar, you'll see there's a design heading. And this is where the rest of our style changes will take place. If you click the first option, site styles, you can see you've got a number of categories here, fonts, colors, animations. That's a new feature which I'm really pleased with. Squarespace have added and spacing, global spacing. You can also customize buttons, an image blocks. So I would recommend running through these headings is quiet, intuitive, quite self-explanatory, but just customizing and changing this to suit your needs, to suit your brand. So I'm going to begin with fonts and have a moment. The font doesn't quite reflect what I had in mind for the brewery. This is quite a generic, bold font. It's legible, it's easy to read, but I want to use something that's maybe a little lighter, a little sleeker. And for my main headings, I might try to choose something a little closer to the wording for evoke. A serif typeface. Squarespace gives you some starting points. It always tries to almost give you an easier option and then you can dive in deeper if you'd like to. So if you liked the fonts that have already been suggested by the template, you could keep those in place. You've got a few options like adjusting the base size, which you can see in real time. It shows you a preview globally. But again, until you go to Save in the top left, nothing, nothing is set in stone. So you could click through these headings, paragraphs, and you can choose from a range of options here. If you wanted to keep the same font or if you click on font family, you could swap a different font him. If I click on back. Before you come to that, if you wanted to change for fonts, if you click on this section here, we have a moment. It says Acumen Pro. You'll see it says font pack and it's got the option to switch. So if we click to switch the font pack, it actually gives you a combination of pairing of pre-configured fonts. So I'd recommend having a go with a few of these. You're not saving anything. So it's quite easy to just click them and have a look and try to get something that's in a general direction you are looking for before you then fine-tune and you go through and you make them more minute changes. So this is quite a useful feature to use. Acumen Pro. I think that's the font pack that came pre-loaded with this template. Future. That's one I often use, and so on. There's lots of options there. It also divides them into sans-serif. Serif, a mixed sans serif, without the little serifs at the edges of the characters. Serif includes those edges, so it has a more traditional, more classic look. And if I click some of these options, you'll see it makes quite a big difference to the overall style. Now, for screen reading, I'm sans serif is definitely better for your smaller text, your body texts, it's less likely to break up. And if someone doesn't have the latest retina screen. So that's where there's mixed option is quite good and not always, but generally, these mixed options may combine a serif font for your headings for the larger text with san-serif for v, smaller text. It's done it in the preview, hasn't actually done it to this piece of text here. I wonder if maybe, okay, so it's classing this as body text. This I suppose, is still a small heading. So again, you can have come out or via the Font Pack options. But again, you could click through and have a look at some of the options here at select something that you think works for your brand. Now, for this brand, I know what I'm looking for. So I'm going to go through and pick something more specific. So for my paragraphs, definitely don't want to use Arielle. If you go to Browse all fonts, you'll see there's a wide library. And I believe at the moment, this is pulling fonts from Google fonts, from Adobe Typekit, and from a few other foundries as well. So there's a huge selection and it would take you quite a long time to scroll through all of the options. So there's this handy search function. If you're working on a brand where you've already picked out fonts and colors. Or you could just type the name of a font you're looking for straight in there. I'm going to use Lato, which is my preferred font for body text. And we've locked in as the option. I could then choose to customizable weight, which I will do. I'm gonna make that just a touch lighter. Letter spacing. I'm happy with. You can see visa, quite self-explanatory options for fine tuning. Squarespace manages fonts by giving them one of a few different style types. So there are several different types of heading and there are three different types of paragraph. So if I save my changes for now, and the speed is pretty good on this, but sometimes you will select a function. It takes us a few seconds to load and refresh. If I double-click to go into edit mode, we'll focus just on this portion of text here. You can see as I highlight that text of a moment, it's assigned heading for prayers, also heading 32.11 being the largest, for being the smallest. And then you have your paragraphs, 1, again being the largest, free being the smallest. So now we know what it is that's affecting. It's going to be these portions of texts, but you can give one of these presets. If we go back to save, we wouldn't have that text fat small. But just as a demonstration, we'll go back into style, into fonts, into paragraphs. Now, if you look at the bottom where we've got this slider to choose the size for each of these paragraph types. Because I've assigned paragraph free to this portion of text. As I move the slider, you can see that's what it's affecting. So it's quite nice to stack those Soviet. You've got some options when it comes to design some larger paragraphs, but then perhaps some smaller text as well. Now for my heading texts and bear in mind, while I'm taking you through my example. Please work through this yourself. You won't have to use each of the options I'm selecting. This is just what I feel would be best for the brand that I'm working with. So in my case, for my headings, I don't think I'll be able to find a font that matches this custom font for evoke closely enough. If I can't match it exactly, I'd rather use something that compliments it. The font I've used here for Brewery, the tagline is Futura. So I'm going to click into headings, select family, browse all. Search for Futura PT, that's perfect. That will now swap bed in as a heading font. Now, that's quite a far cry from what I'm hoping to achieve for the headings. For one thing I want that to be a much lighter font weight. So I'm going to change the weight, will go over it down to 300. About looks nice and light and an elegant. I also want it to only appear as uppercase. And that's a little tip, but sometimes works quite nicely. Uppercase only headings. So we do that under this section here. Text transform uppercase. And now that's only going to display in uppercase like that. And then while I'm not going to space it quite as dramatically as I have in the logo for brewery. I'm definitely going to increase V, lesser spacing. So let's try. That's maybe a little too much. Let's try. Nought 0.15 EM. That looks pretty good. But I can see I'm going to run in to a few problems if I have it that spaced out, we can see this little bit of texts. It's taking up three lines. I think that's the largest heading size. So I'm going to scale this back a little. I use free as v, largest size scale this back a little bit. If I wanted to find examples of texts with those particular sizes, you can look through. But generally the templates on the homepage, you should be able to find one example of everything. So there's my heading two, I'm not sure if I'll have a heading free, but we might yeah, there's some texts moving. They're heading free. Will go a little smaller. Again. Heading free, really I would use for a sizable amount of texts, maybe a paragraph, but something I want to call out to highlight. I think that looks quite nice there. And then heading for personally, I'll use fat for texts, but maybe just going to introduce a paragraph. So I'd have that one being the same size as paragraph text. I would put that just at 1.1. So it's almost the same size. It just has a different style. So that's it. Once I click Back and then click Save. That's massively transformed the look and feel. A template already making those font changes. And that's it. We can fine tune as you go through designing. But as a starting point, That's it, my fonts are in place. Now. You can also customize for fonts for your buttons, which I haven't done yet. I might not take you through each of those settings step-by-step because it's repeating the same process. You choose your fonts. And then you just go and you're tweaking each of these sliders to customize it. So that's pretty self-explanatory. I won't take you through each of those, but I'm going to run through off camera and just adjust the style for the buttons and where we are if you're interested, these are the settings I arrived that again, I quite like uppercase for the buttons. Some nice, generous spacing. So to me, that's looking, looking really good. Quite a nice feature I will mention as I clicked on the secondary button tab, we actually have a little warning now to tell you this page doesn't have a then whatever the element is. So that's quite useful as you're styling. If you come to an element that's not present on the page, that's quite a nice touch. There's a little warning for you there. So again, you've got three different types of buttons. You configure the preset, and then you're ready to use but across the template. So the next big customisation is color. I'm not going to be changing the color that much because in my brand we're actually using grayscale colors, which are very close to what we have in the template. But I'll walk you through that process anyway. So again, we're under Site Styles. And this time instead of fonts, we want to click colors. And you can see this is the current color palette. So you have a few options. I'll explain how these are applied first. So each of the colors in the palette in your theme, it will apply it to a preset, and it starts by giving you light presets, bright presets, dark presets, and then darkest. I'm actually using a cocktail of the colors that you've given it. Now, that gets you to a really fast starting point. But again, if you need to customize and fine-tune, there's a lot of customization you can do. If you were to click the little edit icon for any one of these, these preset options. You will see that it takes you to each and every element of your website. And you can completely customize the color that's used. So if I clicked e.g. this one here for small paragraphs by wanted them to have a different color. I could pick any color I like. Or if I click the palette tab, I could click one of the colors that I've programmed into the color palette. So lots of customization, but you don't have to go through every option. You only use this to find, tune and tweak which I love. And you can actually see at the top right of each page section which color combination has been applied from your palette. So you can see this section. It has dark one applied to it, which matches up with this one here. And this section has bright to, this matches up here. So before we actually tweak the colors, but should give you some idea of how Squarespace is using and applying them and the kind of level of control that you have. So I won't save my changes, but I'll make some fairly dramatic tweaks here, just so you can see this. Being used. So they have presets that you can select from. I'm using one of the presets at the moment. If I choose a preset like that, by just clicking this one button, every color throughout your entire website will change just like that. So it's quite a powerful way of previewing different color combinations without making any destructive changes. Now, if you're like me, particularly if you're working for a brand, if you've come to this stage, you've already created a logo. You've likely established the color palette, if not in its entirety, likely at least got the core colors that you'll be planning to use. So one option, and I don't use this because I'm not sure it's 100 per cent at Korea is you have a from Image tab and you can actually drag an image in and Squarespace will identify the colors that appear in that image. So that could be useful if you're looking for ideas or if you look along the top, you can ignore the presets and you can actually select each of these colors yourself. Squarespace implements this going from lightest to darkest. And I guess you have your, your saturated colors seemed to work best if you place them in the middle of a palate. So when we go to Edit palette, if you try to give it at least one light and dark color. And for free in the center, you're a little more free to tweak and play with. That tends to ensure that when these colors are thrown into the template, it works as intended. So e.g. I. Could pick a dusty version of a turquoise. I could then pick a strong version of a turquoise. Could pick something like that for this fourth option here. So it's heading towards a really dark color, but there's still the potential for it to have some, some saturation to it that still works well. And then for your dark color, you really even want that to be black or maybe an off black gray. Now if I scroll through, you can see that that combination, as it's thrown into the template, it works as intended. There's good contrast and we're getting the results we'd expect. I'm actually going to discard this because I was happy with the palette I've been given to begin with. Even quite like this dusty brown shade that we have here. So I'm very happy to just begin using this color palette. And that happens sometimes in Squarespace. It's one of the advantages. Sometimes you are pleasantly surprised and a template gets you close enough to what you're looking for, that you don't have to scroll through pages of options. And you don't need to fine-tune if you're happy with what is presented you to begin with. So we've now input some of the core facets of a brand look and feel, the fonts, the colors, and we can see those are coming through into our demo content. But I'm sure you're quite keen to start putting your own content in place. But there's one more step will take before we begin swapping content in, which is to just look at our pages and navigation. And now that we've got a good idea of a look and feel we're getting from our female style, will start deciding which pages were keeping. And we'll spend a little time explaining the navigation. So we'll do that together in the next lesson. 6. Lets Create - Page Types and Navigation: In this lesson, we're going to look at our pages are page types and v. V navigation works in Squarespace. Now, the page types is something that could be potentially a little confusing. I think that's because squarespace have progressively rolled out updates one on top of the other. So it's not the most intuitive part of Squarespace, but I promise you it does make sense. So let's begin with the navigation. Now. If you look at the sidebar, I visited v Pages section. And this is divided up into two parts. The first part we have a heading main navigation, and you'll notice any content that we place up here. It also appears in our navigation in the header of a website. There's another section called not linked. And our homepage is one of these pages at the moment. And anything in this section here, while it's a page, can be visited, can be linked to, it won't appear in the navigation along the top. So to demonstrate for wave that works, if I drag our home section up to the top of our main navigation, you'll see that now appears in the navigation in our header. It's underlined to highlight that that's the page we're currently viewing and it's no longer in are not linked section. Now, I didn't have to click save to make that happen. So this is something that actually happens in real time when you're dragging pages around in the navigation. So that's a little scary. At the same time, it's really easy to undo and to simply drag it back. If I wasn't happy with what I had done. I think I will place home up at the start of our navigation. By default, V logo acts as a home button. I think a lot of visitors are familiar with that now, but some still like to see home in the navigation. So I'm going to keep it there for the sake of keeping them happy. So some of this demo content, you will decide to keep, some of it you won't need. So I would suggest clicking through. I'm going to click on about and just see if I like this demo content. If I'd rather create something from scratch. So v About page. Yeah, Maybe there's something I could work with. There might change the theme of this from something light to something a bit darker. But I can keep v about if I click on instructors. And you'll notice once I've clicked a page, that little demo icon disappears. That's because if you click on a page and you decide not to click this little trash can to the left to delete it. I think Squarespace assumes you might want to keep that content, so it removes that little demo reminder. Our instructors, I don't love that. I think we could do better. I'm going to click the trash can to the left and delete. Once you click Confirm, then that's it. The page is gone. But you will notice on deleting my first page, this little section appears here, deleted pages. And if you click that, you do actually have 30 days before those are permanently deleted. So a little bit of a safety net for any deleted content there. I'll click Classes next. It's quite a simple layout. I don't think I need to keep that location. I might keep something like that for location, but delete that for now. There's some other good options for contacts and location pages. And then a blog. The blog comes with usually the first few posts as demo content. And the blog is the first of our page types for the different. If I go back for a moment, the home and the about page, they have the same icon. And these are regular page types. What that means is if I click on edit modes, these are what Squarespace cause irregular pages. They're divided into sections. Each section can have blocks floating on it. Each section can be given its own color theme. So that's what it defines as a regular page. If I go to the blog, you'll see this has its own unique sidebar. It doesn't work. If I enter Edit mode in sections. It's a single section, and it gives you options to manage your blog posts. So I'm not going to dive in any real detail into V, the blog feature of Squarespace I think is very intuitive. You can probably fiddle your way through. Configuring that. And as I said, it gives you a few posts to start with, so you can have a look at the way those have been set up. But for blog will reflect any site style changes you've made to the rest of the website. And as you make your way through customizing it, you'll see that you can choose a few options that will apply, either to over blog posts or two each of them individually, such as the colors, the fonts that are used for different sections. But have a go. You don't need my input to help you through setting the blog pages up. So we'll focus on things that are a little more design-oriented. So if I wanted to add a new page, page type, now we've deleted down, we've got just for home via bout. And I'm actually going to delete for blog. My brewery is not going to have any kind of blog feed. If you click the Plus button, even next two main navigation to add it so that it will start out up here or not linked. You'll see there are a quite a large number of options. So under pages, this is what I mentioned. Squarespace cause a irregular page type. But you then have these different page types which it categorizes as collections. You've also got folders and links. So we'll start with the options on the collections and the store. Again, I think that's a little beyond the scope of this tutorial, but you can very easily create and customize your own e-commerce store. Super intuitive, easy to use. So that's not a regular page, That's a special page type. And that's for the purposes of setting that store up, being able to categorize products and lots of other features. It has portfolio that's a special page type and it's comprised of portfolio items. So if that's something that's really useful for photographers, I guess for designers as well. And you select from a few templates. And this serves almost as an index page of salts. So very similar to the blog functionality in Squarespace, each of your projects, but it's nested here, is effectively its own page, which you can completely customize. But when you come back to that portfolio page, you see a thumbnail and a heading representing each of them. You can drag and drop to change the order. So you can imagine for photographers or designers, if you wanted to present your different projects. This is a really nice feature, rather than manually trying to create and link to different pages for each of them. So I'll brewery certainly doesn't need a portfolio. So I'm going to delete that page type. I'll click the Plus again. Events. Again, that's a little beyond the scope of this class, but that's a very useful feature. So they've got some options there for scheduling events. If you are creating a website for a band, e.g. wanted to include tour dates. There's quiet, nice features that enable you to do that and videos. This is a new one that actually allows you to sell on-demand content. So if you wanted to hide some tutorial videos, e.g. behind a paywall. You are able to do that here. But two special page types for I more frequently used, RV folder and the link option. So if I start by adding a folder, this literally it just helps you to organize your site navigation. Now annoyingly at the moment in Squarespace, you can't nest one-page inside another without using a folder. So what I mean by that, if I give this a title, gallery, I can drag the about page. So it sits under the gallery. And if I use the navigation at the top, you'll see when I hover over gallery, it now shows about page as sitting within that. I could also grab this little demo page here and put that inside. So now under our gallery section, we have two pages. But I couldn't place if I remove about I remove Booker class. I couldn't place Booker class as a page which sits under about, this is quite irritating. It's something I hope we update in future. The moment if you want to nest pages, you've got to use this folder function. So that's what the folded does, enables you to organize your pages to sit within a section. And lastly, you have a link option. So this is useful for something we will come to as a more advanced feature towards the end of the class. Anchor links. The link you would click and it would wish you down to a certain spot on the page. It's very useful for that. Or you could create a link to something external to your Squarespace site. So it could link to an external. I'm a calendar app you use. It could link to, I don't know why you would place them in your main navigation could be a link to one of your social media channels. Although I think there's a better way of doing that. So that's for the link option. And once you click link, you literally give it a title which will be shown in the navigation. And when you enter the location of that link. Now you can use this to link internally. To do that, if you just begin with a forward slash and underneath the pages you have comprising your websites so far they pop up in the list. So it's quite easy to select one of those if you wanted to, or you can enter a full external URL. Now, before we finish this lesson, speaking about URLs, how do you determine the URL for your pages? This again, isn't the most intuitive. You might think it's simply uses the page name. It doesn't. There's a separate setting for this. So if you click on the little cogwheel icon for any of your pages, you'll see the page settings appears. And some of the first options are a page title. And that's what's going to appear at the top of the browser window. Navigation title. That's what will appear in V site navigation. And finally the URL. That's where you're able to customize that. So you could e.g. change that to About Us, will have updated via URL. So if I put About Us and hit Enter, you'll see that would take us to that specific page. So that's quite useful. Quite often you'd want to enter a specific URL, maybe for marketing purposes or out of a client's requests if you want to link to certain pages externally. So that covers with pages, the page types and the navigation. Next, we're going to really dive into customizing the content. But we have on the website. So we're fairly happy with the style. There is still some tweaks and changes we might make to that later on. But the next lesson, we'll begin customizing that content. 7. Lets Create - Building Blocks: In this lesson, we come to working with blocks, which is what squarespace uses to make up all of our content. And essentially now is when we're going to start customizing our content. So my brewery has got lots of images of a yoga studio. Once we swap those out, it's really going to start taking shape. Working with blocks. If we enter edit mode, I'm working from the homepage first of all. And as you hover and scroll, you'll see a little blue outline around different bits of your content. And V's are what's referred to as blocks. So you've got full control to move or to edit these. To edit the content itself. In a textblock, you simply click, double-click and type over what's here. So this could say, welcome to fluorine. And this is just a demonstration. So I'm not going to swap over content out, but just to give you a general idea of how I would feel this way, I put this together if it were to be a website for the Climb. Now, the size and the positioning, you can see at the moment, I have this text at my heading, one size and all this kind of desktop view where it's going to depend on the size of someone's screen. I think I'd quite like to be able to run across a little bit further. So this is where this grid feature, but Squarespace of now implemented comes in. There was a time when this was a lot more complicated. So if I hover and just drag on the edge of that block, you will see Squarespace is aligning this to a grid which is invisible. As soon as you release, you click off of that item. So there's a little invisible grid at work and dragging to re-size or grabbing something and actually moving its physical position. You can see a little yellow guideline pops up there to tell me that that would be centered. In fact, I think I will send to this text. So I'm going to Control a to select all that content and use this paragraph alignment tool. This is quite intuitive. Kind of icons and features I'm sure you'll be familiar with here. Class. I won't need that, but I'm just going to keep welcome to our brewery. So when I deleted some of the content there, which removes the need for a block of the size we had. You see it automatically closed up. If I wanted, I could drag I could enlarge that by dragging down. And this page is actually aligning vet grid to the bottom. So before we make any more changes, Let's just talk about wave. That tool works and the options you have to play with a grid. As I hover over this section. If I click Edit section up in the top right, you'll see the grid then appears. And you can see there's a row count for the grid of a moment. It's got four cells, which is enough for the content we have at the moment. I can manually increase that or decrease it. You can't go below the minimum you need to fit the content that you currently have in place. And if I look down at alignment, you can see it for a moment. This grid is being aligned to the very bottom. I could center align it on this section, or I could align it to the top. So really intuitive, easy to use. Let's move it back to the bottom. And then you have options here as well for heights. This is the height of the section. Nothing to do with a grid. So this section, if I change the height to small, we've got just the smallest little sliver. To show our image in the background, there is enough space to fit the content. But if I choose with large option, that's aiming for full screen, allowing for a little navbar header at the top. If you want to enter a specific height, if you click the three dots, you can then enter a value. It will always allow room for your grid. But a value that's, I think this is supposed to be a percentage. So 100 per cent as much space as you can fit on with the header. And then 15%, 1%. All it's doing is allowing space for our grid and the little padding which you can alter under this spacing settings that we looked at earlier in the site styles. So I'm just going to put that back to the large precept. What I like about full-page impact when someone lands on this. But gives you a little idea of the options you have to work with this grid, which is really useful for laying out your content. Now you can also change V gap that's present between the cells in the grid. So you can click that first option if you want to have no gap at all. And that could be useful if you're trying to tile images on the grid. But I'm gonna go back to default setting. Now, if I click Background, bear in mind, this is the background for just this section here. This is where we can configure our background image. And there is also an overlay on the top of this, which makes the text a little more readable. So if a bottom here overlay opacity, if I move this slider up, that gives you a better idea what that's doing. So it's just as if it's overlaying a film of a solid color on top of the image. And then the opacity controls well capacity, how much is it showing through? So that's quite a useful setting. The color that it's pulling on that is related to the grid colors under the Color tab. So before we change our background image, we'll just click the Color tab. And you can see it at the moment. It's using this darkest option from our color palette. Now if I chose one of the lighter options we overlay would use, would use white. In this case. If I chose one of the kind of center options, if you had something vivid in your theme, like a bright orange, well, it would overlay that bright orange and so forth. Hopefully you get the idea. So I'm going to put that back to, let's use darkest, dark, dark, darkest one. You can see the difference here between darkest, 1.2. It's making the headings this accent color. When I use option two. And when it's on top of an image as well, it's not quite, not quite clear enough, not quite legible. So I'm going to use dark is one. And just make sure that text is nice and clear in this situation. So let's change the background. I've edited my text, but let's click the background tab. You can click Replace or hit the trash can, and then drag and drop an image in place there. So I have something in mind. I've picked out from a royalty-free stock website. Even if you do use royalty-free stock, sometimes they want you to give him some attribution. So it's always worth checking if you're working for clients. Just make sure you're using stock that you don't need to include, maybe a little credit or a note somewhere on the page. Squarespace actually has its own stock library, which you don't need to attribute on the page. And you access that. If I go back to Edit section background, and I'll just temporarily delete that. Click, add an image. And instead of dragging and dropping, when you click this plus button to add an image, you have a few options. You can upload a file locally. You can select from your library. So that will be any imagery you've already used on this Squarespace site. So that's where you would find that. And finally, Browse stock images. And under the free image tab, this is powered by Unsplash, is quite a wide selection of images that you can freely use. Now, these won't be the most unique. Let's try Brewery. These won't be the most unique options. Climb, but it is going to save them if they don't have a budget for photography or imagery. So some decent options here. Some of her photography's have quite a high standard. Really nice touch for that is now integrated with Squarespace. So you can see the results there. That would be maybe a good approach if I wanted to have his brand come across as a large scale modern brewery, I think I'm going for a more and more classic approach. A little more. What's the word boutique? Boutique brewery? So if I click the Plus again and this time select from library, we should see the SVG image I had uploaded earlier, and I'll swap that back in. You have some positioning options when placing images. On top of a fun. Now, there's a little focal point circle. And you can click and drag. And that will change for focal point. Now because this image is filling the screen nicely of a moment. But it doesn't seem to do anything. But if I save my changes and when I click and just drag to resize the screen, you'll see that it's centering the crop on the portion. Um, but I highlighted using that tool. So quite useful. And it's worth checking the focal point in case your background is going to get cropped off. So that's already looking a lot more on theme. As I scroll through, just going to look for other sections. Sometimes on my first pass, I'm just looking for some easy wins to start throwing my content in there and, and shaping things up. So designing on Squarespace is very different to the process you would use on a platform like WordPress, where you would actually mock everything up in theory first, you can do that for Squarespace, then recreate from a mock-up. But I think most of us will actually just designed freely because it's so easy to move into play of elements you're designing live on the go. So I'm looking for a section I can use. I've got my homepage. This is the kind of landing area. A visitor might look at them navigation, but they might scroll down. And if I do think the next section I want to include would be just a little something about the brewery. So if we have a standalone About page, which at the moment, I have been perhaps just a short excerpt about February and then a button so someone could click to find out more. I need to add a section. I don't want to use this one with this upcoming classes template. So I'm going to enter edit mode. And you can see as I hover between the two sections, There's a button here for ads section. If I click that, it comes up with quite a wide range of options we can use. And these are starting points, again to help us start throwing our content in. So if I click on the About heading for some options that Squarespace designers feel are appropriate for an About section. And you can click on people, products, services, lots of different options. You don't have to use an about template for the About section. You might spot something on the example quotes that you think works better in that section so you can mix and match them. But generally speaking, it's quite good. Some of the suggestions work really nicely. For our section about the brewery. You can see you've got some FAQs included toward the bottom of this about category. I think something that combines a bit of text with some more imagery. So this looks like an interesting one. And then I could swap my content in. So I'm going to show you an additional option. I click Add section, and I instead go to add a blank section. You can add blocks and create from the ground up. If you choose to do that, if you click the Add block button, come up with a list of all the different block elements there are in Squarespace. You'll most commonly going to use texts, buttons in images. I'm sure it's no coincidence Vose, or right towards the top. There's other little elements like lines you could use to divide the layout. You can add galleries, and there was some quite advanced gallery controls. Under galleries, you can also create a slide show. So lots of options to play with. Let's choose text. And again, once you start dragging, you see a grid appear. Because I began with a blank section. This includes defaults. If I click Add, Edit section, change the colors to one of the dark themes. I could use a background image if I chose to. I could edit the number of rows of I think there's no need to do that until you've positioned your content. So I could create an about heading. Make fat large. I could maybe create the text alongside fat, but there's lots of different things I could do, but this is something I would use if you're better at thinking from scratch, if you prefer to work with a blank page. Personally in Squarespace, I've actually found it's an advantage to work from a starting point and then tweak it from there. I'm going to remove that for now. I'll change the color scheme to this one which I quite like. Double-click to change our heading to about. Notice when I did that because I removed all the text, I can just hit Undo. Because I selected all the texts before typing, actually change this from H1 to paragraph two. So that's an annoying little thing that can happen. You could either just start typing after the first letter. I'm going to remove the first letter. Or you could manually change but at the end, once you're done with it. And then on the right-hand side here. And this time, this isn't a background image for this section. Which means we can click and drag. You see this image actually lives on the grid. And likewise our text, it's not strictly the H1 size, is actually using a feature that will ensure this text fills this box. It will go as large as it needs to fill the box. And that option, if I select a portion of the text, you can find here in the toolbar scale text. So if I de-select scale text, that will now revert to that H1 size and it won't go above that. That's actually going to be my preferred option. I think it will allow me more consistency in the sizing as someone scrolls through the website. I don't mind this dividing line. I might just want to bring it up a little higher. And then enlarge the size of my text. Paragraph one. Close that space up so you can see it's really easy, particularly when you become familiar with this, to just drag and drop and tweak things. And just design. Not worry about coding, not worry about anything to do with web development. Just enjoying using the platform to design, which is why many of us love it. So I'm going to choose to select from the stock images available here. Let's have a look at brewery. Again. There's quite a nice one. Using those barrels. Once that's in place. And Squarespace automatically scales sizes, creates copies that will be served depending on the device someone's using. So all that happens in the background, you can just focus on the front end. Even though it was using the field tab by default, it wasn't actually filling. It was set to fit, so it's clicking between them, sometimes revert it. And that is now filling our space. Quite happy for focal point to be the center. I'll click Save, to save my work as I go along. And that's looking really good. Perhaps we're overusing barrels a little bit. But that is the kind of look and feel I want to get across initially. Now, one feature I said I would add, I haven't yet. I'm going to open edit mode again, was a button to read more about the company. So this would be just a short excerpt in fats. Let's remove a bit of that. I'm just using this as placeholder copy for now. And I'll click to add a block. We use V button block. Drag that down as we want it to be positioned. And this is where we can choose from our primary, secondary or tertiary button type. So tertiary, generally smaller, secondary a little larger. And primary is usually even larger size. But it depends on the settings that you've used in the site styles that we ran through earlier. Now, despite these different settings, you are still free to drag and drop for button so that it exists on this grid size you are happy with. So you could have a huge button that spans the full width. Or you can line it up a little smaller. It's completely up to you in terms of the colors at the moment, and I'll just scroll up. So you've got a clear view of this. Apologies, I forget sometimes my my image, my thumbnail is there on the screen for a moment, is drawing on a color that we've used for this section. If I click Edit section and then colors, you'll see that if I toggled between these, our button color would actually change. So I want to keep the rest of this section as it was, which was this dark to option. But I'd actually like the button to be different. So this is where we can make those fine tuning Customizations I mentioned. And on dark too, if I click the Edit button, then takes us into. I'm the site styles in the sidebar. And it's trying to give us different colors that are present on this page at the moment. Now to save us some time scrolling through all these options, if I hover and select, you see a little blue selection appears around this, or it can appear around different blocks on the page. If I click on the button that selects it, and it automatically takes us to the irrelevant options in our sidebar. So we've got an option here for the primary button black background. If we're using the dark to palette. I appreciate at first this is probably a little bit to get your head around and feels maybe unnecessarily fiddly. But it really lets you fine-tune and customize this site. You're not always going to want to use the defaults that are in place. So it's really useful to be able to dig a bit deeper here and pick some custom colors. I want to change the background. One of the colors in our palette, but I want to use a white background. So it's really prominent. And then for the text, because that's now invisible, again, I'll use a color from the palette, and I'll use this off black. Save my changes. Now something I've noticed that has either reverted or perhaps I didn't save initially is the styling for the button. I wanted that to be all caps. And here it's showing is lowercase. So to change that quickly and easily, if I go to Design Site Styles, buttons, I wanted this to be future. I wanted it to be uppercase. I gave it a fair bit of letter spacing. I think the weight needs to be just a tad higher so it's legible when it's reversed from white light that and rather than go into primary, secondary and tertiary, if I want to apply this to all of those button types, I can click the button here, apply to all button types. And that will match for style across all of them. Now going to make sure I save for changes and the page refreshes. And that's done, that's now in place. So work through the website, throwing sections out if you don't need them. Here's a section. I think I'll actually delete upcoming classes to delete a section. If you just click the trash can icon in the top right to remove that. And just a few tips, some section types that I find quite effective. Way. You have an image in the background with some text over the top. This is actually a newsletter sign-up form, but if I remove that and place a block, and this is quite an effective way of changing the tempo of a website as someone scrolls through, instead of it being lots of texts or lots of hard, full color images can be quite nice to break up sections by just including maybe a tagline within the image as softly in the background. For our brewery, I could include saying credible, refreshing taste. That's not going to win any awards, but just to demonstrate for waivers could work. If I wanted, I could use that scale option to make that text. Always fill that space on the page. But I'm quite happy with that. Then if I click Edit section colors, happy to use darkest, but on the background tab, I'm going to increase the overlay opacity. A little less of the image is showing through. And it makes for texts that bit easier to call out. Of course, I'm going to change the image from this yoga studio. Search for library, stock library for beer. And something that looks refreshing. Csv, dark, moody aesthetic. Maybe that little hops on the table. Quite like that. It's got quite refreshing vibe to it. Let's see how that looks. That looks really good. And then we're going to go to format. And I don't think this section needs to be this high. On the height. The moment is trying to take up 80% of the available space on the page. So let's have that. Let's give it. Actually then we lose too many of our hops. Here, let's split the difference. 60 per cent, that's quite nice. Section like that to me is really useful, as I say, to kind of break up the tempo. So as I scroll through the site, if I feel there's too much of one thing or another, I like to put something like that in-between just to slow things down. To break it up and to edit the order of sections you can't drag and drop. But if you hover over a section, you can use the arrows to move that section up or down in the page order. I'm going to click to move up. And as easily as that it's swaps with V section but was above it. I can move it up again if I wanted. A website would flow like this, but I'm going to use that. Sit between our About section. And then I could come up with some text to give some further information here, maybe about contacts in a brewery ranging at all. Lots of options. So I don't want to bore you. The idea wasn't to walk you through every possible option, but the most common ones you'd use and hopefully teaching you some of the tools and the principles you can use. You are then free to start building your own pages. So remember when you click Add section, you've got access to a wide library of templated sections to get you started and even swap your content in all of these sections, they're made up from various blocks. Some special sections. They have preconfigured content. And I'll show you what that means. Again, this is something Squarespace is, has been adding to incrementally. So not everything falls under the same umbrella. But if we click on images and we pick one of these image sections, it has very little eye icon here. And the tooltip says V sections. Let you quickly add content items and switch between layouts without having to manually rearrange them. That's the reason for this distinction. And it applies to quite a lot of these image template. So I'll show you the difference. First of all, we'll add one, which uses this swappable content style. So as I hover on the page, these images aren't blocks. They are controlled using this edit button here, Edit gallery. And this gallery configuration tool lives within here. You can reorder V images, but you're not able to edit for grid. Bit advantage of that, if I click Edit gallery, but edit section is, you can swap between the available gallery types. A moment we have simple. I could swap to masonry. And you've then got these tools to customize the number of columns for spacing. I won't bore you by running through a few options available. But I'm sure you get the general idea. So that's another example of a special page types that I mentioned and it makes it easy to try out a few different options. You've got slideshows, reals, lots of things to play with and experiment with. But I'm going to delete this section type for now. And I'll show you the alternative. We go again to images and we select one of these but doesn't have the little I, little information icon. So one of these regular image pages. So if I selected this template, will this time you can see as I hover over the images, a blue selection comes up around them. And I can drag and drop these around the grid. But what it means is I can't go to Edit section and change presets seamlessly. This is 100 per cent custom layout. So I hope that gives you a good overview of the basics. Certainly enough tools to start customizing and creating some layouts, but look really effective, swapping your relevant content into them. So have a play experiment, see what some of the options are. Is quite easy to try something out, but then to scrap it or to change it to something else. So spend some time doing that and when you feel nice and happy and familiar with it. Join me in the next lesson where we'll look at a few extra features that Squarespace has to offer. 8. Lets Create - Misc Features: In this lesson, we're going to cover a few features that are fairly essential that we haven't implemented in our website yet. And I'll just scroll through so you can get a sense of how my demo site is looking. So I've been taking various sections, throwing some content into them. We have now swapped our images out. The footer, which we'll come to further. Here it is. The footer That's definitely an essential feature that we're going to look at customizing in this lesson. I've added a little context section down here. We're going to create an anchor link that takes us to that. So vote lives at the bottom of the homepage, will have that appear in our menu at the top. So I'll show you how to do that. I've changed our button to book at all, but we will be adding social links at the top here. And I added some content to, I've just got two sub pages for this sample site. So simple About page, but quite effective. And again, visa just customizing the elements that Squarespace gives us in the templates and a brewing process page. So this just gives you a little idea what can be done. And it's very quick, very easy to achieve. It's really designed first, web design. So let's start by maybe working on the header and then we'll go to the footer. So we want to add our social media links. And I'll show you how I've included this button, which takes us to a, a book, a tour page which isn't linked in my navigation heading to the left. So let's enter edit mode by double-clicking. Then I hover up and select Edit Site header elements. You will see that I have a button enabled. If I disabled were button, then that would disappear. And if we go back, the layout we've chosen for our desktop view. The header layout that dictates how each of these elements will be positioned. So I could just as easily positioned with logo to the left, have a navigation in the center, and then any buttons or social elements to the right. But I'm going to stick with this layout. And we'll go back to elements. Enable our button, which takes me to my Booker tall page. Again, to link pages, you can either type the exact URL. If you start with a forward slash, that will always take you to the first directory after your website. Probably don't want to look at it that way to make it easier, Squarespace enables you to just begin typing with a forward slash. And you see a list of your pages appear below. And there's my book, a tour page. So we also have a toggle for social links. I'm going to turn that on. And you can see as placeholders, we have Instagram, Facebook, Twitter. We click on Edit social links. When you begin typing. Squarespace automatically assigns the correct icon for that social platform. So if I begin typing twitch in there, you can see the twitch icon appears. For the purposes of this demo site. I'll just leave these links actually pointing to Squarespace is social media profiles for those platforms. So that's fine. We've got our social links in there. The head is looking good. We'll use the navigation to add an anchor link, which will take us down to our contact form at the bottom of the homepage. But first let's just style the footer. So I've decided to keep this website with a dark theme and you can alternate quite effectively. You could swap from dark sections to light sections to break up the design. But throughout the rest of the site, I've kept the dark theme going all the way through. So I'm going to, the exception to that is this little context strip, which I don't mind standing out. But I am going to change this for the footer. So again, if I double-click anywhere on the page to enter edit mode, and the move to hover over the footer section comes up with Edit. Footer works in much the same way as the header, but this time the fitter functions much more like a regular page with blocks. So if a moment, we've got this layout here which actually uses a grid system. And you can move these texts blocks they started us off with around. I'm going to go for something a little more simple. So this section here, I'm not going to include, you can choose to discretely, which I often do put designed and developed by your name when you're creating a website for a client. I'm going to delete that for now. It's a stretch with text. And I'll try to center this. Here we are. Across the bottom. Center the contents. I'll place the address on one line, a contact number on the other line. Be named for brewery. I'm quite happy to keep your social links, but I think are positioned them centered. If I click the Edit button, the Design tab, I can choose center alignment. I could also change the size, but I'm quite happy with that. And then I'm going to click Edit section and change the colors for the entire footer too. I think I'll go for a dark black to finish it off with some nice strong contrast. If I wanted, a nice little touch can be to add, if not the full logo at the bottom. I could add maybe the sub marks, so I think I'll do that. So this works the same as our regular pages or add a block, drag an image. Allow quite a small area for this. It means I'm just going to have to drag the rest of my content down. So to do that, start with the social links. And if you drag and you drag below V, bottom of the grid, it will just extend the grid for you. It will create extra rows. At the moment the grid is configured to a line from the top. So your extra blocks will go down. So let's drag our image placeholder. Just there. I think I'll give it about that much room. So quite a small space for our sub mark. I'll move the text up. I'll move the social links back up. And then I'll click Edit Content and upload. My sub mark. Very are a little touch, but I think that looks really smart. And now you'll notice a grid. It's still giving us more lines when we needed. So you don't have to go into Edit section. You can, as you hover, there's this little, it looks like a paragraph icon, but this indicates what you can drag the grid up. So I'll click and drag that until we've closed up the unneeded space. Save my changes. And very nice, simple, clean footer, which is the way I like to keep it. So next, let's create an anchor link, but it's going to take us down to our Contact Us section. So this isn't as straightforward as it could be. I'm hoping it's something Squarespace might change, but I'll show you the colorant method to do this. So first of all, I need to edit, enter edit mode by double-clicking. And I have to add a special type of block, and it's the code block. So ideally, I want this block to be positioned as high up as I can within the section. So to enable that, going to move these existing sections down a little bit, you can actually overlap one section on top of another. And I'm just going to position my bit of code. Now, the code won't show anything, it's going to be hidden. We're not going to have this Hello Word showing. So it's actually okay if it's overlapping as I've done there, but I just wanted to move things down so that it's easy for me to click and access. So if I click, Edit the code we need to use to create the destination for our anchor link. The code we need to use is, and of course you can copy this. You don't need to memorize it. And open and triangular bracket p space id equals. Then we open quotation marks. And between those quotation marks we put the name of the anchor link. The anchor link name, that's for the name we'll use when we create a link for it, jumps to it, and it will appear in the URL bar. At the very end. There'll be a hashtag and then whichever anchor tag we choose. So I'm going to use contact. Close off those open brackets. And then we need to close this off another open bracket, forward slash p and close with brackets. So that's as much coding as hopefully you will need to do to create a basic Squarespace site. But there's lots more code that you can add an unused to tweak and to customize things forever. But that's going to be beyond the scope of this class. So without code for our destination. Anchor tag created. So remember its contact. You can even copy that to make sure that it's exactly right. I'm going to click off, save that page. And now we need to add a link to our navigation. In the sidebar. Makes sure you're under pages. You're looking at the main navigation and click the plus button to add what is currently the final option and link. And the title we choose is the link name as it will appear in the navigation Along the top in our header, but it's not the anchor tag, Not yet. So e.g. this could say contact us, but our actual anchor link could just use contact which we had, had copied from earlier. If a way to create this anchor link is to use a hash symbol. And then the link name that we've chosen. As simple as that. But because this link might be clicked from different pages in the website, we also have to add a forward slash to indicate that we want Squarespace to go back to the home directory. So we're indicating this anchor link is placed on the first forward slash, that's the root directory. If that doesn't make sense to you, don't worry. But trust me, it works. If your anchor link or on a different page, e.g. if it were on the about page, you would type the link out as it's showing you here. So it would be forward slash about us. Then the hashtag van contact that would take us to that same anchor link position if it were placed on one of those sub pages. So we've placed it on the homepage. We're using this forward slash hashtag. And then our link will click Save. I'm going to drag that so it appears as a last item in our navigation. And then even though we're in the back-end of Squarespace, if I click that link, you should see it jumps us down to the page. And it's taken us directly to that target link that we created. So that's a very long-winded way of doing what in some other platforms is quite straightforward. So this is a feature I'm hoping Squarespace will update, but at the same time it's not too much headache to implement. So you could add as many anchor targets and anchor links as you wanted. You could use that same I'm forward slash hashtag and your target name to create a link from a button from highlighted portion of text. That would be the process for doing it. Now one final essential feature that we need to consider is where mobile view. Now, if you click the top right, you can toggle between the desktop and mobile view. And most of the time, if you design on desktop first, Squarespace does a really good job of converting the content responsively. And everything lines up just fine. But we're going to click this now. And I haven't reviewed this yet for my website. And as we scroll down, we're just going to have to look for any areas where perhaps for spacing the alignment, something hasn't lined up just right on the mobile view. And here I've spotted the first one. I don't like the fact this button fools directly onto v section below it. So again, to enter edit mode, you just double-click anywhere on the page. And what's nice is any adjustments I make to this mobile view. It's not going to reflect them on the desktop view if fair layout and grid changes. So I'm going to drag just to create an extracellular space below that button. And I'll save that change. So that fixes that issue for mobile view. And if I go back to the desktop view, our layout remains the same. It's designed in such a way that if you begin with your desktop layout, you go through and you can fine-tune and make adjustments non-destructively. If I were to edit and change text will obviously change would be reflected on both views. So this is just for grids. Any changes you make to the fine tuning their positioning on the mobile grid. Squarespace has a way of preserving that, not changing it, not spoiling your desktop layout. Rest of that page is looking good as perhaps a little bit too much negative space at the bottom here. That has been caused by our code. The anchor link, which on the mobile view, interestingly, it's placed at the bottom. So I'm going to need to shift things down and oversee want my code to appear at the top. Now, a handy feature you can use. And I think to my knowledge, this only applies on the mobile view is there's this little arrow here that says move up. And you can move an element up the mobile grid. So I'm going to click that once, twice. And very overt now starts with our code. When a visitor views about from the front-end. Remember we're in the back-end. That code shouldn't create any space that can be ignored in terms of a layout and this spacing. So again, I'm going to save that change. Also noticed on the mobile view for footer isn't working. As I'd like. I'm glad I'm running into a few of these little issues to tweak because this is showing you what you might need to do for your website. So again, double-click to enter edit mode. Click Edit footer, hovering over it. And I think the issue here is just that it's tried to add some negative space to the side. So I'm going to drag and just make sure my elements go across for full width of the screen. And then my image, I think, can afford to be a little smaller. So I'll give it less space to work within our position it in the center of the grid. And then I'll use my handy move up feature to just shift it to the top as we want it to be positioned. So it only takes a few seconds to iron out some of the creases. But well-worth running through your website once you've finished and just checking that. Nothing like that has happened for the mobile view. So I won't run through every page, but please run through each of the pages on your website and just make little tweaks, little adjustments to make sure the mobile layout is looking as it should. So I'm quite happy with my sample website. Hopefully you are happy with what you've created so far. In the next lesson, we'll look at some pro tips that can help you to put that finishing touch on your website. 9. Pro Tips: So although I've called this lesson pro tips, these are things I look out for. Having done this for over ten years now, ten years of experience in web design. These aren't difficult tips to implement, so they'll create a professional field and finished to your website, but very easy to put in place. So our first tip is a browser icon, and you can find that by navigating to the design section from the sidebar and then browser icon. And this is technically called a favicon. It's a tiny little icon. So you can't include something with a high level of detail. But it appears if you look up at the top left of my, my browser window, It's a little icon. And on mobile devices that's used when you bookmark websites, it appears as about tiny little icon in the top corner. Quite nice if it's not of a fault Squarespace block. So I have something perfectly suited for this. I've got a very simple crown icon, takes just for central portion of one of my logo elements. So I'm going to use that as my favicon. So simply drag and drop. So it needs to be a PNG file, but otherwise Squarespace resize it for you. So I'm going to save over. It doesn't appear here. If I copy this and open a new incognito window, you can see it appears now that looks really smart. Really does have to be a simple icon. In some places. It's an absolutely miniscule space, but it's a nice professional touch. Something else while we're on this tab. So this is the Design tab, the lock screen. So you probably noticed as I visited that incognito window, if you sent a prospective client to view of a website, perhaps once you're ready to reveal it. This is the page they would see if you've password locked in and enter in the password, gain access. Well, this is quite generic. This isn't going to win any design rewards. So we can actually create something better without too much trouble. So just a nice professional touch. If we visit the Design tab lock screen, we have a few different layouts we can choose from. So perhaps this one. Just to demonstrate this to you. I'll click Save. I'll go back. And then if you work your way through these headings, you can customize and style this. So on the branding and texts, if we wanted, I could include my logo, which I'm going to do. So that's nice. Evoke Brewery. You can add a headline if you wanted or body texts, but I don't think that's needed for me. I'll save. Go back into the next menu which has media. Here really is where we can choose for this particular layout, a background image. So again, you're able to search through Squarespace is stock images or the library of images you've uploaded so far. And I quite like this abstract one. It's showing beer swirling around in a glass. I think that creates quite a nice effect when bats uploaded and done its thing. So a much more professional lock screen only took us a minute or so to put that together. If I now visit and refresh my Incognito window, that's going to create a much better first impression when a client comes to login and excitedly visit their new website. So another pro tip and perhaps Squarespace won't be very happy. I'm saying this, but the tip is to avoid certain design features have been added to the latest version. If I click Edit mode and I go to add a section. Unfortunately, some of the latest options with latest template Squarespace add seem to appear at the top of this page. They've become obsessed with this slowly moving text, which I think looks awful from a design standpoint. You can see there's more of them here. What's happening here? It's to me, it's really off-putting. Maybe you'd like it, but my pro tip is to avoid those gimmicky features. I mean, look at this one. Maybe, maybe there's someone out there that appreciates that. But to me. Although it's clever technically, they've been able to program the capacity to do that. I would avoid this gimmicky moving texts. Keep the text, keep the layout static. But if you do want to add a little bit of micro animation is a better way to do it. And that's my next pro tip. So if I close that and we'll come out of edit mode, you absolutely should use micro animation, but use it for the right way. I wouldn't have text moving around when someone's trying to read it. So if we go to the Home section of our sidebar, visit v Design heading, site styles. And you may have noticed this before, but if you haven't tucked away in here, the third option down is animations. And this applies, in my opinion, are quite tasteful micro animations to all your elements throughout the website. And the difference is, if I click on the fade option. Once we animation has played, your content is when static. So it can be red, it can be enjoyed. It doesn't continue to move. And for me, I think that's quite an important differentiation. So I'm going to change with speed to slow. It fades in nice and slowly. And you can see, as I begin to scroll down the page, our text fades in. And that's just perfect. Nice subtle animation. If we scroll back up, it doesn't loop again. There are other options to scale is quite good. If you want it to have a little more impact. Some of the images actually scale into place, so that creates a little more movement. Will go backup slides. It's another tasteful option. So that creates a really nice premium feel as you're navigating the website. And you can experiment with these for yourself, but clip and flex are also quite nice options as well. So what I like about this is all of those options are tasteful. They're not distracting, and they just add a nice professional finished to your website. So my last pro tip is to do with balancing. And when it comes to layouts as a visitor scrolling through a website, if there's lots of busy sections, too much texts, not enough negative space in-between. It can feel very cramped and claustrophobic. So try to create a certain tempo. Although Squarespace gives you sections and breaks your content down into sections, try to space out your images. Try to include plenty of negative space around any text section as you have, and try to create a nice gentle flows so that at any point in a visitor scrolling down, there's maybe just one or two things to catch their eye at a time. Try not to have too many different elements competing for attention. So you can see if that's the case with this sample site. Any given section we're scrolling through, there's usually just one main heading. They're going to notice there's one element fighting for their attention. On pages where you have a few more elements may be shown together like this process page. It's really important to include enough negative space, but this doesn't feel overwhelming. You can imagine if this was pressed right up to the edges. If a text to cut more of a space, it would feel very, very busy. And where you have a section like this, a busier section, it's nice to either precede it or follow it with some nice calm, perhaps image rich sections. Just so that again, you create in a nice gentle tempo. And lastly, just wanted to share with you an example of this is a site I created for a client of mine, a very talented photographer. And because she's a photographer for a few features that I've implemented, but when appropriate for the brewery, but definitely for certain types of clients, you'd want to put these in place. So you'll notice there's a nice effective semi full screen because it takes for header into consideration slideshow as you land on the homepage. So that's a really nice effect. And then as you scroll through tons of negative space, that tempo that we spoke about, to make sure you go from image rich to maybe texts rich and break things up nicely. We've also alternated from dark to light with a sections which is quite effective. Again, thinking about the tempo. As a visitor scrolls through this site. Testimonials, Squarespace, There's quite a few nice templates and options to display reviews or testimonials. If your client has a business where that's going to be important and a little touch, I like to include it for clients on Google or trust pilot. It will be to actually include a button that says more reviews on intakes with visitor to that platform in a new window. So they can see these aren't just made up. These are actual verified reviews that they can browse free for themselves. If your client has a website where they offer a range of different services, that won't all be of interest to a visitor. I'm try to, perhaps before they get to the end of our homepage, press a visitor to make a decision and funnel them towards V content that's relevant for them. And a nice way of doing this, it can be a grid. If you had just free options, that would work too. In this case was six different options. And this grid, It's just enticing a visitor to choose, showing them what they might be looking for. A click through. There'll be taken to relevant section. And that way the content they come across on this page is completely irrelevant to them. If that's quite unnecessary technique in web design, I'm trying to think about the flow your visitors might take Froogle website and making sure they come across what they're looking for as soon as possible. And understanding not everyone will straight away look at the navigation bar. When they land on a website. Some people, they'll just naturally begin to scroll down when he first visit a website is catering to either type of visitor and just making sure you've got something to funnel them to show them what they're looking for. 10. Launching Your Website: So one last important step. If a website you've followed along and created is something you are planning to actually launch. Or just if you'd like to know the process for doing that in future, we're going to look at and run free together in this lesson. So at the moment, I have a attractive looking website, but it exists using this Squarespace sub-domain. And it's also locked to the public. So unless I provide access, no one else is able to view this. So the first stage before you make your website live is picking a plan with Squarespace. You can do that by visiting settings in the sidebar and then billing. Now at the moment, as you can see here, it says there's no active subscription link to this account. And at the moment I'm using a trial subscription, which is Squarespace, just giving you time to create and design a website. To put a plan in place, I need to click this link here. And then click the Upgrade button. And it tells me here how many days I have left in the free trials. So I'm going to click upgrade. And then it's simply a case of selecting a plan. And when it comes to deciding which plan is best for you. My advice would be to look down the list of features and features that are untyped. Check if error at any of these that you need. And obviously make sure the plan you select includes those features. So you'll notice many of these features fall under this commerce heading. So if you're building an e-commerce website, if you're using those features, well, you've definitely got to go for at least for business plan. And then perhaps even one of the commerce plans. Soviet, you're benefiting from things like zero transaction fees and other features. There are a few marketing features, but generally, I found that the personal plan for your average website that just wants a web presence, wants to serve information to its, its visitors. This plan is more than enough. When you've made your selection, just click select on the relevant plan. And then you'll have the opportunity to enter your billing information, which I'm not going to do with you at the moment. So I'm going to close this. But we'll assume you now have a Squarespace plan in place When you're ready for the next step, which is to pick a domain name. Now, if you wanted, you could use the sub-domain that Squarespace offer you that it's included in your plan. But the fact it's dot squarespace.com, to me it's a bit unnecessary, a little bit of free advertising for Squarespace of air. For a professional website. I don't think there's any need to broadcast the fact you've used Squarespace to create it. Keep it short and sweet. So we visit settings again from our sidebar. And this time we're looking at the domains heading. If you click domains, you have two different options. One is to get a domain. And if you click that option, Squarespace will actually act as your domain registrar. So you can make a search. It's already recommending based on the sub-domain that I have in place. And you're able to get any of the usual range of domains from here, so.com, your local domain names like.co.uk, which is what we use here, and even a few of V niche domains. So dark beer dot Pub, you can get a full range here. But it means your domain name is tied in to Squarespace. So thinking ahead, if you want it to move away from Squarespace and future, as your brand grew, it would be a little more hassle to transfer the domain away from Squarespace, but not impossible. So this is by far the easiest option. If you purchase your domain here, then squarespace takes care of that for you. I'll go back and we'll have a look at the other options. So use a domain I own. This means basically you've purchased the domain using a different website. So maybe an independent domain registrar. So GoDaddy, one-two-three, red. Those are popular ones. I'm not going to recommend one in particular. But any domain registrar you choose to use, once you've set something up with them and you have your preferred domain name, you would enter that in here. And just as an example, I'm going to put in the web address of my. Own website. I hit Enter. And Squarespace will actually look up the current details for that website. Once it finds those details, it will give you the option to transfer that again into Squarespace is control. I think that defeats the purpose of using this method. Likely you'll use connect domain. If I select that option, it will ask you just for ease of use, if you can identify the provider. Sometimes that means while you're logged into both services, you can just click a button and it will do the transfer for you. I know that that's the case. We would go daddy. I'll leave it as other connect domain. So these are the DNS settings. But Squarespace needs my domain name to have in order to get control and to be able to make use of that domain name. For a moment, you can see the current records I have in red. Some of those are privileged, so that's not going to appear here. But this is the IP address I'm using e.g. so I won't run through the process for changing these DNS details on with every registrar. But generally there'll be a page that invites you to manage your DNS settings. And all you need to do is copy and paste the values from these columns. So the host value into that host column with your registrar. Ensure that the type there's usually a drop-down and a few options. So ensure if it's a CNAME entry and the type is C name. And for required data, sometimes this will be referred to as the destination or target on your registrar's website. So that's where you would enter this information. So once you run through and you update these records, if a record doesn't exist. So e.g. there are quite a few a type records to add here. You may have to add a new record. Then just enter these details. So if once you've entered all of those records on your registrar's website, you click Refresh on this page. And if you've done that correctly, you have to allow a few minutes for that to propagate, to update. But you'll begin to see the matching values appear in the current data field and they'll be green if that's correct. So once you get all of those records to appear as green, then that's it. Your domain will be in place and that stage is complete. So that's a little technical. You can see why squarespace have included the option to let them manage this on your behalf. So if this feels a little more than you're comfortable to work through, and then just get Squarespace to manage that for you. So the final step, and this, I promise, is much, much easier than working with DNS settings, is to make your site visible to the public. So once you have a plan in place, once your domain name is in place, you can go under settings to site availability. And provided you have a plan in place, this option, public will not be grayed out. You simply click the checkbox for public and click Publish. And that's it. Your site will officially be live. The link to send people to will, that will be the domain name that you've put in place. And that's what you would enter in the URL bar. That's what you would send for people to visit your new website. However, to enter the backend and get access to the sidebar and v Squarespace editing tools. You would still need to visit this Squarespace sub-domain. So it's worth keeping a record of the two. 11. Conclusion: Well done. If you're watching this, it probably means you liked what you saw and you decided to give Squarespace and try. And hopefully you followed along. You've got a good idea of what Squarespace enables you to create. And hopefully you've been able to create your own sample website along the way. I hope following along and seeing my process for creating the brewery website has also given you a viable workflow that you can use to create websites for future clients. We've really focused on an overview and the essentials you need, but it's possible to dive in a lot deeper. There are many resources out there. If you want to expand your knowledge using Squarespace. If you followed along with the class project, please be sure to share a link to your creation in V Class Projects area. I'd love to see what you've been able to put together. Feel free to leave a review if you've enjoyed the class and don't forget to follow my profile so that hopefully I can see you in the next one.