How to Build a Custom Squarespace Website in 7. 1 with the Latest Builder (July 2022) | Kara Ferreira | Skillshare
Drawer
Search

Playback Speed


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

How to Build a Custom Squarespace Website in 7. 1 with the Latest Builder (July 2022)

teacher avatar Kara Ferreira, Websites for Creatives & Coaches

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.

      Introduction

      1:22

    • 2.

      Starting Squarespace

      2:31

    • 3.

      Adding Pages

      4:27

    • 4.

      Updating Style (Fonts, Colors)

      5:37

    • 5.

      Editing Header Format

      5:41

    • 6.

      Styling Footer Layout

      5:13

    • 7.

      Fluid Engine (Builder) Basics

      6:02

    • 8.

      About Page Layout Basics

      4:07

    • 9.

      Homepage Layout Basics

      13:00

    • 10.

      Services Page Layout Basics

      3:40

    • 11.

      Styling Squarespace Blog

      4:43

    • 12.

      Editing the Contact Page

      2:46

    • 13.

      BONUS Adding Custom Fonts with CSS Code

      3:28

    • 14.

      BONUS Going Deeper on Header Formats in 7.1

      1:40

    • 15.

      BONUS Mobile Page Versions

      1:29

    • 16.

      Wrapping Up

      0:18

  • --
  • 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.

355

Students

--

Projects

About This Class

In July 2022, Squarespace launched a new builder called Fluid Engine that is REALLY cool. This class shows you how to use the basic features to create a customized Squarespace website and includes a some easy CSS code to add custom fonts.

You will learn how to start your Squarespace website, create your pages, completely customize layouts and best practices for home, about and services pages.

This class is suitable for beginners but will move quickly!

Meet Your Teacher

Teacher Profile Image

Kara Ferreira

Websites for Creatives & Coaches

Teacher

I’m Kara - owner of Kara +Co Creative (kcocreative.com), a website design shop for solopreneurs and creatives. I’m passionate about enabling entrepreneurs to take control of their own websites. I’ve been designing websites since I needed to make one for my health coaching business five years ago - and since then I’ve built over 100 websites on both WordPress and SquareSpace. As a self-taught designer & developer, I know what it’s like to feel stuck and unable to create the website you envision for your business. In my classes, I’ll give you all the tools you need to change that!

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. Introduction: Hey, there care from Karen, co-creative here in this course, we'll be making a completely custom Squarespace website. So if you want to Squarespace website, but you want it to be a little more polished and professional and not just sort of the cookie cutter layout that comes with some of the demo content That's squarespace has. This course will be for you. You do not have to be an advanced website person to be able to do this. Squarespace is pretty user-friendly and so long as you know where to go to Customize certain things and how to add certain elements of your own. You'll definitely be able to do this. I do suggest that you have your copy and your images already selected for your site. And we'll be going through starting your Squarespace account, adding your pages, working with the demo content and customizing it all the way through some very basic stuff as code changes so that you can make the completely custom website. I'm going to take you over my shoulder and show you some options. These are Squarespace websites that are completely custom. I usually do start with a demo layout, but I don't stick with them. So yeah, let me get rid of my images. It's cut off. So again, this one's for hairdressers sites. So very different. The first one was ballet. This one's a health coach. But these actually don't look like the dental content that they are based on because they are completely customized. So I'm going to show you how to do this in the next video. Once we get started, we'll set up your Squarespace account and get going. Alright, we'll see you in there. 2. Starting Squarespace: Alright, so here we are getting started in this short little portion, I'm going to show you just how to get your Squarespace account up and running. Let's go. You're of course going to be going to squarespace.com. Alright, let's go over to my video here. So you're going to want to either hit get started. If you do not yet have a Squarespace account. That'll just take you right to this template builder. For me, I'm gonna do log in and meet you at this portion. So I'm logged in. Same process, create website, blank template or other template. I'm going to hit other template. And now I'm back where you are. If you hit get started, this is just where you'll pick a template and again, you'll be customized in this completely. So don't get too hung up on it. Just picks something that you feel like is nice and clean. If that's what you're going for or has a little bit more personality, they want that. So you can go through and browse as much as you'd like. I'm gonna go ahead. I saw this one that I want to start with. Then you also have preview if you want to see something closer up. But again, will be customizing this completely. So don't feel like you're married, have to be married to it. I'm just going to set up the demo content. So this is your site title. I usually recommend that your site title is descriptive of your business. I'm making this for a client. Okay. And the South, you can change this later too, so don't be too worried about it. This will take you through a very quick tutorial. You can kind of go through this quickly because I'll be showing you everything you need to know. Alright, So now you basically have your site setup. First, I like to go into marketing, SEO. Let's make sure the title looks the way you want it to, right? And then that's really it. You have your site setup. If you want to connect a domain right away, you can do that here and follow the steps getting a domain, or is it going to mean that you own? But other than that, once you click through and get that template, you're going to have your site started. 3. Adding Pages: Alright, so if you've watched any of my other website tutorials, you know that I first like to get started by creating all of my website pages. This gives me the ability to accurately style the header and footer and to just sort of move through and customize all my pages pretty quickly. So it's just part of my process. You don't absolutely have to start here. But what I do come into our demo site here is again, I just go ahead and create, make sure I have all the pages I want. So that will be in your Pages tab. And you'll need to make sure that you have all the pages. So for me, the homepage, okay. I'm actually going to delete that. Can't leave home page and let's create a new homepage. And again, even start with the layout. Let's start with this. This is gonna be home page as the homepage. You, this gear icon set as homepage. Okay, so then I need a class's page. And you want to make sure all of these don't have to be the same. The page title is how the page appears here in the navigation title is how it'll appear in the navigation menu. And the slug is what you would type in. And then I need my about page. I am going to call faculty. This is where it can be helpful to already sort of had your coffee mapped out so you know exactly what you need. Services. I'm going to have this be private lessons. And as you edit these, you will notice that the little demo bads that appears next each page will disappear. You have a two-word name. It's best to hyphenate it. I'm just gonna go ahead and delete all of this of conduct up here. And I'm just going to do this. That stays together. Demo out of there. I need another page, which I mentioned not going to do yet. So for me, if I need to add these things to go in the same folder. Sorry, that wasn't the folder folder down here. So now these things you will see are in a drop-down. That's my contact is not linked because contexts the button I'll show you how to spell that in the header portion. But essentially listening to create. The next thing I need is an events calendar. So that's gonna be a calendar page. Events that will be a bit different. Don't want it. Alright, so that's the order that I want. Alright, so we have our pages here. We'll go through and customize each of them one by one, starting in the next video. 4. Updating Style (Fonts, Colors): So before we go and edit the individual pages, there are a few places where you can sort of add text changes, color changes, and all of that into your Squarespace website. So I'm taking you into the style editor and show you that. For in our Squarespace, we come to page's design. Again, that's just the Design tab and insights styles. And this is where you can make your font and color choices. I'm gonna go ahead and grab my color palette. So if we have two colors, you will see this palette here. You can add your own colors as needed. Alright? So if onto the palette at the colors. So wait, you're probably going to want to keep so that we have white here. Ray, I want to make a little more gray drag that. Make this, so it's a little, alright. And then I'm grabbing a color code from a guy that is not on my screen. So if I select this one, want to change the code? You only have one. Yeah. Then then you will probably want to leave one of your colors as being black, also black or a navy or a dark gray. Something for see F7 for FDI. Sure why that's not changing to be the color that I want it to be. O because of this. So if something's not working right, make sure you, if you wrote it down. So now these are the colors that I want. Then when we go to fonts, I'm going to pause for a minute while I look at my fonts. Alright, so when we're in the font section, you can see that we have options to change the headings and paragraphs and then miscellaneous. So I'm going to select headings, family, and then browse all fonts. You can also type in a font if you know what you're looking for. Pro can danced. Alright, and you can change the sizes of different fonts, headings. Do not worry if you do not see your font. Here, you can jump ahead. There is a CSS code guide for adding custom fonts to your website. But for now we're going to proceed with this. So if you do find your fonts in here, you can go ahead with this. If not, you can jump ahead. So paragraphs, same thing. And buttons have their own font as well. Say standard for that one. And make sure if you want it to be the same on all your button types you go through and select. Then miscellaneous. I'm also going to do a Myriad Pro. All right, so now we have gone ahead and adjusted all of our fonts and our colors. Again, if you needed to add a custom font, you can go ahead and do that. And you will see two when you're in here in the editor. If you select, you also have the option of selecting a different color or adding a custom color. So you do have more options beyond those colors. But for the sake of it actually is for speed and efficiency. You do want to make sure you have a white and a black, dark gray. White for backgrounds, black dark gray for fonts. And I do tend to like to have a lighter color. I'm like this gray or this brown. So that way you have other options as background colors. Alright, so that is just your style editor section. Next, before we go to each page individually, we will do our header and our footers. So stay tuned and jump into the next lesson at for how to customize those. 5. Editing Header Format: Okay, so now that we have added our colors and our fonts, the next step is to go ahead and style the header. I will take you to see that right now. Alright, so we're going to come over here to style the header. You seemed to go to any page that has the header on it, which should be all of them at this point. So you just go ahead and hit Edit, Edit Site header. And then here, site title and logo. This is where you can add your logo. And here you can adjust the height. And then here we have some options of what you want to display. So why don't you want the button here or not? So if you don't want the button to say this, and then the style is there. Here you have a few different options. And I do have a video that goes into these in much greater detail. But this is solid, in which case you just pick the background and navigation color. This is useful if you do want to use something that's different from your color palette, otherwise, theme would be with your color palette. So you see I can choose anything that's part of my color palette. If your logo is not on a transparent background, you're going to want to make sure that it is on white. Otherwise having a transparent background logo fixes that issue pretty quickly. So those are your options there. So this is let me do it. So that's where it does not basic. Let's see now here. How fixed position. So now let's girl, I don't wanna get into scroll with me. One second here. All right, so that option is, it just doesn't display when you're in the edit mode, but for the basic fixed header. So fixed position means that the header is going to appear while you scroll. Fixed position is on if we hit et cetera, sale basic, that looks like this. Where it stays in place. Or if we edit the site header and we have it be scrolled back. This just creates a little effect where we actually don't see the header so much. So as I scroll, see it kinda disappears. Alright? So if you have your logo and you're all happy with all of that, the next thing you might want to do is if this button, it seems extra huge, which it does. So you click on it, it will. So that's the width, the height I'm concerned about. There again. This is for primary buttons, secondary buttons you might have to make. So this is play a secondary button. That's actually very tertiary button. Let's see. That's not just your buttons page. It's not editing this. Alright, but that makes our buttons smaller up here. And that's what I want to do. Someone hit Save. If you want that button to be a different color. You can also have, sorry. This is where we have this social links option. Option to be able to switch into language. You can enable that if you have a story might want to display the cart. Here. I'm going to actually change that style to solid. And that it's going to give me the options to change the button. That's not giving me the option. Then you come to theme. Mistake with latest one, but I'm going to come here, hit save for this. Site styles, colors, latest one, select latest one. Here gives me the button. Here. If I want to change the button color, I can do a custom color or I can select from my palette. Let's see what I like better. I like that one better. Palette again. All right, so that's how you would change your button color. So the header is looking pretty good. If you check out the Custom CSS code guide, you will see options. I personally would you like to remove the underline from these, so we'll do that towards the end. But if you want to go ahead and do that now, you can locate the CSS guide to do that and skip to that section. Otherwise, in the next video we will do with the footer of the website, which is down here. 6. Styling Footer Layout: So next we're going to do with the footer of your website. And the reason why we do the header and footer first is because they are on every page of your website. And this way as you go and style your website, the actual body of the page, you'll be able to see everything matches with the header and footer. So let's go do that. So picky door in the background. Alright, so here's the flutter, depending on what sort of demo template you selected. This may look very different, but not too worried. So you can go in and change everything. So again, you're going to just go to any page that has the blur on it, hit Edit, footer. And here we have the same options that we would have on any of the page sections. The header is little bit different in the photo that way, but this one is similar to all the other page sections. So only need to do is edit section. If you wanna change the background color. Here. I prefer it to be this. I can do this. I think that I do. That can be kinda cool. I want to try this one though. Then this content is up to you what you want to have showing. So I'm gonna go ahead and add the company name here. Space. So they also do have their address and the footer. They like to have. Down here. If you would like social media icons, you can put that anywhere. That would be by adding a block, social links. And you sort of click and drag. This is a very new feature. So I'm going to look funky with it myself. But basically they are the sort of grid option. You kinda cool. That blue box is where it's going to end up. Squarespace just released this and I'm really not that much of a fan, but no two here. Perfect. All right, There you go. Then if want the layout, the design, want them to be, right. Should put them under here. Alright? So you can see when you can drag something, those squares appear and that enables you to move things a little bit more gracefully than used to be possible in the old Squarespace editor. Here we want quick links. Here. Actually, I'm going to go ahead here. And here this is going to be, you'll see if I did that. I had this huge space. So hit enter. If you do Shift Enter or I think believe Command Enter on a Mac, you will get less space. So performances. What else do I want? Let's do recitals, special events. And if I need to make this smaller, I made that wants to be in a fresh box. Alright. So that's good for me. You can also add an image if you want to say add a logo version to your site. So again, you would just click and drag that where you want it. That blue box is where it's going to end up. So see here that is I don't need that there though, but if you want to go ahead and keep that, you could remove that block. Otherwise, I'm gonna go ahead and say this section is done. So to do that, Done Save. Alright, so now our footer is done. 7. Fluid Engine (Builder) Basics: Alright, so now that we have solved our header and footer, we're gonna get into some Squarespace basics how to create page changes and make edits. There is a new builder called fluid engine within Squarespace Seven 0.1. So things may look different than last time you made a Squarespace site or looked at squarespace tutorial. I'm gonna show you over, pull you over my shoulder, and show you what I'm talking about. So to edit any page, they're going to come here and click edit. You can edit the desktop or mobile view. And the new builder has made some changes so that you can really edit things separately so that things can be more responsive if you go ahead and edit. So here, like the footer section, we have edit each section or add blocks. So if I add a block, what I want to add more text to this, you can see the background imagery. It's a little more difficult, but where I'm moving, that blue rectangle is where it's going to go. Now the text is here. So that's how you would add any element. And you can see there's a whole bunch of different things. Image, button, video, text, edit the background of a section that's in the section settings. So if you don't want a photo but just a background, whether that be a white background or a different color background, you would delete the image. And I want to change this color combination you can select from your palette. Like this. These colored backgrounds will also have a different overlay effect on the images. So this will probably have a different effect on an image, then a different one. So I got an add an image you can upload from your computer. If you need to use stock photography, you can browse stock images from your libraries is if you have an image that you want to use a multiple places on your site, you can select it from the library. No ahead and browse stock images. I do have photos for the site, but because their children and grants classes and while they have released to be on the website that I've released to me in the course. I'm going to use stock photography, do the course. So you can see here, this circle dictates the focus of the image. So if I move it up, it'll be bit better, more so her face isn't cut off. So if you click out, that'll do this. Other thing to note, you can also do inset that creates more whitespace around the images. So I like that. Leave it full bleed. This is a little hard to read. I'm gonna go ahead and get rid of that. Get rid of the button, and delete anything that's clicking, delete it. And I'll get into more sort of homepage design basics. The alignment, the height is, this will stay large. This is just a lot of content up top, the middle. Della want it in the middle. But because it's still not centered, part of that is I just need to click and drag. So now click, hold, drag. Now it's much more centered. The colors are a bit tough, so I'm gonna see if I can change that. That's still hard. But you can see I'm not changing the background image, but if I just change, this does change. So that's a little bit easier. Alright, so that's sort of your backgrounds. Even though that's the header section, that same process will apply to any other sections. Texts you can mostly just edit on a page. So if I wanted to delete any of this and copy and paste my copy and I can do that. I can also easily change. So I want that to be smaller. This to be bigger. So image, if I select this, will give me the option of replacing it. Text the button. If I select this, it'll give me the option to create the links. If I hit this gear icon, I can immediately connect it to other page on the site. This is just a really quick overview of what you're willing to pay attention to is what this new builder. We have a lot of. Let me go over there. Yeah. So I can put text over an image. But I have a lot more agility with the new builder in terms of placing items. So if I want to do this, I can also make sure it doesn't go over this image. Make sure this is closer to this. So I click and drag makes things a lot more flexible. Again, if this is too much, you a lot more flexibility with the new builder. But remember the click-and-drag. They're placing an image as the background. Those are really the high notes of these sections. I'll get into some of the more specific things like newsletter sign-ups and contact forms in a later video in the course. But for now that's sort of your quick run through of how to use the new. Since it's called fluid engine, the new Squarespace builder. So here it is. Yeah, fluid engine. Alright, the next one, I'll go over homepage some basic layouts and start to build out this page. I'll do the same thing for an about page and a services page. Just so you can see some different practices and best practices for building out those important pages to your website. 8. About Page Layout Basics: Alright, so now we're going to quickly get into your About page and I'll show you some sort of layout tips for that. If I'm in the Squarespace website, which this one, the About page is the faculty page. So I've renamed it. But if you look at it, this is one of those templates. It's kind of, I don't know who thought this was a good design. This image is all the way down the middle of nowhere. There's a lot of unused real estate, which sometimes is nice because it gives the IRS, but sometimes just not helpful. So if we were to use this, one thing I think you could do if you hadn't layout like this. So you can move this image up here. Because like this, so I can get to this. I want to move this text forward. So that's this. So now it's on the image. Move this back out a little bit. But I'm going to make that smaller. Too small because now there you go. So if you are a company that just needed a simple, just about who we are a little bit of your mission statement. This is a layout that could work for you. You would of course want to kill some of this extra white space at the bottom. For the belly site. For the belly, say, we're going to actually have a bunch of different people. So this would be like instructor one. If we needed to have more of them, we could be looking at Section make this section a different background color to alternate analysis instructor. To get that section. Instructor. Three. It's gonna be a nice way to lay out all of the different structures. If you have more of a coaching practice, I can't show you my about page on Skillshare, but this is a copywriter at friend of mine. So what she does is again, introduces who she is and she wants to be very personable. So she has this sort of connection points. And then she lays out the copywriter. And then she basically has uses her About page to share why her services are different. And she has a story about how you could pay somebody a lot of money for copy or if you're businesses new, it's going to change, things are gonna change. So she has a different philosophy behind her copy. So she's talking about the philosophy. So her About page is really working to say why she's different. Thing that she has here. He or she has to get my services. The entire point of the about page is really to build confidence in you to then go buy your product or services. So she's giving the option here. And this is a Squarespace site that she also does have what she has connection called connection points. And she put this in as she made this graphic in which she uses. But you could do something similar on Canva to make a graphic and put that in there to make sort of connection points. That is a work-around. But then she has this longer story. So you want to have an about page this long. Is this an idea of how you can really use your about page to work in supporting your services. Otherwise, I would suggest keeping it short and simple. Explaining sort of what makes you different? What makes your product is different? What makes your company different? And then getting them over and adding a button to your services page. So to do that ad block button. So we'd have a button for each of these that is like view view classes, because we're hoping that now they've learned enough about this person as an instructor. They wanted to the classes they teach. So the About page is really meant to get people over to the services page. Alright, and that is what we're going to talk about next. 9. Homepage Layout Basics: Alright, so now we're in the Homepage section. This is where we'll go through some of these sections that your homepage might want to have. This is based just done sort of conversion principles and user experience. So I'll take you over my shoulder and do some things. So we're back in our demo homepage. A common layout option is this hero or banner image at the top of the homepage. This is call it the top third. It's meant to catch your viewers attention. So for this purpose of this site, it's a dance company and they offer ballet lessons. So basically we want to tell people this is about ballet. So we have an image here that speaks to that. If you don't have a business that needs quite such a strong or if it doesn't have something that's very visually representative of the business, the hero image may not actually be the best thing to put in the top third, you may instead want to put some guide texts above it. And you see you can add a section above this really easily. You can do a blank section or something like this is a good option. The text here is going to stand out, especially who made this image a little shorter, which I think I can do with the new builder like this. So if we had something like this, this little blue arrow will help us store in this section. I wonder if I have to get the height that have this whitespace. We just got to click and drag everything and drugs closer. Then to shorten this thing is, this isn't exactly the invoke style of a website having this this up here instead of this. But if you don't have a very good visual representation, you do have the option of still having an image here. But you know, it hasn't really encompasses what your business does. This might be a better way to go because this text is always want to stand out more than this text. And we can even make this smaller. This way we get into the next section quickly. So this is something that I do encourage people to do. You don't always have to do what's in style. You will I think about what is most effective for conveying your message, especially when we're talking about the real estate on the top section of your website. I'm actually going to move this section down. Since this works. I'm going to put logo here instead of this text. This is where I want to take an image. This is kind of a nice thing and it makes it really easy to put an image on top of an image. Alright? So depending on what you decide to do in order to not, you're trying to do in terms of you have an option like this or an option like this at the top of your site. The next thing you wanna do is really give people a concise description of what you do. So here I have and again, even copy and paste this from your doc. You have some pairs. I'm wondering this so badly. That's the capitalisation here. Up here and paste. This is that it tells us exactly what the business is. Text section is looking pretty big. I'm gonna make it small. And also actually give it a color. Right? This is known as small as I want it to be. So if you hit this height, you can actually whitespaces. Remove that section. Actually, I'm going to edit the background section of this one to this. So here I might have a description and upload a file this time from my computer. Here we see this text now hard to read, so I'm just going ahead and do this. Here. We're gonna do something about the button. See if I want to do this right alignment. It's kinda cool. I can change this over here. I actually do have a quote on their sites. I'm going to use this section. This is a great example of how you can repurpose. So this is a background that's inset. So I'm going to replace it in the library. I'm going to replace it from my computer. You can also make more overlay, which will help that text pop. I'm guessing we're gonna do this one. Alright. And so our quote is Josephine Baker quote. All right, here on your homepage again, this text is meant to whatever succinct Example I tend to like to be the About section. So this is really like, okay, who are we in a nutshell, this right under the hero or top third section, then we can have more of an about. So this is our mission. We go deeper in that. I'm going to clean up this text. But for the sake of just showing you a tutorial for the layouts, I'm not going to get too into the weeds and customizing this. But having an About section next. And here's this. A little bit of personality is fully optional. The next thing that you typically want to have on a homepage is a services section. This is what we call a signpost. It's just sort of giving people a way to get to different parts of your site easily. I'm looking for, I'm going to choose. This one. Can edit section is looking at the different apps, different colors. Decide what I want to do here. I'm not gonna do that. So maybe I do want this to be white. So here edit content, you can say I can't edit this title, That's because it's in here. The title. Then we need something for each of these. So the title of this little section, summer camps and intensive. And then we have the option of a button. You would put the actual link here if you are ready to put that somewhere. Sorry. And then to edit the image, you would do this. So I'm going to replace that for these sections is actually going to be important that all the images are the same size. So you wanna make sure your crop them to the same size or aspect ratio before putting them in. All right, then epsilon max out too soon. So we'll go the next one. And I don't like to do too much while it's loading because I've had it happen where it like loses this train of thought if you give it too much to do and then the image doesn't load. Then you would put a link there. Or you can change the title of the button text. And then our third option, just because it's the same size. And again, I'm just using stock photos to get this up and running. But this is how we would do the list and I do recommend this is a nice feature, keeps everything nicely lined up and all stack nicely on mobile. So I do suggest using the list feature to create this sort of signposts section on your website. Was my title spot, not fair. Now we have our signposts section. So that's a good sort of overall, very clean, approachable layout that's easy for people to navigate and get to where they need to go. Again, this button would go to a larger About page typically. Then these buttons will get people to the different offerings. There you have the homepage layout. 10. Services Page Layout Basics: Alright, so now we're gonna talk about the services page and this is where people are going to go to either view all of your services or this will be the actual sales page where they all buy. So let's go back into our Squarespace site. Would be more of a class's page. This is where you want to present. This way, it's kind of cool. It's almost like a portfolio. This is where you might want to present your different class options. So Here's where we might change our classes. And then a summary. Write a line for some reason. Alright, so this would be maybe the, so this is a section again is just the inset. So to edit this photo, I'm not to come to the background. Let's wait for it to load. So then this is where you would describe class type one. And it should be who is the service for? And then this would be learn more. So it's edit section. I want to edit the button. And that's where they would learn more about this service. So the next page would be a longer sales page. So this is kind of a neat way to lay out a bunch of different classes. You could also go back and use that list type section that we had used previously. And if your services are the same, you can actually don't be afraid. You might have some more of a lead up, up here describing your overall services or style or approach. But you could actually use the exact same services and make have these go again to those longer format sales page, a longer format sales page. I'm going to reference my friend Lauren site again, services. So this is what she does. This is how she's basically like this is what this service is. If this is used is what you need to check out. This service is if this is you check it out. So get to the details. So this is a longer format sales page. Again, we have featured testimonials and then there's a lot of copy, but she uses these broad sections. So the same way I was suggesting that you use alternating sections on the about page. You do the exact same thing here. But this is where you're going to include all of those details. What someone's going to get, what the process is, who it's for, and who it's not. If you have more than one service, your actual services page is more of this signpost section like we had on the homepage. So that's just a very quick overview of how these pages all work together. But I didn't want to share that so that you have an idea of different ways you could present your different class types. 11. Styling Squarespace Blog: So now we've gone over some basic layouts for your core pages. And you can apply the Squarespace one-on-one builder tactics and also what you saw me doing, the homepage tutorial. You can use that to basically create all of your pages going forward. But I did want to share a little about the Squarespace blog page with that one is different. So I'm gonna go to my demo site, and this site does not have a blog, but I will add one here. For the purpose of demonstrating. To add a blog page, go ahead and you actually can collect, collect, select the blog here. Then it gives you different layouts. So this is really a nice feature. You can select exactly what you want. I select, I recommend something like this or this that displays more blogs, then having them one across. So we'll call this, this blog. We'll drag it into the order that we want in our main menu. And then here you really might not have that much you need to do if you want to hide the date. So good at what I just did there was I hit edit the blog page and I was taking a second to load. All right. So if you hit edit, manage posts. Sorry, that was wrong. Section. This is where you can select what you want to display. So if you don't want the date to show, for instance, units do nine. It'd be the same thing on an individual blog post if you don't want the date to show. You can also do colors the same way. So if you want to do a background quite leg and put this in the format will allow, allow you to sort of minimize some of this. So vertical spacings, a lot. Section again, increase the spacing between posts. You can play around with these numbers and also the inset option to get things a little bit closer to what you want. Why is this? You can also change this side-by-side, which I'm liking better because this other layout was a bit stiffer. So this is an option again, the dates showed again. So I can go back down to here. None. Oh, here you go. Meta spacing. But these are where all of a sudden things are. I'm not gonna spend too much time on this since it's going to be a personal taste. But essentially you would just come through here. Doesn't make much of a difference. Vertical pattern is gonna be this kind of like. You could also change. To be like this. You have all your options here. And again, if you want to go back to the other style of blog, you can do the basic grid blog. And you can play with the spacing until you get something that you like. More. There we go. That was better. Title spacing. Sorry, I'm just playing with it. So why it might not be the most useful, especially since it's taking a while to load. But yeah, somewhere in here we will have spacing to tighten up this bottom section. So let's keep on playing with those settings. Usually have something that you like that That's already looking better. And when you're done, save. And then each blog post, again, spacing. You can play with some more, but each blog post as you edit it, you can go through and delete all of these ones. Or you can go in and just replace them with your content. Again here if you don't want the author showing edit section and you can select or deselect whatever you want. In a blog post. You could easily add images in different spaces by doing things like this. Alright, so that is a very quick blog overview. That is how you'll get your blog set up on your news site. 12. Editing the Contact Page: So the other page that we will style that's a little bit different from a typical homepage or just how you would edit any of the body of any of the pages is the contact page that one has the contact form. So I'm gonna go ahead and show you a contact page. So we do have one setup in here. These really thetas need to be simple and give people the information. So I wanted to, I honestly change that much about this one. You could add like a hero section if you wanted that just recently this. And remove the button. And just have this say contact and again with this builder will do this. Have you ever want to title section to any of your pages? You can do something like this. You could view this style, it shows up better and have that. Otherwise, this is a nice simple layout. The thing you wanna do pay attention to is this contact form. You can go ahead and let the form fields here. If you don't need some of these things like the phone number, maybe you can change any of these that you need to. And when you click into each one, you can see you can even add a description if you need to edit the placeholder text. So this would be Joe, Joe, joe.com. You can add placeholder text if you need to, but that's how you would edit any of those fields. The one that you do want to make sure that you do can make this page go live, is connected to storage. So you can connect if you want this to go into any of these places, Mailchimp, google Drive, Zapier, we'll connect it to other software. If the software that you need to connect it to. The easiest thing to do with a contact form though, is related us to do this and add an email here. This would be the email that you want. Contact form submissions to goto to be notified. Who doesn't like this. And that way this will go to the right place. So that's just your contact page and make sure that form is up and running. If you need to edit the style of the format, all you can do a bit of that from the colors. So that button color might change depending on. But if it's not giving you different option, then we're going to do the same thing we did for the button in the menu. It comes to the design, site styles, colors, latest one. And then click on the element you want to change. So this is the button that, and then I want the text to be. That would be how you would change that button color. Alright, and that's what I want you to know about the contact page. 13. BONUS Adding Custom Fonts with CSS Code: So I am in a demo site and I'm going to show you how to install custom fonts and do Squarespace Seven 0.1. This will get us around the fact that we really only have one paragraph font option and one heading font option. So to do this becomes a design custom CSS. I'm nothing in this site. So the first thing we do is add a font. So you'll need to identify a font that you like. And you're going to need either a T, T, F or an OTF file. And so you might have to buy a font if it's not an open source font, but let me see if I can find. So basically look it up. So this is the font that I'm talking about. And it's up to see if you can find a download version for it. The font Frida io is actually a pretty good one. A lot of times they do have them. So here we go. They have the OTF and the CTF and you can hit download and you're getting the files. So make sure you are the files before you go in and do any of this. But once you have them, we're going to come here. And we're gonna do is we're gonna go manage custom files, add images or fonts. And here I'm gonna go to, I have a little font folder. Here we go. Um, so you're going to open it up if there is FDF to unzip them first. So here I'll just do this one for now. Once it's uploaded, you need to click on it. And that's where you'll get the URL here. Alright, so click out of it. So next we need the add the name of it, that code. And so you'll be able to copy and paste this from your guide, the Add font face code. So this is asking for DRL. Take this URL and you're going to cut it. You're going to put it in between these two apostrophes, but that's semi-colons between there, between apostrophe, semicolon. I'm in there. So you can see now that's added here. And then you just want to name this font. So I'm going to name this file. This one's called Bodoni bold owning. It would only, alright, so now that we have the font in there and now we have to assign it. So next we're going to come here and get the assign. A font code. Will see here this is for H1. If you want it to be for your H2, you would just add H2, H3, H3, H4, H4. You can also grab. This is a little bit less intuitive, but this dot SQS RTE hyphen enlarge, That's for your paragraph one font. You can even customize that if you'd like to. All you need to do is make sure that this is reflective of what you want to assign it to. And then you just go ahead and type in this. You see this just changed that. So that is now the Bodoni font. So you can do that for as many fonts as you'd like. I recommend you be a little bit judicious about this. Too much CSS code will end up slowing down your site a little bit. So go ahead and really see what Squarespace fonts are in there that you like, and then choose one or two heading fonts. Maybe that paragraph font, I would say three max is really what you want to put in there. I wouldn't put in more than that because I want to make some others CSS Customizations most likely as well. So this is one way we can economize a little bit, but you can get those custom fonts and there, alright. 14. BONUS Going Deeper on Header Formats in 7.1: This video tutorial is for the header and that transparent option, that is, if you have some appoint one site, it used to be there and now it's not over my shoulder. And show you the different header options in the new squares, me 7.1. So this is my demo sake here. If we come over here, instead of having that transparent tab you may have been used to, we have the style and this is here. So dynamic is one treatment. This is the, this is actually the same thing as transparent as what we used to have. So dynamic well, make it whatever the color settings bar here, theme. We do this, this way. We can change it so we can put it into any of our color sides. So that's how you'd give it its own color. And the other ones are sort of treatments. So gradient, this sort of thing. That gradient. And we also have solid and this, you can make it a custom thing. You can also do a blur. See, I can play around with that. How sorry, this is the blur. So if you decrease the opacity, you're going to have this effect here. So this just gives you lots of different options. So simple, dynamic is transparent theme. You can use your color themes, solid. You can make custom colors or make this blur effect, or we have gradient as you are options. So that is your new header settings. I hope that helps. 15. BONUS Mobile Page Versions: Okay, So one of the neat features of the fluid engine, the newest version of Squarespace builder is that they make it really easy to edit the mobile versions of your pages. I'm thinking over my shoulder and I'll show you how to do that. So if we hop in to get that away, if we hop into this website. So this is a website built on the newest version. If we go to edit any of the pages, we can see this one has a lot of neat layering of images. So this is an image, this is an image, this is an image. When this first was added in and the desktop version looks really nice. The mobile version did not look quite so nice. So in order to edit the mobile version, you want to be in the edit. So I've clicked on the page, edit the page, and edit the mobile version. I'm going to toggle to this here, anything that I move. So if I move this up here, for instance, I come back to the desktop view. This hasn't moved at all. So that's just where you need to know to come to this mobile setting. And here you can move any of these options pretty easily and make sure that they're positioned, how you need them to be positioned in mobile versus desktop. So that's just a quick little bonus video showing you that setting. It does make things a lot easier. So be sure to check your mobile versions of your pages. 16. Wrapping Up: Alright, so there you have it. With these videos, you have everything you need to go through and create a completely custom Squarespace website. So take your time, go through and edit all the content. Makes sure your menus are arranged. Launch your site. And then when you can take a screenshot and share it as your class project. Alright, Thanks so much.