Grow your Side Hustle; Branding & Design for your Squarespace website

1. Introduction: Hi, I'm Rosanna. Welcome to grow your side Hustle, branding and design for your Squarespace website today we're going to take a look at how to develop your own personal brand guidelines for you, your website and ultimately your side hustle. And then we're going to look at how to translate that into your website and get the design and feel across into every page of your site. This is a beginner's class, so no prior knowledge of squarespace is needed, but it will help if you already have your squarespace website build. So if you haven't already check out my other class on how to create your first website and popped back here and let's get started. 2. Research & Inspiration: Okay, let's jump in designing your Web site Thief. First place to start for me with a new project is always with research and inspiration. This is going to be especially important if you're building. This website is part of your side Hustle. Having a solid foundation of research and inspiration will give you direction and focus for when you right in the middle of it all to focus on research phase. Let's take a look at the class project. The first section is to share an image off your inspiration with a few bullet points explaining what you like about it. Firstly, we want to start out with a broad look over different mediums of inspiration potential, such as Pinterest magazines, websites or posters. Think of the process like a funnel. Start at the top with the broadest spectrum of inspiration and then refined down and down until you have your chosen inspirations. Pinterest is a great place to collect everything together, as it's a visual search engine you can look for and then save your chosen inspiration pictures. Here's my final inspo board. I've only saved here my favorites in terms of fonts, colors, images and styles that way I have one place have collected curated inspiration that I can refer back to and keep things simple. We'll see how this Inspiration board informs my design as we go along through the class for the first part of our class project, make sure you share a screenshot of your choice and inspiration images and add a few points about what you like. Just make sure the final collection is only your absolute favorites at most, three of each from the selection of fonts, colors, images in sales. If you're feeling overwhelmed, there is a link to my Pinterest board in the class project are below for the stage, one broad element of research so you could have a look and see if there's anything on there that you like to get you started. Be sure to save your inspo shot in the class project below and share what you love about it . So to round up and finish off Lesson one, get researching and, most importantly, try to enjoy this stage. You're looking for things you love and want to emulate. How fun with it and be open. Inspiration can come from anywhere 3. Branding: Now that you've got your curated research and inspiration collection, it's time to develop that into your personal branding. For your own Squarespace website, I have created a PDF Branding guidelines Checklist for you to download on either print off are used on your computer. This will be really useful to keep track of where you are on a journey, especially if your side hustling and have to put this project down and pick it back up again. Later, you could find the Pdf Brendan guidelines download in their project section for the class information down below. I know that the term branding can seem like an overwhelming task, something that's only reserved for graphic designers and professionals. But I'm using my experience and knowledge to help make this on enjoyable and durable part of your website Design journey. The branding checklist is designed to be filled in from top to bottom, step by step. By breaking your overall brand down into these eight steps, we have a manageable process and can take each step one at a time. Let's take a look together attending my inspiration collection into my brand guidelines, as this class is a follow on from my previous class. Start your side hustle. How to build your first class based website. I will be continuing to develop the website I built in that class. If you haven't yet had chance to build the foundations for your site, I'd suggest starting with that class so you can build your site and then head back here for the design and branding. So continuing on from that class, I've already been able to fill out the start of my branding checklist with my name for my website or brand. I don't have a tagline, but I have included the mission statement that we wrote in the last class how to build your first Squarespace website. I'm going to run through the next steps with you so you can see my process. I've opened up there's pdf in preview on my Mac, and I'm just going to edit it in here as the simplest, quickest, easiest option. I'm going to fill in each step with them this edit in preview so that I can keep everything together in one place. If you're able to do this to or start a new blank document and drop everything into that, it could be really useful to see all your brand elements in one place to make sure they are cohesive and create the overall vibe and feel that you're after. So because we did such a good job at the research phase, it should be fairly simple to fill in our branding checklist. I'm going to put my two documents, so I've got my Pinterest board with the website design inspiration. So this is just the very most favorite things that I've picked for the website inspiration . And I've got that side by side with the preview editing version off my checklist for my Brendan guidelines. So I started at number four, as I've already filled in one and three, and I don't need Step two. I'm going to take my front selection from this pin about modern fund pairs for squarespace . So let's have a look at that. So this was just something I looked up on Pinterest. Other people have created thes collections, which is a great thing to utilize, and these are all funds that are in square space, so we know that they're kind of safe, useful ones, too, to look over and for my title front, I really like the boldness off this and Bevis New frontier. So that's what I'm going to choose to be my title front. So whilst we're here, I'm going to change that front to be the right one so we can start to see how it looks on going to change the one up here as well. So again, we can see it being used in more circumstances and start to get an idea of the field, then for the body fund. Although the pin has PT Sands as the body hunt to use along with Bavis new, I'm actually going to pick the Brandon front from down at the bottom here, and I really like this one. I prefer how clear and easy to read it is. So again, we're going to add that onto ah, Brendan checklists so that we grow everything together in one place and we can start to see how it all looks when it sat together. Then I'm gonna change that one to be the correct option. You see, it's very clean, very easy to read and for the body front on the website. So if we have any block posts or things like that, it will look really simple and really easy. Nice on the website. Change this one as well on That's already Brendan. So they go so you can start to see how the to well look side by side. Next up is colors have advised cheating 3 to 5 color options for your brand, as any more than five could be a bit much, and you're going to enforcing different colors in just to use them in your website. So try and stick within 3 to 5 color options if you can, just to keep it easier for yourself further down the line. Going back to my Pinterest board for the website design Inspiration. I saved two images or two pins here for color inspiration. I'm going to choose this one today because I really love the bold kind of almost primary style colors, and I think they will work really well. So I'm just going to make some circles over on the branding checklist so that I can get those colors across into my checklist. Okay, so we've got five circles ready to fill in with the colors that I want to use. So I, starting at the beginning and on my preview editor visiting very useful tool in the color choosing option I am. I can pick up this eyedropper tool here and hover over the color that I want in the pin and select it on. It will fill in on the Bryant blending guidelines the color that I want to use. So there we've got the first color. So I'm just going to continue on entries the five colors from this picture on Pinterest to use as my color palette for my Brendan guidelines. Okay, there we go. I've got my five color options there, and I think that looks really cool thing that they look really good together. And also, I can start to see how they're going to look alongside the fun traces I've made and especially with that baby is new front. I think it's gonna be really bold and strong, and so I'm quite excited about that. Eso This color eye dropper option is really useful. It's really handy trick because it means you don't need to worry about color codes or where your color inspiration comes from. If an image grabs your attention, you can pick the coals from it and just crack on the head. So now if you've already had a sneak peek at setting colors and squarespace, you'll know that we will need a tree cell or RGB color codes to get the exact color reference onto our website. And But don't worry, I have a handy trick for getting color codes for websites, so fear not too, will get that crucial detail on here at the end of this lesson. Okay, first Step seven there. This is a bit of a bonus option, but it can really help to define the vibe and feel of your brand to include some patterns, stock images or textures. This sits under the style section from our original research. Andi, if we head to my Pinterest board, um, you can see there's a few pins on there that I haven't yet referenced. So these are my bonus options for Step seven. Um, I really love the simple and bold aesthetic off the Gentlewoman magazine. I feel that the color palette of trays and along with the baby's new title front reflects, is really well. I've also saved two images off a product under poster from Dita Rams design. Again, we've got that strong, bold and simple use of color along with simple shapes. I'll keep these in mind for the last step. Number eight, My logo. We're going to look in more detail at logo build in the next lesson. So I've got those pins on my board ready for them. So for now, I've got my checklist on my Pinterest board. I feel like this is all heading in the right direction with the overall feel I want for this website. So just the last little trick to get those color codes for our color palette. Just head to color code picker dot com. Well, you can upload, you know, trays and image to pick the colors from that color palette. So that's a really useful website to use alongside Pinterest because we can right click on the Pinterest image just to save the image and downloads folder. And then we can upload that toothy color code, bigger website and success on. Then we can go through the process of hovering over the each of the five individual colors . Onda, we can note down well, this gives us the RGB the hex good on the A chisel code, so if you want to know them all down. But yeah, once again, a super easy way to find the color codes from an image wasn't so. That's great. Look how far we've come. We've basically got our own personal branding guidelines done and ready to use on our website to truly make it our own eso. The next lesson we're going to be looking at designing and creating our own logo in squarespace. 4. Squarespace Logo Builder: Now that we've got our brand guidelines down, it's time to create a logo for our website. Like with the brand guidelines, we're going to keep this simple and achievable by using the built in squares based logo builder. This is a great tool that's cry Space. Provides on allows beginners inside hustlers to easily create a logo for their website without needing a graphic designer. If you have a squarespace account, you can download the final logo to for free so it could be used elsewhere. So we're going to head into our Squarespace website and navigate to the design section at the top here. We've got logo on title at the moment. We just got our website name written in to the site title section. But if we scroll down and select create a new logo, it will take us to a new page for the Squares based logo builder. Cool. So what a great welcome screen. This is just what we're after. Logo's made simple. I'm going to type my website name in here. It's already that, and that takes us through toothy Design Page, which promises to search for a symbol and for our logo so I'm just going to click off that for a second and let's have a look around. We've got the Web site name front and center in the design panel here, which is on this gridded background. So that would be super useful for lining stuff up below. Down here, Squarespace is showing us some mock ups of real world uses of our logo. So again, this is gonna be really useful to help us visualize how the logo is going to look in real life. We can expand the screen with these hours. Here I am on amend a few of the settings up here. I am a return on, Snap to grid on. Go back to the screen here. We've got the Web site name here, and this doesn't have to be included in the logo. We could just have a symbol, but I'm gonna keep it in here for now and see how we go. If I select the website title, you can see that we get some additional options to be able to change the front family. The front color, the front weight on the front stale. So one thing to note he is when we look in the front family selection that there's a much more limited funds selection in the logo builder than on actual squarespace itself at the title front that I chose that babies new. It isn't actually in this list of fronts here, which means I'm probably not going to keep the text is part of the logo bills after all, because I really want to stick with my brand guidelines and create that bold, strong look and feel from my inspiration board. So I'm just gonna delete the title so selected it and hit delete, and then I'll just concentrate on the icon as my logo. I have thought of a work around for getting the website title in the front. I want alongside my logo on the website, so we look at that later on in the class for my logo icon. I want to find something that represents my website mission statement. I also wanted to fit in with my brand guidelines and inspiration board to be bold, simple and clear. So over here on the search panel, weaken type in a way to search for symbols that could represent what we want our logo to be . So let's look up trees first. Sina's. That's one of my photography categories on the website. We've got a selection of tree icons here that you can see come up in the window. I don't love any of thes, particularly I don't feel like they're giving that overall representation of the mission statement that I was after. So let's try something else. Let's look up mountains instead. Okay, cool. So we scroll down. There's a good selection of mountain icons here. I feel overall, it's giving off more of that landscape feel, which is in line with my mission state. Just thinking back to my research on inspiration board here and just looking at the clean, strong, simple lines and the shapes that we had from these detail grams designs here. I think I'm going to go for this one that's in a circle. It fits in well with the bold, strong lines and the circle element ties in from my inspiration on these detail grams here . If we select the icon weaken, move it into the center of the screen and it's set to snap onto the grid, which is useful anyway. But if we had anything else in here, it would be useful to be able to line that up. We can drag it to make it a bit bigger as well, which will be happy to be able to see what we're working with. And Squarespace is already updated the live examples down here so we can see how it would look in a business card on a website and even on a T shirt, which is pretty cool. So when we select the logo, it also comes up with this color option here so we can change their color from black to one of our brand color's perfect. That's exactly what we want to keep everything in line with our brand guidelines. So if what you had to, either the color could pick a website. If you still that that open and with your uploaded image, you can click on the color and it brings you up the RGB, the hex code and the ages l code. So the hex code is symbolized by having this hashtag in front of it. So we could just take that from there, just going to copy that. Andi, drop it into here. There we go. So if we've got the color could pick a website then. That's quite easy to get the code the color code into the squarespace logo builder here. Okay, so now we know how to get our ex codes Just gonna try out a few of the other colors just to see how they look. So I think for now I'm gonna go with this red color. Then it looks pretty cool in the examples below, and it fits in well with that bold aesthetic that I was looking for. So to save this, let's go to save logo down here. And it tells us now that we can download our logo for free. And so because I've got a squarespace account, I I can download it for free. So we click download. And so we now get the option of being able to download in color black lines or white lines . This is really cool, as there is a chance you're gonna need to use your logo in black or white in different places. So that's a really handy and tip, and I'd advise downloading all three when you come to downloading your logo just so that you've got them there, so it's going to give us a download violence of PNG, which is another really useful thing I am. So that just means that there won't be a background to the logo. It'll just be the lines as we see them here. So that's very useful for using on the website or on other in other places, because we put the logo on top of another background, which couldn't give us lots of cool options Further down the line, it's set to download a file size of 2000 pixels by 2000 pixels, and if we click down here, you see, we got options to go more than that or less than that, depending on what we need. And so 2000 pixels wide is more than enough for right now, I'm going to stick with that. I'm just going to download the color option for now. And but like I said, when you come to download your logo, I download all three and then you've got them there. And if you want to go back, you know he's click here to go back and edit the logo and then download it again. So here's my logo P and G. Download down here and that will be in my Downloads folder. I'll also get an email from Squarespace with a link to my logo. So that's super useful again for the future. It means we can always find our logo. We don't need to worry about closing down this window because we'll get the email. So next I want to add my logo alongside my brand guidelines and inspiration board to make sure it fits in with the overall look that I have got going on for my branding. It's actually going to be quickest and easiest to create a pin from my downloaded logo. File S. So this is my board here. So if I just go to the plus, create a pin and add in from downloads the logo that I want there and I don't need to worry about writing anything about it because this is just for me and it is publishing to the correct board. So I just going to hit publish. So that's the logo now sat in with the rest of my friending. And if we bring the brand guidelines document side by side again, so we've got that split screen, then we can see how everything looks set together. If you've created your brand guidelines in a new document, that's great. You can add your logo in there. I'm just trying to keep this a simple and it's easy as possible, so it's accessible to everyone. So by using a combination of Pinterest on my branding checklist, I've got references for my own personal brand. Guidelines on logo. Well, uh, so we can really see there how everything's starting to tie in together and and how it could start to look on the website. He's this great color palette here and a nice strong fund and keeping everything very simple and referencing some circles in the logo and bold, strong, clean lines. So I'm really happy with how everything is coming together. Eso Hopefully you are to Andi. You can take time now to create your own logo. Andi, work that into your branding guidelines to finish off your own personal brand, and this is a really awesome start to designing your own website with Squarespace 5. Which Squarespace version?: before we head into Squarespace to look at the logo builder. Just a note on the different Squarespace versions. Squarespace have recently launched a virgin 7.1 as off January 2020. So if you opened your account after that time, chances are that you will automatically be put into a squarespace 7.1 version website. And so my class here is all on a squarespace 7.0. And so to check what version your websites on. If you head into your website builder and had to help, then you can see there whether you're in version 7.0 or 7.1. So, as I said my classes on version 7.0, so if you've started a website Andi not got too far, then it might be best to redo your website into version seven point owes. You can do that by following the link in the class description and that will take you to the template store for version seven point. Oh, but if you've got quite far along on your Web site build and you want to keep going with 7.1 and I will be doing a class for that in the future. But whilst they're still finding things out, were 7.1 Andi making changes to it? I'm sticking with 7.0, and for now, and I believe that that's the better option for now. So either crack on as you are, or you can kind of take a step back and rebuild with 7.0 here if you have any questions, or if you're stuck with anything with 7.1. I have used in built a few websites with it, so I might be able to help. And if you drop a question in the discussion section on here, I can help you out with that. Otherwise, let's crack on with building our logo. 6. Workflow Hack: Now we're going to look at a bit of a workflow hack. I promise we're going to get into squarespace next. But as with most things creative, often it's all about the preparation. So before we head into squarespace, we want to make sure we have all our ducks in a row. We've got our personal brand guidelines and our research on inspiration curated collection on Pinterest. We've got our logo, so we want to have as much as possible filed into an easy to find a place before we had to squarespace. So when were buried deep in designing our website. We have everything we need, writes a hand often in the square space platform. If you're searching for an image to add or copy to put in, it can be a bit frustrating to find what you want. So I like to have a folder on my desktop. I'm organized into the branding information, any images that I want on any copy that I've written ahead of writing in Squarespace. You say you start writing a big block post in squarespace and it crashes. You're going to potentially lose what you've written. So I always like to try and write offline in word or pages. And then I can copy and paste it into squarespace when I'm on the website and online and it's ready to go. So in images I've just got at the moment the trees that we uploaded into the trees section . Andi in branding, we've got our Brendan guideline checklist on our logo ready to go. So I'm going to add a bit more into my copy section on my images section, and I'm going to see you in less and five when we're going to start in squarespace making our website our road. 7. Site Styles: Okay, so we're going to head into our Squarespace website now and work in the design section off the website builder so we can start to truly make our website our own. If we click through from the home screen into the design section, we can see there's a menu of options now down the left hand side. We've already visited the logo and title section to create our own logo. So let's head back there so we could install this onto our website. So if we head down here to the logo image and click to add a logo, if we remember in the last lesson, we set up our folder system so that we've got ah website folder on our desktop. Nice and easy to find and we can navigate straight away into branding and into the logo that we downloaded and in that last class. Okay, cool. So we've uploaded up PNG color of logo I m. So if we hit save and we see that the logo, as is explained here and the logo replaces thes site title on the website so that icon has now gone in in place of resented photography along there s So if you remember when we built the logo in the Squarespace logo builder, I wasn't able to include the website name in the front. I wanted as part off the full logo. So they work around for that now is to use the tagline option here along the side, the logo icon. So if I copy and paste into their and just hit save, so we need to update the funds in the color and so on. But you can see that we now have our icon alongside our website title and we'll be able to put that into the front that we chosen as part of our brand guidelines, which was the Babys new fund there. So that's just a bit of a work around there. If the same thing happens to you that the front isn't available in the logo squarespace logo builder and you can use it as part of the tagline there to still have your website title on the website because the using the icon replaces the website title and so that's totally individual. It might not be necessary for you in your website or it might be something that you you're not sure if you want to have the actual title alongside the icon, so have a play around. Um, you know, I didn't take it off and see what you think. If you're struggling toe, decide what you like. I often find it helps to just step away from the screen for a bit and come back to it later with fresh eyes and see how you feel when you open up that screen again. And what your immediate reaction is often helps decide if you actually like something or not. Okay, so we've got the logo icon in sight. Title. Heck, eso Now is time to play around with sizing and get the front right on this logo. Tagline! Here for this we need to head out of the logo entitle section and into sites tales in back in the design menu. If you've already ventured into this section of the website builder, it might be where you've ended up the most frustrated or confused. I know I was when I first got here. So site styles just simply means the styles within your website. So from here you can choose everything from the colors of the fronts and the background of your website to the sizing of things. If it justifies to the left or to the right, you know everything is to how the elements with any website look, it's decided in here, so it can seem quite a building to start with. But I'm going to simplify this section From the time I've spent in this, it's Tails menu. There's really just two main ways to approach sites tales. So Option One is with the full menu here to start at the top of this side menu and work your way through each option one at a time. So, for instance, we can change the color and the background color of the website. That's the first option we get here, and you can carry on down the menu, changing things one at a time as you go down and seeing how that looks. This is a good option for simplicity. You know, you started the top, work your way down. But if you have a particular part of the website that you know you want to start with and where you want to change the styling on it, it's gonna be a little bit frustrating having to work through all those other decisions first, until you get to the part you actually want to start with and change. So if we just canceled and discard those changes and go back to where we how we had it and the other way to approach sites tales is to use the hover select option. So if we take the mouse on Dheim for over the section of the website that we want to change , so we want to start with the logo here because that's what we've just put in, and we know it's not quite right yet. Then you can see a blue box appears around the area where our masses hovering. So if I hover of here and collect the menu options on the left hand side, change only the variables available to edit for this section. So everything that I can see now is only what's going to be relevant up here. So that's just another way to focus that menu on the left to show you only what you need to see. If you want to go back to looking at everything, you can click, show all or back to here and change everything whenever a blue box appears. Then you can click and it will give you the sights tales relevant to that section that you just selected. By selecting this top section here, it's given us thes sites tails for the website header. So let's start working our way through this much shorter list here now from top to bottom. Once you become more familiar with site styles, it's easier to dip in and out of the sections you want to change. But for starters, I recommend working through the menus for each section top to bottom, especially one. We're at the beginning of building our website. We want to get everything set up. We do need to check through every option to make sure it's as we want it to be. So we're on the website head of section. I'm starting at the top with logo image size, so that just allows us to play around with the pixel size for our logo. So just doing is purely by eye and feel to see what I like. Site title here. If we remember, the logo icon replaced the site title. So there's no point for me going into that menu option because my site title isn't visible , but for you it might be you might not have a Nikon feel logo, so this might be where you go in and you add your funds and colors and things like that trio website title. So we do have the website subtitle because that was our work around to get the website name in. So if we go in here, we can choose our front that we selected as part of our brand guidelines and just go through each option and just check what's available. And if it's something that you want to amend and if you're not sure what the thing does, just have a play and move the slider and see what happens. And I found that's the easiest way just to work out what's going on and not worry too much about knowing what the menu option means. Just make some changes and see what happens. I want that to be in line with the edge of the circle roughly, and then I was going to your back in here for that back in there. Spread that out a little bit more so you can see on the left here of the menu options. If we've made a change, there is a great circle next to the menu item where we've made a change. So this is just a good thing to note to see where you've bean and see what you've made a change to. It just helps. You have not get lost in this big menu here. So I want to change the color here. So I'm going to refer back to our brand guidelines and change it to this blue. So that's the note that I put in when we did our pdf, and you can just type over that to be RGB. And then I just delete thes. And now the a site title name is in the color that we wanted to be in. Just that's a bit more central so you can see changing the header alignment their river logo. Our subtitle on our menu to Central makes quite a difference to and how the website feels. We can also change it to be right, justified, which isn't for me. So I think about a stick with center. I'm already like how bold that is. I might even go back in. Just push the size up on that a bit more. Just so. It's really a strong impact, like we had from our inspiration board here. It's all very bold and a bit in your face and that up to Max. So it's easy to read. Yeah, that's cool down. Leave that selected great. So we've gone through each of the menu options for the head of section there, which didn't take too long and was relatively simple. Once we'd selected this and we knew where we were working feel like it's really starting to look more personalized to me and my brand, which is great, even just their small changes are making a big difference already. So to make sure you don't lose those changes just gonna hit save at the top here. And otherwise we could. It would revert back to how we had it before. There's great circles have gone from there as well, because we've saved those latest changes every click back to show all we've got the full menu option again. Three. Scroll down through the full menu option. We can see that as our mouse hovers over the many options down here. A blue box also appears in the website window. So that's just another way that Squarespace is helping us to see what sites tales are relating to and what's going to change if we start clicking around our logo is right and is this. It's a start of our website working through now from top to bottom at referring to our brand guidelines for our color codes and our funds on our Pinterest board and just have a play with how you want things to look. There's no right or wrong, and it could be changed later as well. If you decide that something that you don't like, If you're in your sight styles and you make a change and you're still in there, you still got great dot and you decide you don't like it. You can hit, undo at the top there, and that will get rid of the change without having to worry about the save or the cancel option at the top there. So that's just another useful thing to remember is that you can hit undo to go back there, so I'm going to work my way through the sites, tells, referring to my brand guidelines in my Pinterest board and make sure I get everything in that I want to. The most important things to get set up at this age are what we've got in our branding checklist. So our funds the title front in the body front and popping in the colors wherever we want them, that we've already got our logo in. And for now, I'm keeping it simple. I'm not using any textures or patterns, but that's something we can add on later. But most important thing for now is to get it in fronts and colors and just have a bit of a play. Have a bit of fun and see how things look. Okay, Great. I'm I'm happy for now with how everything is looking in there, and we have got tons of content yet. So it's not and some of the changes that we've made unnecessarily quite relevant yet. But for instance, I'm change the body text to just be in black when and if it's a link when you hover over it , then it goes to the blue color, which I quite like, and we've got everything is in our funds, so really nice and easy to read body front and then a big strong, bold title front, which is great. I'm so just something to note that to actually navigate around the website. You can't do that whilst you're in sight styles because it just thinks you're if you're clicking, it just thinks you're wanting to amend these sites sales on that. So if you wanting to navigate around the website, you just need to click back to the design menu, and then you couldn't go to each page and see how everything's looking. So I'm going to leave it at that for now. Andi, push on to the next step on our next lesson, which is looking at page design and layout using the Squarespace books. 8. Content Blocks: Okay, so we're into the last step, the last piece of the puzzle for designing your own squarespace website and making it your own. In this lesson, we're going to look at utilising the blocks on each page to create a custom layout and design for your website. In our first class, where we built our squarespace website, we touched on content blocks. So just to refresh thes are the building blocks for your website, allowing you to easily drop onto a page. Different types of content toe have a design and layout that is unique to you. So if we never gate back to the home menu out of the design section and select pages sticking with the home page here you see, when I hover the mouse over the main section of the home page, we get this dialog box with the option to edit. So if we click at it, we're now in the page editor window. The content we already have in here can be moved around or deleted, or we could add a new block into the home page. To do this, we need to hover the mouse over the left hand side of the page to get the raindrop icon. If we click on the raindrop, then it brings up a menu of all the different types of content blocks. The icon for each content block gives a good indication as to what it is and how it will look. But you will also need to play around with the different blocks to see how they look with your own content and design. On my home page here, I want to add a few more images. So I'm going to delete this main image block because that's just one image. Just hover over select elite and click Yes, um, and then going to get the raindrop icon back on, Choose a new block. So I want to choose from the gallery section of blocks as this option allows multiple images to be displayed. So I'm going to pick the slideshow option. My initial plan for this website is always being tohave the images full width on the front page of the website. I've got the option now toe either upload new images for the gallery Oregon link from on existing gallery. On another page, this is quite a useful option. Andi would allow you to spotlight a particular gallery on your home page. If that's something that you wanted to do, I'm going to upload a few new images. I've got them already saved in my folder structure. Going to select these full and see how we get on. So whilst they're uploading, if we click through into the design tab at the top here, we can see there's lots of different options that we can used to customize our slideshow. Okay, now they're uploaded. If we just click, apply Onda had appearing click Save. We can see how that looks. We can just expand the screen there to get an idea of how the home page looks now that we've added that slide show to it. So I like that they're big. But I don't really like that. When you first enter would enter the website. You can't see the full image. You only see a bit of it. It looks a bit I am donor, bit clunky. So I'm going to just go back in and edit the page again. And if I go back in to edit and clicked at it, the gallery I can actually change the design to another type of content blood in the design tub. So we selected thesis light show option first from the raindrop content blocks that came up before. And but we can now also use a carousel, a grid or stacked. And especially now that the images are uploaded, we can quite quickly see how it might look transitioning between those different ones. So let's have a look. A grid. We're gonna crop to a 1 to 1 square, four images. Okay, let's just see. Okay? Yes, Much Nieto. I really like the main screen. Now, if you imagine someone London on your website landing on this home page, that's the first thing they would see is going to have quite a bit more impact as the viewer is able to see multiple images in full at once. I might I'm also have a little cat leaving this content Blood underneath here on this line Underneath here? Yes. So it is even cleaner again. So someone comes to my website. This is what they land on and they can see for my favorite images along the top here, and they can see the menu straight away to see what other types of content that might be, and they can see my logo front and center. And then if they scroll down, then they're able to see a bit more about my reasoning behind why I've started this website . What my mission statement is. Yes, although my initial plan was to have a full screen image on the home page because of the other design decisions I've made, including the big logo at the top here on the menu. That idea doesn't work as well anymore, but that's OK. It's good to be flexible throughout the design process because you can't always predict how something is going to look for work when you're brainstorming. So you've just got Teoh be prepared as well. Once you come into squarespace, that an idea you had might not be actually quite how you want it to be. You might need to adapt and change the idea as you go along, but that's totally fine. You know there's no right or wrong and no rules. It's this is your website, and you've got to be happy with it. So I moved that mission statement down to the bottom of the page, um, again to let the images stand out and to give the viewer confirmation of what the site is all about when they scroll down. And I'm just going to tweak the funt for that because it looks a bit much being in the capitals and in the title fund like this one appear. So if we go back to design and sites tales and I can do this nice and quickly, I don't need to scan through all of these options. My hover the mouse over that line, I get that bleed box, and if I click, it gives me the design options for just that, heading there so I can click into here and I'm going to change it. Toothy Audie fund that we trailers right at the beginning. And, yes, that already looks better. Um, it's in the right color that I want to save that. Go back to the home menu full screen and yeah, that looks a bit nicer. It was a bit sheltie before with the Capitals, so as a home page. I'm really happy with that now, and it's got those full clay images, and if the viewers scrolls down, they're not being yelled up, but they can see my mission statement down there. So it's nice and simple eso Before we move on to the next page layout design, I want to show you another cool thing we can do with these images here on the home screen. We can actually turn them into a clickable link through to somewhere else on the website. So if we go back to edit the page content, Andi, edit the gallery content block, selecting through to the design tab and scroll down to the bottom. We can see this auction here to open links in new window, so images with links will open in a new window. Every. Select that and head back to the content tab. If we hover over the image, we get this extra, um, menu option up here. I'm so we can bend the image. We can edit image or look into the image settings, and down here we can click toe, add a URL. So when we clicked at the euro, we have three options, an external link to something to another website and a file or a another piece of content within the website so we can actually choose to link to the blood page, which for this website. The moment is currently an unlinked page, so it's not showing up in the main menu here. Well, we can link to a gallery page, one of our hills, rivers or trees, gallery pages. All we can link to the about page and if we had any other pages in there and they would show up on here as well. So if I select trees because that picture has some trees in it, so at least that's relevant and click, save and applies and save. Do you see that moving the mouse over the images? And now, when we move of this image that has a link to it, the mouse changes and we can see that it's not clickable. And if we click on that, it takes a straight through to the trees gallery so we can go back to the home page by clicking on the logo at the top. And so that's just another interesting way. I wanted to show you how you can design the navigation around your website and encourage visitors to click throughs. And by clicking on these images, there may be more encouraged to delve into your website than if they were just maybe seeing the words at the top there. Okay, so there's one final design and layout trick with squarespace that I want to show you. And for that we're going to head toothy about page. So our about page is another blank page that we set up and created by adding in our own my own specific content books. And so I've got an image block here on the text block here. So let's say I want to add another content. Look to this page. That's a summary block with links to, say, some of my blood posts. So we go into edit. Ah, we can see we've got summaries here at the summary. Blocks are another useful tool to help visit to see what else is on your website without having to actually click through any menus. They're sort of like an advert for the rest of your content, and so I'm going to have a look, a carousel summary blood, and we have the option to display content from either the blood page, all the gallery pages I'm going to select blawg, and the summary block is using the placeholder content that came with our Squarespace theme to display the blood price images title on date. So once we get around to it, we can replace this content with our own blood content on that will update in this summary block here. But for now, I'm happy just to let the squarespace filler content be used so I can see how it's going to look until I can show you this and lastly, trick. So if we go across to the layout tab, we can see there's options here of how the summary block will look. Aspect ratio items, Perot text size, things like that. We can also select the different types of summary block to see how they might look similar to when we had the gallery block on the last page and three on the blade tub. We can tweak more settings to decide what information is shown as part of the block and change that tune on. So we just got the some nail from the blood post on the title, so I'm just going to leave it at that, and this is something where again, it's up to you to play around with the different settings, trick it to your own liking and make sure it suits you and your website. Eso. What I wanted to show you is how to control the layout off the blocks within the page and because, as you can see, we as we hover the mouse, we get that hand icon, which means we can drag that content look. But knowing where we're going to drag it to and where it's going to sit on the page can be a bit tricky if you don't have this little trick that I've worked out. So the blocks are all responsive, and they will change shape and size, depending where they are in the page. So this is a really cool feature from Squarespace. It can be frustrating if you haven't figured out how it works. So we've got our three blocks. We've got our image, our text and our summary block here and so hovering over the edge of the block to get the hand icon. That means I can now pick up the block and I can drag it to a new location around the page . So once I pick it up and start to move it, and can you see that different lines appear depending on where I moved the block to. So these lines indicate where the block will go once I let go off the mouse. So that line was above the image block. And now that I've dropped the book there, it sat just in that space there. So if I drag it again and see the line is thief full width of the page and if I drop the book there, it changes to be the full width of the page. And to put it back to where we had it before, I just want that short line underneath image every underneath the text box, and it drops it back to where we started. I can also drag it this way. AM over the text box. Andi, There we go. I get that short line alongside the textbooks and they actually sit, Sit in between the three. So I've always got, like, a three column page there with image summary Andi text. So knowing where your blocks are going to end up, it is particularly useful when you start using spacer blocks to manipulate the layout. So let's put that back on bond here. That's it. And let's get a raindrop to get a spacer blocks. So that's part of our basic content looks. It's like spacer. Um, you can see we can resize the spacer, so there is thes spacer. Blocks are really useful. Once you've got your other content blocks in, you can use those to add padding around you, content to give it more space and cleaner, simpler aesthetic. But again, knowing where they're going to drop and how to manipulate them is the kind of final piece of the puzzle for me as to how to make the website really look how you want it to look. So if I drag this up and I get the line across the top of the page and let go, that space of block now sits along the whole top of the page, so everything has been bumped down by this amount. I can bump it down even more. We'll take it back up. So if I drag the space a block to the end of the text block to get that short line and drop it there, you can see it's just bumped in alongside the text block there, above the summary block I am, and again, I can drag that and it will push that down and it will give my little blurb they're a bit more space. You can also drag the space of look that way and to change the size of it both ways. So it's not just fixed. Once you drop it in, you can make further tweaks. So that was what I wanted to show you. I am just to reiterate when you're moving blocks around, make sure the placement line that appears is where you want the block to eventually end up . Because that's how Squarespace tells you where your content block is going to drop. And if you're using a space of block to affect another content block, make sure the placement line is the size off and alongside the block you want to impact. So, for instance, if I wanted to add in another space a block, but I wanted to sit alongside this summary block here, the Samos, um, what I've done up at the top there, a drugs thespians of book and make sure that I get that short line there. You see, if I go further, I get a long line, and that means that the entire length of the page is going to have the space a block on it if I drop it there now. But I just want the space of look to effect this summary block here. So I've got that short line there. Let go. And there we go. The space of block is linked with summary block. There sat next to it, Andi, as is that one up there, and that was where I wanted to drop it. I knew it was going to end up there because because of the placement line, and I know that it's a new that it wasn't going to impact the full page because it wasn't that one long line. So the important point I'm trying to make and make is that by knowing how the blocks work and what you can do with them on what you can do with the space of blocks, you're truly able to create a custom layout on your pages with your own content and really make your Web's unique to you. Okay, so that's how we can use thes squarespace content blocks to design and craft a website layout unique to us. Now it's over to you toe work through your branding checklist and create your own unique website. Make sure to share your finished website in the cost project and let us know how you feel about it on as ever. If you have any questions or anything else you'd like me to cover, let me know in the discussion Tab Bilow. 9. Outro: Okay, We've got through a lot in that class. We've carried out research to enable us to develop our own personal brand guidelines. We've created our own logo in Squarespace, and we've learned how to utilize the tools that squarespace gives us in sight styles and content blog's to truly allow us to create a website that is unique to us. So I hope you found that helpful. Andi have enjoyed the class and it's allowed you to grow your side, hustle and really develop your website. I forget to add your on inspiration image on finish website into the class project down below on Daz. Ever if you have any questions or any problems at all with squarespace, I pop them in the discussion top down below. I'll be sure to get back to you. Thanks for watching.