Squarespace Tutorial - 2024 (for Beginners) - Create A Professional Website

hey welcome to the channel my name is mike and in this video i'll be showing you step by step how to build a beautiful professional website using squarespace now i've built dozens or hundreds of websites using every different kind of website builder you can think of i've used easy ones i've done it the hard way and by far one of the best most robust and easiest ways to do it is with squarespace and so in this video i'm going to show you every step you need to know to build yourself a website rather than going out and hiring a developer a lot of people think you need to pay ten thousand dollars to get a website made the truth is you can spend very little money using squarespace and you can build the website yourself which allows you to customize it exactly how you want you don't need to worry about knowing any kind of coding any kind of technical stuff i'm gonna show you everything in this video and it really is as simple as just clicking dragging and dropping and if you're able to do literally anything on a computer like watch this video for example you already have the skills required to use squarespace it really is that easy so it doesn't matter if you're making one for a business or a personal portfolio or maybe you're making a blog or or maybe you're just making something for like a fundraiser or a website for fun whatever it might be i'm going to show you every tool that you need to know in squarespace to not only make a really beautiful website but also start ranking on google as well because ultimately especially if you're a business one of the reasons you want a website is so you can have people find you on google and start coming to your business and start getting more clients or customers or whatever it might be all right so let's get into this tutorial starting off on whatever browser you like to use we're going to go to centralmedia.com squarespace or you can click on the link in the top of the description it will make that open in a new tab that way we're all starting off from exactly the same page so i'm gonna hit enter right here that'll take us to this page right here we're gonna click on get started and from here it's going to ask us some questions about what kind of site we're making so for the purposes of this video i'm going to make a demo site just a little example site and it's going to be one about let's just say coffee right maybe i'm selling coffee or maybe it's a coffee blog whatever it might be but it's going to ask us what our site is about so we can describe it right here or we can find something that makes sense so i'm going to say mine's about food maybe it's like a blog about recipes or something like that so we're going to say next and keep in mind this doesn't really matter that much so if you choose something and you regret your choice we can always change all of this later on it really is very easy to edit so now we're going to say what are your goals here i'm going to maybe make let's see what we have we can sell services sell online courses collect donations so this is kind of asking like what is the purpose of your website in general and so i'm going to say i'm just going to publish a blog or other media that's what i'm doing but of course choose whatever makes sense for you then say next we're going to say where are we in the process let's just say that right now we're looking to make something we're just we're just starting out let's just say right here we're formalizing an idea so we say finish and now it's going to ask us to choose a template now the templates you're seeing are going to be different based on what category or topic you chose and what type of what type of website you're actually making so i'm doing a blog about food and it's going to show me a lot of templates that already just look really really nice so this is showing you that you don't have to start from scratch you can start off with any one of these templates and like let's let's preview this one right here so you hover over it and click on preview and we can have this website instantly just by saying start with this design and then from there all we're going to have to do is change the text to our text maybe change the font if you want maybe change the colors and maybe change some photos in there but once you find a really nice looking template it's going to make it a lot easier for you to build the website with far less effort so i really do like this one the colors i think i would change that i don't know i don't know if the green really works with a coffee one but again that's very easy to change let's go back and see if there's any other ones that make sense for us i think yeah i think i'm gonna go with this one right here of course there are other ones down below and you can always change you can say you know what maybe maybe you're not finding one in food maybe you want to go to like restaurants or or anyone any other topic you're gonna find different templates there and you can still change it it doesn't matter you can make a food website that is built on a a fashion uh template right it doesn't really matter you can change all of that very easily but i'm gonna go with this one right here i do like this one so i'm going to say we're going to say start and now it's going to ask us to create our account so our account we can either continue with apple or google i'm going to create my i'm going to create one with an email so we're going to start off with my name so we have an account now we need a name for a website so i'm going to say this is mike's coffee blog mike's coffee corner i don't know whatever we're going to call it that mike's coffee corner just a blog about different roasting i don't know whatever something like that let's say continue and it's going to show us kind of a quick little thing here i'm going to skip this and just close it because i will show you all the stuff that you need to see here but that's just kind of if you're new to squarespace those would be some some quick things so that brings us to our new website we're going to spend a lot of time on on this page right here essentially editing and building our website so this interface on the left side you can see we have a menu i'm going to walk through what all of those do in a second on the top we have some really key settings here so we can go to edit mode we can toggle between mobile and desktop view and then the middle this is actually our website it's interactive right now because we're not in the editor mode i'll show you that in a second and we have our little assistant popping up suggesting we do some different things so we're going to go through those things you don't really need this i'm going to close out of that right now so you can interact with your website let's just go back to home by clicking on our logo and from here this is our home page let's view it in the mobile view so if somebody's visiting your website on a phone this is what it would look like and so this is really going to be important to check between the two because depending on how you lay out your website sometimes you have an image above text or the other way around and it's going to look slightly different and you might have 50 50 might have half your viewers on mobile and half on desktop so we're going to be toggling between that quite a bit throughout this video so before we get into the left side we're going to dive into all of those a little bit later in this video let's start off just by some of the fundamental editing tools with this home page here so if we click on the edit button that'll toggle us into editor mode which is going to allow us to actually change what's on the page so let's click on edit and from here it's going to give you a full screen layout it might pop up with something you can just close out of that right away because i'm going to show you how the editor works here but essentially this is using something called a section layout which is a very common layout for a lot of modern websites where essentially you have kind of banners across the entire page like this entire section here you have this entire section right here this whole thing everything outlined in blue is one big section and within that section you've got a lot of little components we're going to talk about how to add those different components and move them around but you just have these general macro sections so if we want to have another section we can go and click on add section and it's going to add a section between two sections now this one right here you can see we have quite a few different options for what that section would be it could be something from maybe we want to quote in there maybe we want to have a video a contact us donation there's a lot of different sub categories for how you can have these but let's just say we want a section about our social media and from here we can have something like it'll show up our entire instagram i think this is probably a little bit more something really basic whatever we're just going to show this one so i'm going to click on this one and it'll add that in right there so each one is going to be a link this is not the most aesthetic but this each one's going to link out to our twitter our instagram and our facebook as well so that's how you can go and add those now let's just say if you like a section so let's just say you know i really like this section right here but i really want this section to be above this section the way you would do that is actually by moving the section with this little button right on this right side so we can click on up it'll move it up and it just rearranges one section above the other or you can move it back down move it to the bottom right we just keep moving them around and you can see that it's pretty intuitive it's pretty easy to go about doing this so i'm going to put it back where it was we're going to put it up i think it's right there additionally if you like this but you want to have something slightly different maybe you won't have two sections that are very similar and rather than rebuilding another section once you get the color and the text and everything really ironed out we just go and duplicate the section with the little copy button there that makes a second section now i don't actually need this so i'm going to delete it obviously the trash can is how you go about doing that so that's how you can move around and arrange the general sections now within a section if you want to actually edit that let's just say this section right here i'm going to click on edit section and you can see that we have a grid layout this is something relatively new with squarespace if you've seen any older tutorials on squarespace they did not have this squarespace was a lot more rigid before things really had to be exactly where squarespace wanted them to be but now it's much more flexible and you can move for example this photo anywhere you want here so if i say instead of the corner i want to put it up right there i can do that and now it's there additionally we can change the size of it just like that and we can make it really whatever shape or size we want and so clicking and dragging things allows you to customize this much much more than we ever were able to before but at the same time it's still very responsive so if we go and toggle over to the mobile view you'll see that everything still looks really good and we can also edit mobile view differently a little bit and i'll show you that once we get there but let's talk about editing this section a little bit more so clicking on edit section we've got some settings on the right side so we have how many rows we want and this is going to essentially be how long this section is so right now we've got 15 rows but if you want this section to be longer we could just add more rows on there similarly we can have a section that has gaps in there or doesn't have gaps so if we wanted gapless everything's a little bit tighter you can have two pictures touching side by side or you can have a gap and that'll have a little bit of a space between different elements a button and a photo won't be touching each other it's really just a style choice if we click on the three dots it'll allow us to customize a little bit more about how these gaps actually work so maybe we don't have a vertical gap but we do have a horizontal gap and that is how you'd edit that just by clicking on those three dots and then moving these sliders back and forth similarly if we go down here it says fill screen we can fill the screen or not fill the screen and that's essentially going to just change the overall size and layout of this of this section here if we go to fill screen we can choose the height if we want it small medium or large and we can choose how we want things to be aligned so we can have it align to the top the bottom or the middle and that's essentially going to be how much margin or padding so to speak is around the entire thing so that is that's like the fundamental setting for those are the fundamental settings for how to edit a single section but let's talk about the background and the colors now the background here this is just a plain color this is just a flat color right now but there's a lot of other options here so it gave us a little pop-up there talking about background animations but you can see right here we have just a plain green background now if you don't want that you can add an image we can look at video or we can look at art so if you're just looking at art for example maybe we want like this for example to be in the background that's a little bit weird a little bit much i don't know if that really makes sense for this it is also moving you'll notice that it's moving around which could be a subtle way to kind of improve engagement if somebody's on your website for a long time a subtle movement might make it a little bit more appealing but we can also change the settings here and choose what the motion is if we want it to go slower maybe like 0.5 speed very very slow motion and so some other things tied in with that now i'm not going to dive too deep into the motion things in the background i think a lot of people probably won't care as much about that i also haven't personally tested the load speed on that but i would imagine it's not going to make it faster for your website to load which is not necessarily great for um for ranking in google but you still can rank with this it's just you know if you're really focused on ranking in google you might want something a little bit simpler than a motion background but for the sake of this video let's keep this i think it actually does look really cool but let's change the colors a little bit so the background color or the shape color we kind of have a green theme on this website so let's go and add the green one right there and of course the background color we can add that we can use that as our darker color um that that looks really cool uh but that's again a little bit weird for a coffee thing which reminds me we have not actually set our color scheme for this website yet so now before we go any further in this video i want to go up to the top left click on done or hover over done and click on save you want to make sure you're doing this as frequently as possible and now before we continue doing any more editing the website is kind of limiting right now we can't actually have the full suite of squarespace features because we're on their 14 day free trial so on the bottom we can click on the little blue button that says subscribe so we'll click on that and that's going to show us a couple different plans squarespace like i said is one of the more affordable options out there not having to hire somebody to make your website but there is still a monthly fee associated with that but the good news is it kind of bundles everything into just one fee so you can see right here we're getting a free custom domain we're getting ssl security ssl is essentially the lock icon we have on the top that means our website is encrypted it's safe for people to visit it also gives you unlimited bandwidth certain amount of video storage uh seo tools and things like that but each plan does come with some things that are slightly different so if we scroll down far enough a professional email from google that would be like mike at mike's coffee shop.com right you could do that and you'd run it through gmail so it's not a gmail address but it's running through the gmail interface so it's very easy very familiar you can use a gmail app on your phone that's convenient you could still get the personal one and just upgrade to that later if you wanted but regardless it's something that you do get with the more expensive three options similar as we go down transaction fees if you're trying to sell stuff that's where commerce and commerce advanced would actually be more beneficial they're giving you lower transaction fees down to actually zero and they're giving you things like point of sale so if you want to sell something in real life somebody could just give you their credit card and just do it very easily with point of sale and of course a lot of other e-commerce stuff down below we can dive into that in another video if you guys want to know how to sell things on squarespace leave a comment below and i'll consider making that video in the future again it's something i've done in the past i've actually worked with so many different squarespace websites but for simplicity right now we're going to continue on with a blog website so because we're not doing a full-blown ecommerce site that kind of narrows it down to either personal or business now between the two of them i think i recommend for most people to go with business because you're getting two main benefits like yes it also comes with the option to do e-commerce maybe down the road you might want to sell some things on there but the two big things it comes with the first one is a professional email from google and it's free for the first year after that you will have to pay for it but it is something that is a full year of that is worth a lot of money and i think that's a great advantage of getting the business model here or the business version again having i mean as a business owner myself when i get emails from a gmail account i'm way less likely to take them seriously versus if they are like mike localplumbing.com i think that's substantially more serious way less likely to be a scammer and i'm much more likely to engage with that account so i think if you're running a business it only makes sense that you go with a professional email do you have to do through google no there's other ones out there but google is one of the easiest and most robust ways to do that the second thing that it comes with is the premium integration blocks i'll show you those a little bit more in the editor but that's why for the purposes of this i'm going to go with the business one right here so when you click on select it's charging us 276 that's for the entire year and again it's coming with the email that's coming with the domain a lot of things bundled into that so i'm going to type in my credit card my address and click on save and continue now once you've submitted that it'll tell you you're ready to launch your site we'll actually want to get our domain right now so we're going to click on get a free domain for a year you could find a domain elsewhere and that's something some people do it is a little bit more cumbersome to go and point the domain over here with the dns but it's definitely still possible so you can either use a domain you own like i said if you're going to point it to this website or you can get a domain directly through squarespace it comes for free for the first year anyway and then after that it's really not that different maybe it's an extra dollar or two versus google domains or namecheap so i usually just find it easy enough to just go directly through squarespace so i'm going to click on get a domain so that we're not like helix pufferfish9.squarespace.com right we want something a little better than that so mike's coffeecorner.com it looks like it is actually available you could search for any other domain or you can go on google domains and look at what domains are available there sometimes google is a little bit easier to find different domains but regardless i think this right here is exactly what we want so when i say checkout even though it is free so there's nothing really to check out with it's just going to ask for some contact information about us so this is who right now who is privacy is included with squarespace which means that if somebody goes to who is and looks up your domain they won't find your address they'll find like essentially a little privacy thing they'll find something squarespace puts there but regardless they still need to know your address when you're registering it so we have to put that in right now then we can click on save and continue we'll confirm the payment of zero dollars but that's just letting you know that eventually you will be renewing it uh for twenty dollars per year but right now it's zero dollars now twenty dollars per year is a little bit higher i said it was about one dollar higher i think it is actually probably a bit cheaper if we go to let's see domains.google.com usually it's like 12 a year at google so let's say mike's mike's coffee corner.com and it should be i'm going to guess like 12 a year let's see what they say um it looks like yeah got it yep twelve dollars a year so you're gonna pay an extra eight dollars for that convenience every single year if you want to point it you can definitely do that it's it'll save you a couple dollars but uh like i said it's free the first year anyway so i'm just gonna do this and you can always change where your domain is later so i'm going to stick with this one for now it's going to say we're going to skip that and we're back to editing our website so we have our domain it's going to take a couple minutes until that's actually there and of course right now our website is private as well so remember i said we want to check out our website on different computers different devices so we will want to publish our website so i'm going to say publish your site right now we're going to make it public so anybody can see this you can also password protect it again if you're if you're kind of rolling out a new version of your site and you don't want people to see some back-end stuff or have any kind of weird purchases or glitches you could password protect it until you're done no one's gonna find this website because i'm a brand new entity right here it's not like a big business so i'm just going to publish it as a public site that's going to be just fine for me right now so we're going to publish that say save and we can copy that we'll say done and now our website is an official website that exists on the internet so let's click on back to settings click on back to home and that'll bring us to where we were so let's open a new tab or a new incognito tab we're going to paste that and you can see right here that's our website so mike's coffeecorner.com it's now a legitimate website it says not secure so we'll have to set up ssl which is free but we have to actually turn that on and our website is exactly what we've been editing now let's get back to the editor and continue on with that so we're gonna click on edit and get back to making this a little bit better which that reminds me that we haven't actually set the color theme for this template yet so let's actually go over to colors and from here we can click on theme editor and it'll take us out to a theme editor where we can choose sitewide what we want our colors to actually be so let's just say if we have a logo that i don't know if it's a coffee theme do probably have like a brown in there probably have like a black and a light gray in there as well maybe you want green as well but let's just see what it looks like if we have like a dark brown so if we go to custom we could find like a darker brown so i almost feel like that actually looks pretty good right there so let's keep that one that's a good section background um kind of a good coffee color in my opinion all right so you can go through the colors there's a million different things that need to have a color you want to keep it in generally like four or five different colors a pretty typical color palette but you know looking at this you can see that there are just infinite things that you need like the link the image overlay the title background all these little different things that your website might not even have right now they all need to have a different color and you can change all of those colors uh with the site-wide theme colors in the background from that right there or we can edit them when we're actually working on the website so let's go back to colors uh so that's our palette right now so we now have dark 2 is slightly different dark one is going to be still that dark green again not a perfect palette but we're going to continue on you get the idea of how we can actually go about editing that so let's go back to site styles we're gonna click on close for a little pop-up and from here let's go into our font so you can see our fonts are uh maybe not perfect what you want like and again this is where i said that choosing a template that had similar fonts would make it a lot easier but definitely is not a necessity in the beginning because we can change it very easily so looking at this font pack we can switch right now we can have any different font pack we want and so maybe maybe we want kepler maybe i want this one right here we can check that out that one maybe is a little bit more readable but it might not have the same like coffee shop kind of feel to it maybe orpheus pro that one looks pretty good i think i don't know there's a there's a ton of them go through these and figure out which one makes the most sense for your website and once you find one that you like just stick with it and click on back now from here we can change some other things like paragraphs what are they going to use miscellaneous things and buttons what kind of text are they going to use you can change all of that right here going back to site styles again we did fonts we did colors animations is a big one right now it's going to fade between different pages and when you open up different things you could have it clip or scale or flex or just do nothing if you want it to be a little bit of a cleaner one i'm going to keep fade that's going to be fine for for most websites out there a lot of websites do that anyway and most people don't even realize that that's happening spacing is another one we can have the page with and the site margin so if you want to have it a little bit narrower you could do that and again this just depends on where you think people are going to be viewing it and additionally how you want it to look when they're viewing it on those different devices because different devices have different aspect ratios my laptop is very different from my desktop now let's actually close out of site style so we can click on close but if you ever want to access site styles later on it's very easy to do like i said either by editing the section and going to theme editor or more easily you can just go up to the top right next to the desktop and mobile view it's a little paint brush that brings you right into site styles where you can change the fonts and colors and everything i just showed you so that's how we do that let's go back down to that real funky looking one that moves around a lot uh this one let's click on edit section again and so this section we talked about the colors we talked about the background we talked about the formats there's nothing really in settings that we have left to do but the elements within here are something that we want to change around so if we want to have for example this right here we can click on any element in here and we can move it to wherever we want so we can move it over right here and suddenly it's behind that one now if you don't want it to be behind you want to change the arrangement we can click on this little button right here which says move forward or you can click on the other one moves backward as you have more things stacked you can move them forward and back until you have text on top of images or images on top of buttons or whatever you want like backgrounds you can move things forward and backward very very intuitively right there we can also align it vertically so if we can change we can have the text in there kind of centered vertically we can match it to the bottom or we can have it match the top so that's how you can move around where the text is within the box i'm going to put it in the center and if we actually click on that you have a pretty standard text option up top we can add bold we can add a link in there so if we want this specific text to link out to another page on our website or maybe to let's just say our youtube channel we can click on the little link button and here it can it asks us where we want to actually link to and if you click on the little gear icon right there i did that a little quickly if you click on the gear icon you can go and choose where you want the link to actually go so we can have it go to an email which is really cool if it's just my contact information somebody will click on that it'll automatically open up their email application or whatever it is on their browser and they'll be able to send an email to me very easily we can have a web address like i said that might just be like my youtube channel just like that and we can have that open in a new window so maybe that's what you want you can have a file which is great if you want somebody to like hey download this is my my mp3 file this is like a song that i made whatever or it could be a pdf that could be right there we could also have a page within this website or a phone as well and i'm going to click save just with youtube channel right there and we can change really everything you want about this i'm going to change the alignment of that by clicking this i want it to be centered and i want it to be i'd rather have it all be a little bit larger so we can have it right now it's a heading 4. we can make it a heading three again that makes it a little bit bigger and let's make this not kind of offset so get rid of that space so it's perfectly stacked and from here we can go and change the color and i think that needs to be white so it's more readable okay so there we go that's still let's move it up now there we go can move it up a little bit now it's a very readable very easy very easy to edit all of that stuff but again all you have to do is click on an element drag it to whatever size or shape you want so we can do that shape right there and we can have this maybe right over there right above our shoulder and that could be a very easy way to edit anything over on the right side same thing with these if we click on this you can double click on it you can highlight everything and you can change whatever you want about it but sometimes you want different settings but maybe like this text is kind of hard to read on that background so maybe we want a background within this text box and the way to do that would be to click on the word text and we can click on the little pencil icon to edit that we can add a background here in this background again we can have a radius on there so it'll give you a nice little rounded corner and we can add these radius the radii to whatever you want all four corners looks good to me we can have padding on here a small medium large top and bottom we can change what that is so i'm going to make that a little bit smaller so probably just like that looks good and add a little bit more on the a little bit less on the left and right that looks good to me so again it doesn't look great but you get the idea i'm just showing you what the tools are i wouldn't actually use this background that moves around but that's how you'd edit a single text box to add some things behind it but let's say you know what okay cool you get it that's how you edit photos that's how you edit text on there but what about if you want to add something else to this box maybe we want a button down here how do we add a button well to add a button what we could simply do is go to the top and if we hover around here we should see so let's click off of that which is the ad block so if we click on add block it'll give us a list of all the different types of blocks we can add so an image is a block a text box is a block a title is a block these are all things everything here that's outlined in blue when you're hovering around is a block and they go within a section so here you can see we can add forms newsletters quotes we can embed different things so if you have an application that is external and you want to embed that in here so you can do code right there you can put that in there and so that would be i don't know some third-party thing that squarespace doesn't necessarily offer going down we've got scrolling and chart and a lot of different things of course you can scroll through this on your own time start to figure out what makes sense for you but you can see that there are also a lot of integrations we've got menu we've got amazon opentable donation things like that that you will have to get premium for we'll talk about actually getting premium but other than that we can go up to the top let's just say like i said we want to add a button so if we want to add a button let's click a button click and drag that and we can drop the button wherever we want we can put that say right there and this button let's make it a huge button i don't know just for fun see if we can get a giant button there and the button has the same editing tools as the rest if you want to click on edit you can see here we can choose what the text is going to be so the text could be download let's say download my download my mixtape and then the link i'm going to click on this we're going to make this a file we can upload a file right now so click on upload file and then we can click on save and now that button is going to download a file for somebody or at least open it in a new tab that's an image is what i used but you could use like a media file whatever it is mp3 whatever you want to do now if we go to design we can choose what this button is actually going to look like again the button style is not something you can customize right here that's going to be in the theme editor so if i don't like the color of this button i can simply go up to the theme editor click on site styles and say okay right there we can go to colors and from here we can go and edit what the color of our buttons is and so right now if we go down to buttons there we go buttons we can change the background of the button so right now we have this color so i don't know maybe we want it to be like white for example and that that's how we could go about changing that so let's go back to site styles we'll say close it looks like i accidentally moved it so it's covering this up i'll move it down a little bit and again you see how there is that outline box depending on how you're viewing this it's going to move things around a little bit and so you want to make sure i always recommend this view your website on your computer and also maybe you see a friend's computer if it's a wider screen a narrower screen different displays make it look very different so for some sections like this one you might notice that there are no blocks in the section if we click on edit section there's no images in here and yet the entire thing has an image so you might be able to guess what that is it's actually the background of the entire section so if we click on edit section we can go to background it's currently an image and we can change first of all the positioning of that so what's like right there it's going to move where it is so if we slide the little dot up here it'll center it there we can center it down here and that's going to be how you reposition that but again this is not the photo that we want there i mean it is coffee which might tie in with this pretty well but let's say we want our own photo so we can say replace and we can upload a file so we can say upload file ah and i don't know let's just say this photo right here i don't really have a lot of photos of coffee so let's just say we're gonna go with this one we can do is it the full width so right now full bleed or it can be inset there's a smaller photo within there i'm gonna go full bleed i think that looks pretty nice with this we can have an opacity on the on the overlay so right now it's overlaid with dark green 10 makes the text like a little bit more readable versus like a full saturation and contrast in the background i usually like keeping the overlays and maybe around like 15 for something more vibrant like this and we can have image effects as well so this could be something like film grain if you wanted to look a little bit older that's something that is moving though so some websites that's really cool some it's not it could just be kind of distract let's actually check out some of the other ones as well so tilt it looks like this one just kind of i don't know it doesn't really look that different to me liquid oh that's that's too weird we can't do that so i don't know play around this if you want something fun there are some weird funky things there i'm just going to go back to none um or maybe grain i kind of did like film grain so we'll just we'll leave it as that okay right and so now we can click off of that and that is that section there going down we've got of course this section which has some information that you can have on you know what you're doing and you guys already know how to change all of this text including buttons and links and things like that so i'm not going to bore you with doing that again going down we have down right here a member sign up so booking a free consultation if we click on editing that it'll tell you what member you want to go into i'm not making a course in this in this video so we can actually just get rid of that if we don't like a section like this little block that we don't want we can actually click on that and click on the little trash can so we're going to remove that one so it no longer needs to exist okay so i think you kind of get the fundamentals of how you can build a specific page here but this is by no means the end of making your website a lot of people like to just make their website look pretty and then they're like alright i'm done i'm ready to go and then they wonder why their website is slow why people can't get to their website why it's not found on google and why they have a lot of other problems in the background and i'm going to dive into all the important settings you need to know after just doing this so those are the tools let's click on save and we're actually going to go back and we still haven't talked about this main interface here so i talked about how this in the middle is your website but i didn't talk about what's on the left side so if we click on pages this is going to show us the different pages we have now we can edit where the pages are or you can just go to individual pages if we want to go to services we can click on that it'll navigate us to services and from here we can click on edit and edit the services page similarly you can just navigate through your site on the right side here like if we want to do the about us page i could just click on about and that would take us over to the about page and i can edit this from here as well or i can click on the logo to go back home but looking at these let's say that you want to maybe rearrange them maybe you want services on the left and then you want coaching and you want about all the way at the end maybe that's not really that important to you so you want to push it over to the right the way to do that would actually be to hover over these click on it and drag it down so we can click on it and drag it down below a contact and that'll move it rearrange these so that the top is on the left side and the bottom is over on the right side now additionally you'll notice that we do have some sub pages under recipes so if we hover over that you get some different things popping up now let's say we want to have maybe coaching or services are both underneath recipes right the way to do that would be to drag them down and then drag them over to right there so you see that has a little bar on the left side we'll let go and now it's underneath that same thing with services maybe that's going to be down there as well and it cleans up your menu on the top and it makes them all as a drop down menu there we could also add other pages that aren't here so we're going to click on add page we can make a new page it could be a blank page it could be a layout from something in in the past it could be a scheduling page we could have blog store portfolio events videos or just a link that goes to actually let's add a link so let's say that link maybe is uh your youtube channel youtube channel and this could be your youtube dom your domain here or your url and we're going to say save and that way right there it says youtube channel so somebody can actually hover over this click on youtube channel and it will open that actually in the same tab so we don't want to do that right now we're going to go back and start editing this a little bit more and then down here we have member areas this is an add-on as indicated by the little blue circle with the triangle in the middle so if we click on plus right here it'll tell you that it is like you can select a plan to do this so we click on select plan it's like nine dollars a month to do the basic one uh 18 for you know so it kind of goes up from there and with this this could be a great way to i mean maybe collect emails there's cheaper and freer ways to collect emails but this would be a good one kind of like a patreon style thing where people can become a member they can get extra content special blogs it could be really whatever you want they can have additional videos or resources that they're able to download really just a private website that they need to be a member to actually sign up for so i'm not going to do that in this video but it is something that you definitely could do and it's really not that hard to do we've got one-on-one coaching online courses live events those are three things that i don't plan on having for this website so if you don't like a page you can simply click on the little trash can next to it and that will get rid of that so we're going to delete that one and these are locked anyway so we don't even have the membership right now anyway so i'm going to say get rid of that now let's say that for example the services page we don't really want that up on the top especially not under recipes so we can do is click and drag that and just drag it all the way down here to the not linked section so this section here are other pages that we don't have linked and these could be your home page which technically is linked by your logo on the top but it's not in the actual navigation bar additionally you might have like a terms and conditions or something page and you can have all of that down here as well as blog posts too so i'll dive into blog posts but let's first talk about a little bit more of the search engine optimization and the settings you have with these pages so let's start off with contact so click on contact and from here it shows you the page but you don't actually i didn't really have to do that i could have just clicked on the gear icon and from here in this pop-up we have the general the search engine optimization the social image and advanced starting off with general this is going to be the page title so let's say maybe you want it to be contact us instead of contact navigation title because they contact us you know slightly different the url slug is essentially what's at the end of the domain so it'll be mike's coffeecorner.com contact and so you want this to be clean and easy to remember it's good for search engines as well as for people a readable url really goes a long way so we can leave that we can have an enabled or a disabled page so if you're still working on it you can disable the page or you can password protect it so that only you're able to see it and additionally you can duplicate the page this is a powerful thing if you have like uh my top website picks and then you want to make another one that's like my top headphone picks and you want to have the same format you can duplicate the page and that way you just save yourself a lot of work by not having to remake the same page so let's go down we have search engine optimization obviously as the name suggests you are optimizing your website so it can be found in search engines like google how to get found on google essentially and so this is going to kind of it's not going to guarantee you get found on google but it's going to do a couple things here that make it a lot easier for people to click on you when you're in google and also for google to identify what your page is now google's really smart they're pretty good at identifying what your page is the big one here is to make it so that people can see what your pages so people know what it is and then they're more likely to click on it and the more people click on it and they like your website the more google is going to show it higher up in search in the future so like for example if i look up coffee recipes and it shows up with something weird like this this description will automatically be generated blah blah blah like i'm not going to click on that and google is going to say all right nobody's clicking on this this random result we put up there let's kick it to the 100th page this is not relevant so that's why you want something that's kind of enticing it's going to have a good click-through rate and it's going to be descriptive of what your page actually is so the title let's say contact us so contact contact us today i don't know something like that um or let's just say how to contact us let's say how to how to contact us maybe that's what people look up of course you want to do a little research with your keywords a good way to do this is actually through trends.google.com so if you're stuck between like contact contact us and like contact um contact page like you don't know what people search more you can type in both you'll see that contact us is way more common than contact page when people are looking searching things like google that's not the best example but in many situations like if you're looking up earphones versus earbuds then that would be a good way to figure out what the best word is that's more searched than the other one so that's something a quick little tool it's free to use i recommend it google trends trends.google.com now the seo description is this little paragraph down here now it's automatically generated based on random paragraphs in your page but i usually like writing it on my own so you just add something like that and you want to have maybe your keyword somewhere in there but don't load it up with too much of your keyword but just you know once in that little description might be kind of useful and of course you could hide it from search results if it's like a more private page or something you only want to link to you can always do that right down here then we can go down to social image so if somebody shares this on social media say facebook for example there's going to be a little preview there and there is going to be an image that's going to pop up if not one directly from your page so if i just want to add an image let's just say maybe this one right here that's going to be our contact page and it's just going to be an image of i don't know a little cup of coffee with some beans around it and then if you go down to advanced this is some extra header code if you have like a some more advanced things like facebook pixels and things like that you can add some header code and inject it directly here i'm not going to do that right now because we don't have any other integrations yet so let's click on save and go back from there so that's like the fundamentals of your page navigation the different pages you have you can dive into them a little bit more and click on these and figure out what you want to do with courses and blog posts and things like that blogs are really really powerful you can make different blogs with squarespace and of all the website editors or website builders out there squarespace does make it relatively easy actually probably the easiest to actually make a blog so i'm going to go back to home next we have design now design has you might think all right well we already chose the color and the theme and everything there's more to it than that so site styles yeah that's what we already did but what we didn't do is the browser icon a lock screen checkout page 404 and all these other specific pages that usually people don't go to and it's not one that you want to spend a ton of time designing but for example a 404 page if you had a broken link out there or if somebody typed in instead of like mike coffeycorner.com contact they did slash contract or like somehow typed it wrong then they would end up on the wrong page they would end up on a 404 page which you want it to say something like that so this is one that says like oh couldn't find what you're looking for sometimes i recommend you could either redirect to another page so sometimes i make my own 404 page that says oops you found the wrong page here are some things that we recommend so that way people can just click on something and keep going through your website even though they ended up on the 404 page because realistically when you start getting more traffic and you dive into it a lot more people end up on the 404 page than you really want and so making it kind of optimizing that page i always found to be a really powerful tool rather than just saying you screwed up go away right having buttons on there and sending them to other parts of your website can be a really great tool so let's go back to design of course we've got other pages i'm not going to talk too much about those right now but browser icon is a very important one so this is going to be your favicon which as you can see on the top is right now just a little square but if we go to say amazon you'll see on the top we've got a little amazon logo and so having one for each indiv each respective website is really an easy way for browsers to kind of organize themselves and for people to recognize your logo and your in your tab there and so having your icon there really goes a long way so i'm going to upload a file it has to be really really tiny so let's see this coffee from a previous video see if that's small enough i think it might be yeah there we go that's small enough so that's going to be showing up up there in the future i'll click on save and when somebody goes to our website that's what they'll actually end up seeing so we're going to go back to design and social sharing we can have a social logo i'm not going to do that right now access to nine screen that's pretty much everything for the design going down to commerce we're not really selling anything in this video but i just wanna show you guys real quickly if you're selling things there's an entire interface here for listing different products tracking your inventory tracking your customers not tracking them but keeping track of who was a customer before and what their contact information is and what they bought in case they're trying to return something it's just really a powerful tool there we also have different integrations with facebook and instagram you could sell directly on instagram so people can just go find your instagram ad and just say bye and just do it all right there and a lot more than that but like i said i can make another video about selling on squarespace if you guys want to see that leave a comment below we'll talk about that in another video marketing is a super super powerful one and this is where we get a lot of other integrations because squarespace plays nicely with so many other brands out there so within marketing we have email campaigns and you can manage your email campaigns through squarespace they have their own marketing thing that's not usually what i do i usually use something called mailchimp and you guys can check out my full tutorial on how to use mailchimp it's free to start it's very easy up to your first i think it's like 2 000 contacts are all free and so it's a great way to kind of bootstrap your business and spend less money but again if you want to just have it smoothly integrated with squarespace with as little effort as possible you can start going off with you can really start working with squarespace they give you i think three campaigns on the bottom that are free and then it's going to be a couple dollars per month to actually get those plans like i said mailchimp is free easy to start and that's why i usually start off with that we've got seo as i talked about before the search engine optimization they have a checklist here which is also really convenient i showed you how to do some really basic seo a couple minutes ago but in here it'll show you a lot of other things about each individual page i mean like i said that's the basic stuff i showed you but then down here we did already add an icon we added that we have a 404 page we reviewed the content but there's more to it like as you get down they're going to talk about make sure your content has like alt text on on the images they're going to suggest that you use keywords and design your website a certain way and it's not as hard as you think a lot of times just making a better website is going to make google like your website more because ultimately google cares about the end user they want to be a trusted source and if i know that when i use google i always get good websites that i like and if i use bing i get trashy websites i'm going to use google so that's why google wants the user to be happy so you making a better website that makes people happy makes google happy and makes you rank higher so everybody's happy just making a simple better website that answers the questions that the user was actually going to your website for in the first place so closing out of this let's go back to marketing and from here we've got promotional pop-ups announcement bars instagram stories facebook pixel and ads so i mentioned facebook pixel before it looks like you can actually integrate it just right here again that's going to be more something for e-commerce users that are running ads on facebook same thing pinterest save buttons you can integrate that i'm not a big pinterest user but i know a lot of people love it it is really powerful especially for kind of bloggy things uh recipes and things like that pinterest is definitely a powerful one that i recommend checking out so let's take a look at promotional pop-up and announcement bar announcement bar is easier let's start off with that one and that's going to be something on the top i could just say like hey store wide sale or something like that so i'm going to go and enable the announcement bar nice little bar across the top it says this is the announcement so we're going to say use code mic for 20 off and that's again e-commerce is when that makes the most sense but you could just say like happy fourth of july or like you could i don't know whatever you want to have on the little announcement bar and we can have it also link out to something as well so if somebody clicks on that it could go over to something so i could say like check out we could say subscribe to my youtube channel there we go we just do that right for example so if somebody clicks on that it'll bring us over to the youtube channel and they can subscribe if they want and we can go back to marketing now and promotional pop-up is another thing i mentioned and so the pop-up right here boom join our mailing list that's a great example of what to use this for on a blog you could also have maybe like join our mailing list and you get like 10 off or whatever uh if you have an email list like that but again that is not something that i'm really going to be doing right now so you know you can go down here and change what the content is change that stuff uh change the layout of that for example so if we want to have i think i like this layout i usually use this layout i like this one better so we'll go and save that and we can go down to go back to marketing there we go and i kind of sums it up for marketing going back we've got scheduling this is a new feature that squarespace has they haven't always had this and it's something that i mean if you're like a dentist or a doctor or a i don't know some like a lawyer somebody like a local a local business and you want to have people scheduling with you rather than always calling you and then are you free this day are you free that day they can just open this up and have their calendar next to them and just choose a day that works best for them and schedule with you now this is not free it's 15 a month so again it's an extra cost there but if you need it or if you think it can really be useful for you chances are it could definitely be useful for your customers and is very likely especially for a younger crowd a lot of people don't really want to make phone calls they'd much rather just look on here it's easier for them they can multitask while they're at work while they're in a meeting whatever and boom schedule a dentist appointment just like that so i'm going to go back to home and that's essentially scheduling like i said big rabbit hole really powerful once you get down that but i'm going to go down to analytics and this is something that right now being a new website is not going to show us really anything but as you start to get more traffic ignore sales we're not selling anything right now but if you go to traffic eventually it's going to show a lot more about who visits your website what the bounce rate is how long they spend on your website all these kind of analytics that as i said before can give you insight into how much people like your website what they like about your website and ultimately that's going to help you rank higher on google by knowing what people like and what people don't like so if people visit your page and they're on there for a very very very brief time and they visit another page and they're on there for a couple minutes then you know that that page is going to be great this page there's something wrong it's not answering people's questions maybe it's not loading right maybe it looks bad and you can optimize it from there additionally you can look at traffic sources and keywords as well and this is going to help you figure out who your audience is where they're coming from and overall this is going to be a powerful way to figure out how to optimize your website in the future and how to kind of either get more customers or more affiliate traffic or whatever it might be have a more successful website based on figuring out what does work and what doesn't work i'm not going to go into profiles but we can go into settings here and this again has quite a few different things so we have our domain we don't have google workspace that is the email that i mentioned before that would be like mike at mike's coffee corner.com and so if we click on google workspace you'll see here that we can actually set it up uh we could pay annually or monthly right now we do have one year of free workspace so it doesn't really matter i guess you might as well just go with annually annually because it is free for the first year and here you're going to choose your name your username so it's going to be like mike at mike's coffeecorner.com and you are getting one account like this for free and then once you set it up you can actually go over to gmail and sign in through gmail that means you have a youtube account google drive was like i think 15 gigabytes of storage uh email and everything else that comes with a google g suite or just google workspace is what they now call it so i'm going to close out of that i'm not actually doing that at the moment but that is where you'd find that and how you'd set that up going back to settings we've got site availability it is public right that's what we want member areas i'm not using them right now but if you want to pay for the subscription a very powerful tool we've got language and region of course right now we're in the united states so that's what i'm going to keep right now but if you want to have it available in other languages you could use this right here if people are using chrome they're probably using google translate on chrome anyway but it is something that can be a powerful way to reach a much wider audience especially for somebody like a blog if you're targeting local search so maybe you are a dog walking business or an accountant whatever it is if you're worried about people around you finding you and you're really focusing on local seo then you want something called your nap or a name address phone number so nap to be consistent across every different listing you have and that is your facebook business page your google my business account uh your angie's list or what yellow pages whatever it might be everywhere that your business is listed you want to have the same information and so to have that the same on your website you want to go down to business information make sure you have the right phone number the email the physical location if you have one of course your business hours that's going to be a big one as well and this is something that you can use throughout your website but it's something that you really want to make sure that you have consistent between here and those other platforms as i mentioned for local seo purposes because google kind of looks at all of them and once google realizes they're all the same google's more confident in showing that to more people out there and they're more confident that you're a legitimate source that that viewers are going to like going to of course adding social links here will make it really useful for you know throughout your website for example over here right there we've got instagram facebook and youtube so adding your link right here really goes a long way so if i just want to say like mike o'brien you essentially just say instagram.com your username so mike o'brien with two ends if you guys want to follow me go ahead and follow me there i don't really talk a lot about this kind of stuff on my instagram but you know i do talk a lot about like travel and tech and different things on there i don't know come check me out dm if you have any questions about squarespace as well uh as far as youtube goes let's say central media central media and if you guys haven't subscribed yet do consider subscribing we talk a lot about small business stuff from legal aspects to setting up websites to marketing and really we're expanding we have a lot of big videos planned for the future so head on down click that subscribe button if you guys haven't already we'll go back to settings from here we've got a connected accounts extensions permissions domains google workspace billing blah blah other stuff but a really big one that i kind of just glossed over right there that is really important is extensions now squarespace hasn't always been the biggest with having applications and kind of working with others but that's mostly because they do everything pretty much in-house but as of maybe a couple years ago they started doing extensions and these extensions are going to be essentially little apps or plugins you can have on your website that give you substantially more functionality so shipstation is a big one and this would be a great way if you're doing e-commerce to manage like a lot of things in e-commerce we've got quickbooks connector and all these different finance and tax things again if you're doing e-commerce quickbooks would be super convenient there to just manage your inventory right there we've got printful especially if you're doing something like drop shipping if you want to do printed drop shipping which i do have a full video on how to do that with printful you can integrate it right here and of course down here we've got sales and marketing and this could be email campaigns but if we go to view all there's more than just the squarespace email campaigns as well as i mentioned before i really like to use mailchimp and mailchimp right down there integrates very well with squarespace so again easy to do all of that stuff we've got translation down here we've got texting right here a lot of different things you can have on your website and all these extensions are kind of categorized over on the left side so we've got inventory finance shipping and just all extensions in general and you can see that these really do a lot of different functions so adding one is as simple as so let's just say printful you click on it you say connect and it's going to walk you through that process of logging into your printful account we say allow and then it's going to kind of just merge those two together make it super easy all you have to do is log into it now and it will be automatically connected just like that so i'm going to go back out of extensions like i said super powerful check them out or at least browse through them not everyone's gonna need every extension and having fewer extensions is usually better you don't have too many uh just gets a little bit confusing and chaotic but they're still they're great to have so let's go back to home and that's pretty much everything that i wanted to show you with the settings but there is one last thing i want to show you with the editing of your page i mentioned that let's just go back to the home page i mentioned that your mobile site might look a little bit different than your desktop site like you might have things not exactly where you thought they would be so if i click on mobile site you'll see maybe for example i don't like how much space is right there or maybe i just don't like this section at all if we click on edit you can edit your mobile site separately from your desktop site and that means that you can have essentially two completely different websites that i mean you make one the other one shows up but you can customize the mobile site and tweak it without affecting the desktop site which i think is really really powerful so for example this section right here if we click on mobile it might be arranged kind of weird because we did a lot with that section right so here you can see nutrition guidance is not on the image the image is kind of weird and everything's kind of like all skewed around so we can just click on edit section and we can edit this just for mobile right now so if we click on the image we can change the size of that image we can bring it up to here all the way up and of course we can change the arrangement of that so the text is on top we can move the text over there make it a little bit smaller and there we go so now we have pretty much exactly what we had before but now it's optimized for mobile and of course if we go back to desktop you'll see it doesn't actually affect desktop desktops doing exactly what it already did and now mobile is doing its own thing here as well so editing in mobile like i said can really go a long way if you delete something here though it will delete it in desktop so be careful but i want to point out if i deleted this say remove and say i clicked both of those by accident i don't know how you do that but let's just say you did you can just hit ctrl z or on a mac it'd be command z and it brings it back so the undo button is also available on the top left right here undo and redo so really a powerful tool if you accidentally make a mistake as we all do when we're learning to make a website that's going to be something that you'll probably end up using quite a bit so back to desktop view we're going to say done always make sure you save make sure your website's published and of course the last thing to do is to go to mike's coffee corner corner.com make sure our website is looking good and there it is so if you guys enjoyed this video you could just follow this little banner's advice and subscribe to the channel i wish you all the best of luck with your squarespace website it really is a powerful tool one of the best ways to make a website i'm excited for you i really can't wait to see what kind of website you guys make what kind of success you find on the internet leave a comment below with what kind of website you're making and maybe any other questions you have about this as i said if you enjoyed the video consider liking and subscribing i'm mike o'brien from central media and i'll see you next time

Channel: Santrel Media

Views: 357,971

Keywords: nate o'brien, mike o'brien, santrel media

Id: kfiCwAROGlE

Length: 56min 49sec (3409 seconds)

Published: Thu Jul 21 2022