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.