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