Squarespace 2025: Create A Professional Website In No Time | Kevin O'Brien | Skillshare

Playback Speed


1.0x


  • 0.5x
  • 0.75x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Squarespace 2025: Create A Professional Website In No Time

teacher avatar Kevin O'Brien, Over 8000+ students on Skillshare

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.

      Course Introduction

      0:44

    • 2.

      Course Structure

      3:38

    • 3.

      Signing into Squarespace

      2:33

    • 4.

      Choosing a Template

      5:18

    • 5.

      Dashboard Overview

      4:13

    • 6.

      Adding, Deleting & Editing Pages.mp4

      9:35

    • 7.

      Site Styles & Global Settings

      7:19

    • 8.

      Styling Buttons

      4:02

    • 9.

      Browser Icon & Logo from Canva

      5:39

    • 10.

      404 Page & Misc Settings

      4:45

    • 11.

      Editing the Homepage

      14:09

    • 12.

      More Homepage Editing!

      9:19

    • 13.

      Finishing our Pages

      8:11

    • 14.

      Header & Footer

      8:13

    • 15.

      15 Domains, Subscriptions and Trials

      10:30

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

415

Students

1

Projects

About This Class

Welcome to my Squarespace 2025 course. My name is Kevin O'Brien and I'll be your Squarespace Expert!

WELCOME!

Are you interested in building your own website but learning how to code is too much? Then you've come to the right place. In this course I'll take you through the steps to create your own single page website using Squarespace. 

In this course we'll use a Squarespace free trial. You'll be surprised how incredibly versatile this site builder is. I'll guide you through all the steps required to get your website up in no time, most importantly in a fun and helpful way. 

BECOME A SQUARESPACE SUPERHERO!

I'll take you through the most important steps of creating your own Squarespace website. Together, we'll cover the following: 

  1. Signing up to Squarespace
  2. Choosing a template

  3. Configuring Pages
  4. Setting Global Design settings

  5. Styling Buttons 

  6. Favicons & Logos
  7. 404 Pages

  8. Editing blocks and sections 

       9. Editing the header & footer  

       10. Picking a plan and choosing a domain 

Plus much much more...

I've divided this course up into bite-sized video lectures to help you get on track easier and quicker. Before you'll know it you'll have your own Squarespace website created in no time! So put the kettle on, make yourself a cup of coffee and let's get started :)

Meet Your Teacher

Teacher Profile Image

Kevin O'Brien

Over 8000+ students on Skillshare

Teacher

Hi there, my name is Kevin and I'm from the small isle of Ireland. I have a background in Technical Support for Google products and I've a wide range of knowledge and experience with Gmail, Chrome and Drive.

I thrive on teaching and coaching others to reach their full potential. I hope you join me on one of my courses. I look forward to helping you save time and to get the most out of your Google products.

See full profile

Level: Beginner

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Course Introduction: Hey there and welcome to my course on Squarespace. In this course, you're going to learn everything you need to know to get started with this amazing website builder. I'll take you to the a to Z on getting set up, signing in, picking a template, editing our template, altering the design. I'll take you through the settings in the back-end and show you the easiest way to get your website online in no time. My name is Kevin. I'm a web designer and I've been making courses on productivity hacks with Google products such as Gmail, Calendar and drive. And now I've decided to start creating some courses based on web design and the tools are used in the industry. If this feels like the course for you than I look forward to seeing you inside. 2. Course Structure: Hey there and welcome to the first video of this course. In this video, we're going to just have a quick rundown of what we're going to cover in the future videos. So let's just jump right in. Just an outline here. Together, we're going to start off the course by signing up to Squarespace. If you might have a Squarespace account already. If not, we'll go through the whole process from the very beginning. It's very straightforward Anyway. Once were assigned in, we're going to choose a template to begin building our site with. The Squarespace is based on all these templates that are prebuilt websites. Really. What we're gonna do is take one of those pre-designed websites, change some images, some fonts, some pages, and basically make it sued what we want our site to look like. It's a very quick way to get started and a very popular way, and that's what makes Squarespace, I guess so unique. We're going to then design some pages and create some pages and just have an overview on how to do all of that. Do you know, create some global settings. Maybe we want all the buttons on a site to look a specific way, or we want certain elements that have the same colors throughout the site for consistency, we can do all of that in the settings and design overview. We'll then look at the Squarespace editor itself. So how to move and add content to specific pages. So we'll go to maybe the homepage to start off with. And what we'll do is remove items, add items, reshape, and re-layout things, and show you how to do it yourself as well. Then we're going to add a fab icon, which is the little icon that appears on the tab of your browser. You'd see the name of the website with the little icon next to it. That we're going to basically altered that and remove the default Squarespace once. So if you have a logo that you're already working with, we can add it there. And I'll actually give us a quick rundown on how to make very quick and easy logos anyway, using Canva, which is free, absolutely free by the way. Yeah, we'll jump in and do that. Then at the very end, when we have our site laid out and ready to go, we're going to look at a Squarespace plan that would suit you. So squarespace is a subscription service. They include everything so you don't have to do sort of like WordPress setups and installed plug-ins and all that. Jazz. You just come along to Squarespace, tell them what your website wants to look like. We can add a domain at the end. There's options and price options as well to do that. And Squarespace then just takes a fee off you every month or on a yearly basis, they'll give you a discount also, does a few little add-ons as well as different options depending on what kind of site you're looking for. So that's really just a very high level of what we're gonna do and how we're going to work through the next few videos to get you up and going. So what you need is just yourself, a computer, obviously with some internet connection, otherwise you wouldn't be watching me right now. And maybe a tea, coffee or whatever you enjoy that second, you can kind of ignore it. I just put that in for fun. So whatever you like to have to relax and just take it easy for the next hour or so while we go through this together, what some people find handy is they might watch to course through and then re-watch it. Why building the site together. That's something that you might find useful also. Okay, with all of that in mind, let's go and jump right in. We're going to use Squarespace to make you a website in no time. So I'll see you in the next video when we get kick-started. 3. Signing into Squarespace: Hey there and welcome back. So in this video, we're going to sign in to Squarespace or sign up for Squarespace if you haven't done so already. So let's just jump right in. I'm at a Google blank page here. And what I'm gonna do is I'm just going to type in Squarespace, SQL or ESP ACE. If you search in Google, you'll find plenty of results here. You can also go directly to squarespace.com or pure SQL or eat SPAC.com. Okay, and that will bring us to the Squarespace homepage. Now, you might not see this when you are following this course. Sometimes they change this layout quite often. So don't hesitate if you see something different to what I'm seeing right now. Basically it's the Squarespace homepage. They tell us some things about what they do best. Anyway, all we need to do from here is click on the Get Started button on the top right. So when we click on Get Started, it's going to bring us to a questionnaire. We don't really need to be too specific here. What Squarespace is trying to do is it's trying to determine what kind of template it wants to show us. So you can kind of put anything in here if you'd like. If you were building a website that has some services, maybe you're a carpenter or maybe you're a consultant. Denote we can fill in some information here. So I don't know, let's just say technology. What's the site are gonna be about? Maybe it's a technology side, maybe it's a marketing site. I don't know. We don't have to read to focus too much here. So you can click one or two things and click Next. It says, what are your top goals? So I don't know, maybe you want to have a contact form. Maybe we want to sell some services genome, or at least just market my business, I think. Again, not too important here. You can put some stuff down. You can skip these entirely if you'd like also. Okay. Why Where are you in the process? Again, we can skip this. I'm just going to say growing an existing business y-naught. And I'm going to click Finish. So all that's doing is it's trying to find the right templates for us. So we're here and we are basically going to start going through some template ideas. Now, that's all there is really to sign in into Squarespace and getting setup. We're going to create some detail soon about what we would like. But in the next video, we're going to look at some templates and maybe pick one to work with. So I'm gonna go a bit more in-depth on its own video regarding these details. So I'll see you then. 4. Choosing a Template: Hey there and welcome back. So let's just jump right in and find herself a template to work with. So we're here with all of the templates that Squarespace provides excess. Here's some best matched templates to what you're looking for. As you can see as we scroll down the page, we have some kind of previews to existing website templates that we could use. There's lots here, Lots to work with. Up in the top here we have the type of website that we're doing on the left and some topics here on the right. Now currently, professional services is highlighted. I could go back and click all templates here. Do you know if you want to look for maybe a local business one, you could select this or food website, you could select this. But again, feel free to just browse and find which one suits you. Again, let's have a look at this one here so we can click on the preview button here. And this will preview one of the templates for us in a small square, like almost a website. In a website. Okay, and as we scroll down, it gives us a very quick preview of what this website will look like. We have a bio section, title section here. So two bits to work with. Again, some pages, all these templates include these pages as well. They also include the design layout and you can also select View demo site, which will essentially load up the website on its own tab for you to have a look at two. So that's really handy. Again, I'm not going to pick this one. I think I'm going to have another look again. I'm going to go back and select all templates. And I guess we're just looking for something very simple that we can have a homepage for. Maybe have some details about your business and maybe a couple of things about the services you offer. So as you can see, there's some very nice layouts and designs here. We don't have to exactly stick to the photos and content that is used in each of these. We're allowed to change these. I like this one. So we might have a look at this one. Let's preview this one together. So we've got our navigation here in the top right where maybe a button that's going to ask the user to do something. The title on the top left, we've got the call to action here. We've got a title, some information and a button. So it doesn't really look like a button, but it is a link. We can maybe change that later. Some upcoming classes. Again, we don't have to, we can change this to say our services genome and change the photo about what we do. If you're a carpenter or if you're an electrician or a mechanic or anything or consulting business, you can put in pictures and titles of your services here and then you can view more services if you'd like. Again, not too bad. Our instructors. Yeah. I mean, we can change this information to suit ourselves. That's absolutely fine. Yeah, I mean, even these things up here can be changed. Again, this is all about really the layout. Is this a nice layout? I do like the simplicity of this. It's very minimalist in a way, lots of whitespace and I'm a big fan of that, I won't lie. I think it's great for a tutorial as well. So let's just go back. And basically, when you pick your template, you can select, start with this template. So start with coal Lima. I think this is cold. So if I select that were called lemur, it basically goes okay. If you want to continue working with this template, you're going to need to create an account with us, okay? So you have a few different options here, guys, to create an account. You could continue with Google, apple, or maybe an email address, Juno. So I'm just going to continue with Google here, okay? And it's going to bring me up some distance email address that I use for my Skillshare courses. So if you're signed into Google, you can use this or you can simply sign up with an e-mail address, password, that kind of thing as well. Okay. So I'm going to sign up with this Google account here. So with my gmail.com. And what it's done is it's basically setting up my website for me. So it says, okay, you've created an account with us. You're basically here's your template that you've decided with. And we can give her a site, a name here. So now that we've signed in, we can give the site in a note for this example. I'm purely just going to say my site. Okay. I mean, you can put in anything here or I could, I guess, if I was making if I was making this website about courses, like we call them Kevin's courses. Kevin's courses. Let's say I'm going to make a website where I put all of my courses there. I couldn't do that. So Kevin's courses, I'm going to click Continue. Again, some information here. We're gonna go through all of this anyway. It's just telling us what we can do. And when you click that, you will be landed to this dashboard. Now, I'm going to finish this video here. And on the next video we're going to have an overview of what's going on here. But that's really it to selecting a template, checking in which one suits you, selecting one to sign in. And then when you create your account, you will be brought to this area here. So in the next video, we'll look at this dashboard and we'll work our way through it and I'll give you an overview of everything. So I'll see you then. 5. Dashboard Overview: Hey there and welcome back. So here we are at the dashboard. We've just signed in and picked a template. So what you've done now by signing in is you've begun a 14 day trial with Squarespace, so you have two full weeks to go crazy. You can absolutely mess around with these sites. Add Content, remove content, break some pages, add this, add that. And after the 14 day trial, then we'll sign up for a subscription plan. So what's really useful about this service is you can kind of build your site first and see if it suits you before committing to any sort of subscription. So that's a really, really popular feature for Squarespace. Um, so anyway, look, let's look at the dashboard here. Again. On the left-hand side, we have our list of why did I say again, this is our first time looking at it. On the left-hand side, we have a list of options here that help us configured to cite. Pages will help us add and remove pages on the site. Design will allow some design controls. We can select this one if we want to do some e-commerce work later, if you want to sell items, we're not really going to cover that in this course. Marketing will help us set up some marketing tools and SEO for the site. Scheduling. And again, not too much needed here, we're not going to cover much scheduling at all. That's another feature that you can add. We might, I might do that in a separate course. Analytics. Steve, if you have visitors and where they're coming from to visit your site, profile settings and some help. Okay, we're gonna go through these one by one anyway. Here is the Squarespace icon in the top left. So if you're ever in a setting and you're not sure where to go, just select on this, and it'll always bring you back to your account in your dashboard. Now if you ever appear on this, just click on website again. And it's going to bring us back to where we were. So here's our website on the right. It's sort of a preview of the website. Okay, So this is what our website currently looks like. We have our gain, we have our title or picture or navigation bar. On the top here we have the page that we're currently looking at, which is the homepage. If I select on our instructors, it will show the our instructors page. It'll tell us if the page is published or not. Which means is it available for people to visit when it's live, which is the case here. We can unpublished these pages too, so they aren't visible for users. On the right-hand side, we just have some mobile view and desktop view, which is amazing considering that more than half of all visitors to websites these days are on mobile. So we are able to view what the site looks like on mobile from this dashboard, which is really handy. Again, we can interact with, uh, just like you would on a mobile device. And let's just undo that back to our desktop view. If I wanted to see what this looks like as full view, I can select this arrow over here and it will essentially fill the screen for us. This is what the website will look like without any toolbar for the user. So again, it's all about getting your websites set up the way you would like it to look like. Okay, so this arrow is still there. So if we select on that, it will bring us back. And that's really our dashboard here. When we are ready to edit the website, we will select Edit. And that will open up the editing tools that we can play with here. So as you can see, a selected edit. And now we have all these boxes, but I'm not going to go into that just yet. We're going to set up some universal settings first on the left. Okay, so in the next video, we're going to just jump into the Pages section. And what I'm going to bring you through some of the details there. It is important that we just spend a little time getting our layout and our foundation correct when building the site. Because that way you know what your pages are called, where they are, how they're connected. And then you can add all the content you'd like. And it makes life so much easier for later. So cool, I'll see you in the next video where we edit and add some pages. And I'll see you there. 6. Adding, Deleting & Editing Pages.mp4: Hey there and welcome back. In this video, we're going to look at the pages section. So let's just jump right in. So we can just hover over to the left here and select Pages. Now, on the left, we have our main navigation menu here, which is basically any of the pages that are connected to our nav bar up here. So we have an About page, we have our instructors, we have our classes, location and blog. Okay, so there's some things here we need, we don't need, we're going to create a very simple site, so we don't really need a lot of this. Down here. We have some not linked pages. Again, that these pages are not in our navigation bar, but they do exist on the site. So that's just how this left-hand side is broken up. We can select on our, let's say our homepage here. And our homepage isn't on the navigation menu, but we can put it on the navigation menu. All we simply have to do is hold and drag it to the top. And this will refresh and home is added to our navigation. Now some sites like to do that and some don't. So again, it's up to you. A lot of people might realize that when you click on this site, website name, it will bring you home. But some people like to have home on the navigation menu too. So we'll just leave it there for now in case that's something you would like to do. Now, we can see that the homepage here is highlighted. There's a trash can on the left-hand side. So if we wanted to delete this page, we could simply select that. And there's a gear icon here next to the homepage. So if I select on that gear icon, basically we have some general settings about this page. So here we have some page title. We called it home, how it appears on the navigation. We have it down as home as well. Do URL slug is simply how it appears up here on the URL bar. Now, we when your page is set as the homepage, it never shows forest slash home. It's like going to facebook.com. When you click Facebook.com, you're brought to the homepage. But if you look at the URL bar, it doesn't say facebook.com, forward slash home, which was for his facebook.com. So that's okay. But if this was another page, you could change that as well. You could password protect this page if you wanted to. So you can add a password here and essentially known would be able to access it unless they have the password to the page. And you can duplicate this page too. So if you wanted to duplicate us and maybe create another page similar to this one, That's a good option too. On the left-hand side, we have some more options regarding SEO. We'll look a bit into that later again, okay, social image, so you can add an image here to see what your page would look like if you shared it on social media, then basically an ASR, an image will come up. And there's some advanced settings here, like if you wanted to add some code, but we won't really focus on that for now. Again, that's pretty straightforward, isn't it? So there's our general settings for our page. So I'm just going to click Close. Okay, We, Let's have a look and see what pages we're going to keep. Okay, So we basically, we want a homepage, our website once and about page, maybe just a couple of words about who we are and what we do. Our instructors could be our instructors. This isn't really gonna be an instruction class. So let's change this page to our staff or our team, let's say our team. So we're going to click on the gear icon next to our instructors. And we're going to change the page title to our team. Now on the navigation. We want to change that there too. So we're going to change that to our team. And the URL Slug. We're not going to go forward slash our instructors. We're also going to change that to forward slash our dash team. The page is enabled. We don't want to delete it and we don't want to duplicate it, we don't want to as a homepage, so that's absolutely fine now. Okay, I think this is pretty good. I'm going to our SEO details. This is the kind of details that show up on Google when this page has searched for. We'll do a quick recap later. But if you wanted to jump in right now, you could select on the SEO and just change that to our team as well. Notice when I type in details, what comes up here is what it will look like on Google somewhat. Again, we'll come back to that later. Yeah, so that's really all we need to do for now. Okay, make sure to click Save on the top-left. And then our changes are saved. And look, we have our team, our team. It says our instructors for now, but that's on the actual page itself. And we're going to cover that soon. All we're doing is really changing the titles as to what's up here and what's on our dashboard will be able to change that very soon. Classes, I don't think we're going to call this classes, let's say our services. Okay, so again, I'm going to click on the gear icon, changes to services. Going to change this to services. You are a forward slash services pages enabled. Cool. I'm just going to go to the SQL tab, change that to services. Again. You don't have to do this SEO on for now. I'm going to click Save here. And it should update here. And it should update here. Location. We don't really need this Do we? May be a contact form would be nice. And generally you could put location, we're contact as well. So we might change this page to contact. I clicked on the gear icon and I'm just going to change these from location to contact. Okay, forward slash contact. Cool. On the SEO, I'll change that to one. I'm here, contact. Okay, I'm going to click Save. So that's starting to look a little better. This blog here, look, we have a blog. I don't want my site to have a blog. We don't really need that. Okay, so I'm going to move this blogged down here to the not linked items. So you can keep this blog if you'd like to try one later. Again, a blog site is, it's slightly different, right? It's going to show you some blog items. I might create a separate course to create a Squarespace blog sites. So for now we're actually not going to use a blog at all. So let's just make sure we're on our pages and you know what we're gonna do, we're gonna trash this. We're going to use the bin icon on the left-hand side of blog and we're gonna put that in the bin. Yes, I confirm. Goodbye. Out of the way. We don't have to worry about that anymore and get confused about it, okay? Right. I think that's pretty good. The book a class. Let's delete that too because we're not going to book any classes here. Okay, Let's just remove that page two. And we have this big button called Booker class up here. We're gonna change that soon. Maybe we'll make that the contact page and rather than this, but we'll update those later. Okay, cool. Look For now, we were able to edit the existing pages on the template and add our own details. So we're doing pretty well. We're getting there and we're getting the foundations setup. If you wanted to add another page to the site, for example, let's say there wasn't. You wanted another page for more details about something specific. You can simply add a new page by going to the Add button here or the Add button here. So next and not linked, if you click the Add button, you can add many different types of pages. You can add a blank page. You can start with a design or layout, or you can schedule like a booking or classes Booking page. That's something we'll do, maybe in a separate course. Again, or if you were setting up a blog, this is where you would set up a blog. If we were setting up an e-commerce store to sell items, then you could create a page here to look at all of these options. Again, would a portfolio too. So what we can do here is where you could create a blank page and look, basically it's created an empty page for me to play with later and I can give to page name. I'm just going to call that blank. I'm going to call that blank page. I'm gonna click Save. I'm not really going to use this at all, but that's how you would create it. Or you could select one of these page layouts. And what you have here is lots of nice layout here. And this is probably the best way to go about it. Here. Look, if you wanted to add some details like a gallery page. Here are some options about how to add a gallery or maybe some pre-built gallery pages here. I could select this gallery one and then call it a gallery. And click Enter. Then we have a gallery page to the site. Really cool, and we can edit all of that content in a later video when we go to the editor. So we've covered a good bit. We've covered how to change details of existing pages, delete pages, add pages. Again, we're just getting our foundation setup. So in the next video, we'll have a look at some design settings. You know, maybe getting a consistent view in our design throughout the site. And I look forward to seeing you then. 7. Site Styles & Global Settings: Hey there and welcome back. In this video, we're going to look at the Design tab on the left-hand side. So I'm back to the dashboard here of our Squarespace website and we're going to click on design. So here we have lots of different options and we're just going to quickly fly through some of these and just see what they do to our site. So again, it says here introducing sites, site styles. This is something that they introduced recently on Squarespace. So you might find this very useful. I think it's amazing. Y-naught set some styles that you can use throughout the site, Rotterdam, everywhere and clicking on every title, every bit of image, changing the changing settings throughout the site. Again, when you change, when you said that global setting here, it will affect everything that it's set to effect throughout the site. Which means if you want to update a font later, you want to change the font of all the titles. You simply change it in one place and all the titles update. It's makes life so much easier. Anyway. Let's look at site styles here. Under design, our first option here is Site Styles. So I'm going to click Close here and that's fine. It depending on the window you're looking at, sometimes it might open a new tab on the left, but for me it's appearing on the right. It's the same sort of thing. So again, we can change some sites styles here. We can update the font. So currently our font pack is using Acumen Pro. We can change that, you know, like I can change the font size, the base size. So the beginning size that everything is based on. We have our global tech styles here. For example, this is really what we want to look at. Our headings is using Acumen Pro, which is this one here. These then are the paragraphs. They're using Poppins and the buttons then are using something else. But we'll actually look at Bob and separately very soon anyway. So under headings, Let's say we want to change headings to either no, let's change it to a control. Let's actually change departments so it matches the body. Okay, that's not too bad. Let's maybe try another font so we can actually search for fonts here, we have a lot to work with. There's a font that I like to use called Montserrat. There we go. Okay. I like that font. So that's our new font for the title that I'm going to stick with. So I've selected months or at, and I can simply click back here. Okay? So our font is this. We can change the weight to denote a boulder title. Denote maybe make it not so bold. Again, when we can change the style, you can italic size things, you can change the headings. So heading one is for heading to, is set to odors headed to below. We'll set that to three denoted as different headings here. So again, depending on the type of header, we can set a universal value for them as well. Here, like all of our Heading 1s, that looks like a good size. I think this is a head and four. So what we're gonna do is we're going to maybe bring that down a little bit again like that. Again, we can change these individually later. The Heading 2's maybe bring them down a little yeah, a little bit like that. Heading 3s are inside these box, maybe bring them down. Again. I might be spending too much on global values. You don't have to spend this much time. You'll be able to do this all individually later anyway. So again, there's some cool font styles that you can play around with if you'd like to go into colors, okay, I can choose a color palette. You can basically edit the palette here. You could say ride, riders are bright one I like that gray. Maybe this gray needs to be a little bit different, maybe a little bit yellow. Look, it's updating our buttons and are, are, are links. Here we have nice gold. I like that. The green and gold is nice. Let's kinda, it's kinda try ethanol. Maybe I'm not picking the right gold here we have some presets that are kinda cool. We can choose from a preset as well. So I select on a preset here and it updates the site based on the preset I selected. Maybe there's too much blue going on. This one here, this white, yellow, and black one. Let's click on that and choose that preset. Okay, nice. The big kind of warning here isn't, that doesn't look very welcoming and warm. So let's, let's click the Undo button up here. And that should undo some of our presets. And it might bring us back to our original preset. Yeah, I liked the fact that it was kind of a gray and black one, but I'm just going to add that gold color. That looks nice. Okay? So you have the option here of setting your own palette and replacing the dark colors here and the bright colors, and even choosing some preset of pallets that work too. So that's how you would affect colors on your site. Okay? And then you can kind of effect here. What is you can set certain lightest, you can set certain shades of the colors that we're working with, which is cool too. Animations. Okay, So I don't think this site has any animations, but what you can do here is you can select on the fade. So watch as we load our website, these these, these kind of elements fade in as we scroll down. That's kinda nice, isn't it? So that's something I would really like. There's other ones here like scale. They pop slide up. Notice these ones days kinda slide up. Look at this here. That slides up nicely. Clip. Here's another one. Kinda just fades it on the spot rate. He doesn't know it already knows the difference between not one. Flexes kinda cool, where it kinda comes up from the background. That's a bit nice extra do like to flex one, I won't lie. And you can change the speed here so you can make it happen quite fast. Are quite slow. Maybe not too slow, but the fastest, kinda nice. I'm a big fan of fate. I won't lie. I just think fade is nice and simple, straight to the point. And you can't go wrong with just fading in details. So I'm actually going to leave fade on as my animation. And that's great because that animation is set throughout the site, which is great. Okay, It's gonna make life so much easier for you. There's some spacing options here. I mean, you can set the page width to certain details like you can bring this way down. So only your page is kinda skinny. The content on the site is locked within a certain width. I'm going to bring that up to the default of 1400. I don't mind that really. And you have a slight marriage and as well. Again, I wouldn't even really mess with that. Just leave it as default if you'd like the template because we picked it, then just leave it at that default. They're very cool. Look, that's really kind of jumping to the site styles. I just don't want these videos to go on a little too long, so I want to keep them bite-sized if you want to jump back for later. So I'm going to create the next video based on buttons. So I'll see you in that video. 8. Styling Buttons: Hey there and welcome back. In this video, we're going to look at the buttons. Button here under Site Styles. So let's just jump right in. Right? So we've looked at the fonts, colors, animations, and spacing. So let's select buttons here. So what we can do is we can set a button style to be used on the site. So for example, we've got a button up here. We've got a button here, a button here and there, and a button here. And as you know, they're all somewhat the same. There's two different versions of the buttons here. As you can see, there's kind of this gold background with white text and this gold background with white text. But this also want, this one here has a white background with gold text. So we can change what the default button is going to look like, you know, so it's a good starting point for later. So let's just even keep an eye on this button here and we can change to say, the styles on the right-hand side. So our text is currently Poppins. The weight. We can make the weight bolder by changing 500 to 700. Let's just leave that at five. Again, we have the option of kind of making an outline. So as you can see, I'm making an outline on the button. This is kind of outlining it with a little blue line around it, which is nice. It does it for the top 1 first anyway for now, but we will leave without an outline. I think the only problem I have with these buttons at the moment is that the space around them is quite big. A bit clunkier and D. So we have some options down here to affect the padding. So what it does is it gets the text inside the button and creates a certain space around that. So I think the width isn't too bad. What we might do is we might just make it not as thick on the vertical. And so that looks a bit cleaner for me now I won't lie. Maybe we've made them a bit wider. And that's affecting the button on the top of the page. But what we might do, so what we can say here is applied to all button types. But we can also go and affect other types of buttons here too. So we have some territory buttons. So it's not a bad idea to affect all of these buttons in the same way. So what you can do down here, as you can say, apply to all button types, applied to all. And essentially the shape we created now is universal on All button types. Okay, so that's pretty cool. So our buttons have a set style in a sense that they thought of buttons there. They have the same font every time, the same shape, the same outline, and the padding. And we can affect the colors later. But they're all going to take the same style, which is important. Okay, So that's everything really you need to know about. The Global Buttons setting. Very short altogether, does not a lot there, but you can feel free to experiment as much as you'd like. In the next video, I'm going to jump in and look at our fab icon and our logo. I actually, just even before we finished looking at image blocks, I wouldn't worry about this. This is kind of setting certain image blocks that we will do individually on the site. This is very, very in-depth that we don't really need to look at. You can play with that if you'd like. But we really don't need to look at image blocks, which means that our site styles is sorted really isn't that we're after effect in some sites styles. So when we want to finish with that, you will select up here on the left. Done, just click Save to be sure, and then clicked on. And when you click Done, we're back to our options on the left under design. Okay, very cool. In the next video, we're going to look at the browser icon and maybe some ideas for making a logo. So I look forward to seeing you then. 9. Browser Icon & Logo from Canva: Hey there and welcome back. In this video, we're going to look at the browser icon section under our Design tab. So let's jump right in. So we basically can select our own browser icon for your site. So I guess what you're talking about as a browser icon Kev, It's this little guy up here. So as you can see next to Kevin's courses, we have a little cube, and that is the Squarespace cube, but we can add our own icon to make it a bit more professional looking. I mean, if I open a new tab and I go to facebook.com and I open Facebook. Look, we've got an F to Facebook logos there. If I go to Twitter and I click on Twitter, we've got the Twitter icon so you can set your own icon for your site. Now, if you have a logo for your site already, this is a fantastic place to use it. So if you're building a site for your business or your portfolio or whatever you're building your site for. And you've got yourself a logo, then you need to upload it here. But just be aware okay, that it's not supposed to be a very big file. So you can have a PNG file, which is like a transparent background file, but just make sure it's quite small so it fits in this. Now, if you don't have a logo and you're not really sure what to do regarding a logo. I can quickly show you how to maybe put one together on Canva. So if you haven't heard of Canva before, it's very useful. So CAN VA and you can go canva.com as well. And it's absolutely free to sign up for Canva. So basically on the homepage here you can click sign up on top right. And again, I'm going to sign in with my Google account that I have, my Gmail one that I use for discourse. But you can sign in with whatever account you'd like. You can tell here what you want to use it for. I don't know, just personal use, maybe later kind of skip all this canvas, very useful for this kind of stuff. So on the top right here, we can create a design and look right here. Logo is a third option. So when we select on that, it'll open a new tab. And what Canva is basically is it's like a little design studio online that you can add things to. Now there's a lot of stuff here that is part of their pro version, so we can't use some of this stuff. But there is a lot of free options here that we can use and kind of make and break and used to our own. For example, let's have a scroll down here. I selected logo and search bar, and we're under the templates option. So I mean, look, there's already some logos that we can use that are licensed free for us to use so we can add whatever we wanted these. So I mean, if I just wanted to select any random one here, I'm just looking for something quite simple, but they're all very artsy guarantee. Let's look at this k, k For Kevin. So it worked out quite well. So what we can do here is maybe make this gold, okay, I'm just gonna make this maybe not exactly the same goals that we have on the website, but it's close enough. This is just to show you if you wanted to do it. So you can select on the items here and change to color. I'm going to hover and drag all of these and make them a bit bigger, which you can do also just simply by doing that. And that is kind of what we're looking for. Something like that really, isn't it? Okay, cool. So we can use that as our logo. For example. When we want to use this, what we can do is click Share on the top right, download. And basically yeah, as a PNG, and you can just use the 500 by 500 pixel size. You can make it bigger or smaller. Actually, you can do with the free version. That's okay. And just download. Now it's celebrating that we're downloading. So that's very simple, isn't it? Let's go back to our Squarespace site. We can add a favicon or five icon. I keep saying that wrong. And I'm just going to drag our image that we use and you'll see what happens here. So it's the k. And I can click Save. And it's not really kicking in yet, is it? Not quite? So I'm going to click Save and go back to the design. I'm going to refresh this page. See what happens. Okay, Not quite yet. It should come up soon, okay. Sometimes it takes some time to propagate or to get itself setup and to kind of show on the site. Maybe if we needed to look at the, let's grab this URL here and open that URL in a new tab. It's appearing here, maybe I'll know it's bringing us back to the other. I wouldn't worry about it. Okay. That essentially is going to replace your icon on the top-left later. And we'll definitely have a look at that together. It's, it's, it's gonna be the new icon. So instead of that little cube, you can add your own logo. Now I'm going to keep that image for later when we designed the page. Maybe you want to put a logo here to something like that. But Canva, going back to that, It's a great tool. Feel free to use it. It's fantastic for what you might need and you might find it very useful. So I would recommend that that's really, really useful. Canva.com. Cool. So that's really just everything regarding logo for your website or a logo further little icon on the browser. We can use the same local throughout and how to create it on Canva. So what else does video getting too long? I look forward to seeing you in the next video where we'll look at some of the rest of the options here. And then we'll quickly move on to our next section. Okay? So I'll see you then. 10. 404 Page & Misc Settings: Hey there and welcome back. In this video, we're going to just run through the rest of the settings InDesign. And then in the next video, after this, we're going to start editing the pages. So you'll see how useful all of this was when we're editing the pages later. Anyway, let's jump right in. We ran through the site styles. We set ourselves a browser icon. Let's have a look at this lock screen. So what this is is essentially if your screen is locked, but if you have a password protected page, then this will appear and you want your lock screen to look different so you can change the layout. You can have your lock screen look all sorts of ways. Anyway, not something we probably need to look at right now, but again, you can feel free to adjust your lock screen, their checkout page. We're not building a e-commerce site yet, so we're not selling anything on this website, but this is what your checkout page would look like when we set that up later. Again, I hope to make a Squarespace course focused on selling items very soon. So do keep an eye out for that. If that is output by the time you're watching this video. If that's what you're interested in, but we don't need to look at that. The four or four page. Okay. So what a 404 error page is? It's basically a page that is shown to the visitor when a page is deleted or not found. So let's say you had a page with some services on it and it was up for a long time and people could visit the webpage. And then you decided to delete the page. Well, what if someone has a link to that page still? Do you know what if they click on a link somewhere and it goes there, but the page doesn't exist anymore. That's what a four or four-page bill. That's when a four or four page will come into play. It'll basically say, Hey, error, there's no page that exists. So you can use the system default here, which is basically saying, Hey, we couldn't look for your page unfortunately. But what you can also do is you can redirect users to one of your other pages so you can set it up that you basically would send users to your homepage. So if someone was to click on a broken link for a page that doesn't exist anymore. It'll detect that a user has gone somewhere they shouldn't be and it will make them go to the homepage automatically. So that's something a lot of people do. Or you can have it set up to a nother page two. Now, I'm just after selecting another page in my browser, squarespace has decided to run away from me. Okay, I just refresh the page and we're back. So what you can do is I like to set it as the homepage. You can also set it as a new page. So you can actually create a new empty page and work with that one, or that's the new page we created earlier. Mistake. I got that mixed up for a second. So you can create an individual page and basically says, oh hey, you seem to have clicked on a broken link. This doesn't exist anymore, but feel free to go somewhere else so you can edit the 404 page essentially and make your own customized one that might be more relevant. Some websites do great examples of those. Now I'm just going to have it set to home. So basically it's going to send the user to the homepage every time. So make sure to click Save if that's what you do too. And we'll go back to design access denied screen. That's okay. We're not doing any sort of Member page, so that's fine. We don't need to look at that really for the purpose of this course and social sharing. So basically it says here when social, when sharing your pages on social networks, Squarespace will use this image to represent content. So what you can do is you could add a social logo. I mean, I could select my logo that I added here. So if someone was to share this website on a platform, it will use this logo to represent my website if an image is needed. So you can do that to custom CSS. If you are into customizing CSS, which is basically coding design, you can design changes using code. Feel free to do that here if you'd like. Again, not the purpose of this video, we don't really need to look into that. Okay, if I click back and brought home and we're pretty rockin, okay, so that's everything we really need to look out there. The biggest thing really there was looking at the 404 page and just making sure that we can see the different options as to what you can do there. Okay, so in the next video, we're going to actually start editing our pages. So I look forward to seeing you then. 11. Editing the Homepage: Hey there and welcome back. So in this video we're going to start looking at editing the pages themselves. So this is very exciting stuff. So essentially right, we're back on our dashboard here and we're going to start making the website look more like our website now what we want, so we can select on the Edit button up here in the top-left once we're on the homepage, and it will open the editor for the homepage. So what's handy here is we have, as you can see, this blue box that's kind of hovering around this area that's known as a section. Okay. So the whole website is comprised of sections. Notice how I flow onto the next blue box, that's another section. So when we break up our web page into different sections, so it kinda makes life a lot easier, doesn't it? It allows us to make settings in specific places and differentiate information. Again, open the top here, this is a header, so this is actually universal across the site. We're not going to affect that until soon. So don't worry about that for now. Looking at our main section here. So what we have is we have a background image are titled texts, some smaller texts, and this kind of linked button here. And you can see here we have a text box here that's floating around. So all of this is text and we have this background image. Now if I was to select just this background here, what we have is some options. On the top right, we have the option to edit this section duplicated to know. So if I click duplicate, now we have two of the exact same sections. But what I'm gonna do is go to this one I created and just hit the bin icon. And that basically means I remove a section. So now we can basically duplicate and delete one. But let's select Edit section. We have some settings here to work with. We have some height options. Currently the height of this section is large. We can set it to medium and we can set it to small. So as you can see there, it's kind of it's kind of bringing the page up. I don't mind it being large. It's kinda nice large. And you have some tree dots here where you can do your own custom setting. A 100% being the height of your screen really is generally what it looks like. And Dino down to ten. So you have some height options here. I'm going to go back and just leave it at large content width. So the width of the content that belongs in this section. So at the moment, it's small, medium, and large. So I'm going to stick it to small. Okay, look at this outline blue box here. If I change it to medium, that gets wider and then large is very wide, I'm going to leave It's a small and that's absolutely fine. This next section is very interesting. The alignment of the content in this section so we can set, currently it's set to align to the bottom area, but we can put it to the middle. We can put it to the top. I actually liked the middle. I won't lie. And we have it aligned to the left. You could put it center or you could put it on the right side too. So it's completely up to yourself how you would like to align the content in the page. I'm going to set it to center and align left because that's a bit nicer for me. The background tab here then, okay, So it just again, you can close this popup here. We have some options as to change the background image. Okay, so you can basically remove the image here and replace it with another image. You have the option of uploading your own image, selecting from a library of images. At the moment, we don't have any, but you can select on free images here, which is really cool and premium. So somebody's, you have to pay for. The free images are quite cool because a lot of work with in the free images, as you can tell, it's quite kind of photography centered. But you don't have to select one of these. You can actually use your own images if you'd like. So let's just say, I don't know, let's say that this website is an architecture consultant agency or something. Maybe they give you Architecture services. Let's just say it's an architecture company because I see some pictures of buildings here. So let's select this one. I want to make this the background image of the site. So as you can see, it's kinda replacing it. Alright, It's the loading. Oh, look at that. That's really cool now and now I'm really happy with how this looks. And we have that new image and our background with the content in front of it. You can do like an inset or a full bleed, the background width. So you can kind of create this white border around it, which is very artistic and modern-looking. So you can do that too. I'm going to leave a full bleed for now. Okay. There's an overlay capacity here. So the more I pull this to the right, the darker the background gets. And that's useful because we have texts on the front. So we don't want it completely bright. But we want to put, maybe, I don't know, about 30%, 35 percent, that kind of makes the text readable, doesn't it? Then you can do some effects on the images as well. Like some people like do this kind of liquid effect. You know, you could maybe add a film grain, this grain effect. Again, I'm not really going to use any of this, but there is some stuff you can do here that I don't know if it's not doing anything with that one. Maybe. Pan zoom. Not really at the moment. It's fine. I'm going to pick none. I don't want any image effect on the back, so that's the background. You could add a video here if you wanted to. You could add some art. Again, I'm going to leave this as the background. And then we have some colors. So you can select a color theme for this area. That's fine. You can leave that as it is. This is pretty good. Okay. I'm happy with that. I'm after changing the background image and that's how you would make setting changes to that section. Now what we can do is we can actually change this content here as well. So if we were to select here in this text, we have the option of changing the type of texts that is heading 123. I'm going to make it a heading one again, remember, we made some style settings to what these were earlier families that are heading one. You could highlight this here and make that bold or make it not. I think it's absolutely fine the way it is. But again, you know, you have the option to center this text aligned to the left, aligned to the rice genome. I'm going to leave it the way it is. I think this is fine too. I'm going to change just like taking care of your mind, body and soul. I'm just going to say we design buildings. Maybe move it into two. Okay. Yeah. Yeah, let's do that. Listed as we design buildings here. In the next section, we're just going to say we are. The world's leading building designers. Really depends on what you're building your site for. This is me kind of playing around. Okay. So it depends what you're looking for in a site. Okay, so on the next section here we have, on, here we have Booker class. I would like that to be a button. I won't lie. I actually just going to remove this. And we're going to put a button here instead. So what we can do is notice here we have this plus icon that allows me to add an element In-between what exists. So if I want a button underneath the sentence, I can select this plus icon. And look, we basically have lots of options of things that I can add. So I can add more tags, button a form online, have a look at all the things here and play around them and have loads of fun with them. Okay? Now I'm going to select a button. Buttons after appearing. I'm gonna change this to services. What I can do is I can link that to our Services page by clicking this gear icon. I can go page and on the list of pages, we have services, the one we created earlier. Okay, perfect. I'm going to click save. And there we go. We have a button for services. Now, I'm going to hover on the design icon here, and I'm going to align left. Okay, that's what I'm gonna do. You can center and do it right. I'm just going to align left. And when I click off this, we're done. That's it. I have my thing here, my title. You can put more in here if you want. We are the world's leading designed to get in touch today to find out how we can help you. And then you have services. Okay, cool. So that's awesome. We just created our hero section. So we have a call to action here, which is very cool. Looking at our next section here, we could change this, excuse me, we could change this to services. Then as we click on these existing boxes, as you can see this as an image box with text in the middle. So you can simply click on the box and there's an edit icon there again. So as you can see, it's all made up of these elements in widgets. And it allows us to change the details that's inside them. So I'm going to replace this aerobics. I'm going to look at the library again. Again, you can upload your own images here, but I'm going to look at this library again and I'm going to search building. I think there's some buildings on this. I'm going to take search yeah, look at this. So I'm going to select this one. I'm going to add that image. So as you can see, it kinda got to be big. I can simply drag that back up by looking at the bottom. That little drag icon comes up. I can drag that to make it match our other website. There are other box, perfect. And I could change the button link to the image. So if you select anywhere on this image, it's going to go to a certain page. Let me open that backup. I'm going to send it to the services page again. Okay, cool. And the design I think is pretty much sorted. That's fine. There's an animation here. That's fine. Don't worry about that. That looks good to me. Oh, it's called yogurt Aerobics. Maybe we should change that to something else. I can actually change it right here. I can say world class design. Okay, maybe remove that completely. I might undo these out there. Click on the image box settings again. There should be an option here to maybe not actually have to type it in here. Okay, that's fine. We remove. Oops, I have to click sometimes you to click off it, click back on it. I've noticed that you can just say, actually I'm going to change this services. I'm going to highlight that and make it a heading two. I'm going to remove this. So what you can do is you can actually click on this and click the bin icon. Here I'm going to have an About section. This is going to go to the services page and this has gone to go to the About Us. Again, it's going to the paragraph, but I can change that to a hidden two, and that gets nice and big. And I can change this image as well by clicking on the design settings, go and replace, select from library. And again, I can pick another, Let's just pick a house. You can type house in click Search. And we have some ideas here. Not exactly architecture risk, but kind of checking this one. It's colorful. Maybe this was the first house we designed. I'm going to click on the link. I'm gonna change the link to go to the button or a sorry on the image. So if we click anywhere on the image, the link will get created. And the link is gonna go to our about page. And we click Save. And I want to drag that again just to match our other image. Awesome. Well it's a bit long. Cool. Yeah, we can remove these. I don't really like them. Let's just remove that and move that block and remove that bone. So look what we've done. We've created a nice section here. There's a bit more padding on the top, then there is the bottom o. As you can see, there's a spacer widget here. So we can click on that spacer and remove that, maybe drag it up a bit, maybe business. Let's just finish. What we can do then is, yeah, now it's an even top and bottom. We can even click on the section itself. Go to the edit section area here. And we can change this section hi to maybe medium or maybe custom. We'll do a custom height like that. Maybe Awesome. So we have our settings are home setting or home section services and about us. I don't really think we need anything here right now. We'll maybe I'll tell you what this video is getting a bit long. I'm going to make another video, okay? And what we'll do is we'll just continue designing the homepage in the next video. I look forward to seeing you then I hope this is interesting and you're learning lots. So I'll see you soon. 12. More Homepage Editing!: Hey there and welcome back. So we're just going to continue the homepage here. During my little break between these two videos, I was thinking about us. And what we might do is in this section, we might like Adam Meet the Team and basically removed our team up here. So we might remove two page to ten-page completely and have just some boxes in here. So I think that might be a good way to go about it just to make the homepage bit more lively. And also, what's great about Squarespace is we are allowed to make these changes. And when we're allowed to change your mind and move things around quite easily. So looking at this section here, as you can see, it's already taken that lovely gold background that we put in the sentence earlier. We're going to remove this text here. We can bin d block and then this block here, there's a spacer would have been that to this text here. We're going to bend that and we're going to just be in all of them here. Okay, so we have basically an empty section, this section here with nothing in it. So it's just going to basically always reverted to texts so we can keep removing this texts, but there will always be something there, okay, and that's absolutely fine. So what we're gonna do is we're going to add a block. So by hovering over the text is you can see the plus icon above and below. So it doesn't really matter where we add this now because we're going to remove the text soon. So let's hit a plus icon. Here we have some options, so let's just have a look. We've got some integrations, business loans here. I'm just thinking we might end up looking at this image one here. So let's look at the image here. We have some options as to what to do. We can create an inline look at the Design tab. We have some options as to what kind of image or going to put in. So we can create a card for example. So I like that option. So give these a goal. There's different ones here. You can have a background image with text on the front. You can have texts that Amish left with texts on the right. The overlap where it's slightly overlaps, which is fancy. Kinda collage like. Look at this as kinda nice. Actually, I might use this one maybe and stack. So you can have an image with some texts underneath. So what we might do is we might actually do that kind of collage. Okay, cool. So looking back, Let's go to content. Okay, So we want to add an image here. Let's add an image. You could, if you had an image of you and the team or yourself, you could upload the file right here, or you could select it from the library. What we can do, just for now, I'm going to get a free image. I'm just going to type in people. These aren't exactly going to be the people on your team, but I'm going to put it in this image here. But let's imagine that this is an image of your team or the people that work for you or you and your friend or yourself, you put an image up of yourself. And this is the people who work with you. So what you could do then is you don't have to have this linked at all, that's fine. And then you can change the design here. You can put the image to the right, the texts that left. You can change the shape of what you want to image or you can just keep a square, I'd like to square. And you can kinda do some animation. So it kind of fades in when you come here, which is nice. And then we can just go back to the content. Really. What we can do then is just basically type into these blocks. So we can make this like a heading three and go our team. Okay? And then here we can go. Our team is made up of some made up of the best tech. Oh my God, I can't spell. I'm under pressure because I'm on video. Architects. May ignore me, please. Brain melt moment. Our team is made up of the best architects around. John is new to the team. So he is the team leader. I don't know, putting in whatever you want. Mary is our marketing consultant. You know, you can let people out here. And let's even look at the way these blocks work. So for example, we've got this, we've got this kind of basically this section, this outer section with this image block in the middle. You know, you could click on the Edit button for this image block. And of course make your settings here and change them there. You're also allowed to hover on this section here and click Edit section. Again, you can change your layouts and such. I mean, if you wanted to add a new section between these two. Then you would select the Add section here and then basically look at all these different options you get, you've got lots of little options. Look again, it's using our layout here that we've been using a minute ago. And all these other options on the left that you can pick from genome if you want to list, maybe you want this list option would be great for the team as well if you wanted to add this, because you could put a member of each team and a little icon and text underneath them. So if I added that right now, it will just add this to the website. And I could change each of these photos. I can click the edit content here. And I could change each of those photos and each of the titles to match that. Now I'm going to click Delete because we're not going to use this. But you could do that if you wanted to. Now, down here, our last section on the homepage, it's a newsletter. You could absolutely keep using this and edit a newsletter button here. So you could type in basically the newsletter or weird newsletters going to so you can set that up in the settings later. I mean, personally, I like having an Instagram feed on these websites. So what we can do is we can actually delete this newsletter completely. Let's look for a different background image. Because I don't think that suits and architects consultancy, if that makes sense, Let's replace this. Let's go for more free images of a city. Let's type this in. Yeah, let's do this. Why not? Okay. I'm going to make it a bit darker. So I'm going to kind of increase the opacity, make it darker or maybe like 50. And what we can do then is I'm going to add a block here, which is basically a integration. So we can integrate Instagram, for example. I could put the Instagram block here and look, it's gonna show us some example photos of what it would look like. So we can go to the design here and basically reduced the number of Tom Neils parole or just remove, reduce the number of Tom nails completely in the padding around them. You can set it up to a carousel, which I think is probably a bit nicer stacked. So if it's a carousel, you can have an automatic transition between items. Denote alignment left to rice. The grid is probably a very nice one though. So you can add in a grid of 4812 there. You can have them cropped or not cropped. And on the account section, basically you can set the number of items. Now that's not going to really make an effect right now because this is still just the default, but you can say eight items, so it only has a role for in a row for this section wouldn't be too big. But you can add an Instagram account here. And basically this is something where it'll allow you to sign in and authorize your Instagram account with this website. So you can set this up if you'd like. But that's essentially what an Instagram feed would look like. And that's something that's really, really popular to do. Okay, I think our homepage is done. We've got a lot of nice sections here. So can really great. What we might do is we might just run through some of the other pages quite quickly and set up our header and footer. And I hope you're learning a lot about this so far. Again, all these pages are made up of sections and just these block elements inside them that do different things. And yeah, it's fun and exciting. So I hope you've learned lots of air. Always make sure that you click Save on your setting changes. So as you see up here done, make sure to click Save and save the changes. And there it looks now and our preview that we were looking at earlier. Cool. Anyway, I'll see you in the next video where we make more changes. I'll talk to you soon. 13. Finishing our Pages: Hey there and welcome back. In this video, we're going to quickly run through some fast settings that we mentioned before about removing some pages and just making last final edits. I think we get the idea with editing. I don t think I'm going to bring us through the entire site again, because we don't really have a purpose built end goal here. It's kinda just to show you the basics of editing and how to get things up and going. So we won't spend too long in the editing side of things because we're almost to the end now. But I hope you're learning a lot so far. Anyway, like we mentioned, we're gonna go back to the page's area here, okay. Because we're going to get rid of our team because we said we would delete that because we already have that on the homepage. So let's just hit the bed next to our team. And as we'll see here, it's removed, which is perfect. We are going to look at the About page. The homepage is done. Let's look at the About page. So again, on the about page, if I selected edit, I get to change this to a well, let's set up now is about us. But I mean, as you can see, we have some options here to, again, look at each section, click on the content that we want to change, and then go to the content editor button. You can change that image there again. I'm going to super, super quickly changed some of these. I'm going to change to lead this building image again. Why not? And on the left here day and we can add some contents. So if I had a biography about the business, I would add it to this section here. This is an image block, so the settings allow us to change the image. I'm going to drag that back if I can or maybe not. Okay, and that's okay. So what we'll do then is essentially when you want to add some information here, you basically, you can physically go in and just remove and add what you want. So you would add your title and your details, bloody, bloody blah enough your goal genome. And it will be the same even in these sections here, this is a background section image. So as you can see, I'm clicking on the image and nothing is really happening. But we do have an edit section up here that appears. And under background we have the guy standing when these yoga position. And you can enter your own details if you don't like to section, you can always just delete this section. I'm going to remove it. You can always add another section that you feel. Be nice. And you can make your edits to that as well. Do you know? So I'm just going to click down here. I'm going to click Save. We're not gonna spend too long on the About page, the services page. Again, this is something where this is a nice layout, the template and a lot of work for us. If I select Edit, I could put, I could change this image. And this section here to say, you know, we design buildings. This one could be, we also focus on landscape design and change this to landscape design. And then you could put some prices and all that kinda stuff. You could remove this section here, for example, because it talks about booking a class. Or you could simply just say at the end instead of booking a class, it would say Get get in touch. Then you could say get in touch today for a quote. Do you know what you could do this? And you could edit this button and edit the details on the button that says Get contact. And you could change the design or even the link. Change the link. Make sure it is, the page is set to contact. You. Click save, and there we go, get in touch. So when you look at the services, you're like, okay, that's cool. Okay. I'm going to get in touch and contact you guys. So that's another thing you could do there. Again, it all depends on what context you're doing your site on. The last one I want to do is a contact page because I noticed this contact page didn't have any contact form. It just has location which is fine. But we're going to open this contact page and select Edit. Now, it will be nice, Let's say too, I don't know. Let's just, let's just remove this box. Google Maps tells us everything really doesn't that for now. And we also have the address here in the bottom, which we will change soon. So I'm just going to delete this count, this information box here. What you notice is the map gets bigger, it takes more space. But I'm going to just add a new block called Form. What I can do is I can drag this form and up the page until it's like to the left, this blue bar starts to appear. It's it's I don't want it to go under it. I don't want it to go to that side. I want it to go to the left of this map, and I let go. We've got a spacer here. I can try that spacer in-between where the blue line appears. Okay, now we've got to space. Now let's base of big. But look at this little line here. I can drag my map out to be bigger. I can drag my forms would be a bit smaller. Okay, that looks kind of cool. We can center these details. So on the section, on the section settings, make sure everything's centered. That's pretty good. Cool. And we're pretty much rocking. So you can change the color here to the dark theme. You could change it to satellite already original. For your map. You can also put in your address. So if I put it in a local area to me, if I put in Dublin, Dublin, Poland, I didn't know what it was in Poland. All Dublin LIN. So I don't know. I could put Dublin or I could put a specific street address. Ten Grafton Street. I don't think. Yeah. There we go. Not London. That's okay. That's fine. It doesn't matter. You know exactly anyway, what address you'll be putting in, and that's all that matters. Here. Lend cool. You can show terrain high terrain controls. You can show controls, how controls, tables on that kind of stuff. So you've got a nice map there. On this form. To the left, we have the option of editing the form. So for example, we want the name email. Yeah, this is perfect. We want all those fields, that's fine. You could set the address or to take your message afterwards. What happens when someone hits Submit? Design? We could align the buttons, the left and right, of course, and maybe use a light box so you can click Open Form. Form of open when you do that. Storage then basically is where are the email is gonna get sent to when someone feels descent. You can obviously at the moment it's set up to e-mail the e-mail address to sign up for. We will get to notifications, but otherwise you can also store them somewhere else. So there we go. You know what, Let's Move that space or in the middle. Can I delete that space, sir? Yeah. That's okay. Let's bit nicer. There's no real way for me to kind of bring that down more centered. Be nice to center it out, wouldn't it? Or my thinking too much about it. Oh, there we go. So right underneath the map, we can drag up and down our map. And that makes it feel a bit nicer. We can change this from location to contact us. Brilliant. As you can see, we're absolutely flowing. Okay, cool. That's the page is finished up for before we'll just goes too long. The next video, we're going to edit the header and the footer, and then our sites pretty much done. And we only have a couple of things to wrap up after that. So I'll see you in the next video. 14. Header & Footer: Hey there and welcome back. So in this video we're going to edit the header and footer. So let's jump right in. So right up here as you notice that this header is used on all of the web pages on the site. So when we click Save and Done on our last one, it doesn't matter what we click on. Notice how it's the same information on the top and it's the same details that are shared. So what we can do is we can click on edit, hover over to type the top and it says Edit Site header. Then we have some options here to play around based on the theme we picked. So for example, we can actually set a site logo. So instead of this Kevin's courses, we can set a logo. So I could add this here, and we can actually use the one I added earlier, which is the k. Denote. It might not be great because it's on a, it's on a background that's not exactly a transparent logo. But if we set the height and set some max height for more bile, then I can add them all by logo separately. If this was a transparent background like a professionally made logo, then it would fit quite nicely, wouldn't it? But we have that white background from earlier. But this is just an example. If you have a logo for your site, you could put it in here as well. You can also just remove the logo and essentially keep the name. Alright, there, you know, even just use your site name instead. But there's an example on how to set the logo for your website. Okay, we have our elements, so we have a button here, right? And what I might do actually is I might make that button. I might remove the whole, we're not doing a class anymore, so we don't need that. So I'm going to just change that to contact. I'm going to make short links to our contact page. And save. We have options for social links so we can add in our Instagram and Facebook. And you have the app. You can basically connect your social media to the Squarespace and it will hook them up correctly. You can change the icon size there too. And yeah, that's pretty much rock in from the elements side. Then we have style. So we have some options here to work with some gradients, some themes. We can put a white background up there that looks kind of nice to, Doesn't look like if we clicked on the homepage or can we go back to home? Not exactly at the moment, but I'll tell you what. We're going to leave that just the generic style because I actually liked the original style okay. Dynamic. And we have the option of adding a border, which doesn't really look great at all. So let's leave that alone. And you can set it to a fixed position. So basically, what that means is it's never going to resize in a way, it's going to stay exactly the way it is. Now, you can just use that too basic or turn it off even cool. So what we have here is you can actually create a specific view for desktop and mobile. So on desktop here, this is what it's gonna look like and I'm more bile, this is what it's gonna look like. And you can kind of have some settings here. You can change the menu icon. You can change the thickness of the Menu icon. You can look, showed what the menu is gonna look like when you open the menu on mobile. So that's very, very good. That way, isn't it? Then desktop as well? Not a lot really to it. You know, what we need to do actually is I'm going to click Save up here. So always click Save. And I'm going to make sure that we remove this contact here. So I'm going to remove this contact down into the not linked section because we want to keep the page. I don't want to delete the page. I just want to make sure it's not in the navigation. So now look contact sticks out, which is kinda nice. If I go back to the homepage, as you can see, it's updated. So now it's really starting to take shape really nicely. What we're gonna do next is we're going to look at the information down on the bottom of the page here to filter sort of photos also use on every site. So you can come in here and you could basically change this. I didn't notice a set to the team, but you can change this to the site name, Kevin's classes. If you are making this for an agency, you can may say made with or et cetera. Or you could just say something that copyrights 2022. Kevin's classes. Even though it's a copyright symbol, I don't know how to make a copyright symbol on my keyboard. You might have to copy and paste it from somewhere. We can just write down copyright. Here. We have our address. You can put it into details here basically, you know, 12 tree or candles street, Dublin, Ireland. And then a phone number, 0112222. Okay. Here basically, we have the option of adding, as you can see, some of the pages, so somebody's pages are completely removed. Now. So as you can see, this one says about and it's linked to the about page. It's still called about, isn't it? It is. Of course, That's fine. Location. We can change that to contact. Highlight that. Click your link icon, and then change your link to web address. And you can basically, or you can change it to page, sorry, and then go contact and save. Okay, Cool. So basically you can tell that these are changed to do to change the color and underlying according to the theme. Anyway, that's the way it's set up. And you can change each of those or you could remove them completely if you wanted to. And then these links basically are working the exact same way as they do in the above. If you want to make sure you have your Instagram and social links connected correctly, you have to basically click on them. Click on which one you want to show an ad in the URL. And that's the same for our header one up here. What you can do is you can actually add more social links. So you can type in YouTube if you wanted to. You have to click edit and then add a social link, sorry, YouTube. All you have to type in the URL itself and it will pull the icon. My mistake. So if you have a URL, put it in there, it'll pull the icon. Okay, cool. That is essentially that. Guys, as far as I know from here, it looks like we're we're pretty much done our website. Just to have a quick look at what that looks like. We click save, we go back. I think that's pretty rockin, I won't lie. We can go to mobile. And as you can see, Squarespace is pretty cool at Lincoln this stuff up for mobile, it does a great job. You wanted to edit any of these pages. You can open the editor and click on the mobile icon up here as well. And you'll see that that will open up the options to edit our mobile to, which allows us to kind of make the changes that way. But as you could see, stuff is really, really responsive using a, using Squarespace so you really can't go wrong. Okay guys, that's all we have ready for this video. In the next video, we're just going to look at basically the last couple of settings along the left here. And signing up for Squarespace and what kind of plan you should pick if you wanted to pick a plan. So I look forward to seeing you in that video. 15. 15 Domains, Subscriptions and Trials: Hey there and welcome back. In this video, we're going to just wrap up on a few things in Squarespace. Okay, So going back to our settings with our lovely brand new website, look how great this is. It brings us to all the places we want to go and do the things we want to do. So with this website in mind, let's look at the final settings on Squarespace. So here we have pages. We've looked at that already. We have our online store. We won't look into the online store at the moment. We're going to just close this and go back. I'm going to try and create another course completely based on the online store. Okay? So that's not something we're looking at right now. Marketing. Under marketing here we have some options for email campaigns, profiles, some SEO details. So you do have some SEO checklists and things that you can work out here. For example, you could set the homepage SEO settings here so, you know, for your site title. So, you know, when you search Google and if I searched genome, web design, web design, look how the options have a title and a kind of bile or meta description underneath that title. And Meta description can be customized. Essentially, that's what you can do here. Instead of Kevin's courses, we could put in like modern designs at a fraction of the cost. That could be the title. And then basically you can change your description. You could go like get in touch today, when if you would like, et cetera, et cetera. Again, this is a lot to do with SEO. It all depends on keywords you want to use. You're going to maybe do not have to type something like this in there. But it all depends on what people are searching for. So definitely if you know a bit about SEO, this is going to be good fun for you to have a bit of crack in here anyway, click Save after any time you make settings changes anyway, for sure. So that's going back to our marketing location management, not something we need to look at right now. That's on a big deal promotional pop-up. You can make pop-ups appear like this. And you could do basically change what they say and what they do. There's a lot of things here. You could say, join our mailing list and somebody would type in the mailing list and subscribe. You can decide what basically is going to happen after they do that. It's a premium feature. So it depends on what kind of feature though, what kind of package we pick soon, which I'll show you. Again. Let's just even go back. Analytics is where you will view the analytics of your site depending on who visited your site, where and how. It's very interesting, I would definitely have fun looking at that profiles. You don't need to worry about profiles. You're probably going to be the only user for your account. I'm sorry. No, I'm skimming. Sure. Somebody thinks they're not just that generally important for to get started with. And this way, you know, settings, this is the big one really. I mean currently or a site is private. So if we wanted to make our site available, we actually can't. We have to upgrade first, but that's where you would change that. And the next big one here really is, is our domains and our workspace. So have looked at this under the domains section, we can actually buy a domain or user domain you own. So with Squarespace, if you would like to buy a domain, you can select, Get a domain. You can essentially sign up pro domain. So Kevin's courses.net is available. And I can add this to the basket. And basically by this domain from Squarespace and they'll connect it to my site for me, hey, sorry, I believe my video cut out for a second so I might do a fade in, fade out right there. But anyway, as I was saying, basically yes, you can select, Get a domain here, find the domain that's available on the web, and you can add it to your account and bias from Squarespace so you don't even have to deal with a third party. So that's another very useful thing that you might find because otherwise you have a kind of this, this is your domain at the moment, coconut owl. So it might not be too useful if you have a domain that you own, you can always connect it using the domain you own type in the domain if you own it somewhere else, and you can link that up later as well. Now, Google workspace is also here too. So what you could do is when you have your domain sorted, you're able to essentially sign up for Gmail, but which your business? So if my business was Kevin Kevin's courses.net, I could have an email address called Kevin at Kevin's courses.net or info at Kevin's courses.net. And that might be something useful. And you would pay for that through Squarespace rotted in signing up for them directly. So they're really giving you a lot of options here to really centralize everything. Very easily. Now the last thing I look at here is billing, okay, so under our subscriptions, it says we don't currently have a subscription. We're on a trial subscription at the moment. Let's click on website. And we have our trial for another few, couple of weeks. If I select an upgrade, we get to see some options. Okay? So here we're looking at the beginning one starts at €11 per month. That's for me. Now, if I put in US dollars maybe or I have is that Australian dollar? Aud, maybe you're pounds. I'm just going to look at the Euros for now. It's €11 per month. I don't know how much dollars that is. Maybe 1213, $14. What you can do is you can pay annually or you can pay monthly. So currently it's annually. And the personal plan allows you to basically actually gives you a free domain for the first 12 months. So the domains were just looking at all of these plans. Give you one free year of a domain, which is normally like 20 or ten or $20 a year. So that's cool. You get your SSL. All of the cool stuff included video storage. So if you wanted to add lots of videos, you want to get up to 30 minutes video storage. And there is all of this stuff that's included here, which is quite great. Now, you might look at the business plan here and look at some of the things that business plan offers. Like, for example, if you want to sell items online, you're going to have to get the business plan because that's the e-commerce integration. There's transaction fees with this business plan. If you wanted no transaction fees, you would go for the commerce plan. It's a bit more every month. But if you're selling lots and lots of items, and that 3% is more than what this extra fee is, maybe it's worth. Did you have products? You can accept donations, gift cards. And as you can see, there's a lot of stuff here regarding like almost like marketing tools and e-commerce tools that you might have to upgrade. I think for the type of website we looked at today, the personal plan is probably a very good one. You can pay monthly if you'd like, but it's €15 a month. But if you pay for the first 12 months, you basically it works out €11 a month and you pay it all at once. So if I select this, it essentially today, it's going to charge me a 132 plus VAT at a 162 Euros. And if I just wanted to bite a month, let me go back there to upgrade by monthly, select. It's going to charge me 15 plus fat, 23% in Ireland, which is 18 Euros, 40. So then I would just buy it here basically. So that's how it works. If you want to cite for only a couple of months, maybe by monthly, that's better a better option for you if you want to buy a year legal for that. If you want to cancel this and you had great fun building a site together, but you've just have no interests and you don't want them following up an annoying you later. You can just select Cancel trial here and delete your account. That's absolutely fine too. But I do suggest that if you're not really into learning a lot about website building and coding and all the stuff that comes with Squarespace is really the all-in-one solution. It's fantastic. It does some great things you can do with this, this website, just tool and freely. You can integrate a lot of stuff with it. Anyway. All of that being said, I believe we've covered everything I've set out to cover in this course. I'm recapping. We've looked at how to sign up, pick a template. We've picked a some images, some basically rebuild some pages, renamed some pages, added pages. We edited all of the sections content. We didn't edit all of them. But you do have an idea of what I mean, where you'll know better as to what you want to put all those extra pages for your business. But we do, like what I would suggest is have a look at all of the elements. The way we could drag a photo box and a texting, it does kind of blocks a lot, like just create a test page and just add lobes of the men and just see what happens and have fun with it, and drag them around, drag them to the left, drag them to the right, and see how the elements fit with each other. The best thing you can do is put an hour aside and just go crazy with this because you don't have to give them any credit card details. To start building a website with Squarespace, you can build what you want first, learn from all of your mistakes, and then sign up when you're ready to sign up, you know, and I hope this course helps you in gut. You started with that. Because you've got 14 days to try this, which is loads of time to get lots of playful stuff done. Anyway. Thank you so much for the course. For taking this course. If you have any questions, please do put them in the discussion tab or send me a message. And if you'd like to the course, please do leave me a review. If you feel there's anything I can improve, feel free to let me know as well all the best. And I hope to maybe have some more courses like this up soon. So do check them out if they are available on my profile. If not, that's okay. I probably have them coming soon. So anyway, thank you very much and thanks for taking the time for taking this course. And I wish you all the best.