Hello,

Sign up to join our community!

Welcome Back,

Please sign in to your account!

Forgot Password,

Lost your password? Please enter your email address. You will receive a link and will create a new password via email.

Sorry, you do not have permission to ask a question, You must login to ask a question.

Please briefly explain why you feel this question should be reported.

Please briefly explain why you feel this answer should be reported.

Please briefly explain why you feel this user should be reported.

Home Latest Topics

  • 1k
  • 1k
Kevin Stratvert

Squarespace Tutorial (2024)

video
play-rounded-fill

Today, we’re going to look at how to make a website using Squarespace. Squarespace is one of the most popular website builders that lets you create beautiful and also professional websites without needing to know anything about coding. As long as you can drag and drop your mouse, you could build a website. In this video, we’ll build a website completely from scratch. We’ll add images, text, pages, and more. And then at the end, we’ll publish the site. If you follow along, you’ll have a fully functional website. Let’s check this out. To get Squarespace, head to the following website. You could click on the card in the top right-hand corner, and I’ve also included a link down in the description. Once you land on this homepage, click on the button that says, get started. Squarespace offers a free 14 day trial and you don’t have to provide any payment information upfront and you get access to the full functionality. If you need more time as part of the trial, you can reach out to the customer support team. This now drops us on a screen where we can tell Squarespace what this website is about. This helps Squarespace customize the experience to make it easier to pull your website together. So, you have all these different categories here, or you can even describe what you’re looking for. I’m pulling together a website for the Kevin Cookie Company Factory Tours, so I’ll select food right down here. Down at the bottom, I’ll click on next, but feel free to choose whatever category works the best for your website. Over here, you could also indicate what your top goals are. Now I want to sell tickets to the factory tours. I’ll select sell products, but again, choose whatever goal best matches your website needs. Then let’s click on next. On this next page, we have two different options to get started. Here, you can start with a custom template that you build up and in a moment we’ll do this. But over on the right hand side, you can also start from a professionally designed website template. Let’s click into this just to see what some of these templates look like, and then later we’ll come back and start from scratch. I’ll click on this option and then at the bottom, let’s click on finish. This now opens up a page with a wide variety of different templates that you can start from. Now on the previous screen, I indicated that I want to sell products and it’s also for food business. And up on top, you see that it pre-selected these different filters for me. But let’s say I just want to see some of the popular designs. I’ll click on this topic and down below I can see some of these beautifully designed websites. Here, you have all sorts of different options. Now with any one of these templates, think of it more as a starting place rather than a final destination. With any one of these templates, you can come in and you can modify the images. You can modify the text, the layout, you have full control over what the final product looks like. Again, this really just helps you get started. And I think you’ll agree that there are some really beautiful looking templates. Now up on top, you could select different types. Maybe you’re a photographer and you want a portfolio website. Here you see some different options. Over on the right hand side, you also have different topics. Again, I’m setting up a website for a food business. Over here, I can filter it down to the different food options. Now I want to build my very own template. I don’t want to have to rely on one of these pre-created options. Over on the right-hand side, you have the option to build your own template. Let’s click on that. Although we chose to build our very own template, Squarespace is still going to help us get started with it. So over here, we have a few different steps that we need to jump through. Let’s click on the button that says let’s go. On this next screen, you now need to create an account. The reason why is once we start building out our website, we want all of those changes to be saved under our account. Now, one thing to keep in mind is you can make any number of websites that will live under your main account. You have a few different options for signing up, so feel free to choose the one that works the best for you. Once you finish creating your account, you’ll land in a flow that’ll help you pull together your custom template. Down below, we’ll start with the site title. Up here in the top right-hand corner, we now need to type in a title. And this is the text that appears in the top left-hand corner of your website. It’ll also be on the browser tab in your web browser. So, it may feel like you’re really committing to something here, but keep in mind, you can always come in later and you can change the title and we’ll look at how you can do that. For now, I’ll type in the Kevin Cookie Company Factory Tours. You could type in up to 100 characters. Down below, let’s click on next. On this screen, we can start building out the different sections on the homepage. And again, this is really just to help you get started. Later on we could go in and we can modify all of this. Now, I think it makes sense to have an intro section, so I’ll check this box and here we see an intro section appear on the page. And over here, I could also choose a different layout option and keep in mind later on, we’ll have many more options that we can choose from. But I just think for the initial site, this probably works well. I’ll select that one. Over here, I have some other sections and maybe an about section would also make sense. I’ll click on that. And over here again, I could also choose a different layout option. Let me go with this layout right here. Now down at the very bottom, I think I’d also like a footer on my website. So, I’ll also check that as well. And for this one, I’ll stick with the default layout. Now I think for now this looks fine. Of course this won’t work for cookie company factory tours, but again, we’ll come in and completely change this later on. For now, this is good enough. So, in the bottom right hand corner, let’s click on next. Here, you can now start adding pages to your website, but again, later on we’ll be able to add and also remove pages. For now, I’ll deselect about and I’ll simply stick with a contact us page. I’ll leave all these other ones unchecked and down below, let’s click on next. On this screen, we can choose a color palette for the website. Now with the Kevin Cookie Company, blue is our theme color and right up here, this one looks pretty close to our brand color. Of course, here too, later on we can go in and we can modify the specific values of these colors, but I think for now this works well, so down below, let’s click on next. On this screen, we can now choose a font that’s going to be used throughout your website and here too, you can also modify it later. Right up on top, we have sans serif and these tend to be very modern looking fonts that you’ll find here at the top. You also have serif fonts and these have more of a traditional look. So, it really depends on what type of feeling you’re trying to convey on your website. Down below, you also have mixed where it’s a combination of both sans serif and also serif fonts. I’m building a website for a cookie company and I want it to look modern, but also fun. I think Poppins would do a really good job. I’ll click on that and then down below, let’s click on finish. Now that we’ve defined the basic structure and also layout of the website, Squarespace offers to populate the website using AI generated text. That sounds interesting, so let’s click on continue. Over on the right-hand side, we can type in a description of what the website is about. Well, this is the homepage for the Kevin Cookie Company Factory Tours. We offer to take fans of our products on a tour of our factory so they can see how we make our amazing chocolate cookies. In the bottom right-hand corner, let’s click on next. On this next screen, we can choose the writing style. Now this is for a cookie company, so I don’t think neutral is good. We want it to be maybe playful or maybe quirky. I think playful works well. I’ll check that, and then down below, let’s click on finish and this will now populate the website with sample text. And look at that. This now drops us into the home interface, and right here, we can see the website that we’ve started pulling together. Now, of course, this does not work for cookie factory tours, but don’t worry we’ll come in and we’ll start modifying and editing what this page looks like. In the top right-hand corner, we can preview what the page looks like on a desktop PC. And all in all, this is a really good start. Right next to that, you can also toggle into mobile view. So here you can see what the website will look like on a phone. This is a responsive website that works on all types of devices. Up in the top right-hand corner, you can also switch into a full screen preview. Here that gets rid of all of the different chrome around the edges. And over here, we can click on that again and that returns us to that original view. Let’s switch back into the desktop view. I’ll click on this. The website down below is fully interactive. For example, if I click on the contact link up on top, that navigates to the contact page. To get back to the homepage, in the top left-hand corner, I’ll click on the Kevin Cookie Company Factory Tours, and that brings me back to the homepage. This is one way to navigate throughout your website. Also over on the left-hand side, we have this menu, and at the very top, you have an option called website. Let’s start by clicking on this. Within website, here too, you can also navigate throughout your website. For example, here I could click on contact and that too will also navigate to the contact page. To get back to the homepage, down below, I’ll click on home and that navigates back to the homepage. So, this is another way that you can navigate throughout all of your different pages. You’ll notice that there are three different categories of pages. We have one category called main navigation and it has the contact page. Any page that lives under main navigation will also appear as your top-level navigation bar. Right here, we also have pages that live under not linked. These are pages that do not appear as part of the top level navigation. So currently the homepage is there. And the reason why is, well, if we want to navigate to the homepage here, we could click on this text. You could add any number of pages under main navigation and also not linked. And although it’s under not linked, you can still link to that page, but it just won’t appear as a link as part of the top level navigation. Down at the very bottom, we also have a set of utility pages or utilities. So, think of someone trying to navigate to a page in your website that doesn’t exist. I’ll click into system pages, and that would show a 404 page. And here you can see what that looks like. So, these two don’t appear as part of the top-level navigation, which is why you see them down here at the bottom in utilities. Although we have these different categories of pages, all of these can still be indexed by search engines. So, you still can get search traffic to any of your pages, whether or not they’re part of the main navigation or not. Now, I want to add another page to my main navigation. I’d like to have a page where people can buy tickets for our factory tours. To add another page, simply click on this plus icon. And when you click on that, you have a few different options. You can start with a blank page. This is where you have full control over what appears on that page. You can also start with a page layout, and when I click on that, you’ll see all sorts of different examples. Maybe you want to set up an about us page. Here you see all sorts of different pages that can help you get started. Maybe you’re setting up a gallery. Here you see all sorts of different templates that you can start from. So again, it makes it easier to really get going and to pull your site together. I’ll click on close and let’s click on plus again. And here we also have various collections. Maybe you want to set up a blog, or store, portfolio. You also have those options as well. Now I want it to just be a very simple page. I’ll click on blank page and over here, I’ll type in a name. I’ll type in buy tickets and then I’ll click away. I’ve now added another page and that drops me on that page. Now over on the left-hand side, you’ll see that buy tickets appears first followed by contact. And that also affects the order in which they appear as part of the navigation. So here I buy tickets first, here we see buy tickets first, followed by contact, followed by contact. If let’s say I want contact to appear first, I can press and hold, drag that above buy tickets, and there you see that it’s shifted the order, but I want buy tickets to appear first. So here I’ll pull that above contact. If you decide you no longer need a page, over on the left-hand side, you can click on this trash can icon and that will delete the page. But I need that page, so I’ll leave it as is. Now, I want to start making some changes to the home page for the Kevin Cookie Company Factory Tours. To edit the page, down below, I’ll click on home and over on the right-hand side, that loads my home page. To start editing what this page looks like, up in the top-left, I have this option to edit. Let’s click on that. This now drops us into the page editor, and to be honest, this page is far too sterile for a cookie business. Now, as I hover over different sections of the site, you’ll see these blue rectangles appear. I can go through and I can modify any of these sections and also any of these blocks. And we’ll go through and we’ll make some changes to this page. I want to start at the very top of the page or the header. When I hover over the header, I see this option to edit the site header. Let’s start by clicking on that. On the left-hand side, let’s click on the text that says Kevin Cookie Company Factory Tours, and then let’s click on the pencil icon. And over here, we can modify the site title. I’m happy with the site title as it is, so I’ll leave it like this. Right down here, you can also upload a logo for your website. You could click on this plus icon and you can upload a file or you could select a file from the library. Now, alternatively, you can also select an image on your computer and you can simply drag and drop it into Squarespace. So here it’s now uploading the Kevin Cookie Company logo. Now that I’ve uploaded my logo, I can see it on the header up above. And for this logo, you can upload PNGs, JPEGs, or GIFs. So, any of those file types work. Also, for the file size, I’d recommend not going much above, let’s say 500 kilobytes, although it does support up to 20 megabytes. When people load your website, you want it to load fast. So don’t have an image that’s too heavy on top of the page. Right down below, I have some various tools that I can use to modify the size of the logo. Now, right now I think it’s a little small up on top. So over here, I can use this slider to adjust the size. Now, I don’t want it that big, but maybe write it about there. I think that’s a good size. Over here, I could also adjust how large the logo appears on mobile. And if I want, I could even upload an entirely different logo for mobile. Maybe I want, maybe just the abbreviation for the Kevin Cookie Company. I could do that as well, but I think this logo works fine, so I’ll leave that as is, and here, I’ll click out of that dialogue. Over on the right-hand side, let’s now click on edit design. This opens up a dialogue where you can adjust the design of your header. For example, up here at the very top, you can change the layout. Now, currently this shows the logo on the left-hand side. And there we see the logo on the left-hand side and the links on the right-hand side. However, I can click on this and maybe you want your logo to appear in the center and the navigation on the left-hand side. You can make that change very easily. I’ll stick with the default. I like the logo on the left and the navigation on the right. Down below, you could also adjust things like the link spacing or the spacing between these different links in the navigation menu, the element spacing, and you also have different effects like drop shadow or border. And you could go through and play with these to see how they look. Up on top, you can also adjust the color. And here we have a few different options. I’ll select adaptive. That way I have a transparent background behind this header. Now, I think this looks good, so I’ll click out. Over on the right-hand side, you can also adjust how much space the header uses up. I’ll hover over this icon and here I can make it larger or here we can make it smaller. Now I like the size that it had previously, so I’ll stick with that. I think all of the changes to the header look pretty good now, so let’s click down below into the first section. I’ll click right there and that exits the header. A webpage is composed of many different sections and they’re stacked vertically. For example, here, when I click into the first section, you’ll see a blue rectangle appear around this section. If I scroll down, I could click into this section and we now see a blue rectangle appear around this section. So right up on top, it’s also very easy to switch the order of these sections. Here, I have my first section, but let’s say I actually want it to appear second. Over here, with this section selected, I could click on move down and that now switches the order, so this other section appears first and here, let’s switch that one back down, and this section is now back in the top position. So, it’s really easy to move things around on your webpage. To add a new section, simply go to the border of one section and another section, or in this case, the header, and then click on this text that says add section. This now opens up a dialogue where I can add all sorts of different sections to my site. And here too, we have all sorts of different templates that I could use. That way I could start pulling together my site quicker. But I want to start with a blank section. Up on top, let’s click on add a blank section. This now adds a new section to my website and it lives up to the name blank. There is nothing here. When I click into this section, over on the right-hand side, I have the option to edit the section. Let’s start by clicking on that. This now opens up a prompt that we can use to modify this section. Right up on top, we can define the grid. Over here in this section, you now see this grid appear, and this will help us as we start positioning and placing blocks on the page. In a moment, we’ll see what that even means. But over here, you could set the gap between all of the different grid items. So, there you could remove the gap or here you could add a gap, or you could even define exactly what that gap is by clicking on the three dots. Over here, you could specify whether it should fill the screen or whether it should not fill the screen. Over here, you could also adjust things like the height or the alignments of the different items in here. And down below, you can even add a divider. Right down here, we see that it’s currently just a hard cut between these different sections, but let’s click on divider. And look at that, that’s cool. It adds this nice wave divider. And down below, I could even define the shape that I would like to use, but I actually really like this wave. I think that works well. So, I’ll go with that. And over here, I’ll click on back. Now at the very top, I would like to include some type of background image as part of this section. So right on top, let’s click on background. Within background, I can add a background image, video, or art to this section on my website. Now I want this to be a beautiful cover image for this website. So, I’ll upload an image. Now, just like we saw earlier with the logo, you could click on this plus icon to select an image on your computer or from the library, or you could also simply drag and drop from your computer. Here I’ll drag and drop an image in of our cookie factory. Now I would recommend going with something a little bit more abstract. Depending on what device someone is looking at your website on, it may crop your image. So, you don’t want to have any key information contained within the image. Now that I’ve added the image, right over here, we see this circle on the preview that allows me to set the focus point of the image. I want to make sure that the boat is visible as part of the factory tour. That’s one of the key experiences that we offer. So over here, I’ll click down here in the image and you’ll see that it changes the focus point. Right over here, you could also apply various image effects. And when I click on that, you can see a few previews of what these image effects look like. I think that’s a little too much, so I’ll stick with none and then click on back. Down at the very bottom, you also have some different options. Currently it sets a full bleed, basically meaning that it goes up to the edges of the screen, but you can also set it to inset, and there you’ll see that it doesn’t go to the edges. I want it to be full bleed. And over here, you could also set the overlay opacity. Over here, I could slide it to the right and that adds a little bit of opacity. Up on top, let’s now click into colors. Within colors, you can set the color theme for this section, and currently it’s set to lightest, but I think I want something a little bit darker. So here, if I scroll down to the bottom, here I have the option for darkest one or here we also have darkest two. I think darkest one works well. I think that’s a really nice touch. Now, of course I could also go back to background and here we can adjust the opacity more, but I want, I’d like it to be a little bit brighter. I think that’s good. And that way you could still read the navigation text up on top. I think all the changes to the section look good. So over here, let’s click back into the section. I’d now like to add maybe an image and some text and maybe a buy tickets button to this cover image of my site or to this section. Over on the left-hand side, to add different elements to this section, let’s click on the button that says add block. And here we see all sorts of different blocks that we can add to this section. For example, you can add things like text, image, video, a button. Over here, you can add scrolling text. You can add a quote. And if we scroll down, again, you have all sorts of different options that you can add here. I want to start with just a very basic image. So, let’s click on image right here. This inserts a placeholder image into this section. If I press the G key, this makes the grid visible that we defined earlier. If I press G again, that’ll toggle it off, but I think it’ll be helpful with placing this image, so I’ll make sure to toggle it on. Over here, I can select this placeholder image and let me move it right to the center. Now, one neat thing to help me align it with the center here, when I put it over the center point, you’ll see this yellow line appear. That’s really helpful. And I want it right there, so I’ll release. To add an image, you can simply click on this plus icon, and here you can upload a file from your PC. You can also select from the library and you also have a few other options. Just like we did earlier, you can also drag and drop an image file from your PC. Here, I’ll do that, and I’ll drop this logo icon for the factory tours. And over here, I could click out of that. And right now, it’s still uploading the image and let’s see what it looks like. Look at that. That looks beautiful. I’d also like to add some text to this section, just like we did with the image, let’s go to the left-hand side and then click on add block. And again, I see all the different types of blocks that I can add. Up on top, you can also search for different blocks. For example, I want to add text. I’ll type that in and there I see the option for text. I’ll click on that and that inserts text onto my page. Right up on top, let me type in some text, embark on a delicious journey. Now over here, I have all these different controls that I can use to modify what this text looks like. Currently it’s set to paragraph style two. I’ll click on that and let’s shift it to, let’s try heading number two. And let’s click out of that. And when I click on this, I can now reposition where this block appears. I want it under my image. Also here, I’ll expand it. Let me go, maybe four columns to the right and let’s go four columns to the left. That way it appears right underneath the logo. Now I could also click on this, and there again, I get all my different editing controls. I want to center align this text. I’ll click over here and here I’ll center align it. That looks very nice. Again, you have all these different tools that you can use to modify exactly what this text looks like. Over here, I’ll click out of the text. Let’s now see what this text looks like by toggling off the grid. I’ll press the G key and there you’ll notice the grid disappears. Now I think there could be a little bit more contrast between the text and also the background. So right up on top, let’s go back to edit section, go to background and at the very bottom, here we could adjust the overlay opacity and let’s make that maybe a little bit darker, just so the text is a little bit easier to read. Now, keep in mind a lot of building a website is an iterative process. You’ll add some text or you add an image and then you’ll go back and you’ll modify different settings to make sure that it all fits well together and that it’s a nice cohesive page. I think that looks good, so let’s click out of edit. There’s one last block that I would like to add to this section. Again, over on the left-hand side, let’s click on add block and I want to include a button that says buy tickets and that’ll redirect a visitor to the buy tickets page. Right here at the top, there’s an option for button. Let’s click on that and here that inserts a button, just like we did with the image and also the text, I’ll take the button and here I can drag that to a new position. Now, there are no more rows down at the bottom. However, if I drag it down, that’ll automatically add new rows. So, I think I’ll position it right here in the center. That’s a good spot. I can now make modifications to this button. For example, right up on top, it’s currently set to the primary type, but here we could try secondary. And there’s also another option, but secondary is a little hard to see, so let’s change that back to primary and let’s also expand the size of the button. I like that size. Right up on top, let’s click on the edit icon. And over here, I can change the text of this button. I’m going to change it to buy tickets. Right down below, I can also attach a link to this button. I’ll click on that. And if you recall earlier, we added a new page for buy tickets. Here, I’ll type in buy, and I can now see that buy tickets page from the main navigation. I’ll click on this and here I can define whether it should open a link in a new tab or use the existing tab. I’d like it to use the current tab, so I’ll leave that toggled off. Then I could click out. And I think this button looks good. Up on top, you also have some additional design controls, but I think this looks good, so let’s click out. I think this top section is looking pretty much perfect. So, let’s go down and look at the rest of the page to see what other changes we need to make. When I scroll down a little bit more, this brings us to the second section on the page. And I don’t know if I really have a need for this anymore. With this section selected, over on the right-hand side, I can click on remove and that will remove this entire section. Here, I get a confirmation. Let’s click on remove. This now brings us to the very last core section of the page. And right here we can see the AI generated text. And to be honest, I think this works fairly well. So, I think I’ll just keep it. But over on the left-hand side, these images do not work. So, I’ll need to swap them out. But before I do that, one of the interesting things is there are two images here. One is layered on top of the other. And with this image selected, you can define what the layer is. For instance, this one is currently on the topmost layer, but over here, I can move it back and now we see the other image on top. Or over here, I can move it forward again and there it sits on top. But again, these images don’t work and I don’t need two images. So, with this image selected, I could press the delete key or we could click on the trash can icon and that removes that image. I now want to swap out this image with another image. So right up on top, let’s click on the edit icon. And over here, I can now replace this image. I’ll click on this. Down below, I’ll click on upload file. And there it’s now added a picture of a tour boat going through our chocolate factory. That looks fantastic. Within this dialogue, I have a few different controls. Over here, I can attach a link to this image. So, if I want someone to click on this image and then navigate to a different page within our website, I could do that, but I don’t have a need, so I won’t do that. Right down here, I could also add image, alt text. So here I could describe this image. This is helpful for accessibility. So, for example, if someone’s using a screen reader, and it also helps with search engine optimization. Down below, you could also adjust the file name. Up on top, when you click into design, you also have various design tweaks that you can make. For example, should it fit this area or do you want to fill the selection? You can also crop it to a shape. I’ll go back to fill. Over here, you can also adjust things like the corner radius and let’s set the corner radius of let’s say 10, just to give it a little bit of a curve at the edges. And over here, you have a few additional controls, so feel free to play around with those to see what they do. For now, I’ll click out and there we see that slight curve on the image. I think that looks nice. And next I’ll press G to remove the grid. And let’s adjust this text just a little bit. It feels like there’s a lot of space there. So over here, let’s drag this up. I’ll place it right at about there, and maybe we reduce the size of the image just a little bit, and here, maybe I move it over. Now, one of the neat things is you can also select multiple blocks. Here, I could press and hold my mouse and here I’ll select all of these blocks and I can reposition them all at the same time. Now, I think putting it right there is centered. I think that looks good. And that section is now all done. If I want to tweak the colors or the styling that’s used in this section, with this section selected, over on the right-hand side, let’s click on edit section. And here we have all those different formatting controls that we saw earlier. You can set the background and over here you can set the colors. Now, currently it’s set to lightest one, but over here we could try this style and there’s lightest two. There we have a blue header and then a black paragraph. And I could go through and experiment with these different options. Now, I do like how it switches off from this dark image on top to a lighter item down here. So maybe bright works well, but I do like how the text is a different color from the header. So, let’s go with lightest two. Yeah, that is perfect. I like that, so let’s click out. If we scroll all the way down to the bottom of the page, this brings us to the footer and we can edit it just like we edited the header. Over here, I’ll click on edit site footer and we can modify all these different blocks, just like we’ve been doing throughout this page. For example, if I want to reposition the location, here I could press and hold and I could drag to a new position. You could also click into the block and you could edit the text or here you could change whether it’s bold or not or italicized. You have all of your different edit controls right up here. For now, I’m satisfied with how this footer looks, so here I’ll click out of it. As we’ve been going through this page, we’ve been adjusting the look and feel and assigning different themes. But what if you want to update a theme for the entire site. Up in the top right-hand corner, we have this paintbrush icon and that opens up site styles. Let’s click on that. This opens up site styles. And here you can adjust the fonts, the colors, the animations, the spacing, the way the buttons look throughout your entire website. So, when you make changes here, that will affect all of your different sections and also all of your different blocks. That way you get a consistent look across your entire website. Now, when I look at this heading text, it’s currently in this blue color, but it doesn’t quite match the blue from the Kevin Cookie Company logo. So, I want to modify that color, but have it change all of the headings across the website. So over here, let’s click into colors. Within colors, you can update the overall color palette used throughout the website, or you could also update individual themes that you’ve used. For example, over here in this section, we use the lightest two theme. I can click into that and here I can modify all the different elements of this block. For example, the heading color or the paragraph color, but I want to update the overall palette. So, let’s go back and right up on top here, we see the palette. Let’s click on that. Right up on top, I can see the color blue and it’s a nice shade of blue, but I needed to match our brand. So, with this blue selected, down below, I can choose a color right over here or I could type in a hex value. You also have a few other options as well. Let’s type in a hex value for the Kevin Cookie Company blue. There’s the code and that matches exactly. That’s the familiar color. And I think that looks good. And here we’ll see that the text is automatically updated to reflect this shade of blue. That now looks great, so let’s click on back. Before we close out of site styles, let’s also click into animations. I would like to add a very subtle animation when the page loads. Now currently it’s set to fade, but we could also try some of these other animations. For example, what if we try scale. There when someone loads the page, everything will scale in or you could have it slide up or over here, you also have the option for clip. Now let’s go with scale. I kind of like that one where it gradually comes in. That’s a nice effect. And I think that all looks good, so let’s close out of site styles and then close out of this. And there the pane goes away. This is looking really nice. I think this page is looking really good, but let’s take a quick preview of what it looks like on a mobile device. Right up on top, just like we did earlier, we can switch into the mobile view and here we can preview what the website looks like. And overall, I think this looks great, but here I see that the buy tickets button is not centered. Now, one of the neat things is you can also make modifications directly within this mobile view. And one of the neat things is, here if I adjust the position of the button, that will only affect the mobile view and not the desktop view. Basically, any changes that I make to block sizes or the placement of blocks will apply only to mobile. However, if I make content or style changes, that will affect both the desktop and the mobile experience. I think this change looks good. So up on top, let’s switch back into the desktop view. We’ve made so much progress, but of course I don’t want to lose any of it. So, in the top left-hand corner, let’s make sure to save all of these changes. I’ll click on save and that’s now saved the homepage. I think for now, these are all the changes I want to make here, so let’s click on exit. Back here in the websites view, I can now go through and make changes to all the different pages that are part of the site. I could add content to buy tickets. I could build out the contact page, so I can make all of those changes, but you’ll go through a similar process to what we did on the homepage. You could add your different sections. You can add blocks to those sections. So, you’ll build it out the exact same way. I’ll go in and do that later, but for now let’s go up on top and let’s go back to the home screen. Throughout this video, we’ve spent most of our time on the website view and this is what we use to build out the website, but Squarespace also offers a number of other capabilities. For example, under selling, you can sell products online. You can manage inventory. You could set prices all under this tab. Down below, you also have a marketing tab and this is where you could set up email campaigns where you send out email messages to your customers and you can run different campaigns. You can also collect contact information. So, it’s like a CRM system or customer relationship management. You can manage that all under contacts and right down here, you also have website analytics and this one’s very interesting. You’ll be able to see how many people come to your website. What is your bounce rate or how many people come to your website and then immediately leave. Up on top, you could see where’s your traffic originating from. Are they coming from Google on YouTube? What sites drive people to your website? You could also see what keywords are they searching for that help them find your website. You could see information like the geography that they’re coming from. So what countries are people visiting from? You get all sorts of information here under analytics. And also there’s a new capability called scheduling. This allows people to book time with you. For example, maybe you’re a consultant and someone wants to book time with you. At a cookie company, we don’t need that functionality, but it’s nice to know that it’s there. Down below, let’s now click into the asset library. Within the asset library, you can see all of your different media assets. So here I can see all the different images that I’m using on my site, but this could also be say video files. You can also have audio files all within the asset library here. Now, I think overall the website’s looking great and I would like to get ready to launch. To do that, over on the left-hand side, let’s click into settings. To launch your website, you’ll probably want a domain name. So, think Kevin Cookie Company.com or .net. It just makes your site look more professional. Over on the left-hand side, you’ll see an option for domains and email. Let’s click on that. And then at the very top, you’ll see the option for domains. I’ll click on that. Within domains, you can get a brand new domain so you could search to see if maybe your dream domain is available. Over here, you could also use a domain that maybe you already own with a different service and you want to point it to Squarespace. So, you have those different options. If you don’t have a domain yet, I’d recommend just buying it directly with Squarespace. Their prices are fairly reasonable and that way it’ll automatically be attached to your new website. There won’t be any heavy lifting involved. Right up on top, let’s now click back into domains and email. Once you have your domain name, if you would like email at your domain name, so let’s say Kevin at Kevin cookie company.com, you can set up something called Google Workspace. They’ll provide email, and it works fairly well. If you’ve used Gmail before, you’ll be very comfortable using Google Workspace. Once you have your domain and also email address set up, over on the left-hand side, let’s click back to website. To launch your website, over on the right-hand side, here we see site availability and it’s currently set to private. So, no one else could see it except for you. When I click on this, you’ll see there’s an option for public, but it’s currently grayed out and you need to upgrade to one of the paid plans to go public. Let’s click on that to see what some of the plans look like. This opens up a page where you can see all the different plans, the features and also the pricing. Everything we did today in this video can be done with the personal plan. However, if you want professional email or if you want to sell products, I’d recommend going with the business plan. It has more capabilities. Now, if you sell a lot online, you probably want to consider the commerce plans, either the basic or the advanced. Here you’ll see that the transaction fee goes down as you go with one of these more advanced plans. Now, one thing to keep in mind is you can always start with personal and then you can always upgrade later on. So, you don’t have to start with the highest level plan. Now, for now let’s click out of this by clicking on the X and once you purchase your plan, click back into site availability, and then you’ll be able to shift to public. All right, we made some fantastic progress today. You should now have all the tools and knowledge that you need to start building your website. And I think you’ll agree with me that it was probably easier than you thought it would be. To watch more videos like this one, please consider subscribing and have fun building your website.

Related Topics

You must login to add an answer.

Hide picture