How to create a website without writing code

1. Introduction / Trailer: Hello and welcome to, How to Create a Website Without Writing Code. My name is Jake [inaudible] and I'm your instructor for this course. In this course, as you can probably guess, we're going to be teaching you how to build a website without having to write any code. The goal for you at the end of this course is to walk away with a website that you have created. You won't have had to write any code to do this, but you will have simply created the entire website on your own from scratch. We're going to be using a platform called Squarespace to build our websites on. It's very simple and it's easy to work with, and I know as soon as you get in, you're going to love it. It's easy to build your website on and you don't have to deal with any of the technical knowledge or the code that comes along with building most other websites. This course is organized in two sections. In the first half of the course, I'm going to teach you how to actually use Squarespace, how to set up your website. I'm going to walk you through the platform page by page and option by option, explaining what everything does and demonstrating it for you. In the second half of the course, you're going to get to actually see me go in and design a website completely from scratch. You'll see me do everything and go through my entire process from planning out the website to setting up the content, and then actually implementing the design as well. This course is for really anyone that's interested in building a website on their own, or anyone that's interested in learning Squarespace. Even if you've never built a website before in your entire life, you're going to love this course because it's extremely simple and it's going to show you how to set up a website entirely on your own. You don't need to have any technical knowledge or any prior experience in web design to take this course. If you have experience with graphic design, that's going to help you because you're going to be able to design a better looking website. Honestly, if you're a graphic designer, I think you're going to love this platform, because Squarespace allows you to be a designer and not have to worry about the code or any of the other stuff getting in your way. Even for people out there who may be web designers and are wanting to learn the Squarespace platform, this is a great course I'm going to walk you through everything you need to know. With all have been said, let's dive in and get started. 2. Setting up your Squarespace Account: In this video, I am going to be showing you how to set up your Square Space Account. For those of you that are already set up, you can feel free to skip onward, but for anyone that doesn't already have an account, I'm going to show you how to get started. So the first thing you're going to do is just go to squarespace.com, no need for this photographers that just is there for decor. But here it's going to squarespace.com, then you're going to come down and you're going to click on Get Started. Now when you do this get started, you're going to ask you to choose your template and really you can pick any one right now you don't need to be too specific or worried too much, so I'll look through all these right now, because we're actually going to go through that in later detail and you can switch your template at anytime. So I'm going to go with the first one here Pacific and you're going to click View Pacific, and then I'm going to start with this design and once you do that, it's going to simply ask you to enter your name, email address, and to create a password, and then you sign up and create your site. Now I already have my site set up on,I'll be showing you guys how to do the one, but this is pretty straightforward, pretty simple, I'm on just how to get your site up and running on Square Space. 3. Why Squarespace: Before going any further, a question that I know is in your mind, is why Squarespace? Why should I build my website on this platform? In this video, I'm going to be walking you through and talking about a few reasons why Squarespace is great, and some reasons why maybe you don't want to build your site on a platform. I'm going to try to disclose everything for you upfront, so you can be sure that this is the platform that you want to go forward and build your website on. One of the first reasons that I highly recommend Squarespace for your website, is that you're going to be able to build your entire website without having to write any code. There's not many platforms out there that can do that and do that in a such a clean and professional way as Squarespace. The second reason that I recommend Squarespace, is that their entire platform is responsive. What responsive means, is that your website is going to automatically change window size, it's going to respond to whatever device opens it on. That means that if someone opens your website on your phone, their tablet, their computer, Squarespace's templates will automatically adjust your site to fit their screen size. Another reason why I highly recommend Squarespace, is that you don't have to worry about maintenance. One of the common questions I get is whether someone should use WordPress or Squarespace. This is a really big differentiating factor. A platform like WordPress is open source. That means anyone can go in there and edit the code and customize it like they would like, but it also means that there's no company that is behind it. There's no support that's really going to help you if a plugin breaks or if the browsers update or if you know the technology changes. This is really common that WordPress sites, you have to hire people or bring someone on just to maintain your site, to keep it from breaking with all the new technology changes that are happening on the web. Now on the other hand, with a Squarespace site, you don't have to worry about any of that. Squarespace isn't an open source platform, and so what's happening is basically, you are building your website on Squarespace's web application and you're building it on their templates. That means that they are keeping those templates up to date and if you build a site on it today, 10 years from now, that site is still going to be relevant because Squarespace is updating their templates, and keeping them constant with all the mobile and the changes in web and web standards. This is a really big thing because a lot of people are frustrated because every few years they have to rebuild their website, while at Squarespace, you don't have to worry about that. Your website is always going to be up to date. The next reason that I highly recommend Squarespace and probably the biggest reason is ease of use. Squarespace is so incredibly easy to use. The whole interface is drag and drop, you click and then you change the colors. It's so incredibly simple, that it's just something that anyone can learn and figure out. It doesn't take that much time. By the end of this course, you're going to know how to use the whole platform and you're going to be amazed at how quick and easy you can get a website up for your business. Another reason to love Squarespace is they have incredibly amazing and minimalist templates. They have a lot of different templates that you can choose from to build your website on top of. But the amazing thing is you have so much ability to customize those templates, to where you can go to multiple sites that are built on the same template and you would have no idea that they were built on top of the same exact framework. Squarespace is templates, they're amazing to work with and they're also really customizable. Another reason is simply their customer support at Squarespace is phenomenal. They are 24-7, they're always there. You could open a support ticket and they will be back with you in no time at all. Another big question I get about Squarespace is it a SEO friendly? Yes, it is. Honestly, SEO within Squarespace, they make it very simple. They've built it into the platform. There's a handful of things you modify, but I have my own website up and I have a few articles that are high ranking on SEO, and they draw me a lot of traffic every month. I know from personal experience that Squarespace sites can be great for SEO. Another great tool is you can use Google Apps integration with Squarespace. If you use Google Apps for your business, for hosting your e-mail and Google Drive and all that, you can link that directly with Squarespace, which makes for a really simple and seamless integration. Another new feature that they just released, which is extremely awesome, is they have a Getty Images integration. Getty Images is a stock photo website but it's one of the best in the world. Squarespace has set it up so you can get any stock photo that you can search through their marketplace for just $10. The last reason that I'm going to just bring up Squarespace, is simply the cost. With Squarespace, you're looking at a cost of roughly $8 to $16 per month depending on what plan you need to go with. While immediately some people will think that that's actually more expensive than say, hosting your own website somewhere else, the truth is, that again you don't have to worry about the maintenance. You don't have to worry about paying people for those upgrades. In the long run, Squarespace is actually a lot cheaper. The monthly fee isn't really that bad, and the fact that it's going to save you money on maintenance and having people fix your site, it's going to save you money in the long run. There are times when a site isn't a good fit for Squarespace though. I want to disclose this upfront, so that you know, ahead of time and you're not diving into this course if it's not going to be a right fit for you. We'll go through a few things right now and reasons why maybe you don't want Squarespace. One of the biggest reasons that people can have to stray from Squarespace, is that they want to have a membership site. They want to have people log in and build profiles. You can do this through Squarespace's developer platform, which makes the website, the whole platform open source, but honestly you're probably not interested in that if you're coming to this website without code course. But if you need logins and everything for your site, then you may need to look at other platforms or hire a developer to build a site for you. Another problem that sometimes people come across, is having a database, maybe storing large amount of information, searchable data or having again, that membership site database. Those are things that Squarespace's normal platform can not do. It can be done with the developer platform but probably not something you're going to want to dive into. But really those are the only big issues you're going to come across. Sometimes you may have some issues, where you can't tweak a design to the extent that you want with the normal platform but really you have a ton of customization. I think you're going to be really happy with the platform. For anyone who's looking for a simple informational site for their business, e-commerce website, a blogging platform or any just simple online business that's not a membership site, Squarespace is a phenomenal choice and I really think that you're going to love the platform and love working with it. At the end of the day, if you don't know if Squarespace is a right fit or you're a bit unsure, you can always export your data at any time and you can export it straight to a WordPress file, which pretty much any other website content management system will let you upload that, and if you're on WordPress or you're on Tumblr or any other platforms, you can easily import your website from those platforms. At Squarespace, don't feel like this as a commitment for life. If you ever want to leave it you can, but I'm pretty sure after you start messing with it for awhile and you get your site up and running, I'm pretty sure you're going to love it. 4. How to plan your website: Now we're going to dive in and start getting into the phase of planning out our website. A lot of people want to just jump right in and start designing their website and throwing up content but they don't actually think about what's going to be on the site or what the purpose of their site is ahead of time. In this section, we're going to talk a little bit about how to plan out your website in advance. The first question that you want to ask yourself when you're planning out your website is, what is the purpose of this website? Why are you making this? Are you making this to house your portfolio online? Are you making this to sell e-commerce products? Are you hoping that this is going to gather leads or create awareness? You need to understand what the objective of your website is before you ever dive in and start creating it or designing it. Because if you don't have a real objective or purpose behind your website, it's easy for a visitor to just get really confused when they visit your website or not know what to do. Then your website doesn't really do anything to help you. You've got to really think on the front-end and answer the question, what is the purpose of this website? The next question you want to ask is, what content is going to be on this site? How many pages am I going to have? What information am I going to put up there? What images do I need? What videos do I need? You need to start thinking about, what is the content that's going to be on your website? Try to think about this in advance and not just start throwing things up there. A really great way of doing this is creating a sitemap for your website. You can do this with pen and paper if you want, or there's a tool that I really like called MindMeister, and you can set up an account for free. You can create a sitemap on their platform that lets you go through and show, what are the individual pages that I'm going to be creating? What's going to be on all those pages? Really start to think that through. When I get to the second half of this course, and I actually walk through designing a website from beginning to end, I'm going to show you how to use MindMeister and give you a bit of concepts around the tool. So now that you have a purpose for your website and you've thought a bit about the content, let's go ahead and dive in and start setting up your Squarespace account and get to work on teaching you how to build a website without writing code. 5. A brief tour of Squarespace 7: In this video, I'm going to be giving you a basic tour of Squarespace 7 and the interface. Once you've set up your account, and it will ask you a few more identification questions throughout that. But after you finish there all that, it's going to take you to this screen right here. Depending on what theme you choose, it may look a little different over here I have a different website, but basically this is what it's going to bring you to, and this is the home interface of Squarespace. First what you're going to notice is over here on the left, is you have these different tabs for pages, design, commerce, metrics, comments, settings, and help. You also have your profile down here. You won't have to worry about this too much. But if you have multiple sites, it's really great because you can switch between multiple sites really quickly. But you're probably not going to deal with that too early on if this is your first site. But what you can do is basically over here, you can have all these different options you can select. Then over here, this is our live website editor. This is what you see is what you get website editing platform. I can literally scroll down and see all of the content here on this site, so you have a large vertical scrolling site here. You're going to see little things popup like this that says, "Gallery", "Add Images or Video". You'll see "Page Content", where I can edit, click on the "Settings". The amazing thing about Squarespace is, while other platforms you don't really get to see what you're doing at the same time. Literally, if I want to change that, this is located in say Manhattan. Well, I'm modifying some demo content, so it's going to ask me if I want to do this. I'm going to click "Yes". But basically anytime you start a theme in Squarespace, you have this demo content that is built into there. For demo purposes, I can just show you, I literally just clicked "Edit", I change this to whatever I want, New York, and click "Save". As easy as that, I have changed text on the website. You can do that with these headers up here. Again, if I want to change this to Old American Dining, double-click on that, come up here and click "Save" again. Again, I'm going to go through all of these features in much more detail. But just giving you a basic overview of how Squarespace works. You can edit the settings on your different pages, all this stuff. It's really what you see is what you get. I'll walk through all of this in much more detail, working with the navigation and everything in a bit. But before diving into this further, I'll just walk you through each of the tabs over here on the left. The first tab is the pages tab. Here, basically if I come over here and I click that, this is going to show me my navigation and literally all of the different pages and content on the site. The pages tab is really where any content on your site is going to live. Now to go back to the other ones, I'm going to click on "Home", and it brings me right back here to the home screen. The design section of the site. This one is where you're going to upload things like your logo, or you can select new templates, which we'll go into in the next video. You can do the style editor, change colors, change fonts, change sizes, all that stuff. You can edit your checkout page for e-commerce. Then there's a bunch more functions which again, I'm going to dive into in a little bit further detail in later videos. But just wanted to give you a basic overview of the platform here. We're going to come back again and click on "Commerce". Again, this will take you into the commerce side of the sites. If you want to run an e-commerce store or you want to sell products, digital products, physical products. In this commerce sections where you do that, a lot of sites you may never need to touch this. You can just skip over the later commerce sections. Down here in metrics, if you go to this, this is going to, again give you a basic overview of traffic, mobile usage, or your subscribers pretty much anything like that. It's a really basic way to get some good metrics and data about your websites. Then you have comments. This is if you have any blogs and you have any comments going through Squarespace as platform. You have your settings down here. This will go into again in more details a lot that happens and that area. Then if you ever need help, you can click on "Help" and it'll take you to help.squarespace.com. Squarespace's help is phenomenal. They will answer a lot of questions for you, and if it's something that goes beyond what they help out with, they'll always happily refer you to Squarespace specialists like myself or anyone that can help you fix the problems on your site. That is a really basic overview of Squarespace 7. Again, we're going to dive into all these sections much deeper and further videos. But that's all I have for this one. In the next video, I'm going to be showing you how to actually go and change the templates on your site. 6. How to select the right template: In this video, I'm going to be showing you how to install new Squarespace templates, and am also going to give you an overview of the different themes and the functionalities and to try to give you a little bass line on choosing your theme and what direction you want to go. Now you can switch your theme at any time down the line so there's absolutely no worry there. But the theme that you choose is going to make a really big difference in terms of the functionality and the look and the feel of your website. I'll explain that all I'm going to go through and demo a few of my favorite themes for you guys. To start off, we're going to go down here and click on "Design". After we click design, we're going to click on "Template". Once we click on template, we're going to click "Install New template". This is going to bring you right back to that first screen that we saw when we signed up for our Squarespace account. It's going to show you again all of the different themes that Squarespace has here, which there is a lot to choose from more than I can explain probably in this course, but I will show you a few of my favorites. To start off, actually one of the first ones up here is a new theme from Squarespace called shift. What I'm going to do is just show you if you click on any of these themes and you click view. It's going to let you kind of get to see the site, a little demo of it. This is a new templates, so there's not many examples. But other sites will actually have a lot of customers websites that are used on that same template. Those are really cool to get an idea for what the overall look and feel this is verse just looking at the example site that they give you. Again, if we click "View Live demo", and then I always recommend just clicking this link so you can see it full screen. But what it's going to do is basically open up the site they have right here. This is kind of a demo site that they have built for you. What you're going to see is up here on the left we have the logo, you have items like the navigation up here. You have this call to action with some subtext and a button. This is actually a big feature of the theme. It's in a handful of sites. But Bedford and shift are two themes that are really defined by these big pictures with the two lines of text and the button. Again, this is actually part of the theme that you're seeing right there with how this looks. Coming down here, you can start to get a little feel for it. You see that this seem theme has parallax effect over these images. You can see again all this stuff and some of the features and functionalities. Now the text color, the font, that button colors, the photos, all that stuff can be customizable but what you really look for when you're looking at a theme or what are these functions that are happening. Again on these you see they have these basic sliders here where you can have a little bit of text and then about where you click in and learn more. Again, very cool sites, very cool template. This one and Bedford is another templates, they're very similar and I highly recommend them. We'll come back here and we're going to go click "X" out of that. We're going to come right back into install a new templates. We're going to take a look at some of the other themes here. Horizon is another new template from Squarespace, but a very cool template and I'll show you a bit why. You click on "Horizon". Again, we're going to come over here to the live preview. On this one they actually do have some examples sites from clients. You can click through these and take a look at these examples sites. Some of these are really great to give you an idea of the functionalities and what can be done with the theme. If you look at enough of them, you'll start to see some similarities and how they function, how the navigation of different features work. This we're going to get a live preview, and again click on this one so I can just see it full screen. Here again, we have this basic navigation over the top. We have these huge images in the background. We have texts with a button and then a buy on iTunes. As we come down, we start to see just some of the features and how text looks. We see these touring options right here. Some of the really cool things about this theme is it allows you to actually build full pages on top of images. With the Bedford and shift theme that we were just looking at, theme only work so that you can only have really like a headline in a sentence or two on your image. But with horizon, you actually have this ability to more advanced theme, it's harder to work with but you can actually build entire sections or entire pages of your site on top of a background like this and have this vertical stack effect. Again, very cool template, highly recommended. It's a bit more advanced, but you can get a really cool feel with it. If you have good photography, this is a phenomenal theme for you. We're going X out of this. Come on back here. Again, click "Install a new template". Brings me right back to this page. Adversary, I'm not going to actually go all the way into this one. But another very similar theme to Bedford and shift, it's got that same similar big text and a call to action button. But this one does have some other functions and look. I recommend checking into this one as well. See, we're going to come down to a few others. Hayden, another one very similar to Bedford and to shift and all those and adversary, that I've just mentioned. You're going to see this a lot where you have these different basically two different font sizes and a call to action. Squarespace does across a lot of their themes, it's good practice in web design. It's a feature that they have on a lot of them. Again, this one has at similar, Hayden has that similar look and feel as well. I'll click back to all designs. We're going to come down and five. This is one of the oldest themes in Squarespace. Probably one of my favorites. I actually build my personal website on this. I've probably built more client sites on five as well. It is a very simple theme. It's also really powerful because it's probably the theme that is closest to what you would think of when you think of a standard blog. It's a very typical, you have your basic navigation up here, you have your logo, and you have navigation across the side, you got your social media icons right here. Then you have these big banner images and you have the content right here. Another real big benefit and something to look out for in your themes is that not all themes have a sidebar on the blog. Some of the themes have full-page blogging. But five has a sidebar on the blog, which is a really powerful feature and probably if your main focus of this website is to build a blog, five can be a really good template to go with. Again, I run it on my personal website and I absolutely love this theme. It's really, really versatile. We're going to exit out of that, go back and I'll cover a few more before moving on to some other contents. Come down here marquee, this is another really cool theme. Again, one of the probably more popular themes on Squarespace but what makes this so great is the parallax functionality. I'll show you that real quick. What I'm talking about when I say the fancy word parallax. But when I say that, basically you see how the image move slowly as you scroll and reveals and unveils different parts of the image. That's called parallax. This theme does that really, really well. It's very robust and probably one of the most popular themes on Squarespace. Not saying that's a bad thing it's still again. All of this can be customized, the fonts, the photos, the colors. Everything can be customized, so you can really build this into the site that you want it to be. We're going to come back again and I'll walk you through the last few. I feel like I just getting to the end, but there's so many good templates but it's hard for me to decide. Wexley is a cool one for say, photography or designed portfolios. We have dovetail another one very similar to five with a few different functionalities, but a very cool site and I really like this one. This is next to five, probably the site that I build more client sites on than anything else. We're going to come down and here's Bedford that I mentioned. You just kind of get a taste of my favorite sites on our themes on Squarespace. Again, that's not saying that any of these other ones are bad. They all have really cool things. Some of these are actually very different in the look and feel. Again, aviator is actually a completely different look and feel than any of those that I showed you. Supply, again a very interesting one with a side navigation. There's just so much so you really just have to play around with them. My hopes are this video showed you some of the differences within themes and also just gave you some criteria to evaluate them against as you start to choose your own theme. But again, don't worry, you can change your theme at anytime. It's not a huge deal if you don't like the theme or you get into and it's just not looking how you want. You can always change the theme and it'll bring all that content over with you at anytime. 7. How to install a template: In the last video, I gave you an overview of themes. But in this video I want to actually show you how to install and change your themes. Once you go through all these and you find a theme that you like, which I'm going to go with five, for simplicity and familiarity sake. I really do think this is a very good theme to start with, it's very basic, very simple to use, and very good to work with. Again, we're going to click on "View Five". Then this time, since we know we're going to go with this one, we're not doing something else, I'm going to click on "Install Template". I got this little notification that the installation was successful. Now as I'm back here in the Squarespace editor, I notice I now have two themes in here, but yet nothing has changed, I still have this whole same theme from Pacific and everything like that over here. What I'm going to do is I'm going to come down here and I'm going to need to click on "Preview" on the five template. What that's going to do is now take me to preview mode. If you've been working a bunch on Pacific, and then you're just not sure if you really like it, you can come over here and actually just preview it. Right now it changes the content out, because these are the basic content from the theme. But if you have your own content and everything already built into the site, and you just want go preview a different template, there's no harm done. You can easily just go back at any time. You can even actually work on this. While it's in preview mode, I can come back here and I can just start to mess with this theme. I can even come here into the pages and start messing with it, which these are demos, so I've to create the page each time. But I can actually come in here and start editing the navigation. I can start on that. I can actually go in here and change the text, or I can go into the style editor, which are all things that I'm going to show you in a bit it, so don't get too overwhelmed yet. But you can actually operate for a bit in this preview mode. See if you like where this theme is going, and if not, you come back to template and you can click "Cancel Preview", and it's going to go back to whatever theme you had selected before. That theme will just come straight back over here to Pacific. But since we like five, we like where this is going, we are going to set this as our live template. Then are you sure you want to make this template visible? This will make it visible on the front end of your site, so if your site is already live, everyone will see that. We're going to hit "Confirm". Boom, we have now successfully updated our live template. Whenever we come back, whenever we work on this, were basically working on the five template for now on. There's no harm done if you leave these other templates installed. If you actually have a design going on one of those, it keeps all those presets, keeps that look, you can always switch back later down the line if you still find that you're not liking the theme you're working with now. That is all on how to actually install a theme into Squarespace. 8. Understanding the pages tab: In this video, I'm going to be showing you and explaining the Pages tab here under the main menu. To start off, what we're going to do is come down here to the Pages tab and what you're going to see is a bunch of demo content, has this word demo next to it. Basically, what you see is you already have all this content loaded in. No matter what theme you choose in Squarespace, you're going to have some amount or some demo content in here. Generally, you can do a few things. You can just delete it and click "Get rid of that, and just get rid of them. Or if you want and you like the look that they have going on, you just like this design and you think, I want a page just like that. You can come in here to the page content and click "Edit". It's going to ask you if you want to create a page like this. Suddenly, we now have a page that is on our site and we can go engineered it for awesomeness. I mean that the picture is pretty awesome. But yeah, we can go in here and we can edit all this site, which again in a later video I'm going to show you how to use all these editing tools. But just know that if you like the design, you like the layout of a page and you don't want to have to rebuild it, if you'd like how all this is and you just want to switch out the pictures and switch out the text, you can do that by just creating the page and clicking on it. Again, we're going to come down here and just click "Trash" on all these and delete this demo content. Getting rid of all this stuff. Also you're going to notice that down here, this is my demo content from over on the Pacific theme. This stuff can all go as well. Stuff we just don't need. It seems like a burden, but honestly like I said, if you can click into any of these pages, just edit them. It's a great way to just get started in Squarespace and not have to worry too much about figuring out the layout. You can literally just go onto their themes, change stuff, and work from there. But honestly, I prefer to just build from scratch and that's what I'm sure you guys how to do here today as well because it's honestly, I think a little easier. Again, deleting all this kind of stuff and there we go. We have nothing here. We have now deleted all of our demo content which we didn't need, and what we're going to do now is just make a few pages here on our website. I'm going to do them. I'm going to come up here, I'm going to click the "Plus button" on main navigation and I'm going to create a page right there out of that. I'm going to hit "Home". What you'll notice is we just had a Home icon or a Home thing pop up into our navigation right there. Now if I want to add another page, and I just show you how I'm just adding pages now, but you can also add cover pages, which I'll explain later, products, folders, blogs, galleries, events, links, all this stuff which I will go into in a little later time. But I'm going to create another page. I'm going to make just an About page. Now we see we have About and we have Home in our navigation. But what if say I want to create a page and I don't want it in the navigation? Well, I'm just going to come down here, I'm going to grab about and pull it down to the not linked section. Page over here refreshes. Now we see that about, we can still access the page, we can still get to it, but it is no longer linked in our home screen. Again, any of those we want to delete, we just click this little "Trash" can right here. If we ever delete something and we don't want to, we can click on "Deleted Pages" down here. Again, you can see all of the demo content that I deleted. If you accidentally delete your whole website, don't worry, all is not lost. It will remain in the deleted pages for seven days before it erases. Come back here to pages. I'm just going to show you again these links up here. I'm just going to walk through these other ones. Cover page I will cover in a later video. But folder is a really, really powerful one as well. Let's say we create a folder and we create "About us" folder. What you'll see is this is going to pop up whenever it refreshes. We now have this About us folder and it doesn't look like we did anything different. But now if we want to, we can nest some pages under this folder. We drag them right here in this whole area, and now if we scroll over about us home and about drop-down. Again, that's really, really powerful thing. If we want to add again, add even more to that, we can come down here and add a link. Up here is the link title so we're going to say link to Google, and then down here we're just going to go to google.com and click and decide what we want. Now this is actually something up there we go. You noticed how part of it was cut off before? Well, if I scroll down over here on the left, it actually pops that window up. Occasionally, it's a little kind of quirky thing in Squarespace. But if you're working on a small browser like I am right now, then you're actually going to notice that little issue sometimes where part of your interface gets cut off and you have to scroll over here. Once we have that link to Google, we can click "Open" in new window and we hit "Save" them now. Now here we go. We have this Home, About and we have a link to Google right here on our site, very handy in case someone does not know. But that is just a basic overview of the about us section. I'm going to get into the cover pages, the gallery, and some of those other features a bit more. But this just shows you a little bit about how to build the basic site tree and the structure of your website. 9. An extended tour of Squarespace: Now that you've set up your account and have gotten started with Squarespace, I'm going to give you an extended tour and really start going through each of the areas of the site and explaining what everything does. This is a long one, and there may be parts that you can skip over that aren't relevant to your business. But I think this is going to help you give you a much better understanding of what everything does on Squarespace as platform and what it's capable of. 10. Understanding the design tab: In this video, I'm going to be giving you a brief overview of the Design tab, and we're not going to go too deep into everything about this tab right now, but I do want to give you a basic overview and just a basic tour of this. So I'll come down here, and I'm going to click on Design, and here you're going to see a handful of different options. First, we have our logo and title. We can change the title of the website without a code. Thing. Just add a little something in there and make it look fancy. We can have the tag line, which not all themes support a tag line but if we want to put it's easy. Then we can put that in there. But on this theme 5 does not support the tag line, so there's no worry there. Logo, if we want, we can actually upload and swap out a logo on this which I'll show you in just a second. Or if you don't have a logo, Squarespace does have this handy dandy little logo creator right here, and so very cool. I'll just try it out, hop into this, and we'll just say something like Squarespace. You can actually start to search for symbols or just scroll down and see everything they have here. So you can just rebrand the Squarespace as this diamond, or this old radio or a sailboat, perfect. There are some very cool stuff you can do with their basic little logo creator. I won't go deeply into this as a lot of companies and a lot of people when they're starting have their own logos already, but it is something just a little basic that can get you going and get you started. So I'm going to X out of that. Then you have your browser icon or your favicon, as it is called, and here you can add an image for this little section up here, where you see this cube right now for Squarespace. You can add your own so you actually get to see a picture of yourself or a small version of your logo up there. We'll save that once we're done. We're going to hit Design to go back. We've already gone through the template tab, so you are familiar with that. You have the style editor which is really one of the core features of Squarespace, so I'm actually going to spend a whole video on this in a bit, going further into this and showing you how to go and edit all of these different colors, all of these different things which it looks like a lot, but I promise it's not that complicated, it's very straightforward. So I'll show you that in a future video. You have your checkout page style editor, similar to the style editor but this is for if you have an e-commerce site and people are checking out and buying on your site. You have an announcement bar, or you can add this little basic announcement bar up top and say something here, and so if you want to say, oh, new course now available, you can put something very cool out there, a little announcement for your people. So this is really good for a product launch or to call attention to something on your site. Very cool thing, you can add a URL for that to click through, or a specific page on your website. So we'll disable that for now. We'll hit Save, bounce back out of here. Hit Design. Mobile information bar, again, similar to an announcement bar, but this is something you add and it lets you show different things like your e-mail if you want your phone number, location, business hours. This is something that will only show up on the mobile version of your website, but if you're a restaurant or a small business and you know that people are going to be probably coming to your site to look up things like your hours or are they open or something like that, you can do some really basic little mobile information bar, and it's very handy to have. So I'm going to hit Save, head back to design. Squarespace badge, if you want to show some love you can enable this little Squarespace badge, and right down here in the bottom corner, you get to see this powered by Squarespace, or you can adjust that as you would like. But again, very cool little platform right there. Probably, not everyone will want that but if you want to show some Squarespace pride. Custom CSS. Again, this is a little advanced, if you know any coding at all which is you not. You probably didn't click on this course if you know coding. But here you can do some custom CSS and this is something a little more advanced if you want to break out of Squarespace's existing functionalities, and then you have this Advanced tab, and again, probably not too much you're going to worry about here. This type kit id for fonts and the device view is just a basic little thing if you have this enabled, and you see how it simulates a phone as my browser gets smaller. That is what device view is. So if you don't like that, and you just want to keep it straightforward always looking like a desktop, you would disable that. But that is a basic overview of the design tab. Again, I'm going to dive into that style editor in further detail in a later video. 11. Understanding the metrics tab: In this video, I'm actually going to skip over commerce, as I'm going to show you guys that a bit later. I'll jump right down here to the Metrics tab. As you'll notice, I am actually not on our website without code site anymore. But I have jumped over to my personal site because there are no metrics on the other side, so it would be boring to look at. This way, you guys will actually get to see a bit of what it looks like and what the built-in metrics features do. First of all, the Metrics tab built in the Squarespace is really powerful. For those of you that are interested in using Google Analytics, you can easily link that as well, and I'll show you how to do that in a later video. But even without that, the built-in Metrics tools on Squarespace are pretty robust and can already show you some very cool stuff. To start off, we're going to click on the "Traffic Overview" under Metrics. Here this is going to show me my regular visits so I can actually see how many people are coming to my site on a daily basis. Here, you see some jumps up to 256 and some down here. You can start to see just basically all the information. What you'll notice is you'll see a first one for audience size, a second one for visits, and the next one for page views. What does that mean? That means 192 different people showed up at my site. That means 218 visits to my site, so it looks like a handful of people came back to it more than once in a day, and then there were 377 page views, so a lot of those people clicked around to multiple pages as well. Again, you can start to see those trends. You can see it down here on a bar graph format. Here it shows you the kind of average visits over time, and some really cool information here. Down here, you can see the browsers. What are people actually surfing in? What are people actually using when they come to your site? You can all see the operating systems, or the Mac, Windows, and what version as well. They have Android, and iPhone, and all different things in here as well. Some very cool stuff here under the Traffic Overview. Click back to Metrics. Now, we're going to click on "Mobile Usage". Here, we can start to see that 78 percent of viewrs on desktop, 21.3 percent are on mobile. You start to get to see this just shows you, again, your percentage of mobile in a given day and what days that shoots up. Again, very cool stuff shows up in desktop operating systems and also your mobile operating systems. Next, we're going to come down here, and we're going to click on "Subscribers". This gives you a really cool view. You can look at anything that has an RSS feed and you can see the number of subscribers to that feed. If you click on Blog, you can see all the people that have feed readers that are linked to that site so that maybe pulling that as well. You can do it again on podcast and you can look at that on a different types of bases and in terms of subscribers and everything along those lines. Very cool thing. Lets you see people that are subscribing to you with RSS. Next, you're going to look at refers. This is, again, very cool information. Lets you see that 40 percent of my traffic's coming from Google, 37 percent is coming directly in. We've got this percentage coming from thefreelancereport.com, this percentage coming from How Design. You can start to see all these different refers and where your traffic is coming from. Again, this is extremely useful information, especially as you start to build up a good amount of traffic, and what different websites linking to you. We come back, and go down to Popular Content. Again, this is going to show you some of your most popular content and what percentage of your overall traffic that is made up in this week. Again, you can click on monthly if you want, or you can even just look at daily in any sense of that. If we look at this, we see that this blog post makes up 57 percent of my traffic. Pretty popular one that ranks high on Google. Another 10 percent come to my homepage, 7.86 percent go to my blog, and have these other posts that are very popular at the time. All of these different things, you can actually start to see which are the most popular content, and look at that over a period of time. Search engine queries. Again, this is very cool because you can start to see what terms people are clicking on and how they're finding you. You're going to get a lot of this not provided as part of thing with Google and protected searches. But you can start to see all of these different terms that people are coming to my site through and what they're actually searching on Google when they come to my site. Again, very useful stuff really starts to helps you see how your SEO rankings are actually performing. Go down here to the Activity Log. Again, this is just going to show you when visitors come in, and so you can actually just start to see the IP addresses and what they're actually doing. If you're doing a product launch and you want to see something live, again, a very cool little feature right here. Then last, sales overview. Again, I don't have any products that I'm currently selling for my site, so this looks pretty boring, but if you have an e-commerce site, this will give you metrics on all of your sales. That is a bit about the Metrics tab. I hope that seeing it with some data helped make it a little bit more apparent and understanding what was going on. 12. Understanding the comments tab & Disqus: In this video, I'm going to be introducing you to the comments tab, and talking a little bit about comments on your Squarespace site. So if we come down here and click on Comments, what we're going to see is that we have basically a little section where any comments that pop up, we can approve them, or we can see which ones are unmoderated, which ones are approved, and any we flag that are wrong, or that we think are inappropriate, or spam, or something on our site. Now, if you have noticed when actually when we went to my website previously and I showed you guys the metrics, the comments tab wasn't actually there, and that's because Squarespace has this built-in commenting system. If you just set up your site and you don't do anything else, you have this built-in commenting system in Squarespace, and it's good and it works great. But Squarespace has also integrated with this platform called Disqus, and this is basically the largest commenting platform on the Internet. So most blogs, most platforms out there, are powered by Disqus, and you've probably seen something that looks similar to this, where you have this commenting system and you have this avatar in this profile, and so what Disqus does is it lets you create a profile, and basically house this on your blog, and when you do that, it's actually able to, any website you go to a new comment, a links to your profile, which then links back to your website, and there's a huge user base. So most bloggers, most commentators, are on Disqus, and in the setting video I'm actually going to show you how to do that. In a later video, I'm going to show you the whole integration here with Disqus. But I just wanted to explain that quickly, that with Disqus, you're going to want to probably integrate that a little bit later. So keep watching, and I will show you that, and honestly, if you're not blogging, if you're not putting out any content like that, you're just doing informational website or it's a portfolio website without comments, you really won't have to worry about this tab at all and you can just leave it be. But if you are blogging, checkout the later videos where I'll show you how to do the full integration with Disqus. 13. Understanding the settings tab pt 1: In this video, I'm going to be walking you through the settings tab here and Squarespace and kind of explaining a lot of what goes under each of these tabs and what everything is. This is a really important part of the site. A lot goes into here, so get ready and let's dive in. So first I'll click on settings over there in the left, you'll seen we have a handful of options, and then even in advanced menu that goes into more options. So I'm going to go through these one by won. Basically, we're going to start off with a basic information. If you come to basic information, you can choose if your site is a business, e-commerce, non-profit, personal, it's not a huge deal. Won't make to much of a difference in the functionality or anything on your site. You can set a short site description, some themes we'll use this majority of themes do not use this site description. But I would recommend writing something in here either way because this is also a helpful area for search engine optimization to put sum kind of words in here. You can allow Squarespace promotion. They sometimes will promote websites that they think are really good or they'll put them as one of those kind of example templates on their website, and then you can come down here to business information, hours, phone, email, all of that. So you can put in your phone number, email address. You can set it up on a map, choose your business hours, and all of that. Again, a handful the themes, we'll actually pull this information and kind of plug it into the theme for you, so it's a really cool handy feature to have, not all of them do it, but it's probably worth just putting information in there either way. So when we come back from basic information, we're going to come back again to settings. Once we're back here in the settings menu, we're going to click hear on language and region, and this is really so you can kind of set the region that you're in, the zone, which is relevant, especially if you're doing events on your website. Squarespace has kind of an event calendar built-in. If your time zone set wrong, then all of your calendar events are going to show up improper for anyone that's coming to your website. This is pretty simple, all you really do is figure out roughly on a map where you are or where your business is based. You're going to click that little blew dots is going to move there, and I was successful and perfectly clicked on Denver, which is where I'm based out of. But sometimes if you're in the rough area, maybe I was trying to click on Phoenix or Boise, but yeah, just clicked on Denver, and there we go. We have just set the time zone, which is now proper, as you'll see, the time down here matches my time up there. We have now set our times zone, and hit "Save". I'm going to go back to settings and we're going to go onward. So we're going to click next on "Domains". This is where we're actually going to go and kind of work with hour domains. Domain being http://websitewithoutcode.squarespace.com. I wanted to, I could click on this, and I could rename it to websitewithoutcode2. I could change the site URL. I'm not going to really do that because I don't really need to right now, so I'm just going to cancel. But this is also where later on we're going to link domain. So whenever you are ready to launch your website live and say you're trying to launch a websitewithoutcode.com or jakejorgen.com. You're trying to actually put it live on your domain name. This is where we're going to go to do that, and I'll explain that in more detail a bit later. Also, if you want, you can click on get a free domain, and basically what happens if you choose to purchase an annual account and you bought a year of Squarespace, You get a free domain with your site. So again, very cool, very handy little feature they're worth looking into and you can drop down here and get a.org,.net,.biz or any of these cool things. That's all we'll cover on domains write now. Again, I'll show you later how to actually launch your website live. Next we are going to come down here to email, and this is something that's new in Squarespace 7.0 And a super interesting feature, one that will actually kind of dive into a little bit more once we get started. But you can actually hook up SquareSpace to your Google Apps in email accounts. This is really, really cool because it's honestly really difficult a lot of times to figure out how to launch your domain and then do that without messing up your email address. So if you have a Google Apps account, you can literally just connected right there with your Squarespace account, and it does all the records, all the routing on the backend, so you don't have to worry about going in and messing with all those DNS settings and the MX records to make sure that your email doesn't go down whenever you launch your website. So if you're a Google Apps user, I highly recommend checking that out. I'll show you that later. I want to show you how to set up Google Apps we'll do that on different theme, but this is a demo account from Squarespace, so I can't show you guys here on this one. Next, we're going to come down here to permissions, and this is really permissions were once called, I think, counseling contributors, but they've changed the name on this. It's very helpful if say you want to add additional people to your website. So say I want to have one of my friends or a coworker or a writer work on the site with me. What eye can do is either add a basic author, which is just basically wanted to give him, it's actually not going to create an account, it's just going to create kind of a avatars so that when I blog, I can say that this author is by, or this blog post is by, so and so. So you can create an avatar, you can put a picture with that. You can link it to their Google Plus right down here. You can put in a full bio in the social accounts and everything right there. So again, a very cool thing to just add a basic author, but this author really has no way of logging in. All they're really doing is say, for an example, I guess a use case of how you'd use this author is say, you're running a blog website and someone submits you a guest post or something that they want to publish on your blog. Well, maybe you don't want to really give them logins to your site and have them try to figure out how to publish it on their own, and instead you'd rather just take the word document from them and publish it on your site. What you would do is basically add them as an author, put there basic information and everything in here, and then that way when you put up that posts, you can say the post was by whoever, whatever their name is, as opposed to having it look like it's coming being written by you. So it's a way to kind of publish work from other people without having to get them logged into your site and setting all that kind of stuff. Now, we're going to discard that. On the flip side, you have this contributor, so you have a basic author which really doesn't do anything on the site, it's really just kind of a profile of a writer on your website, and then you have a contributor. A contributor is someone that actually gets permissions to work on your site, and there's these different levels of permissions. So for example, I could type in John Doe right here and JohnDoe@gmail.com. I hope that's not a real email address, it probably is, but yeah, and then basically I could invite them and give them a handful of different kinds of permissions and privileges on the website. So if I give them an administrator, then they literally have complete control over the website. They can design, they can edit billing, they can do anything on the website. So administrators, basically, you are an administrator buy default when you set up an account. An administrator would be someone else that has all those same privileges. So for example, whenever a lot of my clients hired me to do Squarespace design for them, they set me up as an administrator because I really need fool access to edit everything on their site to bee able to design and do everything there. So the next is a content editor. This person basically they can come in, they can edit content on the website, they can edit text, blog posts, any of that kind of stuff, but they can't change the design, they that can't go into the settings, the billing, any of that stuff. So if you're maybe just hiring a copywriter for your site, this is a really good way to kind of give them just the copy writing privileges. The next is billing, and this is really simple, but say you're at a company and you need to give accounts payable, maybe they have two enter the billing information for this. Now you can set up just a billing profile on them, well literally the only options that they're going to have is just to come in, log in and set up billing. So again, a very simple way to just kind of have someone login and just set up their billing account. Reporting. Again just basically gives an access to the statistics. Comment moderator. This would be very simple again if you have a lot of blogs in your site maybe. You have a position or some other company just moderates comments. You can do that as well. You can set someone as a trusted commenter. Again I'll show you later on how to set your commenting settings. But, you can have comment settings where basically no comment is published until you approve it. But you can set someone as a trusted commenter and say, "Oh, I known Joe always puts good comments on there is a trustworthy person he's not going to spam me. I can put him as a trusted commenter." Then the last profile is a store manager. Basically gives someone access to work with all the e-commerce, manage the customer orders, any of that stuff and also edit the content on the website. These are the basic ways you can invite someone to collaborate and contribute on your Squarespace site. We're going to back out of here, and we're going to discard. That's everything just on the Permissions tab, and now I'm going to jump back here to Settings. The next one and a very important one is Social. What you have here is a handful of different options for how you can manage your social media. The first thing that you're really going to want to do when you're setting up your account and getting your page going, is go down here to Social and click on "Connected Accounts" When you click on Connected Accounts, where you can actually do is come in here and you click "Connect Account". It's going to give you all of these different social media options for everything from Dribbble to Facebook, Twitter, Google Plus, Tumblr, YouTube, all these different integrations. Basically all you do, is you just click on one. If we're going to have on my click to link my Twitter profile. If you're logged in already, then it's literally just going to come to the screen as to authorize, so I am going to authorize the app. I have just connected my Twitter account as easy as that. Now when I go through my website and say I want to add social media links anywhere in the sites, or the theme has anything built-in like here we have in five you just saw this Twitter icon popped up up here. All of that basically is all automatically connected to my Twitter account now. Just from that simple connect account integration. Again I can go back and do that for Facebook, Google plus however many social accounts that I want to do. Now you can do that with Instagram as well and a few of these, Twitter, Instagram, YouTube, and a handful of these even have little apps that are built into Squarespace, which I'll demonstrate later. But some really cool features on how you can actually use these social media integrations and how you just connect them and then basically you get these apps and you can make little widgets on your site. That is the connected accounts part of Social. Next we're going to go down here to the Share Buttons. On a lot of the templates and especially with blogging, you have these share buttons. That's if someone reads a blog post or they're on a page they like, you can add these little share buttons and then it'll basically share that post automatically to these different accounts. Basically here you can say, here's all the things that I want them to be able to share it two do. Well, maybe I like Facebook, Twitter, Google Plus, LinkedIn, but I don't really care about the Stumbled Upon or the Pinterest market or Tumblr. That's just not really my thing. Or maybe it is and you can just leave this on. Then when you actually do it again it's going to activate itself. But yeah, basically you can choose which social networks you want to share to, so that way you don't overcrowd your entire website with too many share buttons where it's just ugly and overwhelming. You can choose whichever ones you like. There's this other very cool one which is a Pinterest Pin-It Button. If you enable this, you can basically enable it for blogs or for blogs and pages. What this is going to do is basically have a little overlay on your websites that will basically allow anyone to pin any of your images or your blog posts or different pages. It's a very cool little feature. Here's an example of what it will look like. Say you have this picture and someone can come up here and pin it. Let's see. Haven't saved yet so it hasn't quite integrated. But you can choose again, small or large. You can choose a shape, rectangle, or circle for the Pinterest logo. You can just go down here and mess with the settings. Again change all those stuff. But this is really handy especially for, say if your market is on Pinterest the people that you're wanting to get in front of, it's a super handy feature. Very cool to have it allows really a lot more immediate social interaction built-in automatically right there through your sites. You have to do any custom coding. All you do is just add this little Pinterest Pin-It Button option. But for now, I am going to leave that off and hit "Disable". We're going to come back and we're going to save. Then we're going to come back to Social. Now I must show you the final section here on social. But I actually hopped over to my personal account to show you this one because it's a little easier to demonstrate. But if i come over again to social, and I click down here on "Facebook Page", what we're going to seen is, that I can actually turn a single page on my website into a Facebook page and make it a tab on my Facebook page. It's very cool. What I've done is basically choose now I have all these different Facebook pages that I manage for myself and clients. I'm going to basically choose the Linked List to my personal Facebook page. Again, for any of us to work, you need to first link your Facebook account to Squarespace. Then what I can do is I can come down here and I can install a gallery tab if I want to and have maybe a portfolio or a gallery of my work. Then I can also have a Squarespace page tab. What you can do is if you click on this, it's literally going to show me all of the pages on my website which I've got quite a few. But I have this Jake Jorgovan's email list sign-up. Then I can actually change that heading on this, and set this basic Squarespace page tab. Now what this is going to do I'm going to hop over to Facebook here and show you. Is that if I'm on here on my Facebook fan page, again this is on a fan page not my personal profile page, I have all these different options up here for timeline about photos. Now I have this little option for sign-up for Jake's e-mail newsletter. This is super cool because if someone just clicks on this, they literally see the exact Squarespace page that I built on my site. This is a page on my website that is now just basically been built write here into my Facebook page. Super handy feature you can use this for maybe your portfolio, you can even do with the homepage of your site so it links to other things. For me, I did it for just a simple e-mail newsletter sign-up. But it's a super cool feature in a way that you can really customize your Facebook fan page and ways that a lot of other people can't do so it's something that's pretty cool and unique to Squarespace. 14. Understanding the settings tab pt 2: We're going to continue here with settings and now I'm going to come down, I'm going to click on the next option, blogging. We come into blogging, the first thing we're going to see is this post URL format. What you're going to see is right now by default it's going to say /year/month/day/title. Basically what this means is that if I go to my blog right now and I click on this first project on why creatives must have side projects. What you're going to see, and what I'm going to recommend to you is that you just have the title as part of your URL, because a URL is basically this whole thing right here and by default, what it's going to do is do the year, the month, and the day. If I didn't change this option, it would say, 01/16/2015/ why creatives must have side projects. If I didn't do what I'm about to show you, which is delete those other options from the URL format, all of my blogs have this really big long URL, which not a huge fan of. I prefer to have it as short as possible. What I'm going to do is basically just delete all of these. That way it really is just /blog/the title of the article and to do that, I'm literally going to come in here and hit backspace. Just deletes each of these, the /year/title all that. What we're just going to end up with is this title and this is the option that I have on my site right now. When you go to my blogs, what you seen is /blog/why creatives must have side projects, the title of the article. Next, I'm going to show you how to link disqus, the commenting system that I mentioned previously, two-year squarespace site. We're still here under the blogging option and what I'm going to do is I need to enter my disqus short name. The first thing I need to do is head over here to disqus and I recommend setting up a site or setting up a profile for yourself, which I'm not going to walk you through all that. I think you can register for a profile on your own. But what we're going to want to do is once you are logged in, come down here, click on your profile and hit "Admin." Once you are here in this disqus dashboard, I can click on this link right here and add a new website. My site is website without code at websitewithoutcode.disqus.com, but it is taken. I will make a jakes website without code and this one is not taken. That is nice. I can choose and we will say that this is a business website. We're going to finish the registration here. Once we come through there, it's going to ask us to integrate with a platform and see here you can see this universal code WordPress, blogger type pad, Tumblr, all these things. But we're going to click. There's a beautiful squarescase space icon right here in the middle. Click on that. Now it's going to show us basically the setup instructions for the next Squarespace. What we're going to have is basically again, it's going to tell you how to admin settings general, which is actually a bit dated on there website. Our Squarespace has changed, as you see, we're now under the blogging options, so this is incorrect disqus you guys need to update. But the handy thing here is it's going to give you your short name and your disqus short name is really all you need. I'm going to copy this little short name right here. I'm going to paste this right hear into Squarespace account and we have just right there linked disqus our commenting system has totally been replaced by disqus and the internal Squarespace commenting system has now been swapped out for disqus. Very simple. The last thing on this page is we have simple liking. This little optional blog post where someone can say, I like your post, that's cool and you can choose to have that or not. Then here's also if you say don't have your disqus short name, which I'm actually going to leave this out for a second because to show you, but say you don't use disqus. We come down here to the comments and settings. We can actually set a handful of comment settings on our site. Like we can enable comments globally or we can disable it and there's literally no comments on our website. Our blogs are just articles, but there's no comments on them. We can allow people to like comments. We can require an approval, and this means that everything's going to go on that moderation queue prior to actually appearing live on your website. You can choose whether you want people to anonymously comment or whether they have to put in information. Threaded comments, can people respond to other comments. You can have a thread of where someone starts a discussion and everyone just keeps playing off of that. Whether you want avatars to show or just text next for the comments and then whether you want to enable comments or you can actually disable or enable comments as you go through and publish each blog post. On this next option here, how to disable comments default value. I'm going to be straight up, honest and tell you I don't know what this does. Simple as that we're just going to move on. I don't quite know. I'm thinking that that's how long it takes in a moderated comment will just disappear but I could be wrong. Obviously, I've never used it, so I don't think it's too terribly important. You can choose your comments sort order, which is doing every newest comments your most liked, your least liked comments first. Then do you want people to be able to flag comments and set that. Then choose the number of comments, if a comment receives one flag, then it is automatically set to awaiting moderation and maybe you have a high traffic sites and if five people flag it, then it goes into the awaiting moderation section. Sum simple things around how you can edit your comments there. We're just going to save this. Come back here to blogging. I actually like this little disqus link so I'm just going to hit back and that'll bring me right back here to Squarespace, right back where it was. We're just going to paste in that disqus short name, hit "Save" and we have now set that up. We can still go into this comment moderation setting and even if we have disqus enabled, all of these options, you can still settle these options here on your website. That's all we have here on the blogging section. SEO, Search Engine Optimization. This is basically about your Google rankings and how you show up when someone types in relevant keywords to Google. We're going on click on "SEO" and here you can enter in a short description for your website. Again, this is very handy way to put some keywords in here, stuff that you'd want to be searching for. But try to not just pile it with keywords, but try to actually describe your website a bit it, make it something readable. Google doesn't like when stuff is just crunched with keywords. It actually prefers real organic content. Then also, if you're ever in this SEO section, how they recommend you clicking this link about how to increase your search engine visibility. I'll go through this in more detail, but it has changed over the life of Squarespace since they've rolled out new options. But this page tells you everything about how to optimize your site for SEO. There's a few other tricks I'll show you along the way, but it's a good place to start. Next frame come down here to the homepage title format. Probably you're very low likely chance that you will change this. But if you want to, you can hover over here. You see a bit more about it, but I doubt you're going to deal with this too much. Next would be a collection title. So this is actually pretty handy. So say, you have a collection title like the slash blog, or a gallery or something like that and someone goes to a blog post. Now this is basically choosing again, how do you want this to show up? Do you just want to have the site name slash the URL or do you want to have your site name slash blog slash the name of the article. So again, if you get rid of this, shortens your URL even more and you won't have that slash blog in there. Then these are individual things again, like the blog post, you can just shorten this if you want or you can have the item title in there as well. Again, not hugely important things, but if you're getting serious, you're building a blog, a lot of content, these are things that are worth looking into. Next, we're going to come down here to security. This is a really handy feature, but say your site is in draft mode. If you type a password in here, and basically what this will do is anytime someone comes to your website, they have to enter a password to look at the site. That's really handy if you're building a new version of a website or you're working on a high-profile project and you don't want people to know. It's a cool way to just hide it. You guys can work on it internally and no one can seen it unless they have this password. Billing in account. This basically you're going to come in here, and if you want to see your invoices, how much you've paid, you want to look at the history of your login, or you just want to delete the website and you can do that here, you can also come in here and just enter your billing information. I'm doing this on a demo site from Squarespace, So it just says this is a free site. But otherwise you can come in here and click on your billing information. Enter in all of that payment and everything. Last we're going to come down here to advanced, which it opens up a hole bunch more. But I'm going to go through these pretty quickly, not a huge deal. 404 error page not found, This basically means if someone goes and they make a typo on your site or you have a dead-link. You can basically send this to a system default which says we couldn't found the page you were looking for. Or what I do in my site is instead of sending them to an error page, I send them to just straight to the homepage. That way, if they have a dead-link, it brings them back to the homepage and hopefully doesn't totally just send them off or think that my site is broken. So simple little thing there. Hit save. Head back hear. Default text editor probably aren't going to want to mess with this unless you know how to written markdown, which is a blogging type format for writing really quickly. So probably not going to worry about that. Escape key, this is really cool but, if I go to just Jake jorgovan.com, I'm not even logged into Squarespace or anything write now. I just hit escape. It literally takes me and I can start working on my website. If I weren't logged in, it would ask me to log in, but I'm already logged in. So that is a cool thing, some people don't like it, but you can turn that off if you want to, and you just have to go to squarespace.com to login. But honestly, I like it I think it's pretty handy. Import, export. If you want to export your site, you can export it in basically a WordPress format. Squarespace does this because pretty much if you have it in a Wordpress format, you can upload it to almost any other platform. But so if you ever need to move your site off of Squarespace, You can export all the content, the blogs, all that stuff. You can also import content. We can come down here and you can import from Squarespace version five, you can import from WordPress, Tumblr, Shopify, Etsy, Blogger, Big cartel. So if you've already got a site on one of these platforms, you can just pull your content right over. So really simple. We're going head back over here, and we're going to external services, and we're going to show you how to set up your Google Analytics, account number you can enter that in here, or your Amazon associate tag. I'm probably going to dive to much into Amazon associate. You can Google that if you need to. It's really simple, you actually just put your associate tag right there. Then in the later video, I'm actually going to show you how to set up Google Analytics on your website as well, but also really simple you literally just enter in your Google Analytics account number. So, very simple stuff. Next we're going to come down here, Developer mode. You're not going to touch that because that is actually if you want to open up Squarespace and mess with the code and everything, and this pro-class is called website without code so, I'm assuming you're probably not going to want to go to the Developer mode. Code injection. You're probably not going to deal with this either. But, if you need to put in some custom HTML or CSS, or you need to put in, some code in your header for specific little app or widget you want. You can put that in there as well. Again, hopefully you're not going to have to deal with this, but if you need to, that's how you do it. URL mappings, again, probably not going to worry about this stuff. A little advanced image and importing, probably not going to worry about this stuff as well a little more advanced for the website without code class. Wow, we have just maid it through the settings panel. Super exciting that was a lot, I know. Then guess what? The next one I'm going to do in one-click. Have I ever just need help, click on this button, and it takes me to help.squarespace.com where you can search their knowledge base. I can look at their workshops, get involved with there community, or just submit a ticket or anything if I need to. So again, that one, very simple. We have just completed our tour of Squarespace. So incredibly simple. I hope this was helpful, I know it was a lot of detail, but I think getting a strong understanding of where everything's at, how two navigate through, it is going to help you going forward. In the next sections, we're really going to start diving into actually editing the pages, editing the content, getting stylized, doing all the fun stuff and starting to actually make a site that looks pretty good. So hang with me, it's about to get fun. 15. An extended tour of Squarespace outro: So I just showed you guys a whole lot of different tools. I hope it got exciting for you guys realizing all the potential that you can do and how easy it is to work with Squarespace. Now, in the next section, we're going to start getting into how to make your site look good. We're going to use the Style Editor and start actually designing and stylizing your website so you can tweak it and make it look like the site of your dreams. 16. An introduction to the visual editor: The purpose of the visual editor here is, again, this is a difference. You have your visual editor and then you have your style editor. The style editors was going to change your fonts, your colors, all that stuff, and your visual editor is really going to allow us to start to change all of the content that's on the site. Here we're not really, again, we're not going to be working with all of the actual styles and fonts. But instead, what we're going to be doing is going through and actually adding and laying out content on the website. We're going to come here to this just simple homepage that we have. What it says, we have home and we have really nothing here. A completely empty and blank web page. What we're going to do is in this five theme, we have this header up here. We're not going to worry about that too much now, but we're going to get into that in a second. But what we're going to do is we're going to come down here and we're going to see this home header content, we're going to see this page footer content and this home footer content. I don't use the header and the footer content too much. But the page content, this is really where a bulk of the content on your page is going to live. What I'm going to do is first click "Edit" here. You'll see we have this a visual editor that pops up and I can just start to type on my website. Say, hello, this is the text for the website. We can go in here and we can use this text editor and do the bold, italics, any of the stuff. I wish I'm going to go through all this in a little bit more detail in a separate video. But we also have this ability to see these little circles right here. We can add stuff below, above and below. If I come down here and I click this little circle, I can add all of these different little widgets and blocks. Say I want to add an image. I can do that. I can click on image, and I get this little image upload tool. I come over here to add an image and click this upload. Now I can basically come over here and find the images that I want to upload. I'm going to upload this hero shot right here. I'm not going to worry about this too much. We'll get into the image stuff in a little bit more in a later video. But I'm going to let this upload. I probably should have compressed this before I did this, but for demo purposes, it'll work. One thing, just anytime in websites you do want to try to compress images, generally around 250 kilobytes or under one megabytes is generally a decent size compression for the web. So try to compress it without losing too much quality. But this one was not compressed, so it's taking a little bit. Once that's going to take a moment to process and resize. Then we have an image on our site. We just added some text. We can add a caption. Here is a cool caption. You can come down here again and add another block. Let's see, what do we want to go down to? What would be cool? We want to maybe add some social links. I want to have links to all of the social media profiles. Well, I'll click "Social links," I can mess with the alignment, make the say, sit left where the text is. What you see is now here's that little Twitter icon. Remember how in the earlier videos we just integrated the Twitter account. Well, you see the Twitter icon here, but if I had connected Facebook and Instagram and YouTube, all of those icons would show up here as well. I can change the size of this and work with all these different options here, change the style and a lot of cool things. I can really customize this to look how I want it to look. We'll save that. But all of that, maybe this isn't working how I want. Maybe I want this social icon underneath this text and I want the picture to sit to the right. How do I do that? Well, the other cool thing about the visual editors, you can really drag and drop. I'm going to grab this picture and I can start to drag it around. If you look at this, I can actually begin to move it. So see this thick gray line back here. That's where I'm about to drop this. So if I drop it right here, the image will now be above the text. Look at this. Now we have the image above the text and we have the social media icon right below. Maybe we want it below the social media icon. Drag it down here. Now we have these above it. As simple as that, I can literally rearrange how the layout of the site is. I can also come over here. If I go to the side, I can actually start to put it in these columns and the side thing gets a little confusing. I will say this. So you're going to notice that in different areas, different things happen. First, if I come all the way over here to the right, I get this very big long bar that goes all the way to the right. What this has done is created an entire columns. I'm actually just going to paste a bunch of text onto this site. So you can see that I have just created a column by putting it where I had that large vertical bar. I created a column for the site. But let's start over and let's come back down. What if I come right here where I have this kind of gray box? Well, if I have this gray box, and the text is going to wrap around it. Gray boxes lets you do this texts wrap-around effect. That's another cool way to do it. Then the other thing we can do is we can literally come in here and just basically have these come just to the right and it looks like a column. But what you're going to see is that this block is still full width. Say if I had more text down here, or if I just copy and paste. Now because I set it to where that bar just spam the vertical height of this, I've created a side-by-side column with this element right here. But everything else, there's not a full column on the rest of the page. Again, it's a little confusing. It takes a little bit of time to get used to, but it's really, really powerful. You can adjust this and literally grab, make this picture smaller, or you can make this picture bigger. You can really adjust this to your liking and get a page layout that looks just like you want. If I want the text to wrap around the left side, come down here, do that same gray box and now with the text wraps over here and do the same thing, make it smaller, make it bigger, and really adjust the size of the image and everything very, very simply. This is the basic overview of the visual editor. I'm going to stop here on this video. Then in the next video is I'm going to get a little more detailed. I'm going to show you a few other things around the page settings and how to get rid of the sidebar over here and some stuff like that. Then I just show you a lot of cool tricks and get a little bit deeper, further into it. But hopefully, this was a decent overview to get you acquainted with how this whole thing works. 17. Understanding the page settings tab: In the last video, I showed you a little bit about how to just lay out and work with the page content down here. But before diving into that, we really should probably clean up some of this other stuff. This header doesn't look very pretty right now, the sidebar isn't very nice. We'd like to get this looking a little bit more like a website so we can really start to design within that. To do that, what we're really going to do, is come down here to the page settings tab. We can go do that by overlaying right here and go to settings. That's going to show this configure page, the page settings tab. Or if you can't find this because some themes have this in a slightly different spots. You can always click this little gear icon next to the page you're working on. We're going to click on this right here, the gear icon, it takes and it brings up the page settings. The first thing we can do is we can change the navigation and the page title. Maybe instead of home, I want this to say welcome. We can enable or disable this page if we want to. Really, you don't need to worry about this unless you're doing a lower-level account and you maybe have a page limit. We can choose to have other one-sidebar splits sidebars, whether on both sides, you're going have two sidebars on either the right or left or you can go full width for the sake of demonstration, and that I don't really want sidebar on my homepage, I'm going to go to full width. Again, depending on what theme you're on, not all themes even have sidebar, so you may not even have that option right there. You can have a page description tab. Again, not hugely important with a lot of themes. Some themes will use this especially themes like bedford and shift. But for five, it actually has no visual impact. But again, this is also another spot to put in some search engine optimization information right here. We can change the URL. Maybe I want this to say welcome instead of home. We can put a password on this page. Say maybe there's a part of your site that is only you only want available to members or clients, you can password protect it. Then last thing right here, which is going to make this page looks significantly better, much quicker, is we can add a thumbnail image. I'm going to click to upload the thumbnail image. We're going to upload that here or shut, still haven't compressed that guy, so it's going to take a second. But while it uploads, I'll just go ahead and talk over these next few things. The last thing is you can do here under page settings, or you can set this as the homepage, this will be the default page that someone lands on which we will do. You can also duplicate this page. Maybe you're making a portfolio thing in page and you want to make something very similar with the same layout. You don't want to have to redo all the layout, but you just want to swap out images and text. This is very, very handy for that. Or if you want to maybe make a backup and try two different things. That's where you have there. Then under advanced, again if you need to inject some code into your header, maybe you're doing an embedded application and they say, put this header code up there, you can do this but again this is a website without code, hopefully you don't need to touch this. The last thing we're going to do is just set this as our homepage. We're going to hit "Confirm". Now we're going to save it. When we save it, it's going to reload the page to reflect our changes. Now our thumbnail image as you will see in the five theme, is reflected right here in our banner area right up here. Home has changed to welcome and our sidebar has disappeared because we're on full width. Now this text has literally expanded to take the full width of the website. One last little trick I'm going to show you is. 18. How to manage text in Squarespace: In this video, I'm going to dive a bit more into the visual editor and specifically show you how to work with text and fonts inside of Squarespace. To start off, we're going to again come down here, and we're going to go and we're going to hover over this Edit on the page content right here, I'm going to click "Edit". Now we're right back here to what we created before. I'm going to delete a few of these things just so we don't have so much headache and stuff on the way. We handy little thing but if you ever want to delete something, you have two ways of doing that. The first is if you have a block element like this, you can simply double-click on it and then hit "Remove", hit "Confirm", and all my social links are gone. But maybe I want to get rid of this text element here. Whoops, I just did this, but with text it's a little weird but you can't just grab a text in the middle because it's going to edit it. What you do is you hover over the side of the text and you start to get this little grab hand. When you get that grab hand you can do all those same things of moving it around just like we did before. I can grab drop up there. I can grab it down there and for some reason it's not alone. There we go. Drop it to the right. All of those fun things. Or if I want to, I can just come down here and delete it. I can just simply delete by again clicking, dragging it to the trash can and deleting. Here we are, back to a wide open page. Now I'm going to show you basically how to edit and manage some content on your site. To do that, what I'm going to do is I have this artist statement. As I go through this site I'm going to be working on this website for an artist Elizabeth Cairnes. I just went over to my Google Drive, I copied this text. I'm going to come over here and I'm going to paste this into Squarespace. Now, one thing that you want to be really careful with, is that Squarespace will automatically inherent any of the formatting or it'll try to do the fonts or any of these things that when you import something into your site. If you notice, everything's a little bit justified to the right if I actually start typing right here, it types to the left but, for some reason these are all indented. This is all basically because of I copied and pasted text into Squarespace. This is something that you want to do really anytime you copy and paste text in Squarespace, is you want to come you want to highlight at all, and you want to highlight over this little Remove Format. When you do that, voila, suddenly your formatting is normal and there's no weird quirkiness going on with it. We have this text here now, there's no formatting. What we're going to do basic now is just come up here, I'm going to add a title, Artists Statement. This is going to be the header on the page so with this pages, we're going to have this artist statement, but we want that artist statement to stand out. We don't want it to look like the rest of the text, we want it to look like a header or a headline to this section. What I'm going to do is I'm going to highlight that artist statement, and there's a handful of things I can do. First I can hit Bold, and I could just make it bold if I wanted to. I could make it italic. I could turn it into a link if I wanted to and there's a link will pop up and I can type in elisabethcairnes.com and make that a link if I want to, I can open that in a new window or not. But we're not going to do that link right now. I can make it left justified, center justified, or right, and likewise I can actually do that with this entire block. If I highlight everything, I make it center, right, or left. But then this is the powerful part right here. We can come and see right now we have a normal paragraph format. If I simply go highlight artist statement and I click on "Heading 1!, you notice we get this headline option. Maybe I want a little smaller and I can click on a "Heading 2". You notice this is going to change to orange but I'll explain that in a second. Maybe I want even a little smaller of a headline and get a Heading 3. Basically, we can choose this I'm going to leave it as a Heading 1. What I want to explain right here is that, when you're working with web, you don't have font sizes really. You don't say, "Oh, I want this to be 22 point font and I want this to be 16. font. Instead, the way Squarespace works and the way the web works, is you have these headings and you have your regular text, and to all your regular text should be the same and all of your headings will be consistent. Basically everything you choose as either a Heading 1, a Heading 2 or a Heading 3. We get to the style editor, I will show you how you can adjust these and why, how you can make this one where it doesn't turn orange or turns a different color if you would like or it can be a different font, and how you can adjust this. But the reason behind these Heading 1, Heading 2 and Heading 3's, is that it creates consistency across your site. One of the biggest mistakes people who don't know anything about web design make when they start doing sites, is they're literally making this thing this size, this thing that size and it turns into this ugly, horrible site where nothing looks good and consistent. By the way Squarespace has designed this where you only get these three heading options and an option for a quote if you wanted. It really makes it where your site is going to look good. It's going to look like a professional website because this is how professional web designers work. Few of the other things say, we want this to be a list. We can simply do this and now we have a 1, 2, 3 list right here. I don't know if coming here. Or maybe we don't want it to be a list and we want it to be bullet points. We can make it bullet points as well. Or we can click that again and make it back to normal, we can indent this to the right or not. Then again we can clear the formatting as well. Now the last little thing I'm going to show you is this paste as plain text option. Remove formatting does the same thing, but say we don't want to paste it in all funky and we just want it to come in perfectly. All I can do is I can come up here, I can click "Paste as Plain Text" and I'm going to just paste it in here and again you see all the weird formatting, the indention to the font, I hit "OK". It's going to pop in perfectly, no weird formatting or anything that's in the way. Again, I wanted to the other option, paste it, have the weird formatting and indentions and stuff, and I just click "Remove formatting" and that all goes away. But again, be cautious of that. It's a big problem I see with lot of Squarespace sites where people are like, "I don't know why this looks weird my font." Some of the reason this looks different than everything else, and a lot of times it's because they have copy and pasted text into Squarespace, and the formatting has made that look that way. 19. Working with links: In this video, I'm going to be showing you how to work within the links in Squarespace. This is a really powerful one anytime you want to make a hyperlink or anything like that, but what we're going to do is simply add a little text on here says, "See my portfolio", We're going to turn that into a link. What we're going to do is, click on this "Edit Link" option right here. Like I showed you before on how to create a link, but I want to go into this in a little more detail. So we're going to click that, and this link window pops up. We can type in a link that we want the site to go to, and then we can choose if we want it to open a new window or not. If we don't choose open in a new window, basically what's going to happen, is your current site, the browser that they're in, is going to actually replace that window. So it's going to be taken totally off your site. If you choose for it to be opened in a new window, it's going to open a new tab, just like this. It's going to still keep your tab open with the site. Generally, if I'm linking to something off the sites, I will open in a new window. If I'm linking to something within the sites, I will generally let it open within the window, that's generally a pretty good rule of thumb. Another thing you can do, is you have this external, that's an external link, but I can also click on content. So maybe I want to link to my About page, or if we had a portfolio page made, I would link to that. But I just clicked on "About", and you'll see that it now changed that link to the About page. But when I click on the link down here, it actually brings up this option to either remove the hyperlink or edit it. So I'm going to go back to edit it. Because again, I can choose if I want to open a new window as well. Now I have it opening in a new window. So if someone clicks on that, it'll take me to the About page, and open it in a new window. The last thing I'll show you about the links, is you can upload files. Maybe I want to have a PDF of portfolios, but for right now, we'll just upload this handy-dandy picture right here. This file will upload, just like we did with the previous pictures, but now it will be a downloadable file. So a lot of times you can do this for maybe a PDF, or a document, or anything like that, an e-book or something that you want people to be able to download. You can literally upload those files to Squarespace using this little file editor, and it's going to save them so that we can actually link to them anytime we want. This becomes a new file on the Squarespace back-end. If we want to link to it, we just click this here. Now, that's set, that's going to open it in a new window, and we had to set that link to where it's now going to link to that picture. To demonstrate, I come here. Also, we're going to go to full screen, so I'm not in the editor mode and I can see it. Now I click "See my portfolio". It opened in a new window, and now it is loading that image. There we go, we just linked to this image right here. Again, you can do this with a PDF, any file type that you want to upload to Squarespace. That is how you go and work with links. Anytime you need to change them in the future, you can just come here, and you can click on "Edit". Also, you're going to notice right now it doesn't look like much of a link, and that is because that is again, another thing in the style editor, which we'll get to a bit later, which is going to show you how to change the colors, and the looks, and the fields, and the fonts of your links, you're heading, your texts, all that stuff. Right now you probably can't even tell it's a link, but once we get to the style editor section, you'll see I will edit and style this page, and you can see I can actually change the link color to make it the color that I want it to be. 20. How to use the image block: In this video, I'm going to be showing you how to upload images and handle everything with the Image Block in Squarespace. Now, in previous video, I showed you how to upload an image, but I didn't really go through everything around it. I want to go through that in a little bit more detail. To start off, go down to the page content again and click "Edit", brings me back to this visual editor. I'm going to add an image in here. Again, I can see all these different lines of where this is going to pop up. I want that gray line to pop up right at the bottom under "See my Portfolio". Click that. I'm going to head over here and I want to add an Image Block. Then I'm going to choose to upload an image right here, I'm just going to click that upload icon. But before I actually do that, I want to show you, you can also search Getty Images, and this is super cool. Squarespace worked out a deal with Getty Images. Basically you can buy any picture that is in there through this search engine right here for $10. So I can get any of these awesome, crazy beautiful pictures for just $10 through Getty Images. So pretty incredible, you can search whatever you want. You want pictures of clocks, choose clocks, let it search, and now I have all of these for $10 and get these incredibly awesome, very cool, stylized pictures from Getty Images. So very cool, highly recommend it. If you want you can even preview it, and it'll show up on your site and then it'll have a little overlay on it because it's not official and you haven't purchased it yet. But it's a cool way for you to see and preview images before you actually buy them. Then when you're ready, you just click this "License" button and you can go through actually license it. I'm going to remove this though, because I don't want an image of a clock here. I'm going to come up, and I'm going to hit this "Add an Image" button. Then I'm going to head over to the clients files here, and I'm going to again upload this hero photo. That will upload here, and while it's uploading, I'm going to show you a few other things. Here, right below this, you have this opportunity option for captions. You can choose "Caption Below", "Do Not Display Caption", "Caption Overlay", or "Caption Overlay on Hover". So I will show you guys that as example. You can change the file name of the image. Maybe I want it to be something different. This is really handy for search engine optimization, so I could change it to "elisabethcairnes.jpg". Then the file name would be different, and this is really good for search engine optimization and everything. Stretch. This one don't often use, but you can make it to stretch and span the size of the container. Lightbox. I'm going to turn this on so I can show you. But basically then when someone clicks on it, the image will pop out in a light box and make it a little bit cooler and bigger to see. Well, if I turn that off, then it's going to actually give me another option, which is a "clickthrough URL". If I do this, it's just like all the link options we went through in the previous video, where we can link to a page, external link, or a file. If you choose Lightbox, that goes away because Lightbox becomes the clickthrough action. So I'm going to click "Save" real quick. I'm going to come down here and I'm going to see that we have this opportunity to write here. So this is the caption. We have this set to Caption Overlay on Hover. We've also got to set the Lightbox. So I'm going to save real quick so I can demonstrate and show you what these actually do. So if we are here on the site, it's interesting the caption is here despite I'm not hovering. But there is the Lightbox feature right here. So again, we don't have a clickthrough link, so when I click on it, a Lightbox appears, and this is what a Lightbox is. So, it doesn't appear to do much here, but if your image is really small, it's very handy because then someone can take your small picture that's designed into your site and view it full screen. So let's go back quickly and see if maybe I did something wrong here with the Overlay on Hover. No, it appears to be right. My assumption would be that, this is because we're in preview mode. Sometimes when you're working in Preview mode, it does get a bit glitchy, but I would assume that would be fixed on the front of the site. Caption Overlay, that makes it look like what it was actually just doing or it's always there. Then Caption below puts the caption right down here below that image, or I can Do Not Display Caption, and it actually will disappear. Let me save that. Actually it appears here, but when you go and view it on the front of the site, it should be gone. Yes. So you still have that caption, which is really good for metadata or search engine optimization, but you can't actually see the captions, not visible anywhere on the site. That is a bit about how you upload and create images in Squarespace. 21. How to use the gallery block: In this video, I'm going to be showing you how to work with galleries and squarespace. Galleries are essentially a handful of images all grouped together. Before I show you how to set of gallery, what I'm going to do is actually create one. I'm going to do this under the Not Linked section, and I will explain why in a moment. I'm going to click and I'm going to create a gallery right down hear under this Not Linked section. I will just say Photos. Then I'm going to come over here to this photo section, and I am going to add images up here. Click this, and then you can choose whether you want it to be video, image, or you can purchase a gallery images from Getty. I'm just going to go to ''Upload Images'', I have my first image, which will again be this hero shot. Once that shot is uploaded, I'm going to hit Save and Publish, and it now publishes it to the gallery, and if I want to, I can add a image title and descriptions and add click through the links here. These are really handy especially if you say, maybe you want your gallery image to link to something. But I'm not going to go too deeply into all this stuff right now as it may not be relevant to everyone. We'll publish that first photo. Then I'm actually going to show you a cool little trick that lets you upload a lot quicker. Say you want to grab a handful of images, so I have these three images down here, temple, truck, and wall, that I like. I'm going to mark and I assume that this should work on Windows as well. If I want to, I can just grab those images, drag them right over here over this upload, and it just starts uploading all three of those at once. That's a great handy little feature if you want to batch upload a handful of images all at one time. Now once all these images are done uploading, I'm actually going to go back here to pages, and I'm going to come back over here to the welcome page, I'm going to scroll down here, and I'm going to edit my page contents. I'm going to go ahead and just delete this picture that I had before, which if you recall we just click and drag it down to the trash can, and now I'm going to add a gallery write here. Click Add, use the gallery box. Now you're probably wondering why we set that gallery up before, and now we're setting up another gallery on the page. Well, what we just did before was we created a gallery that would be I guess considered an existing gallery, and if I want to, I can just come over here, click Use Existing Galleries, click on Photos, and now you see we literally have a gallery of photos right here, which you can't quite see yet because I go over here to design and will make this a grid so you can seen a little better what's going on. But here we go, we have a gallery of images right here. I'll explain the grid in a second, but I want to clarify this distinction first. Because we created a gallery under the Pages tab, we can now just create a gallery block in the Visual Editor in link to that gallery anytime we want. This is a really handy feature, say you have your portfolio or you have a gallery you might reference and multiple spots on the site, that's really great because you can upload those files once, and then you never have to worry about uploading and creating those files again. Now, alternatively, if this is the only place on our entire site this gallery will appear, it's just maybe for just has one purpose, we can click on Upload Media, and we can come in here and we can upload images and drag and drop just like we did before. Literally it'll give us all the exact same options just like we did when we uploaded into the Pages tab. But for the sake of this, we're going to keep this right here and we're going to use this existing gallery. Now, that explained the different versions of using existing gallery, the pros of that and upload, I'm going to show you a bit about the Design tab. I'm going to click on Design, and here we have options for a few different gallery designs. We can choose a slideshow. We can set it to automatically transition between slides every our or seconds if you want, two seconds it's pretty quick, or you can make it something longer, like 10 seconds or five seconds and it will go through. We can choose Show Next in previous controls, then you see these little arrows pop-up and people can click on those to go to the next or previous photo, it changes down to five so look at that feel for that. Automatically crop images. Basically what this will do is it will determine a common denominator of all your images, and it will crop images to fit within what actually I believe is the first image that you upload. I could bee wrong on that, but basically what this will do is will crop images to fit within the frame. If you don't do this, then you may end up with a little white space around the edges on some of your pictures, but you're going to get that full resolution is a small white space because this is a slightly different resolution than the won before. Again, automatically crop images, it'll crop all things but, and again, this one you see now it extends all the weigh to the end. If we choose Automatically Crop, everything extends to the end. Show thumbnails. If you see if I scroll to the bottom, actually I have all these thumbnails of the images that people can also click on to view them full screen. We can get rid of that if we want, and we don't have that there. We just have the arrows or the media gallery arrows too if we want. But if we show thumbnails, we can change our thumbnails strip height, we can change the distance between the image and the thumbnails to give a little space there if we want to. Now we can also choose if we want to show the title and description which I didn't add titles in, but if you recall whenever I showed you uploaded photos, you can edit those titles and descriptions on each one and you can have those overlay the image as well. You can choose right here where that overlay will sit in the picture. Then you can also set a tour of the title and description only shows up when you hover over the image. Again, we don't have any titles and descriptions in there, so can't quite show you this but hopefully that will help and give you an understanding. Next thing I'll show you is a slider. Honestly we can't quite see what's going on because this window is on the way. What I'm going to do just for demonstration purposes is demonstrate another feature of Squarespace called the spacer and I'm going to add a block up here. I'm going to use this spacer. The spacer, what it does is literally just creates a blank white space. Now, I can grab this blank white space that I created, bring it down here and create a little column to the side of this image or this gallery. Now, here you can see we have this white empty open space and this gallery only takes up half the screen. This isn't really what we want now, but it lets me showcase this for you guys a little better. I'm going to come back over here to design. We now have a slider. We're going to automatically transition between slides. It'll do it every three seconds. What you see is instead of fading like we had with a slideshow, you get this crazy sliding effect going on. Again, set the next and previous controls so you can do that as well. Then you can also set the alignment, which I don't think quite works with the way that this photo's setup, but if you have its photos where maybe they're different widths, sometimes you actually be able to see the next photo as it shows up in the frame. You don't get the opportunity for control cropping and everything on this one as it's already built into how this one functions. The next and one of my favorite features is the grid. This one I use a lot in all different types of things. Once we have the grid, as you see, it makes a grid of your images pretty awesome. You can come down here and you can choose the aspect ratio, which basically means the dimensions of it. We can choose three by two. Now all of them are going to be three by two width or we can make them vertical, which doesn't really work for these, so you get all this white space. Or you can make them square. They don't look square because what's actually happening is not really all square and there's all this white space above and below, but it treats them as if they were. But if I hit "Crop images", now you see it basically force these all into the square and cropped down into the picture. I can also choose how many thumbnails per row. Maybe I want only two per row. Now we have this grid that is vertically stacked. Or maybe we want to do like 10 per row. Then what you're going to see is that these are actually really small and tiny now. We'll keep it at two per row right now for the sake of consistency. Then you can also change the parting around the images. This is cool. You can make no parting at all, put a pixel in there, two. I like the two pixel. The clean, minimalistic design. Or you can space them out if you want, give them a lot of space, a little bit of space. You just can fill out whatever is good for you. Then you have the opportunity for the lightbox effect, which again I demonstrated on the previous image video, but I'll show you in right now. Once you turn on that lightbox effect, come hit "Save". Now, I'm looking at this gallery, but,oh, that looks like a cool picture. It's a little too small. I can't tell what's going on. Make this little bigger first. So a little to small. If I click on this, that picture comes out totally uncropped in a lightbox so I can see what's going on. Very cool effect there. I'll come back in now and show you the rest of the gallery block. Double-click on that again to edit. If you ever want to basically edit any block in Squarespace, any image, anything, you just double-click it. We'll come back down and I'm going to show you last feature, the stacked image. This one there's really no customization on. But it's really great for graphic designers or people that are just photographers, even where you just want to stack and make something really simple and quick. Really cool. Just stacks them over equally. Very straightforward. That is how you handle the image block in Squarespace. It is a really powerful thing, really useful. Before I go, I'll show you one last little trick which I think you're going to like a lot. I don't know why that guy's in here, this draft, we're going to delete him. Let's say we want to, if we're in here in the looking at editing our gallery, and we click, say this little pencil tool, what we are going to get is this photo editor. I didn't actually show you guys this, but you can do this in the image block as well. This photo editor is very cool. It's basic, but it lets you crop your photos if you wanted to and change them. You can turn it into a square, mess with different dimensions. Get it however you like. You can resize it if you want to. For instance, like I said, these aren't compressed. I could maybe resize that down to 600 and they could take up a little less space. You can add some text over it if you want to. Again, probably don't want to do that one. You can even do some brightness contrast, some effects, and a handful of different editing things on here. I won't go too much into these. It's not Photoshopped, but it is really handy, especially for some of those cropping features and resizing features that are built into here. That's really handy. Then also under the gallery or really any image on the site, you can click on this gear icon. This is going to let me enter that title. The title goes here. One last thing I'm going to do is click on add the URL and say elisabethcairnes.com. We're going to hit "Save". Basically what we've just done is now turned this image into a link because we added this click-through URL. If I come back here, I come to that welcome screen, I'm going to test this out, I'm going to turn the lightbox effect. But no. If I scroll over these images and nothing, no change. If I scroll write here, I see it becoming a clickable link. If I click on that, we just got what we've just linked to elisabethcairnes.com. A very cool thing. You can literally turn any image into a link. That becomes really handy when you're trying to do a portfolio of projects or links to a bunch of different things, or when you want to use images as links to different parts of your site. Very handy tool right there. I hope that helps give you guys a better understanding of images and the gallery feature. 22. How to use the Quote block: This is a short quick one but a handy one nonetheless. In this video, I'm going to show you how to work with the Quote block. Come down here to page content, edit it again. I'm going to throw out my gallery block that we built in the last video, threw that guy in the trash, throw out my spacer as you'll see there's still a big spacer right here, get rid of that. I'm going to add a Quote block, add a block down here and I'm going to create a Quote block so we've got this quote copy and pasted. "Whenever you find yourself on the side of the majority, it's time to pause and reflect," by Mark Twain. We've got this cool little quote right here, and when we save that, we notice that it shows up in this kind of quote right here, and we've got the author right down here. Something cool we can do with Quote blocks is even though this is text, we can make this kind of a wrap around, so check that out. You now have this little quote that shows up on the side of this text right here so very cool little thing, when we get to the style editor, you can work with the font and the size of these quotes independently. I'll show you how to work with that a little bit later but again, a very handy little tool, great to have. 23. How to use the video block: In this video, I'm going to be showing you how to work with the Squarespace video block, another very powerful tool built within Squarespace. When I come through and I add a block, I haven't really shown this too much, but you see anywhere I really click, I can actually add a block anywhere. You see these lines they show up all over. If I click this one right here, it's actually going to put a video block between artist statement and the paragraph. I'm going to click, I'm going to add a video block, and you see I need to add a URL to resolve. But I can enter a video URL right here. Here we have the dramatic chipmunk. Great little video, highly recommend it if you haven't seen it. Then we can basically upload a custom thumbnail if we want to. So maybe we don't want to see the chipmunk initially but surprise people, and we can upload our little hero shot. We can choose that we want to use this custom thumbnail. You can turn that on or off if you want to. But we'll turn it on and once this uploads, you're going to see that it's actually going to swap out the existing thumbnail with this new custom image we've uploaded. You can choose whether or not you want to display the caption on the video, and you can write your caption right down here. Because we linked to YouTube, it's going to automatically pull wherever the caption is from YouTube. Then last up here, as you see, we just finished uploading. Now that you see a play button right here, we have a custom thumbnail and everything works right around like this. Again, if we get rid of use custom thumbnail, and it can switch back or we can just delete it as well. We can also embed Vimeo links as well. You can also do that as well if your videos aren't on YouTube. That is how we use the Squarespace video block. Let's save once we are done. Just for some sake of entertainment, I'm going to hit play on this real quick, so you can get a see. Oh my God, dramatic chipmunk. Awesome. That is the Squarespace video block. 24. How to use the code block / create a facebook like box: In this video, I'm going to be showing you how to use the code block within Squarespace, and also at the same time, show you how to add a Facebook like box to your website. This is a pretty common question and request I get, so I figured I'd knock out two birds with one stone. When I come back here again, down to our Page Content, and hit "Edit" then I'm going to put a little white box right here at the bottom of this artist statement. But in order to do that, what I'm going to do is first click this little "Circle Icon" to add something right here and I'm going to come down and I need to add a code block. Now I know this is a website without code, so don't give me any FLAC here because this isn't really necessary. But a lot of times maybe you'll be working with a third-party thing. Like for instance, I use SoundCloud a lot for my podcast. They give me a little embed code to put something on my site. Anytime you're really working with any third-party plug-in, maybe you want to embed your LinkedIn profile on your website or anything like that. You basically can use this little code block. We're not writing any code, we're just copying and pasting code. I'm going to click the "Code Box" right here. I can't see why that did not come up. Maybe I missed it. Try it again. There we go. A little code box pops up, and you get this little Hello, World! Thing in here, and you can just delete that. You don't need that. But this is where you're going to copy and paste code and then it will put that code on your website. The next thing we're going to do is, sometime I'm going to be showing you how to add a Facebook like box is just go to Google, and Google Facebook like box. Just click this First link. It is the Facebook Developers website. You're going to come in here and it's going to take you to this little page. It's going to ask for your Facebook page URL. I'm going to come over here and grab the URL of my Facebook page, and paste that in there and when I hit "Tab", it'll refresh it and you get some options. Do I want to show friends' faces? Do I want to show my recent posts? When you share your recent posts, it gets pretty big, so you may or may not want that. You can get rid of your friends' faces if you want. You can show a border or not show a border. You can even decide if you want a header there or not. We wish should to take that off, keep it really simple. This little like Jake Jorgovan. Then we're going to click this button that says Get Code and don't get overwhelmed. I know this is code, but it's okay because all we're going to do, is take this top section up here, and hit "Control C" to copy that. We'll come over the website or a site, and put that little script in there. Come back here. You see back to here, and then come grab this second piece of code on here as well, and we're just going to paste that right in this block as well. We're going to hit "Save". What you're actually going to see is that doesn't look like anything happened and the reason for that is that when you're working in this Preview Mode, Squarespace doesn't render JavaScript. This Facebook like box is a bit of JavaScript. Sometimes whenever you're doing this, when you're working with these code blocks, a lot of times the code isn't actually going to render properly when you're logged in a Squarespace and editing it. What you can do is either log out of Squarespace, or I just opened up Firefox. I have Chrome right here, and then I open up Firefox, and I just look at it in a different browser. If I go to a website with code.squarespace.com, here I can see a website and if I come down here, it's actually not working. That would be because I didn't save you have to save also for those changes to be reflected. I now just saved that content. Let's come back over here, and refresh this page and if we scroll down, I can now click right here, and someone can like my webpage or like my Facebook page from right here on my website. That's a little bit about how the code block works. It's a little tricky. Might be a little more advanced than everyone needs but it is a handy thing. It's a common question I get. I hope this was helpful, and I hope this helped you give you a better understanding of the code block and how to add that Facebook like box to your website. 25. How to use the form block and create a contact page: This video is another double whammy. I'm going to be showing you how to use the Form Block and also how to create a contact page on your site at the same time. First, just a little refresher. I'm going to come over here and I'm going to add a contact button to the website, so hit this little plus icon, and add a new page. Come down here and type in "Contact." While we're at this, I'm going get rid of this folder, because it's not really what I want and clean this up a little bit. It starts to look a little bit more like an actual website. I don't want this Google link or this "About us" folder, so I'm just going to delete this right here by hitting that trash can. Now we have this Welcome, About, and Contact. Here on the contact page, again, you're going to notice that it has this gray background, that's because we don't have a thumbnail upload on the page, and it also has this sidebar, which we don't want on the page either. What we're going to do is, again click on the page settings, we can do that right here, or by clicking the gear over here next to the contact page. We're going to change the page layout from one sidebar to full width, and then I'm going to come down here and I'm going to upload a thumbnail image. We're going to use this really cool one here of the truck. There we go. We now have our truck uploaded for a thumbnail image. When we hit "Save", we will see that that has just been updated here, but now we want to actually have a little contact page. I'm going to go down to page contact or content and hit "Edit". I'm going to type "Contact", and I'll highlight that and make it a header 1, so that way it's nice, big, and pretty. Then under Contact, what I want to do is create a little form, a way for people to contact me. I'm going to click this little button down here, and I add a Form Block. You're going to see it gives you a pretty decent starting point right here, when you're working with your form. For some reason or another, this is grayed out for me. I could delete this and go back and rerecord it, but honestly, Squarespace, it will glitch a little bit like this sometimes, and sometimes its their fault or sometimes it's your Internet connection. I'm going to hit "Escape" and that form goes away. If you ever have a hover window and you hit escape, it basically will x that out. But the Form Block is still here, so I'm going to double-click it to edit it. I am having an issue here and I don't know why. Again, I'm going to try trashing the form and starting over. Throw it in the trash. We're going to add a box again here. Click on "Form". There we go. I don't know what that was, I don't know why it did that, but that is just part of it. Squarespace is a web platform, so sometimes things with your computer or your browser, there's issues there, so every once in a while, you do have to just worry about that. You can give the form a name here, which isn't too important. However you name the form, basically, this is the e-mail subject, that will come through when it is e-mail to code form. I just named the website without code form. You can edit and you can have these different fields here that you can choose from. I have mine right now. By default, it's going to give me a name, e-mail address, subject, and message. Maybe I don't really care to have someone write a subject or I don't want to give them another line for that, so I will just hit the trash can on that and remove it. Look at that, we now don't have that subject line there. But maybe I want a phone number. If you hit this little plus icon down here, it gives you all of these other different options. You can do a text, a text area, which is a block like that messages down there. You can do a drop-down menu, check-boxes, radio, survey, name, all this stuff, a password. All these interesting things and ways that you can collect information from someone, their e-mail address or their Twitter handle. Maybe we want their phone number, so I'll just click "Phone" and I'll hit "Done". Now we have this nice little drop down or this little entry box for a phone number. But maybe I want the phone number above the message, I don't like the phone number being at the bottom. Well, you have these little gray icons right here on the left, these little dots. If I hover over them, I see my mouse turns into a little up-down arrow. If I click one, I can just drag it, and look at that, right over there on the left, it is reflected wherever I drop it. Very cool, very intuitive, and easy to use. Now before we hit "Save" and finish up on here, we are going to want to head over to the second tab up here that says "Storage". I'm going to click on "Storage". By default, the storage method will be that it's going to e-mail whatever your default e-mail address you have on the account is. So by default, this will send me an e-mail with all of the information that was entered into the form. Some other integrations, is you can actually add it to a Google doc, so this is great for event registrations, collecting e-mail addresses, or just keeping everything organized in one spot. The last thing, you can also connect it to Mailchimp, and this is really good, again, for e-mail list sign-ups or anything like that. Love Mailchimp on a huge user, and both of these are great. You just click them and basically you go log into your account, and the connection is pretty simple. Then last, under "Advanced", you have a few options here. Other than saying "Submit", you could say, "Hello" or something like this. You can change the text, and this will reflect once I hit "Save". You can choose where you want that button aligned, left, center, or right. I'll leave at left. Then after the Submit button or the "Say hello" button is hit, you can put some text in there, "Thank you for saying hello". You can set all this up. There's other stuff down here, probably you don't want to worry about too much. The light box mode is interesting. What this will do is basically have a little button and then when someone clicks on it, this whole form will pop up in a light box, similar to the pictures. Again, probably not something you want to do on a contact page, but it is a handy thing to have. That's all I'm really going to cover on this. The other stuff you probably won't need to worry about too much, but once we're done, we're just going to go ahead and hit "Save". Here we go. We have this form, but this looks a little big, I'm not going to lie. That's a really huge contact form. What I'd actually like to do is have my contact information listed right over here. What I can do is create a text box, and what I'll do is just put my contact information, Jake Jorgovan. By default, when you hit "Enter" in Squarespace, its going to break and give you a big line like this, so my new text starts way down here, but if you hit "Shift", "Enter", it won't do that break, and you can write right underneath it. That's just a little trick, a handy, little thing to have. What we did is, I just put my name and website address there. Probably not going to put all of the contact information in this little course here, but what I'm going to do now is come over here, and again, I can drag and drop this box. I can click it from right over here, see how it turns with the hand. I'm going to drag it and align it to the right of this form. Now, we have my contact information to the right of this form and I can put my phone number if I want right there. I don't want everyone in this course calling me. We can have our contact information and then a contact form right there. If we want to, we can even add a picture over here. Just showing you guys a little examples of ways to use a bunch of these tools together. I'm going to upload an image. We're going to go grab a photo just for my site real quick, and will hit "Save". The photo's a little big, but it works. Now we have this cool contact page, where we have my photo, the form right here, and then my contact information listed below. We hit "Save" and voila, we have just created a nifty little contact page here on our website. I hope this was helpful in teaching you how to use the Form Block, and also just trying to mix it up and show you a handful of different things all at once in this video. Hopefully, I didn't overwhelm you, but instead just gave you some more concrete uses on how to use the platform. 26. How to use the map tool: In this video, I'm going to be showing you how to use and work with the map block inside of Squarespace. As usual, I'm going to come down here, add a new block, and come down to the map block. What you get to do, is come through here now and add a business name. So Jake's awesome office. You put an address, which I have copied the wonderful address of 45 Rockefeller Plaza as of my addresses somehow located in Manhattan, which is not. Then you basically come down here and you hit Save. Now, by default, what this is going to do, is just give you a full width map right here, and it's going to give you a default zoom on it as well. But some things that you can do, is you can actually change the zoom on the map, and you can also adjust the dimensions and the width of it as well. Maybe we want the map to be a little taller, and we can come down here and click this little circle, drag and make that map a little taller or smaller. Maybe I don't want it all the way wide. Well, you can't quite just drag the map to the left, instead what you would do is grab a spacer block or a text block if you want something sitting there, and it will pull the space or to the side of it. Maybe that's a little too small, but we'll make it about that size. Then we'll go a little bigger here, and then something else that you may want to do is actually zoom in on the map. Right now, this is basically just showing that's on Manhattan Island. But what if I want to actually get in and see the streets that are around it? Well, if you double-click on it, and I'll move this over so you can see, and then you scroll over the map and you use your zoom wheel, or for instance, on a laptop, so I just two-finger scroll, and I just zoom in and scroll, and I can even click and drag the map around, I can get all the way in here so you can even start to see that businesses and everything that are around here. Very cool thing where you can actually zoom in on the map, or you can zoom out on the map as well if you don't want to get that close. Very handy features around the map functionality. I hope this was helpful and especially if you have a physical location for your business. 27. Advanced layout techniques with the line tool: In this video, I'm going to be showing you how to work with the horizontal line tool in Squarespace and a few little tricks you have. This is actually a little more than the horizontal line tool, I'm actually showing you some cool layout tricks within Squarespace. Here once we're editing the page content, I'm going to delete this quote block first just so that it doesn't interfere with what I am trying to display. But say, I want to move this text and actually make this text two columns. Instead of reading vertically like this, we have a column here and column here. Well, right now if I just try to grab the text, it all comes as one thing. Actually made a column because I had a spacer, and delete that spacer again to not get in the way. But what if I want, say these two lines to sit to the right of these. How do I grab those without grabbing the entire block? Well, that's where this horizontal line tool comes in place. What we can do is just scroll right here and click to add a block. What we're going to do is we're going to add a "Line." As you see this horizontal line, very thin but subtle, but useful little line shows up. We can use that as a design element if we want to separate pieces of our site, or we can actually use it to separate blocks of text. It's something I use it for all the time and then I maybe delete the line and afterward. But now we have these two separate blocks of text. I can come down here, grab the bottom one, and come over here. Look at that, we just now separated that text into two separate lines right here. But what if we wanted, say, the "Artist's Statement" to sit on its own line. We don't one like how this sitting up here and we want this to read all horizontally across. Well again, we can come up here under "Artist Statement," add a horizontal "Line," and we just broke up the "Artist's Statement" text from the text below it. We can grab this "Artist Statement," come up here and we see now that this is going to go all the way across the vertical as opposed to right here, which is its current positioning. We're going to move it up here. Then once we're done with that and we've separated it, we can "Delete" our "Line" and we no longer need that. Now we have the text and these two pair columns, just like we have right here. If we want to use the "Line" for anything, say we have a new section of the site down here. We can go through and add a "Line" down here. Now notice there's these two circles and they're right next to each other. This is something I haven't really demonstrated to much, but when you have columns like this, we've separated the grid into two columns. I can come here and click. If we see right here, that "Line" only spans the right side. Well, if I add a "Line" right now, you see that "Line" only spans this column right here verse, if we take it and we go on the outer one where we see the gray "Line" goes all the way across. If we click that, the "Line" now spans the full width of the page. We can do that same thing right here, we can add a "Line" right here under this column. As you can see, the "Line tool," it's a cool design element, but it's also very functional and just using it to break up text, or to arrange things, and then create these temporary space holders. I hope this was helpful. Try to get into even a little bit of the advanced stuff with a visual editor, but all useful things nonetheless. I'm just trying to show you some of the tricks of the trade, if you will. 28. How to create buttons: In this video, I'm going to be showing you how to use the button tool within Squarespace. As usual, we're going to start out by editing the page content. Our goal on this video is going to be to turn this "See my portfolio" link into a button. To do that, we're going to come over here and we're going to add a little block right below where it says, "see my portfolio". Then we're going to scroll down here and we're going to come to this button feature and we're going to click on button. We're going to change this text in this button. I'm going to move this over here so you guys can see what's going on. It says, ''See my portfolio''. We'll add a URL to cairnes.com and open that in a new window. Then we can change the size of the button; be small, medium or large button or just a little much. We're going to stick with medium on this guy right here. Then I can align this left, center or right. We'll just leave it aligned left. Right now this is kind of a boring looking button. It's just black and it's pretty straightforward. But it is functional nonetheless and whenever we get to the style editor, we can actually start to edit and manipulate the style of the button, the shape of it, the color and all of that. So it doesn't look that exciting right now, but we just created a button and we're going to come back to this in the future. Actually we'll leave as "see my portfolio" in here for a demo of links later on. We're going to come back to this in a future video in the style editor and I'm going to show you how to change and stylize these buttons. 29. How to use the summary block: In this video, I'm going to show you how to use these summary block in Squarespace. To do that, I've actually jumped over to my website since we don't really have any content to use in the summary block on our current website without code. But while we're, I also wanted to show you that this whole websites that I have built and everything I have going on here is actually built within Squarespace and on the five theme. So you'll notice that even though this looks very different, I'm not using the banner image or anything like that. I have a very clean and crisp website all built right here within the Squarespace template. So it's a really cool, really robust theme. Really enjoy using it. But for now, what I'm going to show you guys how to do is use the summary block. Summary block is very cool. It's very useful for either galleries, but the most common place that I use it is really based around blogs. So what I'm going to do is, I have this demo page here, and I'm going to add a block. I'm a click on summary block. What a summary block does, is it creates that little thumbnails, a magazine style. Look for seeing a handful of your recent blog posts or your must popular blog posts. So here I'm clicking on my blog, and what you see is now all of these posts, my recent blog posts pop up right here in a summary format. If I wanted to, I could also go from galleries and I can make a summary of my art gallery, and you can see some of my crazy artwork here. But I want to stick with a blog because it's a little more relevant and what I think is more commonly used. I can also do a gallery of products as well, if you would like. So once we've chosen what we're going to create a summary of, we're going to come over here to layout, and we can choose from a handful of different ways to lay this out. So right now what you're seeing is the grid mode, very similar to the gallery grid. We can do a list and you'll see a list of everything. You'll notice my recent posts don't have thumbnail photos, but all my old ones, you can see the thumbnails appear right here on the left. You can make the text size small if you want to, you can make it extra large if you want to get a little crazy or just medium and make it normal. Your aspect ratio, this determines your ratio for your pictures. If you put it on auto, then that's going to aim to not crop anything or try to crop as minimal as possible or whatever is the best fit or you can make them squares if you want to or vertical or whatever fits your fancy and that you like for your site. Move this on auto for now. You can choose the image size, and if I want, make the image really big. Let's tweak an hour right here. But you can see I can make the image really big with the story to the side of it or I can come down here and make the image small and make the text take up a majority of the screen. Again, whatever you prefer, your image aligned to the left, or you can set the image to the right and text-align, you can make its left, center or right. So again, very cool features there. Metadata positions, so that would be the date right there. I can show you how you can actually change that. I can put the metadata above the title. So now you see that day just popped above our title. We can make it right below the title and the date pops right there, or below the content all together. Then I'm going to come over here to display and choose how many items I wanted to display. I can display up to 30. So now we have a ton of blog posts going way back that it shows. Or if I wanted to, I could limit that to my latest three, tweaks a little bit. I want to make those big changes, and there you just see the recent ones that I have. It's actually showing five, that is odd. I must spent a glitch from trying to do it so much, but there we go. Now we're at three. You can choose what information you want to display. The title, if you wanted this thumbnail, which again, I'll show you where this thumbnail is pulled from later in the blogging section. So I can just have title if I want to. Let me make this a little bigger. Thumbnail would again be the pictures. So now the pictures are gone. The excerpt is the text. So we can just have the titles and the text if we want. Then you can also choose what you want this metadata to be. So right now you see that the metadata is the date of the post. I could also make it the tags that are on the post. I can make it the author of the post. Location, comments, any of this stuff. So again, some customization around there and you can have a second piece of data as well. So I can have my date plus the name of the author. You can also filter by categories. So for instance, I have quite a few categories on my website. So if I just do save the focused creator, that's just going to pull anything that I've tagged on the focus creator, which is a handful of blog posts that were featured around this e-book that I released. Or I can come down here and do that same filtering with tags. I can put in a tag of freelance, and here I get this one posts that I've actually tagged freelance on. So you can use categories and filters, which I will show you how to add those later on in the blogging section as well. I can take those off. Then last, there's a feature also in blogging where you can set a certain posts is featured posts. So if I click that, you can actually begin to see these featured most popular posts that I've chosen to be featured. We can turn that off, and again, by default it will just choose your most recent posts. So again, you can see the summary block is very robust. Honestly we're just getting started because there's even more cool things I'm about to show you. You saw that basically everything I just showed you was on the list format. Let's go back up to grid. What we'll notice is that if we go to grid, all of these different things changes. So we can now change our column width again, and we can make our width two columns wide and try to make it a bunch of columns wide where it's really dense, that's probably not looking too good. But you can really mess around with this and you can change the gutter, which is the spacing in between, make it so there's hardly any space and these words pump right up. Again, doesn't look very good, but you're getting the idea of what you can do with it. Again, you have all the same text alignment, metadata, and display, and just tweaking here while I'm messing with all these settings. Again right here, you can choose all those same options and everything right here. Maybe we don't want the grid or the list. Well, here's another cool one, carousel. What the carousel does is a cool thing where you can see these little arrows that scroll through. Well, I can say here are my featured posts and again have all these same things. I can choose how many items I want in a row, so we'll say four. Then for the sake of having one of the images, I'm going to go to featured, and really cool thing once you have this. We had saved so I can demonstrate this for you guys. With the featured posts, you actually have these little arrows and it's with a carousel option, and you can start to scroll through and have this really cool magazine thing. Just like that, no code or anything. You just get to make cool little features like that with using their built-in widgets. So again, those are the main ones right there, and I'm going to double-click on our summary block, come back in here and show you guys the final one, auto columns. Which this once again cool, it creates this neat magazine layout. I think this one kinda works better without the excerpt. Let's take the excerpt out. Let's also take off the featured filter, and I think you're going to get to see a little more. We'll make it a little bigger, put a bunch of hosts in here. Say like 30 of these guys. We'll give this a second to load. But this auto columns, what it does is it creates these columns automatically just based off the height of the image, the amount of text and everything there. This is again, another very cool layout, very magazine style. But it's something you can generate really quickly on your own. Again, I can make these columns all smaller if I want. Again, it probably doesn't look good with all that text, but maybe with pictures, it might work. I can make the gutter width bigger or smaller, and just mess around with all these settings. So it's a really cool feature. Again, not doing it justice right now with what it can really do. But again, it's a really nice one, very cool way to layout your content. So the summary block is really powerful tool on Squarespace, especially if you're blogging, podcasting, putting out any regular content, it lets you get a little bit customized around how you actually put your content on your website. So really powerful, really robust, probably one of my favorite tools within all of Squarespace. So highly recommend checking it out and playing with it. I think you will really enjoy this tool. 30. How to integrate social media: In this video, I'll be showing you how to add some social media boxes to your website and just a few of those, but before that, I just want to show you that I have also just attached, connected my Instagram account to Squarespace under the social media Connect account section, which I showed you guys in a previous video, but if not, you just go to Settings, Social Connect accounts and you are there. You're going to come over here and we're going to work on this page again right here. What I'm going to do is just come down here add a new box. I'm going to demonstrate a few different things for you guys. First, I'll do the social links box and add the social links. What we'll see here is that we automatically have the Twitter and Instagram icons, which I've already added to the site. You'll see the theme also has these in the footer as well. We're going to align this left, or we can align it right if we want to, and it will show up right over here. We're going to leave it center. We can mess with the size again, make it large, small, we can make it square and this knockout style, or we can do a border. Again, a lot of different ways we can go about handling this. You can even choose color, whether you want it to be light or dark, which this would change and it's very useful, especially if you have a dark background on your site, or you can just have it be standard. It's going to show up as those standard social media colors that you would have come to know and love. That's all I'll show you on this one, very simple but very cool feature to have. The next thing we're going to do is show you guys how to add a Twitter account, and to do that we're going to come down here, add a box, scroll down here and add the Twitter icon. Go to choose Account, and then to Jake Jorgen. For some reason or another, this isn't working for me, so I'm going to go to add an account and try to add this again. See if that fixes the problem. Again, there are little bugs here and there, but most of them are things you can just work right around. We just added a new account and look, that one is working. Not sure why the other guy was not working, but here we go. We now can see all my latest 10 tweets that I have up here. I can narrow that down to three, since 10 might be a bit much to have on the site. Again, if you go real quickly, sometimes it doesn't read it, so you have to kind of go slow. There you can actually see that or you can just have one and just have my latest tweet. I can choose whether I want to show my avatar or not. That goes away, my username or not. Then I can actually have a little follow button on here as well. People are going to again right there on the site, just follow me. Again, very handy little tool right there with the Twitter block. Again, if we don't want it to span all the way across, we can come over here, add a spacer, drag that guy right there and now we have a much more normal size that looking little Twitter widget. To the right of this twitter widget, we're going to add an Instagram box. I'm going to come up here, add a box, scroll down here to Instagram. I'm going to choose a account for Jake Jorgen. Again, it's not reading my accounts that I had previously connected. Not sure why, so we will click Add an account. Again, there are glitches every now and then, but most of the time you can work within them. I had already been logged in, my password was saved, so it just went ahead and grabbed my information. I'm going to make that so we can, and we choose how we want this to work? With the Instagram block, we have this account and we have this design tab here. You can choose how many item that we want to display, which right now it just looks like one, but that's because we are in slide-show mode. Now let's go to slider mode, where will start to slide and we can see the next one before we click it. Go to grid mode and to get that grid gallery feature. Again, and choose kind of our thumbnails per row. How many we want to include, say, three. Change your padding and all that fun stuff if you want to as well. Here you can see some of my crazy little drawings and just some experiences and what not. Then you can choose also if you want light box for people to be able to click on those and see those images a bit bigger. If we come back up, we can also see these images stacked. Again, these are very similar to the gallery functions that are already built in Squarespace, but now this is just pulling from my Instagram feed. There I am in Paris at the Eiffel tower. I hope that this was helpful in giving you guys an understanding of some of the social media blocks. There are definitely more that you can work with, but hopefully these will give you guys a few and the rest of them. For some of those other social media networks you guys can figure out on your own. 31. How to edit your footer: Next, I'm going to show you how to edit the footer on your Squarespace site. It's very simple, but something that a lot of people struggle with, and they'll actually have this kind of basic text or the power by Squarespace at the bottom of their site when they don't need to. To edit your Squarespace site to the edit the footer. All you're really going to do is come to the page's tab, click on "Welcome" on the page you want, or any page really. You're going to scroll over here to where it has your footer content and you're going to "Edit." I can come in here and I can change this text to something personal. I just mess it up. So it will say Change This Text. We can also have the social links block down here. Maybe I don't want that because it's already built into the theme. So I'll delete that. I can then come down here and I can add blocks. If I want to add another block of text and say 1-2-3 address. I can start to actually shift that text around and actually just build and customize a footer just like anything else. I can put pictures down here if I want or a quote or anything that I really want. So it's super powerful. You can really customize your footer to be whatever you want it to be. This footer is going to replicate across all of the different sites, all the different pages on your site. So for example, you see on my website, I have this footer down here with this email sign-up and my social media icons. I have this across every page of my website. So no matter what someone clicks on, when they go to this, they will see this at the bottom of the page. Also, you can go and stylize this footer through the Style Editor. If you just refer back to the style editor video, you'll see how to change the font color or the font size or anything like that in your footer. I hope this was helpful in giving you a little better understanding on how to work with footers. 32. Visual Editor Outro: All right now that you know your way around Squarespace's platform and I've showed you a bit about what it's capable of, I want to show you the Visual Editor which is one of the core pieces of Squarespace. One of the things you're going to be using the most common when building out your site. The Visual Editor is Squarespace's drag and drop interface. It's really simple but there's a lot of tricks with it and a lot of different things you can do and it's really powerful and I know you're going to love it. You'll notice this section is quite long. Well it's because I cover a lot of different tools that are in Squarespace's Visual Editor. Now some of you may want to watch every single one of these videos and see all of the tools, others of you may just want to watch the tools that are of interest to you, and others maybe you'll watch a couple videos, you'll get a feel for what's going on, and you're just going to want to dive in and tinker on your own. But regardless of your approach, I know you're going to get a lot of value out of this section, as it is one of the most important and core features in the Squarespace platform. 33. About the Style Editor: Up until this point in the course, I had been walking you through how to really set up your site, handle the settings, and put content on your site but we haven't really talked much about design. In this section, I'm going to be showing you what's called the Style Editor. This is the part of squarespace that allows you to really go through and stylize and design your site to your likings. It is one of the other major core features in Squarespace. Is incredibly easy to use and incredibly powerful. 34. Using the Style Editor pt 1: This video, I'm going to be showing you how to work with the Style Editor in Squarespace. To get there, we're first going to click on the Design tab over here. Then we're going to come down here and we're going to click on Style Editor. What we'll get is this list of all these attributes over here on the left. We can scroll up and down this list. As you notice here, there's a scroll bar on the right that I can grab. We have all these lists and attributes. Don't worry, it seems overwhelming at first, but I promise it is not. Few things just to know about the. Style Editor first. That is that the attributes and everything, that is, all of these are individually unique to each theme or template. Some of these, if you're working with the five theme, you'll see all of these that I have right here. But if you're working in Pacific or Marquee or Bedfat or any of the other templates, you might have some of these attributes that are different. Some of these you might not have, and others will be uniform across to all of them. Just something to think about, and if you're looking at different theme, why certain things might be a little different. But my recommendation with you is to really just go through a list, start playing with everything. You'll start to see pretty quickly and figure out how it works. I'm going to start and just start going down the list and explaining them one by one. The first is the site background. This is pretty straightforward, but it is the background of the site. I'll go really drastic here, make it red to showcase here. But what we're actually seeing is that, it's not really changing anything. That is honestly because the site background is not really an attribute that's too important on this theme. But it is one that goes across all of them. Actually, if we go to site width instead of full-width, here we start to see the site background. Again, some of these attributes, they'll look like they won't do anything. But actually some of them might just be dependent on other variables being certain ways. For example, down here we have an attribute full site width and full width. If I go to full width, then the sites and everything goes all the way across. If I go to site width, then I can actually use the slider to determine how big this site is, how wide it is. Some really cool kind of features and functionalities here. Just to fuel the things you may have seen me do this a second ago, but zoom in and out. If you hit Command Minus or Command Plus on your keyboard, or I believe it's Control Minus or Control Plus on a Windows, what you can do is actually zoom in and zoom out. This is really handy to do in Squarespace at times, whenever you want to be able to see a little bit more, or if you're working on a small browser, like I am right here. But we don't really want that red background, so we're going to put that guy over here to white. Now you can also, if you wanted to, you could set that background image to an image if you wanted to. So you could upload a texture or anything if you want to. As you see, it's pretty straightforward when you upload the images, you have those same options that you do to upload and everything. Then you also can mess with the positioning right here and try it out different positionings and see how it works there. You can choose the size and how this works. I recommend just playing around with these and seeing what works best for your site. Again, there's a lot of different attributes in the Style Editor and each theme has its own attributes. So this is really something that you just play around with a little bit and have a little fun with. Next here is the site width, and as you'll see, as I make this smaller, the whole website starts to get a little bit smaller and everything gets a bit more narrow. So something again, just to look out for and another attribute. A lot of the attributes have these sliding abilities with them. Again, we already went through the Canvas setting right there. You have this opportunity for a Canvas offsets. You'll see that it creates this gap up here at the top. You have this Canvas padding. Again, you'll see how this, basically what this is doing is adding padding right here. Again, some of these just mess with and you'll see what exactly each of these attributes is doing. Also be careful because sometimes it's affecting more than one thing on your site. For example, the padding affected the navigation up top, but it also affects it right down here as well. You can choose a border size for your Canvas. You'll start to see this border appears. Previously I had zero pixels, but now I have this border, which again, I don't quite want. So we'll get rid of that. You have this little thing, this little slash marks right here between the navigation is called the delimiter. I can hide those if I want to. Or I can change them and I'll make them bright red. You can see that delimiter, that little slash between the navigation items turned red. But that also links directly to our horizontal line down here, which turns red as well. 35. Using the Style Editor pt 2: Few other things we can work with the header background and again, we'll actually this would be an attribute that we have to change some things to see. But if you recall, behind these images we have this gray color right here. What if I don't want that to be gray and I wanted to be bright red. Again, that looks terrible. But another little feature here or I can make it white or a handful of things. You can also make a header background image, so this will become the default image or maybe a texture that you put in there. I can change the site title colors. Again, maybe I don't want that site title right here actually, sorry that is wrong. This site title color, will actually be, and then we're going to come back up here now and fix that little width right there because we actually liked it and like in this look a lot more. We have the site title color and so right here you can see I'm changing the website without code texts, and the color right there. But also note that if you upload a logo, which I'll show you guys a little bit later when I go into the site design. If I upload a logo that will actually replace the text right here and then the site title color actually becomes irrelevant unless the logo it doesn't load. You can choose a hover color for it, which again I'm in preview mode so you can't see it, but I can make it work when you hover over that the color changes. Here we have the page title, and you're going to notice two attribute. You're going to notice the page title and the page title color. Often, whenever you are looking at any real font attribute, you get these different multiple things you basically you can choose the color. Again, if I wanted this to be red or white we'll leave it at white just because that works. Then we also have this drop-down menu for the page title. Here, whenever we do this, this is a common thing, you're going to see this little text window anytime you choose a text elements. So the first thing you see is the font name, the style, the font size, the line height, text transform, and letter spacing. Let's change this real quick and we're going to go from Proxemi ANOVA to Josefin Sans. Now I'm going to do Open Sans Joseph Sans is a font I like very feminine pretty font. Open Sans is another really good one that I use a lot. So I choose Open Sans and you can see the font change right here. I can also choose how thick I want this font to be get really super thick with it, and bold if I want. I can change the font size, I can change the line height it looks like it's doing much here but it's really not. The line height is the height between line, so I'll actually demonstrate that on the other content later and you'll be able to see a bit more of what's actually going on. Text Transform, you can do all caps if you want to or you can put all lowercase. You also have this letter spacing, so maybe we want this really spaced out welcome lettering. You can get experimental and have some fun there. Those are some of the basic attributes around editing fonts and you're going to see that window again I'll show you quite a few times. Site tagline. Again, we're not really seeing the site tagline attribute here. Then you have the banner area spacing and this is another one that is unique to five. Again, not every theme is going to have this, some of these might have different options. But I can come down here and I can start to make the banner huge. Or I can come up here, and make the banner real small and I can really start to experiment and have fun with this. One thing you'll notice if you remember my Jake Jorgovan.com maybe I should pop right over here. I'm using five but I actually am not using the banner at all, I literally have the banner set to zero and I'll change another attribute which I'll show you in a moment. It really lets me have this clean, minimalistic website and to do that without having to worry about having the banner here or having a banner on every single page. Again, we're going to just going to keep going down, and you'll see this is set to zero, but because of another attribute it's actually still there and I'll show you how to fix that whenever I get down there. You have this overlay color on the banner. By default, this is something you'll see in a lot of themes as an overlay and this brings me to another thing. That's basically that this image has this overlay on it and so I can make it red, I could make it green if I wanted to. Right now it's just gray so it's a little gray and you can read the font. One thing you're going to notice, you're going to see this A and the 0.2 that is the opacity. So if I start dragging that to the right, the overlay literally becomes a solid color at one. Then if I come all the way down to the left, I can make that overlay zero. Or if I don't want the overlay, I can just click transparent, and there we just see the image without any overlay at all. Again, now you'll see that in a lot of different themes as overlay option. A banner text width again this is something you can do with this banner text here. If you have something really long you can choose how wide do you want that to be. Then a banner content, this is the attribute I was talking about previously. Right now, you're seeing that I have the page title, I can also change it to say the site title or the logo on tagline. Now, I don't have a logo up here but instead it floats over this image, or if I choose empty, then what happens is that the page title doesn't appear at all. If I come back here to banner area height, I can literally make that banner go away. Now we don't have that banner at all, we just literally have the navigation and this website. So it really cool thing if you want a basic website, you don't want to worry about all the other stuff, you can just get rid of that. Another thing you'll notice, I'II just show this to you now. Is that when I move my mouse around here, little sections become blue or I see dotted lines or anything. Anywhere I click, it's going to immediately show me that attribute, so you can see there's a space between the navigation and where this page starts, and that's because I've set my page spacing to 100. Or maybe I don't want 100, and I want this to sit up a little bit closer to the top, and I want to sit about 24 pixels down. Again, I just was able to click on that and we just adjusted that right there. I can also click on the logo up here, and again I can change this site title, color or anything like that. I can change the font right here which I will get to on that list. But this is really cool thing you can just click around and edit different things. If you ever want to get back to the master list, you just click show all, and here we are right back at our normal master list. So it's showing you a lot, as I can see I hope you're taking it in, this is a really powerful tool. Again, if you get overwhelmed, I just encourage you to dive in, and start playing with everything and switching around different options and trying it out because every theme has its own individual things. 36. Using the Style Editor pt 3: Next thing I'll show you is the navigation background. But actually you know what? Before I keep going there, I do really want a banner. I wanted to demonstrate that for you guys, but I like this picture and I'm going to leave it. Jumping back to this though, the navigation background. Say I want to make this navigation background red. I have now just turned the navigation red. That's a really handy thing there. But again, I'm not liking how this is just right here. I would actually like this to be the full site. Again, if we come back down here and we do the Canvas setting, if we make it full width, suddenly everything goes again all the way the full with of the website. I also going to get rid of this padding up here, this Canvas offset that I initially started. Hey, this is starting to look a little bit more like a website. I actually don't want a red background, so I'm going to come back down here. I was just jumping around a bit, showing you a handful different things, hoping this gives you an idea of how to edit stuff. Site name, if I want to change this font, again, I get this drop-down menu. Jump that over to Open Sans. You want to space out those letters a bit and maybe make it real thin. Yeah, look at that. Then we're going to come down, we can go to the navigation fonts. That's actually this font over on the navigational elements. We'll change that to Open Sans as well, and you see that font just changed. Again, I have all those same options. We can space these out. Have some fun with that as well. I can change the link color, the link hover status, the active link. The link color is just by default that they're gray, this gray color right here. I'm going to change these. The link color, right now I have as red but this is pink. I'll make the hover color as green, just very much for demonstrating purposes. I'll make the active color as blue. What you'll see here is that the links are natively red, they were naturally all red, then I'm on the welcome page so the welcome page turns blue. Again, it's not going to do this while on the style editor but if I hovered over, it would turn green. Again, not the prettiest, but I'm just trying to demonstrate and show you guys some elements there. We also have this navigation spacing. Again, this is another thing you can notice, is that see those blue lines as I hover over here, look up here and you'll see these blue lines. As I hover over this navigation spacing, those blue lines popup and show me what I'm about to do. As I start to increase the navigation spacing, I begin to see that this puts padding on the top and the bottom or I can make it really tiny like this. Then we're going to again, also work with the navigation position. Do we want this above the banner or we can put this below the banner? Maybe we just don't want navigation at all and we just want this clean, simple website without the navigation, might work for a one-page website, probably not much else. Again, we'll leave that there. We can also choose, do we want the navigation left, center or right. You'll notice with some of these social media icons adjust to fit accordingly. 37. Using the Style Editor pt 4: For demonstrative purposes, I just set up these three headings. I went over and added these in here, and what you see is a heading 1, a heading 2, and a heading 3. Over here on the style editor, under main content, you're going to see sections for heading 1, heading 2, heading 3, and your body text. Remember in the font video where I explained that this is how websites are set up with these heading attributes. Well, if I want to what I can do, is just come in here and I can change this to Open Sans or change the font, and here this change is it under my heading 1 attribute right here. Anywhere on the site that I have a heading 1, it's going to automatically change it to match these attributes and match the style. The same with the heading 2. We don't want this to be yellow, but we want it to be crazy-green. Again, we can go through and simply just change these heading 2 attributes, and that's going to change that all the way across the website. Again, we going to do that in heading 3 as well. Change that, maybe we want that to be a little bigger, and you can work with each of these attributes as well, and we'll hit "Show All" to get back to all of them. But as I told you before in the beginning, the websites and web in general is designed around these heading options, and so when you create these three, you basically are just going to make, heading 1 should be the biggest, heading 2 should be the second largest, and heading 3 should be the smallest, and then you just use those throughout your site, wherever you see them fitting. Now I'll show you a few other things under the main content. You can change your canvas background, which this is what actually you would think would be a site background. But your canvas background is actually the background of your page. So the actual page where all your content is. We'll leave that white. Maybe you want your Website black, so you can do that as well and make all your text white if you want. We're going to come down here then, I'm going to show you the body text. Body text is your basic just fonts and text of your normal website. Again, I can change this to Open Sans, we see that all reflected here, I can change the font size if I want to, I can change the line height, and this I tried to demonstrate earlier, but line height is how much space is between each line. Again, you have it scrunched, or very large, or something nice in between. You can also do the letter spacing as well, and that might get a little hard to read, but you can space those out if you so desire. You can change the body text color, again maybe you wanted this red, or anything like that, and then your link color, we'll make this sky-blue. What you'll see here is the see my portfolio link over here. Remember how we had that set up as a link? Well now we have just turned that blue, and so now everyone knows that that is a link. Sometimes this is something to think about, but a lot of people like these really small thin fonts, which is what I have here. But it makes it really hard to see these color changes and honestly to read in a ways. So if I bump that up a little bit to 400, suddenly this link color is much more defined and everything is actually a little easier to read. I can choose the hover color as well. A lot of times what you can do is make the hover color at slightly lighter state. So that way it was a little change, but it's not drastic. If we had a block quote, remember how we did the block quote earlier in a little quote block, you can change the font on those and change the font size and everything there as well, and you can edit your page spacing is the last one here which I showed you right up here and we worked with before. Your page spacing is how far between the top of the site and your content, how much spacing this in-between there. One last thing I'll show you before we keep going on this list, it's a big list, I know, but we are making our way through, is that if you want to edit buttons, I showed you earlier in a previous video how to make buttons. If you click on "See My Portfolio," you can actually start to change the style of the buttons. So we have the solid, or we have an outline style, or this raised style. We're actually going to stick with solid for now. But maybe we don't like this boring square, we want a rounded one. You notice those colors it's subtle but the rounded, or maybe we want this pill oval look, and maybe I want my buttons to be green, so I can change the buttons color as well. I can also change the text color as well. So maybe if I want that text red or black and make it look horrible and christmassy, but I'll leave that as white. I can even change the font on it as well. So you can get really fine tune here and work on stylizing your buttons as well. I'm going to go back to show all and keep going down the style editor with the guys. Scroll down, we've done main-content, we've done the navigation, now we're going to go to the footer. I haven't actually showed you guys how to edit. Now we're going to do the footer, and what we're going to do here basically isn't the footer, you really only have a handful of options, but you can change the text down here. If you want to, again, a different text, you can change the style, all that stuff. Again, very normal and you can align it left, center or right. Then also by nature, you're going to notice this little footer border right here. We're going to basically, if you want to, you can just disable that, and suddenly there is no border between the footer and the bottom. You can choose your social icons in the footer and how big you want those guys to be, which is now adjusting. That might be up here. I'm sorry, we're no longer in the footer. These are the social icons that are built into the five theme, and the social icons that are down here, are actually built through the social icon widget, so sorry to confuse you there. You can change the color of these icons if you want, make them bright red. Again, you can choose the style and how you want those to look. So just like we did before, and then you can also choose if you want them at the top only, the bottom only, the top and bottom, or to hide them. If we put them on the bottom, you're going to notice that this pops in, and this is a little different than this down here, because this is a squarespace block. This right here is actually built into the theme. Next, we're going to come down here to the blog. Actually, I'm going to come back to this guy in the future, once I show you guys the blogging chapter and we have that set up. Then the last one here again, you have your button blocks as well. Notice how it says medium right here, this is only showing the medium because this is the only button size that I have built. But if you also have a small button and a large button, you can style those differently as well. So you can make it up to you. You can have your small button to be red and your medium buttons to be green. Again, a lot here, a lot that I just showed you, and I know it seems overwhelming, but in the next section or the next area, whenever I start actually going through designing the website, I think you'll get to see this in use a lot more. You'll get to see some real world examples with it, but in reality, you just need to play with this. You need to have a decent eye for design, and just mess around with different things, and I think you'll be impressed with what you've come up with. 38. How to set up a blog: One of the most powerful features of Squarespace is the blogging platform. It's really robust and really simple to use. In this video, I'm going to be showing you how to set up and start your own blog. To start off, we're going to come back over here to the pages tab, and we're going to come up to our main navigation, and we're going to hit this "Plus" icon. We're going to scroll down to blog and click "Blog", and we're going to title this blog and keep it pretty straight forward and simple. Now, what you'll see is that this is going to pop up and bring us to this blogging page, which you'll see has this sidebar. I'll show you how to work with that in a second. Then over here on the left we have this kind of blog manager where we would see all drafts, review, and scheduled. So what we want to do to simply just first create a blog post is click this Add Post button. When we add posts, it's going to bring up this post editor window at this Edit Post window. We're going to say New blog 1. This is our title down here in the text, and I say, "This is a brand new blog." What you're going to notice though, this is what I love about the blogging platform is you have the full editor. You can put in any of these image blocks, you just put in an image, or a gallery, or a video, anything like that. You can easily just plug this all those same features right into a blog post and that makes it great and really, really easy to use. Some basic stuff there you can again, just make a whole blog posts whatever you want. Use a picture, use all the widgets, and everything in there. So really, really handy tool to have, you have the same basic text editor and everything up here. All this functions very similar to what I've taught you in previous videos. Now, once you have your blog written and you have everything up here. You'll want to go over here and come to the Options section, and you're going to have a few things here under this Options tab. First, you're going to have a thumbnail image, and so we're going to come over here and just upload a thumbnail image for a post. This again is just going to be the basic thumbnail, some themes will pull this and use this as part of the design. Others won't, but these things like the summary block as I showed you before that it will pull this thumbnail image. Now, you don't have to have a thumbnail image, but it is recommended or if you want to have it in that type of design of your site. We also have this post URL section over here. This is really useful for search engine optimization because your URL, so for example, this tag we have right here is your URL. This is what we're actually putting in that box right now. We have the jake-jorgovan/blog search the name of the post. We're going to say, new-host-number-1. We can type that in here. You can change the author. So if you have multiple profiles on your Squarespace site, you can change that author. You can use the source URL if you say, just putting something in there as a snippet from another site you can link to the source. Then you have an excerpt. This is the excerpt, I can't spell excerpt. If you recall when we were working with the summary block, there was that option for excerpts and there was that text, that summary of the post. That is what this is, and I'll even go and show you on my site. Here I have listing of all my blog posts and these little blurbs below it, these are the excerpts that I have. They are not the full post, but they're a teaser, and then people can click and read more, and then they can see the full post and everything here. Again, the excerpts are useful in a blogging feature and also for the summary block. If you also recall, on the summary block I mentioned the featured posts abilities. If you want, you can check mark something as a featured posts if you would like to. Then we're just going to go and I'll show you a few other things. You can tag a location with your post if you want. You don't have to, but if maybe you're a travel blogger, that might be of interest. You can automatically publish posts to social media, which I probably don't want to publish this to my Twitter or my followers would hate me because I would be publishing them to nothing, I won't do that. But you can have this automatically post to your different Twitter or your Facebook accounts or anything like that. Then one last thing I want to show you, back here on the content tab is the Tags and Categories. If you just come down here and you click "Categories", you can choose to create a category. Maybe I will say business, and I'll say photography, and I could have another category for art. Your categories they're not hugely important, but if you want to have someone be able to search your site, you can do that. You can link two categories or you can use the summary block, as I remember, I showed you before the different filtering with tags and categories. You can do that as well. Then also you have this Tags attribute, and this is again another really important spot where you can put search engine optimization keywords in here, and that's helpful. You can also put other things that maybe you want to categorize the post by. So maybe Thailand, or the location, or anything like that. Again, these tags and categories when you start building a really big blog with a lot of content, they can be really helpful to start to filter and narrow down your content. When you're done, you can come down here, and you can hit "Save" and it will appear in a draft mode, or you can hit "Save & Publish", and it will publish to your website. So I hit "Save & Publish", and here we go, we have New blog 1 shows up right here. New blog 1 shows up and this is a brand new blog. So yeah, we can see just kind of a bit here of what's going on. But ultimately, I don't want this sidebar. I'm not really liking this. So there's a few things you can do. First, if say you do want to sidebar on your blog, you want something over here that people can opt-in for an e-mail address or something. You can just scroll over and hit "Edit" on your sidebar. You can just delete the example content that's in here, and again, this functions just like all the other things that I showed you. I can just drag and delete these just like the visual editor, but we're just dealing with a sidebar now, so it only stacks vertically. You can put text in here, "Sign up for my mailing list," or anything that you would like in here. Now we have this sidebar, and we can edit that if we want to. The cool thing about the sidebar is that it will appear regardless of if you're in the post, or if I just go to the blog page. If you notice when I scroll the blog page, I see the excerpt, and the thumbnail, and then when I go to Read More, I see this is a brand new blog and the actual text from it. But the sidebar stays there regardless, because I've basically said that I want to sidebar on my blog. Well, what if I don't want a sidebar on my blog, how do I get that to go away? To do that, when you're back here in the blog settings, you're going to click on your little gear shift just like you would add a page settings. I'm going to scroll down and I have these options from my blog similar to page settings, but a few different things. We're going to go to page layout, and we can go to Split Sidebars if we wanted to, or we can go to Two Sidebars, make it worse or Full Width. We can also choose how many posts per page, we can add a description, change the slug if we wanted to, and we can add a thumbnail image as well. Again, I won't show you all of these. The post by e-mail address you may or may not want to use, but all these things are just very simple tools you can use to customize. But if I have Full Width hit and I hit "Save", and those it will refresh and now there is no sidebar on the blog. A few other things I want to showing you guys. If you come to advanced on the blog, you can come in here to edit your tags and categories. Again, probably nothing you're going to worry about too much at this early stage, but maybe when you're getting a little bigger, and then the syndication, and you're probably not going to worry about that too much at all either. So that is how you set up a blog in Squarespace, but as I promised you before, I needed to show you guys how to style your blog as well. If we come back here, and we go all the way Home, and we go to the Style Editor. Design, Style Editor. We notice that we actually have this whole section down here dedicated just towards styling a blog. First things we can do is we have this meta text, which you notice the date and all this down here is meta text. Again, I can change the font, color size, and stuff like that. I can change the color if I wanted to or make it really light. I can mess with that. You have article spacing, which again, you won't see this too much because I have only one article. But for example, on mine that article spacing would create more spacing between each of these posts on the page here. Blog List Display, you can choose between full or header and footer only, or maybe even just the header only without the metadata. Again, you can choose whether you want that picture in there or not. You can choose the Blog Byline. Whether you want that at the bottom, the top, or maybe I just assume, hey, this is my site, everyone's going to know it's me and I'm going to hide it. You can choose the blog dateline, and you can choose if you want that above, below, or just hide it. The Blog Pagination. So pagination this would be when you hit over that 20 posts and it has the next or previous. You can change your font right there in your color. So I'll show you right here. When I scroll down to the bottom of my blog, this is the pagination right here, and so I can change this font or the color if I wanted to. I can also disable a border on that if I want to. There is normally just a little border down there. Again, I can hide the thumbnails if I want to, I can hide these icons, and I can just hide the tag categories if I would like to. So I can start to get really simple with this and everything. But I can really get customized here with how I want my blog to look and the styles that are around it. So I hope that was helpful in giving you a bit of an idea of how to set up a blog in Squarespace. 39. About Squarespace's Blogging Platform: By this point in the course, you've learned how to set up your Squarespace site, how to add content to it and now how to stylize and design it. Now I'm going to dive into some of the other features that are really important for a lot of website users. In this section, I'm going to talk specifically about blogging. Squarespace has an extremely robust and simple use blogging platform. In fact, I use it on my own personal website and I absolutely love it. In this course I'm going to show you how to set up a blog, how to add new blog posts and everything that you can do around Squarespace's blogging platform. 40. Using the eCommerce Product Block: In this video, I'm going to start showing you and giving you a basic overview of the e-commerce section. To start off, to get to e-commerce, we are going to come and click "Commerce' from our main navigation here. Whenever you start a new commerce account, the first thing you're really going to want to do is click this "Getting Started" tab. You'll notice that I have a zero out of the four Getting Started options setup. When we go through, you're going to basically see these four options that you need to do to get your e-commerce store started. First being, you're going to need to obviously add some products. The second is that you're going to need to create some shipping option. The third is that you're going to have to connect a Stripe account. That is something just to be aware that Squarespace only integrates with stripe. But, if you say are having issues or you want to integrate with PayPal or some other payments solutions, there is this other great tool called Ecwid. I would highly recommend looking into this if that stripe is a deal breaker for you as I know it is for some people. But honestly, stripe is not a huge deal it's just like PayPal. There's no monthly fees or anything. It's really great to work with. Once you get these other options setup, you can flip the switch and your store can go live. Now, also notice they have a lot of helpful articles down here. I would definitely recommend checking these out as e-commerce is one of the more complex sections of squarespace. E-commerce in general is just complex. So it's not a fault of Squarespace, but just that it is a more complex thing to do on the web. The first thing we're going to want to do is simply add some products. To do that, we're going to click this number one and add some products. What you're going to notice is it's very similar to the blogging feature and how that worked. Remember how we had the same option over here. Well, here instead of adding a blog post we're going to add a product. Once we do that, it's going to give us this option to select a product type. You can choose a physical product, maybe something physical that you're actually going to mail the person. You can choose a digital product. If you say, selling an e-book or a digital course, you can use this and it will give you some options for file downloads once they pay. Or you can sell a service and maybe I can sell a consulting service or a product I service with this as well. We're going to go ahead and just start with the digital to make it simple. What we're going to do here is come and, you're going to notice that, again, it's similar to the blog functionality but a little bit different. We're going to have the product's name, The Focused Creator. We're going to upload some images for that product. Here once we have a picture, we're going to upload this picture of the product. We can set a price on this product if we want to, or we can leave it at zero and keep it free. This is a free e-book I wrote, so I will keep it as free. We can put a short little description, "Learn the art of follow through and achieve your goals". Here we have basically set up the basic image, description, and the title. Come down here, we can categorize them and tag them. Again, if you have a lot of products, this becomes really helpful. So that people can say, I want to search all your books. I want to search all your courses, your shirts, you're pants, however you want to do that. You can tag it. Again, I've done some e-commerce stores where people tagged it by color or by a certain type of style. Some things you can do around that as well. Next, we're going to come over to pricing and upload. Here I can upload a PDF file or any digital file that someone can download. Once we have that file, we just click and upload that. Here it's just going to upload that file. When someone either buys it or clicks "Buy", it's going to give them an option to download that file. So we'll just see that that will upload right there, and then we have our digital product right there up and on our site. You can see The Focused Creator final in everything about it right there. You can come over to additional info. If we want, we can put additional information here. This isn't soup totally necessary, but on the sales page you will see that. We can have a form and you can require elements from them. Maybe I want someone to make a form called The Focused Creator purchase form. Maybe I want someone just their email address, and get that from them whenever they sign up. Also, something actually I didn't show you guys on the previous form video, but you can also click required or not required when you work with forms to make them mandatory or not. Now, someone's required to give me their email address when they download the book. I can come over here and two options. I can change the products URL. I can use a custom add. So instead of saying "Add to Cart", maybe I want to say "Download the book". I can choose featured product or not which, again, when you're looking at the summary block, it's important for things like that. To note, you can also use the summary block for any e-commerce features as well. Refer back to that summary block video and we use it for blogging, but you can also do it for e-commerce as well. Then last, do you want to publish this to any social media channels or not? We don't want to, so we'll skip on that. When we're done, we hit "Save and Publish". We're just going to click on it right over here, it's "Save and Publish". We have just now created our very first product. Now, this isn't really too exciting quite yet because really we don't have this product anywhere on our site. We just created it. The next thing we have to do is get that product on our site, and there's a couple of ways we can do that. First, if we come back all the way out and we go to pages, we'll see that we can come down here and to the welcome page. Come down here to our page content. If I want to, I can come here, add a block, and scroll down. I can add a product block. I'll search for the product. So I'll search for The Focused Creator which I just created. We'll see that that pops up there. Now, I have all these options. Let me move this so that you guys can see. I can turn the image on or off, which without it there's really nothing there. I can have the title and show the price, show the description that I created, and show the 'Add to Cart" button, which for some reason that one is not working or showing properly right now, but we'll save regardless. We just added our first product to our page. Now the "Add to Cart" button is not working. Let's maybe try to refresh and see if that fixes it. Again, sometimes you get these little bugs in squarespace, so I'm just going to work through it with you guys right here. There it is. Not sure why it wasn't showing up before, but refresh the page and all is fixed. We have just added our product. If someone clicks on the product, I take some to the sales page, where they can go through. This is that additional information that we have put. If I go to download the book, someone has to give me their email address and then they can download the book. That's a basic little setup on how to add products to e-commerce, and then how to actually use the product block as well. 41. About Squarespace's eCommerce Platform: In this section of the course, I'll be walking you through how to set up an e-commerce store on your website. Now, some people may just skip over this if you're not interested in having an e-commerce store on your site. But if you are, Squarespace makes it really simple. In this video, I'm going to show you how to set up and use the e-commerce platform. 42. An overview of eCommerce: In the last video, we created our first product. In this video I want to show you a bit more on how to create more products and then we'll dive a little bit further into e-commerce. If you remember, we created that first product from the initial getting started tab on e-commerce. Once you do that, you're going to notice that if you come down here, there is this New Products that have showed up in your not linked section. You'll notice the little $ sign means that it is a product. Well, first off, I probably don't want this called New Products. So what I can do is I can click this little gear icon right here, and I can change this to just Products. I can get rid of the sidebar if I don't want a sidebar on here, make it full width on my product pages. I can change that slug so it just is Products not New Products. Again, very similar to the other ones, but you want to do this for the product page as well. Now we notice that the product page is actually full width. Actually, no, this is the product's page in general. Something you can do, say, we put this up in the main navigation, is that now if someone just clicks on "Products," they're going to get this cool, good-looking product design page. As you add multiple products that will automatically replicate across those. If we are just in the Pages tab and we click on this Products is going to again take us back to this similar blog type editor where we can add more products or click on "Settings" and adjust the settings for this product if we need to. That's just a little bit on how you guys can work with more products and create more products in the future. Now, we're going to go down to e-commerce, and dive a little bit further into this. When we go back to the Getting Started tab, we notice we've again only completed one out of four. We're going to see that we need to create a shipping option if we're going to sell physical goods. Again, for right now, if I'm just selling a digital product, I don't really need that. I can hit skip if I want to. But if you need to ship something, you want to hit this and Enter in all your shipping information. Then third, if you just click on this, you'll connect your Stripe account, and once you've got all three of these done or you've hit Skip is going to give you that option to flip the switch and go live. Now once you're live, you're going to notice that this commerce page becomes the hub and the home for all of your everything commerce on your site. If I go to orders, I can come in here and see my pending, completed or canceled orders. I can really go and look through all that. You can see any payment activity, what payments have actually come through, what refunds, failures or charge-backs I have. I can see inventory. So if I have a physical products, I can actually set inventory so I know how many of that I have and I can deduct from that and set that up along the way. Well, I have donations and we can have a Donations option where people can donate. Is another thing you can setup with your e-commerce store so you can track that as well. You have your Shipping options. So if you ever need to work on your shipping or change anything, you can do that here. You can also connect your account to ship station, which is another web application for shipping e-commerce products. If you want to connect with ship station, you can connect right here. Again, it's a really powerful thing if you're running an e-commerce store. Coupons, you can set any coupons or create anything there that you'd want. You can set taxes and have different taxes for different countries and everything. So you can set rules for different areas or regions. You can look at your accounting and if you want to, you can set up with Xero, which is a popular accounting software. You can actually connect your square space account right here through Xero. Look at what it has done and I'm going to click that. You can also set up your e-mail settings. If someone gets a customer support or they get an e-mail from you, by default, it's going to come from noreply@squarespace.com. But maybe I want it to come from jake@jake-jorgovan.com. So you can start to work with these as well. Then you can also get notified whenever the stock on your email starts to run low. You can come down here and set up and customize your emails as well. You can come in here and actually start to define the individual texts and the layout and the style for each of your individual emails. Again, some very cool stuff. It's a little more complex because we are getting into the code and some of this stuff, so it's not as simple. Since this is website without code, after all, you probably don't want to dive into this. We're going to come back out to commerce. Again, you have some store settings down here. Again, your Stripe account, what currency are working in, your measurements, your order numbers, express checkout, whether you want to change the darker, light color scheme. Mailchimp, you can connect with that right here. You can have a custom checkout form if you want and set up your term policy, your terms of service, your privacy policy, all this stuff. As you can see, e-commerce, there's a lot to it. But again, just click through all these menus, work through these and you'll get your store up and running in no time. That's all I'm really going to cover on e-commerce. I hope this gives you a basic overview. There's obviously a lot more depth, I can't go into it. Again, if the built in Squarespace platform isn't robust enough for you or you need some additional features, definitely take a look at Ecwid. It is a really great platform, really easy to integrate and just embed into Squarespace. It's going to give you that PayPal integration and some other features that may be important to you as a e-commerce store owner. 43. How to create cover pages: In this video, I'm going to be explaining to you what cover pages are, and how to use them. So to start off, we're going to come up to the Main Navigation and we're going to click "Plus". We're going to create a cover page and we're going to say Gallery Showing. Once we do that, it's going to take us into this cover page editor. This looks a little different than a lot of other things on Squarespace. But basically what a cover page is, is the simple one page websites. This screenwriter, the script is just the beginning, view work. This is basically just like a one page website that has been built and is customizable. So there's not a whole lot of features, there's not a whole layout editor, but it allows you to do some really cool things. You'll notice if we click "Change Layout", we actually have a lot that we can choose from. So we can pick all of these different kind of cover pages that have these different features and looks to them, and choose whichever one feels like a right fit for us. So let's choose this one right here, Debut. We'll select that one and we'll say, I like this, this is working, this overall positioning and the style of it is something I like. We'll hit "Save". We'll go back to the Gallery Showing page, and we're going to come down here and we're going to change the Branding and Text. So we can either have it be a text or we can make it a logo, if we want to upload a logo, or we can say Elisabeth Cairnes, or we'll just say E. Cairnes because it looks like that's a little long right now to make it simple. You can have this headline here, Upcoming Gallery Showing. We'll say Denver Colorado, and you notice that as I'm doing this, this text is changing right here on the page. You can choose whether you want the social icons to be there or not. Once we have that, we notice that we basically changed our basic Branding and Text. Come back to Gallery Showing and we can embed a video if we want to. So this is really cool because this is actually a full screen video we have here. If I come here, I notice that I can play and actually play a video if I want to, but I don't have a video set up in this right now, so, that won't work, but this is a really cool feature of this cover page. Maybe that's not what we want, so, we'll choose an Imagery, and we'll come up here and we'll upload an image. We'll go back to that hero shot we have and upload that, and that will replace out this image that they have right here. Then once that video image is uploaded, you notice that, that whole background swaps out now with this new picture that we have. We hit "Save", go back to Gallery Showing, and we can choose the Actions, create buttons, links and forms. You can have Buttons, or we can have a Navigation with a handful of different options and links that it can go to, or we can have Buttons and have a form that goes along with that, so we can work and build a form in here where maybe we capture someones information about the gallery or the RSVP. So we'll just save that and we'll just say RSVP on this, and we can change the link to cairnes.com. Now we've added this little RSVP link and it will link to our website so that someone can RSVP for the event. We'll save, go back to the Gallery Showing, and we can also come down here and we get a little miniature style editor here as well. So we can start to change this and make it a font that we like. I'll do Josef, and we can start to work and edit the styles. Again, the style editor is going to be totally dependent on the cover page that you want to work with. As you see, we just made this really cool, simple, nice looking cover page, and it's very basic, something very cool that we can just use to promote an upcoming event or a gallery. Again, there is a whole ton of these, and a lot of these have different features. Again, this one is very simple, it's just focused around this basic call to action. Let's see. This one down here has an option for an audio embed, so you can embed a track if you're a musician. This one right here is another one that has video built into the template. So there's a lot of really cool things you can do with these and I encourage you to just play around with all of them. It's a really cool new feature that's exclusive to Squarespace, but it's a way to make a really cool page just stand out and to really promote something or set something apart. 44. About Cover Pages: So I've showed you a lots in this course up until this point. But I have one more feature that is really cool that I know you're going to love. There's this feature in Squarespace called Cover Pages. Cover Pages allows you to build a simple one-page website that you can use to promote, say, an upcoming event, a product launch to showcase a video. There's a lot of different ways you can use it, but it's a really cool feature, it's just came out recently on Squarespace and it's one that I absolutely love and I know you're going to get excited when you see it. 45. About this section of the course: So up until this point, I have been showing you a lot of features and demonstrating a lot of different things in Squarespace. But honestly, the site as it is right now, it looks pretty terrible. I've really just been trying to show you features and explain things in Squarespace. Well, in the second half of this course, what I'm going to do is walk through and design a website from beginning to end. I'm going to walk through and explain the theory behind how I approach building these websites and then I'm going to actually record the entire screen capture video as I go through and do every single piece of creating the website and launching it live. So I know that watching this process happen in action, it's going to be valuable to you to get to see an entire site built all the way from scratch. 46. How to create a sitemap and plan out your site: To start off, before we even get into squarespace, I'm going to hop over and use this tool called MindMeister that I spoke about a bit earlier. I'm going to use this tool to create a sitemap and really plan out my squarespace site. You can just head over to MindMeister, you can sign up for free, and you get to do three maps for totally free. Once you sign in, I'm going to use a mind map here, and we're going to have a basic blank sitemap. I'm going to change the name of this sitemap to ElisabethCaimes.com, and what I'm going to start to do is basically my goal is to just figure out what are the pages that are going to be on this site, and what do I want someone to do when they get to each page? These are two really important questions to figure out because a lot of times, people will have pages on their website and there is no purpose to them. There's no call to action or anything that they want the person to do. Our plan is to basically try to plan that out and get that figured out on the front. To add this, I'm going to click first here on just the little central hub. Come over here and hit a plus up here. I'm going to save here, we're going to have a Home Page. I'm going to come back here and I add another one. Add an About Page. I'm going to have another one for a Contact Page, and then I'm going to have a Photos Page. I don't like that being all the way over there, so I'm going to pull it and drop it right in here. As you can see, this is going to be a pretty basic site. That's all I really need on this right now. But the question comes in two then, what is the purpose of this page? What do I want someone to do on this page? You want to answer this question for each of the different pages that you go through. For the purpose of the Home Page to grab attention and have someone click to a further page. Here we have the purpose of the Home Page, and again, I guess what do we want to do? Click to look at the photos. Again, we'll do the same thing on the other one. Purpose of the About Page. The real purpose of this page is pretty simple, but it's to give the viewer information about Elisabeth, and what do we want to do? Someone to do it in this page? Well, really we're going to give them two options on here. When someone goes to this, maybe they went the photos first or maybe they didn't. We want someone to have the option of click to look at photos. Or we want to have someone click to contact. The Photos Page, the purpose. Display the photos in a clean and professional way, and what do I want someone to do? Well, on this page, we want them to look at the photos because it says a core part of the site, and we want them to also click to about or contact, and then last, the Contact Page purpose. Give gallery owners or visitors a chance to contact, and what do we want them to do? We want them to simply fill out the contact form. Pretty simple, but a lot of people will skip over this exercise and you don't have to do it in MindMeister, you can do this on paper as well if you would like. But this exercise really helps to plan out your site ahead of time. For a small site like this, it may not seem as important. But when you get to a really large site, these mind maps can be massive big sitemaps and everything, and the bigger your site gets the easier it is to lose sight of the purpose, and suddenly you just have tons of just little widgets and everything or calls to action, all of your site for all different things. Getting clear about what the purpose of each page is and what you want someone to do, this is really going to help your site come together and have a much better flow. 47. Building the site's framework: Once we have a sitemap created, we're going to go ahead and come over to Squarespace, and we're going to basically lay out that sitemap in Squarespace. Again, I'm just going to delete everything that I have been playing around with in here so that we don't have a bunch of excess stuff. I'm just going to get rid of all of these things, because we don't really need these. Now, we basically have this Welcome page. If we go back over the sitemap, we're going to have the Home or Welcome, the About, Photos and Contact. We're going to create the Photos page, we're going to create the About page, and we're going to create a Contact page. Here we are, we have our four basic pages, and then if you remember the gallery thing that I showed you guys earlier, how we're going to set up a gallery in the not linked section. We're going to go ahead and do that right now so that we can just upload our photos and then we can use them wherever we want to throughout the site. I've got this Gallery created, and I'm going to go ahead and upload a handful of photos. Come here, go ahead and upload all these which I have now compressed for web. Again, whenever you have a photo, you notice these are about 271 kilobytes for a photo. That's probably a good size, about anywhere between a 100 and probably 500 kilobytes is a good size. But if you're seeing your file sizes in the megabytes, then you want to start looking for a way to compress those. You can do that through Photoshop, you can do that through Preview on Mac, or there's a handful of just search how to compress images on Google, and you will find a handful of tools there. I'm going to grab these images that we've picked to use on the site. I'm just going to drag and drop these right here, and let these all go ahead and upload. Again, by putting all of these in a not linked gallery, I can then basically reference these anywhere on the site and that way if I want to use them at a different spot on the site or anything, I can do that as well, so very handy thing you can do there. We can also rearrange these, I like this picture, but it's probably not my favorite. We'll kind of scroll down and we'll start to rearrange these in a different order. Picking an order that fits into the liking and how what order we want these to be presented in. Personally, this truck one is my favorite, so I'll leave that up. We'll just rearrange these a bit and put them in just whatever order we so desire. Now it looks like all of them have uploaded and processed. We're going to come back to pages, and we have now just created basically all the pages in the basic content for a site. 48. How to create a photography page: The next thing I'm going to do, now that we have uploaded our gallery, is I'm going to come out that Gallery to our Photos page. First thing you'll notice is we still have a sidebar on our Gallery and we don't want that. So I'm going to come to the Settings on the Photos page and put that page to full width. That way we don't have to worry about any sidebar. I'll hit Save. One other handy thing to notice is that notice that there is no header on this. Let's put some text here. But now there is no header on this page. If I upload an image, we will see a header show up over here. Say I upload this picture here. We're going to notice that then the header will appear. I'm just going to upload that, to show you guys, I;m going to hit Save. Now suddenly because we put a photo here, we have this huge banner up here. Again, on this page we actually don't want that banner I'm just going to go ahead and remove that because I just would rather focus on the photo gallery as a whole. So we're going to put Photos up here and I will say Photography. It sounds a little bit more professional. We are going to actually center that, put that right in the middle and I am going to edit that page content again. Sorry, I keep going back and forth with saving. Now, it's always good to save a lot because again, if you lose Internet connection or anything goes wrong, that is not a good thing. So save often. I am going to add a little block below where it says Photography and Gallery. This is ridiculous, but Squarespace updated the user interface between, literally, yesterday when I recorded the rest of these videos showing you guys how to do this with the Gallery block. Now they've actually set these up and in their own way. A little crazy how that worked out. We're going to try a few of these out. We're going to try and just see what we like. We're going start with the wall. This was the auto columns. I'm going to come over here, and I don't want that metadata on there, rather just see these as images. Get rid of that thumbnail. We need the thumbnail but these are our pictures. We're not going to put a limit on that just in case we ever upload more. I'm going to come over here to Layout and look at this, it still is similar, but now they've just actually changed that navigation of how you get there. We're going to change the gutter width, make it a little smaller. It takes a bit to load. We're going make our columns a little wider so we have two columns wide. We're going to save and see how we like this. Don't love how these aren't perfectly lining up. But again, another handy little thing, just so you know, we have this gallery block right here. Ultimately, this functions and how these auto columns function are going to be largely dependent on the order of the images. You notice how I have four horizontal starting it off. Well, if I pull up one of these vertical images to say the top, then it's going to completely change the look of that gallery. So again, I come over here to Gallery, let's pull this guy up here. Now we have a horizontal and a vertical. That should totally change how this entire auto columns looks and lines up. Again, if we come here now, we see that it's bit more staggered, has really changed how the entire thing looks. We don't have those awkward mismatches anymore. I think this is good for now. I think that this does a good job of showing it. We'll go in here and it looks like we have Lightbox on, which is good, I wanted to add Lightbox. It appears we have set up a simple gallery but we want to go back to our page. Again, what do we want someone to do on our Photos page? Well, we want to display the photos in a clean and professional way. We are done with that. Someone can look at the photos and even Lightbox them. Then we want to give them the option to either learn more about Elizabeth or contact her. So I'm going to scroll down to the bottom here and add that page content. We're going to have some simplest text down here. It says, "learn more about Elisabeth." We'll just leave that here. Actually, you know what? We're going to make this a button. I think a button would be good. Come down here and create a button. Learn more about Elisabeth. I will run a Clickthrough URL. Go to our Content and we're going to link this to the About page. We will leave this aligned center. Right now it's green, it's terrible, but we will get to the style editor a bit later. Right now, I'm really just still laying out the framework on the site. So there we go. We have just created a basic photography page for our website. 49. How to create an about page: In this video, we'll be creating a simple About page on Elisabeth site here. I'm going to come down here to About and again, we have a blank page here and we also have the sidebar, which this theme has defaulted to. I'm going to click the "Settings", come over here to sidebar and choose Full Width and hit "Save". Now, our little sidebar just disappeared and we have a full-width page. We're going to go to page content. Here, we're going to go, type in Elisabeth Cairnes- Artist Statement and I'll make that a heading 1, right here and then we're going to come over here. I have this Google Doc where I have her artist statement that has been shared with me on a Google Drive. I'm going to come over here and I'm going to paste that. I'm going to use the Paste as Plain Text tool and paste it in here and you're going to notice that this happens sometime, especially in smaller browsers or part of this is cut off. You notice that whenever I couldn't get to the Okay button down here but what I just did is I hit "Command Minus" and it zoomed out and "Command Plus" to zoom back in. This is just to really handy thing if you ever get this issue where part of the window, which is overflows and that's just because honestly, I'm working on a small browser and I'm doing this because I know that some of you will experience this same issues as well. If you're on a Windows, that would be control minus or control plus. Now, that we have that and the window reset to the middle, I'm going to hit "Okay" and we have just pasted this as plain text in here. Looks like we have a typo so I'll fix that. Also, you'll notice that sometimes you want to just rework this spacing and there a lot of times when it pastes from a document, even when you paste without formatting, you're going to get too large of spacing within there. Again, we have our basic artist statement on here but I don't remember what were the things that I wanted to do on this page. I want it to give the visitors and information about Elisabeth and I want them to be able to look at the photos or to contact. What I'm going to do is actually put a contact call to action in the footer so that way it's not to crowded down here with two call to actions. What I'm going to do then is, I'm not going to do the footer right now, I'm going to create the call to action for the gallery and so I want to say, View Elisabeth's Photography and I'm going to add the URL. I'm going to go to "Content" and I'm a click on the "Photos" page. Make sure not to click on the "Gallery" otherwise, you don't want to link to that gallery but instead click on the "Photos" page and then we're going to align this guy at left and I'll probably, end up aligning the other guy left, as well. Generally, on a website you want to either align everything left or align everything center or right and be consistent with that. I'll just be honest, I haven't totally decided what I want to do on the site yet so sometimes, I just play around with it and then get a feel but I try to always finish and have that be a consistent look and feel and so we just created a basic About page for Elisabeth. 50. How to create a contact page: In this video, I'm going to be showing you how to create a simple contact page. We're here on Elisabeth site, we're going to come down to Contact. Again we have to get rid of this sidebar again, it's annoying, but it's the default, what it will come to. Click on "Full Width" right there. On this page on the Contact, we're actually going to want to put a little photo in the banner, just something cool to give people a little taste of just her photography and her work. We're going to go through here, pick a photo that I think is a good representation. We need a horizontal, and we're going to go with this one. I think their line will be really cool and draw the viewer's eye down to the Contact form. We're going to choose that right there. The image uploads. Give that a second to process and resize. Put this focal point right around here, and we're going to hit "Save", and now we have this banner image right here on the Contact page. I come down to the Page Content. I'm going to type "Contact Elisabeth". Make that a Heading 1. I come down here and add a Form. Drop that Subject line, I don't really want that. Honestly, I'm not a big fan of the First and Last Name boxes, actually a lot times I just delete this. What I'll come do is just add a box. I'll just create a random text box and I'll type "Name" in it and make it Required, and I'll put it up here. Basically, we just got rid of that First and Last Name thing and we just have a name span. Someone could just give you their first name and their last name but it's just something I prefer rather than trying to ask for the first and last name. Then we'll do Elisabeth, form name will be "ELisabethsCairnes.com Contact Form". For storage, we're going to send this to her e-mail address, Connect. Under Advanced, we will say that to "Say hello", something a little more threatening then submit. Which I was never a big fan of. "Thank you. I will be in touch shortly". We're going to add this little post-submit message so this is what someone sees after they fill out the form. We're going to hit "Save". Again, this is looking pretty good, but it's a little wide, so I create this text box. Say "elisabeth cairnes", she also really likes lowercase stuff, and that's simply handy to remember now is that she wanted everything on her site lowercase. It was a request from the client. ".com." We're going to make this e-mail address a link too. Edit link. So something to know, and this is just a little trick with the web, but when we're making a link and if we're doing for an e-mail address, we want to type the words "mailto" and hit "Shift" and do a colon, "elisabeth.cairnes@gmail.com". We'll choose to open that in a new window. Now we've just added her contact information, and we'll put that right over here. Maybe in a bits when I get her Instagram account and everything, I can maybe put an Instagram block right here or a photo of her. So we'll add some of those things a little bit later. We're going to save this for now, and we have just created a basic contact page for Elisabeth. 51. How to add a logo to the site: In this video, I'm going to actually go ahead and upload her logo to the site. Come down here to Design, go to Logo and Title. We're going to change this to photographer or fine art photographer, is the name of the site or we'll actually will make that the tagline. Really these are irrelevant except for SEO reasons, because we won't be using these with the theme. We're going to add a logo and come down here. Then we have this logo which is 200 pixels wide, and that should be plenty fine, or we can go one size up. I will go with this for the sake of keeping it small. We've uploaded a logo now, which this will swap out with the website without code and we save. We are just going to upload the favicon, which if you recall, by default you have the square space box up here. But we're going to actually change this to this 50 pixel favicon that I have made right here. We're going to hit Save. That should then reflect on our site. Already this is starting to look a little bit more like a real website. There we go. We have just added a logo and everything to Elizabeth site and it's starting to come together. 52. How to edit the footer: Hi. In this video, I'm going to run through and edit the footer very quickly because I'm not a big fan of what I have going on down here. It still says "Change this text" from before. I'm going to delete the second box because we're just going to have it all center. It's going to say copyright 2015 elisabeth cairnes, and we're going to put elisabeth.cairnes@gmail.com, put an email- address in there as well. Actually, no, I'm changing my mind on this. We're going to have that, just the copyright at the bottom. Keep that pretty plain and simple, and right above that we're going to have contact Elisabeth. We're just going make that a link that goes to the contact page. I might change this, not sure if I'm totally sold on, but it's just something whenever you are designing, a lot of times, you just think on for some reason, you notice that here says no link URL. Now for some reason that didn't work whenever I tried to choose the contact page. Try it again. Now we click on it, you see it says slash contact and it worked properly. There we go. Lets save and we just edited the footer here in the website, and real quickly, going back again, she doesn't want capitals on her texts, she wanted all lowercase, so we'll keep that pretty simple. That is how we're going to edit the footer. 53. Creating the home page: In this video, we're going to work here on the Welcome page of the site. The first thing I need to do is delete all of this random mumble jumble that I have down here. That was from the previous lessons that I showed you guys. Deleting all this stuff, dragging it in the trash, just getting rid of it. Still got a line here, getting rid of that as well, we're starting fresh. All right, what we're going to have on the homepage, again, remember to go back to our MindMeister. Purpose is to grab attention and have someone click further, and after this, we want someone to go looking at the photos. Now, what I'm actually going to do is pull the first paragraph of her About page and use that here on the Home page, and it's going to say," Elisabeth Cairnes- fine art photographer." I'll make that large, and then below that, we're going to paste that in there, but I forgot to do with the, paste as plain text, so I'm going to remove the formatting on that, and now you see the indents and all that weirdness went away. We're going to have a little call to action down here, a button for, "View Elisabeth's photography," and that link is going to go to the Contact and to the Photos page. We're going to align this guy left as well. We're going to save that, so we've basically done a basic homepage, but one thing, I'm actually going to swap out this photo right here, I'm going to keep the same photo, but it is not compressed, this version and that would slow down load times. When you don't have compressed photos, your load times get really slow, so I'm going to remove that and go down to our compressed photos and we're going to upload a compressed version of the photo. Now it's so much quicker, it uploads. There we go, we now have a new compressed version. We are going to take the focus point just down a little bit, so that way, we're focusing here on the actual still-life portion of this art. We're going to hit "Save" and there we go, we have just swapped out the photo and created the basic homepage on Elisabeth's site. Now the basic Homepage, the Photos, the About, and the Contact. This may or may not be final, honestly with Squarespace, you go back and forth because obviously, this doesn't look how I want it to look right now. So the next thing we're going to do is go into the style editor, start making it look good. When we do that, we may end up coming back here and editing the content and tweaking the layout to make it fit with the new styles. 54. Stylizing the site: We now have all the content laid out on the pages, and in this video I'm going to go in and start working with the style editor. It is not uncommon that after going into the style editor that I end up changing themes because it's just not looking or does not that feel that I wanted. I always do the framework of the pages before I ever even dive into the style editor, because that way if I do install a new theme it's really easy and all that page content just comes over with it and I can quickly see if this is working or not working with this new theme. We're going to come over here to Style Editor. I'm actually going to hit Control minus so I can get a little bit zoomed out view and see if someone had a bigger desktop what this would look like. I'm just going to start going through and messing with this site. You got to keep in mind that this is changing on every single page, but we're going to keep it a narrow websites. It's a little work we're going for Canvas Setting, actually I'm going to try Site Width. I don't like how that's crop that photo though, so I'm going to see if there's anything I can do about that. Canvas Offset, I don't really want a Canvas Offset. Canvas Padding. Again, I don't know if I want a Canvas Padding on this one. Border? No, we don't want that either. What we're really going for with the style in this site is a very clean, minimalist style. Generally helps to have some references and everything that you're looking at beforehand. We're going to make our lines and decoration a very light gray. We really don't like these delimiters up here, so we're going to just get rid of those. Delimiter is that little slash between the navigation. Pretty happy with the header background, the background image we're actually not going to put anything there. If we did put a background image on the header it would default to that, but instead we've designed it so that the page thumbnail is the image. The site title color, again we're not going to mess with that really because that's being replaced buy this EC. Page title. We're actually not showing that. Banner area height. This is something I probably do want to play with. Again, so I can choose how big I want this to get. I actually want it to bee small and narrow because all the photos here are landscape. We're going to try to keep it a little short like that. Excellently clicked over here. Overlay color. Again, we want the set is transparent, we don't want anything there. Going to keep that banner content empty. We're going to make the page thumbnail as the banner. I could be wrong on this, but I think that if I refresh this page, that picture should resize. Sometimes it's square space you really do just have to refresh. There we go. You have to refresh or save and go back to really see the changes actually taking effect. This is good. This is what I was going for. Much smaller, so we're getting closer. Come back into the Style Editor. See we've done the header we are now in the navigation link color, and the hover color we're going to make it this pink color right here, which I'm going to come to over to Photoshop and pull up this. This is actually very handy if you have some basic Photoshop techniques. I highly recommend using Photoshop regularly to pull these href colors from your images. Showing you guys a little trick here, for those of you that aren't handy with Photoshop don't worry. You can eyeball this, but I'm going to use the eyedropper tool. Grab this color that I want, I click there, and I get the little hexadecimal code right here. Copy that. Come back over to Squarespace and we're going to make this the hover color. Actually I'm going to make it the active color as well. That's quite light actually for text. Pull that a little darker. Don't get away with a subtle things with text, with color change because a lot of honestly text is so thin, that is very hard two see the color because it's such few pixels. I going to zoom back in a little bit. I do like that. I think that's looking pretty good. We have our navigation spacing, which again, we do want a little space but not to terribly much. Can make this logo smaller or make it huge if we want to. But we're going to keep it pretty small and simple. Keep the navigation above the banner. We are going to move its center. This may be a deal breaker for me with this theme. But I want this icon to maybe sit above there. But we're going to keep going for now and just fill it out. I'll work this navigation spacing a bit more. I think we're going to make this a little bit bigger. That's a little closer. Canvas background we're happy with background image. We do want to change all of our headings. There's two fonts that I'm looking at. They don't actually have it on here so we're going to go with Josefin Sans, a very nice clean font. We are going to change the thickness to be light and thin. The text a little bit bigger. We're just going to make it all lowercase because we just want all of our titles lowercase. Or I space it out just a little bit. Heading 2. Now I don't know if I'm using a heading 2 on the site. I'm actually not right now. But just for sake of consistency I want to at least put it in the same font family just in case it ever does shopping. Whatever right now I am not using a heading 2 or heading 3 on the site. That we're going to make those just. We're going to make all of these the same gray color that we have here. Again doing the grabbing this hexadecimal number. Hop and back over here, turn in all of this text gray. I should probably make that navigation match shouldn't I. So also sometimes you don't get a hexadecimal number. On it does RGBA and A stands for alpha, which is a level of transparency. So write now if I go and I change this value to a 0.9 becomes thicker. Change to a point one, and its almost all the way to see through. Or you can use a slider here to adjust transparency as well. We shall leave the hexadecimal there. We've got that color figured out there. Now these colors match our body link color, which we can seen down here in our footer. We're going to use the same link color that we were using in our navigation. Then we come down here, paste that guy, and somehow I miss the C on him, so I'll have to go back and fix that. Actually, I'll make hymn go a little darker. Blockquote, again we're not using here. Page Spacing, this is a big one, it's how much space is between the banner, and we're just going to have about 21 pixels, That looks pretty good to me. Footer Text, again, we need to adjust this to be the same font and we can choose the Font Size and the width, and Line Height, Letter Spacing, all that is good. Keep that aligned Center and choose if we want this little border and the footer and I actually like that, I'm going to leave that border there. Social Icon Size, we don't have any social media accounts connected right now, but if we did, we can have the color show up properly and we're just going to have a normal social media icons. We're going to put them at the Bottom Only, that's just if we do decide to use those. Blog, we're not going to have any blogging or anything on here right now, so I'm just totally going to skip this, but our buttons, this is pretty bad right now. This bright green button is not at all what I'm wanting, so we're going to again come up here, grab this gray color, take this button color right there. We are going to make it an outline and we're going to make the square. We have this very simple, good looking button now, and we want to change that font to Josefin Sans so it again matches with the other stuff and we're also going to transform all to lowercase, and yeah, so there we go. We have now just done our basic styling on our site here. Let's see how this is looking when we come across all these different pages. Again, I come up here and honestly, I'm going to fix this footer real quick. It's bugging me right now, so we have that Save right there. There's contact Elizabeth at the bottom, it's very subtle, but it's there. Maybe I will end up changing that. Not loving this left justification, we're going to put all this stuff center and this again, what I was telling you about with just trying to figure out what you want on the site, sometimes you just have to play around with it a little bit. We're going to move all this stuff to the center, come back out hear. I don't think I ever actually edited my body text, somehow I skipped over that. I'm going to come back down here to the style editor, edit this minor content, the Body Texts, which I'm going to try Josefin Sans, but it might just be a little too much, maybe it's big enough. Yeah. Actually, I think that it does work, I'm liking that. We're going to make that same gray color as the header though. Can we actually text transform? No, we can't, so we're going to leave that how it is. Again, this is starting to look like a decent site here. I didn't do our Navigation Styles either. Again, sometimes a little bit of back and forth. Somehow I missed adjusting the Navigation Font. Come to this Navigation, again, we're going to put that as Josefin Sans and make it all lowercase, font a bit bigger, make it thinner though. Probably it's still a little too big and are starting to like how that looks there. Again, we're getting a little closer. It's a lot of back and fourth. I'm just popping in here and seeing what needs to be changed. Come to the photography page. In here we have this all of the photography here in these auto columns. I'm going to see if this learn more about Elizabeth works and that takes us over here to the about page. We can see her artist statement, this takes us right back to the photography. Contact button at the bottom takes us over to the contact page and again, you see this one resized as well. Honestly, actually, I would like a photo like this on the about page as well. We didn't have on here, so I'm going to come back, come to my pages, go to about and I'm going to upload, render this one right here, I really like this photo, and we're going to change the focal point to this chair so that it doesn't get cut off at all. Then refresh to make sure that that is positioned properly, and there we go. We have just added now a basic about page to this, her photography, her contact, the welcome, and yeah, the photos page. We have just in a matter of probably less than an hour put together what is a pretty good looking website. I hope you guys are seeing how quickly this process went. Helps you realize the potential of Squarespace and how fast you can really work and put something together in this platform. 55. How to launch your website live: You just watch me design an entire website, and built it all the way from scratch. Well, in this video, I'm going to show you how to actually launch that website and put it live at your domain. 56. Launching your site with Godaddy: On this last video here, I'm going to show you how to launch a website live. I'll specifically show you how to do that when you have a GoDaddy account. But if you don't have a GoDaddy account, I'll show you the basics of how to do that as well. There's two articles that are really useful. On the help.squarespace.com/guides, there is a domain mapping with GoDaddy article and Squarespace domain mapping. If you search Squarespace domain mapping, you're going to get this general instructions. That'll show you how you do this if your website URL is purchased outside of GoDaddy. But I'm going to show you GoDaddy for now because it's simple and it's really easy to work through. But honestly, I'm really just going to be walking through this page and telling you guys how to do this here. But they do change this every few months. Squarespace is always looking for ways to improve, ways to make things faster. Even if I record this video, in a few months, it might be totally different. I always recommend checking out these pages before you launch a new website live. The first thing we're going to do is we need to link our domain. We're going to come down here, go to "Settings", and go to "Domains". We're going to link an existing domain. We're going to link elisabethcairnes.com. We're going to see we have this Verify Ownership. What we need to do here in these red things, but we're not going to worry about that now or should go back to our tutorial and see what the next step is. We've already done all that. I have logged into my GoDaddy account up here, and I'm going to go ahead and launch the domain, which is the next step. I'm going to come down here to my domains, see elisabethcairnes.com, hit "Launch". Once I'm in here, I'm going to go to "DNS Zone File" right here. I'm going to come back to check my instructions and get the values that I need. Well, again, where it's showing me to click the DNS Zone File, and I'm going to go down here and add a record. Poping back over here, I'm going to add a record. I'm going to add a CName record, which is, again, and tell me to select "CName" for the record type, and make sure it's a www. is the host box, and points to this extension.squarespace. So www, and we're going to make the time to live half-hour. We'll hit "Finish". We're going to notice that it actually didn't do anything until we hit Save. But I'm going to come down here and see what it says. I need to add a second CName. I'm going to come back over here, click "Add a Record", add another CName or a host. I need to paste that unique code, so I come back over here to my Squarespace site, copy this code that is in this Verify Ownership box, and that's our host. I come back over here, and I'm going to copy that it's going to point to verify.squarespace.com, time to live half hour, and we'll hit "Finish", and we've just saved. I need to click "Save Changes". One of the records had some issues. This is an issue that you will probably come up against. That's that I already had a www.cname record. If I come down here to CNames, I already have this one. I tried to create one, but there was already one there. What I need to do is actually edit this record, so I'm under CName Alias, come down here to www., and come back and grab that extension.squarespace.com from our tutorial, and make that a half hour, and hit "Finish". Now, if I save these, the zone file has been updated. Look at that. But we're not done. We have done the CNames, we've saved those, now we need to add a records. What we're going to do is go to "Add Record", "A record", and then we're going to have it the @ symbol, and it's going to point to this URL right here. First thing I'm actually going to do is delete the old A record because we no longer need that. I'm going to save that, add an A record right here, and then @, paste there, half hour. Then I'm actually going to add a handful. What they do is they basically give you these four A records. You're going to put it in there and it's fails-proofs their system. Paste that new one in there, add another, come back here, grab this guy, paste him in there, add another, come back in here, and "Finish". We have just added four A records that should match that. We're going to hit "Save". Then I need to complete the domain verification. Again, GoDaddy, this generally happens really fast. Other domain providers, it can take a couple of days to do that. I'm going to come back here and hit "Verify Ownership", verification is successful, check again. Again, it might take 72 hours for this part to go through. But we're going to test this out and see if it works. Go to elisabethcairnes.com. Look at that, we have just launched our new website live. Another reason I'll have GoDaddy is it's so incredibly fast. I knows the favicon, everything's working right up here, and our whole website is working just as we wanted it to be. Just like that, in less than an hour, we have put up a pretty good looking websites. That's all we really need to do on the domain mapping and everything right there. Again, if you're not using GoDaddy, check out this Mapping a Domain General Instructions guide. That will walk you through how to do this with other domain providers. 57. Next steps: Thank you guys for watching this course and I hope you got a lot of value out of it. Be sure to submit your website in the project section below, take some screenshots and upload the URL so everyone else can see what you're working on. Also be sure if you have any questions, submit them through the course here and I'll do my best to answer, I may not be able to get to everyone, but I'll do my best to answer any questions you may have. Also if you're interested in learning more about me or following my blog, you can visit my website @jake-jorgeven.com. I blog regularly there and I have a whole YouTube channel focused to square space tutorials as well. But most of all, I hope that out of this, you have gotten to build a website that's going to help you push your brand, your business, your mission or whatever it is you're trying to do, that this website is going to help you push forward in reach your goals. Thank you guys for listening, and I hope you fund a lot of value in this course and if you'd be kind enough, please leave a five-star reviews so other people can find this course and see how valuable it is as well.