Squarespace: Building your Perfect Website

1. Summary of the Course: Hey, my name's Karen. This is my course on using Squarespace. Squarespace is an amazing platform to building websites, and in this course, I'll take you through the start to finish process. We'll also cover things like using third party applications, understanding the analytics and how to include things like a block. Andi, email newsletters. If you're completely new to square space, this will be great for you to just get started. And if you're already using squarespace, you might pick up something you didn't know about. I look forward to seeing you guys on the course, and I hope you enjoy it. See you later. 2. Introduction: Hey, guys, My name's Karen. Thank you for attending my school clothes in this class, we're gonna be covering kind of the whole process behind building and maintaining a squarespace website. Squarespace is this amazing platform that basically allows you to build a website right in front of your eyes. But some of the features could be a little bit confusing. So we're gonna cover all of that today, including the in built tools, how to add in third party applications, customizing the templates and much more. So I look forward to seeing you guys in the class and let's just get started. 3. Getting Into Squarespace: Okay, so I just kind of wanted to give a little bit of a rundown on how we're gonna work this cloth. I thought the best way to do this would be to use some sort of business as an example to show you how you go from the start to finish point on squarespace. So for me, I was thinking the best thing to do would be to use the hotel. The reason why would be that It covers kind of a lot of areas that you would probably cover if you're only doing smaller sites or anything. So we're going to be covering things like a blawg. We're gonna be covering out at a gallery, um, and also kind of a contact form, slash booking system onto the page to kind of give you an idea of what's possible and how you do that. But before I want to get into all of that and kind of nitty gritty of it, I just kind of wanted to go over squarespace itself for a little bit. So's go space offers to pricing teas, starts $12 a month and goes up to $18 a month for businesses. The $12 a month comes with a free custom domain, which is great if you're not really sure about how to to buy domains and and lengthen toe websites and what? No. And if you buy the $18 a month, you also get access to G Suite, which is Google's business platform, which you can also use for email so you can have ah do know hello at your business name dot com, for example. Um, some of the other great benefits of squarespace on you can kind of see examples of sites kind of just scrolling along here are that it is great if you're looking to build a shop in terms of transaction fees, there any 2 to 3% which is kind of this is really good. I mean, if you look at Etc as he is 3.5%. So it's along the same lines, Aziz that. But you're getting a completely personal shopping experience for you, for your customers. Other things are that all the templates that they have are fully responsive. So you're not losing out on a mobile audience by using squarespace or any of the certain templates on you can pick a designed purely on what you like of it. So all the templates and squarespace can do exactly the same thing is just a matter of picking the one Does you really like the most? Then let me get through the templates. You'll also see that they do categorize them based on kind of what you're doing. Um, for example, you brought October 3 ones, which also has another benefit I didn't mention they use a cdn, the content delivery network, which basically means that the websites images will load faster. So you're not gonna miss out on people getting annoyed at long loading times and logging off your site? You're not gonna have any of those issues. Um, yes. So if you if you got a portfolio or you're looking to build a portfolio is a kind of the websites to go for a creative service if you're looking to build, like an agency or anything like that. But in our case, because we're doing a hotel home living is probably going to be our best bet on. Then we look through here and kind of get an idea a feel for what we like. The look off My personal favorite in this collection is five. You can already see here that in the description this is luxury, short term accommodation in Cherbourg. Um, this is already kind of matching what we're trying to build Azaz. A quick kind of option is probably ideal. So in our case, we're probably going to go ahead with that. Oh, you do is you click on the temple. You can preview if you wanna have a look. You've also got the option to see what it looked like on a tablet on the mobile as well, which is great. And then, if you want to see it fully functioning, you can hit the preview. Five. But it is kind of what you want, but no, exactly. There are eruptions, and you can go back and look. But here you've got examples of people who do use this template so you can see that not all of them are accommodation company, something strength training. I'm not quite sure this is this is a dog daycare or something like that. Um, and I think that's great. So, yeah, we're gonna go ahead and start with five, and then we'll come back. It's 4. Content: Adding Your First Content: Okay, so now run to the fun stuff. So we actually get to make the website eso. When you first get started, you'll go through the log in process. If you don't have an account already and you'll get to hear I'm basically gonna ask you. So here, you building the website four set in this case is gonna be a client. Um, and we're in the home and living industry on our A Mr Sell products or services online. Okay, so now you put in your slight toes or whatever that is. So okay, that's gonna be the SoHo Hotel. And I don't know if you saw already there in the background. It changed the title of this light. So if you don't have a little girl yet, this is kind of ideal, because Squarespace will just put in the title. Well, whatever stuff, and you can already see that we have a great template to work from here. Um, it's a trial account. You can see here. I have six months remaining. That's because I am squarespace Circle member, but I will talk a little bit about that later in terms of building it. Ah, squarespace using the squares but its platform as an agency sort of thing. Um, but we can go straight ahead into this kind of get started. So go design on a straightaway, customized the logo and tagline Eso hotels are name, and that's the one that's gonna work here, right? There is a slight title. Some templates won't allow a tagline. I still recommend adding it A because what it will do is it can help us CEO. So your search engine optimization, even if it's not necessarily visible, you'll also see that you have the options at a logo image again. Some templates weren't necessarily use longer images. Some will replace text. Um, eso. It really does depend which template you're using with regards to these. For example, I did create a little logo that could go in here, for example, this one here and what you see. It just processes, resize it, upwards it in and save acid verities. Yeah, in terms of the styling at the moment, is probably not ideal, but we are going to go into styling in a little bit. But first I just wanted to go through the basics of going from template toe placing lights contact. Um, so you got your options down the side here, the 1st 1 we're gonna really want to play with his pages on. So in your pages, you've got a lot of different demo pages there you can see highlighted with demo. A little icons next to them tell you what sort of page they are. So the A here symbolizes that it's a block. Then you can see the block fullers through to a different section. So that will be where you find your blood posts. And then if you click on here, you can see all the different types of pages you can create. A folder, for example, will create a drop down menu in your in your navigation. A cover page is normally great if you're just starting out and you want to put a little page there to say that you're coming soon, but you haven't finished building your website yet and then you link if you want to just have a navigation item which goes away from Squarespace, and so but these are all kind of things that you can play around with when you kind of get to voting a site. So we're going to start with our home page, which is down, and it's no in the link. Eso it's not linked, which means it doesn't appear in the navigation. Uh, so what we can do is we contracted out, which I always think you should have home in your navigation you can see straightaway. It's their highlighted in black as it's the current page. Um, which puppet? I guess. So Now we want to go ahead and edit contact. So if we go into the page when we go at it, I will say that you're editing demo content. You have to create a page for So yeah, these pages are fully visible the moment people have seen your website. Um, but as soon as you could create, there will be and you can see that it's no longer a demo. I don't stare. It's lies with all the information, helps that before. So in terms of editing this content, it's super easy or you do get at it and we can change Well, we're not based in Children were going to say we're based in London on Monday, woken to your home away from home. Let's change that. No stay I love three, whatever you want to say. And then we've got the images down here that we can we can change to be ones of ours. We said, Well, I think it's best kind of highlight. For example, the types of apartments you have since family corporate Parkman's But you're on. You could just see how easy it is to go in there and change to text. At the moment, you can see that they're sent to heading two. I do recommend having some variations in terms of your headings. Having hitting one. This is probably not heading to, and heading through the's will again be a benefit to search engine optimization. Google will look for your headings on well based search results on your headings because it believes that there the categories of your contact. So, for example, if someone was to such family apartments and Google now, there's a better chance of of this website showing up. Then there was false on. Then you go cords. Everything else that you can. Adding here, in terms of editing images, is exactly the same process you just hit. Edit on removes the demo content. I've got a couple of images here that I probably throwing. For example. It's nice. Apartment apartment. Here s E o pumps again. I would probably recommend changing the following names being something like luxury Apartment. Dugald does kind of search these images way uses things like Google images and what not So it's best to kind of set them so that they're easily noticeable, just easy to read. So you've got the option to add blocks as well. Which is of course, of course. And if you're not wanting to stick with the damage content, see, for example, just delete these buttons. If you don't want, I say we wanted to add in something you So you have the option here to clip on these black lines. Oh, I don't really know what you'd call these dot things on. You can see that sometimes it's only covering 1/3 of the box, and that's basically if I want to put an item underneath the block directly above only and not the other two, or if you have it is a full line. It means it's gonna go under a lot of the cortex. So, for example, maybe I want to add in a place to sign up for my newsletter. I could click that on. There we go. So we need to do is change where the storage is known to again. We're gonna talk about this in our third party application section. Um, you could say drive for and thats done. It's nothing. Let me say because you have a story that's to come, Um and then with this template is Well, there is the banner. Images on the banner image will appear on every page will be different on every page. If you want it to be. You just look on battles to change that there and you can change that image if you look and then also the text is over laid so we can change that to tow again. These things will help with with that CEO and also just make your page a little bit more consistent. That's kind of the basics of adding content to the page is what we're gonna do next week. Uncover contact contact page on the block. I think we'll also added kind of a rough reservation for which is gonna kind of be similar to the contact paid for now. Just to give you that basic introduction 5. Content: Blog and Contact Form: I also just wanted to very briefly touch on that comes out pages in the blocks. So on your website, you're probably gonna want to have some sort of page which says you can find me here or drop me an email or whatever, just that you can deal with any sorts of issues that you have. So most templates will come with a contact page demo which you can use. I think that pretty much exactly what you're gonna do. Just an image with some contact information. Um, I just wanted to talk a little bit more about how you set it up so it works so you can have your information on the side here. If you do use this kind of format, what I do recommend is is adding it as a Linkous well, and setting it to mail to colon and then writing your email address again for what this will do is it makes it a clickable link on. You can also do the same with a phone number and said to call to on in this case, it would be there. Is there 1 66 But but But, um, yes, so what? I'll do is if anyone comes and visits your websites, they can just click on that and it'll open their email provider. Andi, put your email address straight into the recipient, which is great. But then, if you have the formas well, you'd want to go into edit, and you can add different variations. So if you want, perhaps a date, which would be ideal for us is we're doing accommodation here so we could just have a check in date. Check out date. Um, that's that's great. You can also get them to add in their social media or radio boxes, which is the little kind of select one option or check boxes. In terms of storage, you can have it just so emails it straight TV. So I've got my email address there. You could have it. So goes into a Google drive file like an Excel spreadsheet, all milch in which again, I'll talk about in third party andan. You've got the options toe at a post submit message, so that would be like thank you for your order. Thank you for booking. Thank you for sending in your information. Uh, no. That sort of stuff. It's That's kind of the basics of a contact full for the bloggers. Well, there is exact example content again when you said a book out just to give you an idea off what it looks like, um, again, you can change all of the sidebar content with a blood banner or anything, but I just kind of wanted to give you a quick run down of how the block works. If you don't blocking before you may be familiar with things like WordPress, um or even blogger was humbler. Basically works in a very similar way. Or you dont click out of blood post. You can choose the category down here that you'd want to put it in or make new categories you can add commenting. You can set these to always be on if you want to. In the main settings, you can save drops at images and one no. And they basically lay out in exactly the same way as the other pages. So does one thing I do prefer about this over things like WordPress onda tumble is that you can basically customize every single page toe look exactly as you want it. So, for example, if you wanted one to be Collins. You can do that. Then you also have the option to share directly to social. So I haven't connected my social counts yet. But if I was to connect Facebook here, I could have it that as soon as a block post published, it will share its magic using the title of the block post or whatever I wanted to say on you also have again the option to schedule post, which is great. So you could write your content ahead of time and just have it going out as you need it. Or if you want. If you have multiple people working on your website, you can market to need review. Um, so, yeah, that was basically a very quick introduction toe how the blogging in the contact form pages work. I didn't want to go too much into These are fairly explanatory. Um, I look forward to seeing you guys in the next year. 6. Styling: Adding Your Flare: I guess the next up, I wanted to talk in a little bit about kind of styling. I mean, yes, you have the templates. Yeah, they look great. The kind of one ad, you're a little twist, right? So what I've done is I've gone ahead, and I've kind of updated this template to really match kind of what I would think would be great for an apartment. Eso I've added in a map saying where we are. So so London updated these images that a little bit of real text underneath updated this testimony or and left the newsletter subscription in there. Just moved it down a little bit. Um and so now it's kind of like maybe one at a little bit of color. Maybe you want to change a few things, so we're going to design for that on within design. We have style editor, which is what we'd want to go for now. On within here, you've got a with the different options that you have foot in terms of changing the website for all the different pages. For example, we have blogging here too. On social icons. The footer on everything, if you know quite sure what item something is. You can hover on it. And if you click, it will show you the available options for the area. For example, if I wanted to change this header in the middle, we got it right here. We can change the page title to be a little bit older, perhaps. Yeah, that's quite nice. And maybe I want this text to be a little bit bigger. So what I could do is go in there, change the size. You've also got lows of the adobe type kit and Google for its built in. So, you know, really stuck for choice when it comes to funds. And also the ones that you use on your site will sharp at the top, so you don't have to keep hunting for and there's good if you want to keep it kind of consistent. So, yes, I was mentioned that this logo is a little bit too big, so we can click on the logo there, and we can make it just a little bit smaller. I think that looks a lot better on then. If you want to go back to the whole menu, you could go to show all you can set Set a background image for the whole site. For example, if you don't want the website to be full width, you can change that. And if you want to get a proper preview, what I do recommend is you get safe, go about the design menu. You see this little our pits. If you click this, it will show you the website at full kind of full page size. So you kind of know exactly what people are going to see rather than you having it kind of crushed into off the screen. The announcement bar is also another cool thing that you can add, especially if you're a shop or you're running any promotions. If you enable the announced by 20% off on that was shot right at the top there, and then you can add a click through a link to a promotional page for Andi. That's kind of one way of driving more business for you. If you do the same with the mobile information bar will only sharp on mobile, and that's kind of the very basics of editing the style. So if we went through here, we could say maybe like this suck. The spacing is too big, so you can edit it through hit. Or you can just do it until you get the the icon on here, and you can just drag better up until you're happy with it. So that's one of my favorite features about square spaces that you could really just fine tune everything to the smallest detail with very little effort. And that's very important for me, especially if you're managing lows of different websites at the same time, or even just one which have lots of pages. You kind of want to make sure that everything is consistent, but in the easiest possible. And so that's the basics of styling your website. 7. 3rd Party Applications: okay. And so one other thing I wanted to touch on which I mentioned a few times was third policy applications. These things aren't necessary to build a good website on squarespace, but I do kind of recommend a lot of, um especially if you're going for more of the business approach rather than just like a personal block. Um, I kind of just wanted to give you the introduction to Really what? The possibilities are eso we'll start off with Mel Chin because I mentioned it first quite a few times. Military is basically an email marketing tool. It's one of the best ones out there. I would use it for everyone and everything. Um, it allows you to do automated emails, subscribing newsletter, send out a newsletter, and it does offer a free tier is well, which is great. Um, but it really is a very powerful tool when it comes to emailing and emailing is one of the best social marketing tools out there. Um, and the easiest way to integrate Meltem as you've seen us through the contact forms. So if you have something like this, subscribe for an email, what you can do is you can sign up for a male chimp account, go into this newsletter subscription box and then collect to connect to the mail Chimp There. Eso, once you have an account is really easy. Squarespace will guide you through the steps needed. All that really do is ask you to locate that easy, Onda. Next up, we have one of my favorites, which I discovered fairly recently, Uh is drift I drift is a great way to integrate life chap onto your website. So if you're looking toe, introduce some sort of life chat. If you've got some sort of service, a restaurant industry and you want people to go to just quickly ask you a question or whatever the way drift works is, I can show you are no website is you click it and it opens up their chat box on. In order to integrate that into your website, Will you do need to do is sign up and you get a small snippet of code and basically to put like Odin or you need to do is get oh settings and then you get a website advanced and then you go to code injection and you just dropped copy and paste that code into the header. Save it on your have drifting stored on your website. It's that simple. One other thing that they mentioned quite a lot is Google Analytics. While Squarespace does have its own analytics platform, which you can see here, it just kind of gives you the basic overviews. Google Analytics will give you a lot more depth. So if you're looking more to see what kind of platform people using, are they coming from Mac? A. Windows will be coming from phones, tablets, um and even like what page you're going to the next page from. So if they've ended up in your blood, did they come through your features page or your contact page? It will kind of give you that break down so you can kind of guide traffic accordingly. Um, Frito, I forget to mention drift has a free and premium platform. The the free one does the job for me. Um, Google, another Texas free as well. Next we have discussed, which is a great way of adding commenting. So Squarespace has its own commenting platform built into it that discusses great because it links social media or emails So if you're looking to collect more email addresses, it's kind of the way to go free again. There's also the option to include advertising in it if you're looking to build another string of revenue, Um, but again, just go to the website. It Look at that, Um, and then another one is Amazon Associates, which is basically, if you advertise Amazon products and people buy from your website, you get a sentence of the income, which is I deal with. You are in that kind of industry, sir, if you're in like the home industry or D I y. Maybe that's something good. Or you can sell DVDs if you have a film blogger or something like that. So that kind of gives you a basic overview on third party app, so I don't really want to go to heavily into them. But if you do have any questions around, don't hesitate to ask me in the in the public comments or down below, and I'll get back to you as quick as I can. Um, and also one of the question I get a lot is about imagery. While you may not have a lot of images and you want a lot of images on your page? Um, a lot of people don't really want to pay a lot of money for images on flicker or Getty images and stuff like that. So there are quite a few free resource is out there, too, Which I'm going to tell you now. Unspool ash dot com was one of my favorites on. They have new images going up every day, just kind of still came injury. You can search for specific stuff as well, Which is great. Andi, if you are a budding photographer, you can upload to the to another. One is stock. See a very similar platform. People upload their own images that are free to use. You don't have toe necessarily source where you got it from. You could just upload it and use it when you work. So 8. Squarespace Circle: Using Squarespace for Clients: Okay, so I mentioned briefly earlier about Squarespace Circle on. It's one of those parts of squarespace that isn't really well known, but what it is is it's basically exactly as it sets very community for creative pressures. Who professionals who build works that's on squarespace. So basically, to have access to squarespace circle, you need to have three or mawr websites. That doesn't mean you have personal websites, just websites that urine administrates around so that you have control over. Um but I wanted to mention it because there are probably some of you guys were looking to build more than just one website and just one of a kind of get my dear of the platform to maybe change some of your clients over to on. Yeah, I am a member because I have actually I have over three websites. I do workers as a website developer for the some people. Andi, it really is amazing. You get access to this forum where you can ask any question about how to do certain things . There's also loads of tips and guides on there, So if you really want to get into the nitty gritty of Squarespace, it's a great thing to have on one of the best benefits is that instead of having two week trials gets six months trials, that means that you can really work with someone to build a full website before launching it lives. Um, and it's just such an amazing feature that Squarespace have built into their platform for people like myself who who work alongside other people to try and get them the best product . 9. Farewell: and yeah, I guess that's it. So we built a website in Squarespace. How awesome is that? Um, so for the class project, I kind of I hope that you guys build a website in Squarespace and maybe try playing around with the third party applications and putting them in there. I just kind of getting a feel for what you like. What you don't like. I mean, the templates are a starting quick, and I'd love to see where your creativity goes with them. Um, I just kind of see what you guys come up with. If you have any questions, please do add them in the comments, and I'll get back to you as soon as I can. On also let me know what you guys think of this class on what I can add to it. What I can change. I'm always looking to try and improve these. So Yeah. Thank you so much for attending. You guys have been great on guy. Look forward to seeing your website soon. Take care a very similar platform. People upload their own images that are free to use. You don't have toe necessarily. Source where you got it from. You could just upload it and use it when you work. So