---
title: Quick Start Guide
description: Learn how to effectively set up your brand identity and publish your first page after installing the Scaffold theme.
---
[Skip to content](https://scaffold.terrier.llc/docs/quick-start-guide#main-content)
Open main navigation
Close main navigation
- [Contact Support](https://getscaffold.app/docs/getting-help-with-scaffold)
[Contact Support](https://getscaffold.app/docs/getting-help-with-scaffold)
How can we help you?
- There are no suggestions because the search field is empty.
1. [Scaffold Docs](https://scaffold.terrier.llc/docs)
2. [Getting Started](https://scaffold.terrier.llc/docs/getting-started)
# Quick Start Guide
## Learn how to effectively set up your brand identity and publish your first page after installing the Scaffold theme.
---
###### VIDEO TRANSCRIPT:
Hi, welcome to Scaffold.
I'm Jacob, I'm the creator of Scaffold,
and this isn't gonna be a super long, intensive
tutorial or anything like that.
We do have a huge documentation library
at getscaffold.app/docs,
uh, that goes into detail of different subjects
on how to use the theme,
and you can also reach out to support
at support@getscaffold.app.
But what we are gonna do is, in the next few minutes,
I'm gonna show you the handful of things that I recommend
doing first to get started as quickly
as possible.
So let's get into it. \[upbeat music\]
So the first thing we're gonna do is actually download
Scaffold Studio.
Scaffold Studio is a free Chrome extension
that makes the editing experience in the HubSpot
Page Editor
significantly better.
So once you download Scaffold from the Theme
Marketplace,
you should have instantly gotten an email with the subject
line, "Edit your pages faster with
Scaffold Studio,"
and it looks just like this.
It may have ended up in your Promotions tab, it may have
ended up in your spam folder,
but if you search for that subject line in your inbox,
you should find it.
Once you click on the link that takes you to the Chrome
Web Store,
you'll see the listing, and you can add it to your
Chrome account.
So I'm gonna go here,
add my extension.
You'll see it's been added,
but I have to click on this little puzzle
icon to this dropdown and make sure
that I pin it to, to my toolbar
so that I can have access to it when I'm in the HubSpot
Page Editor.
So now that that's done, I'm gonna go to the Page Editor.
I'm gonna reload my page real quick,
and now you can see how Scaffold Studio works. So what
it does is it makes it so when you click on
anything, it automatically navigates to that
field in the HubSpot editing menu.
This makes your editing experience significantly
faster and more intuitive,
and it just speeds things up a lot.
You'll also see this little paintbrush icon,
and then when you click on that, it'll take you to the corresponding
Styles tab for that element.
If you go to the toolbar here and
click here, you can see that
we have responsive screen size settings
here that we can change, so
it makes it so you can easily edit for different
screen sizes when you're in the editor.
And you'll also see that this corresponds with
the predefined screen sizes that are
already set in s- the Scaffold themes.
There's a bunch of other features that I don't wanna
go over right now, and things are,
are constantly being added,
but this should be a first step, especially
if anyone that's editing in Chrome.
This is gonna make your editing experience significantly
faster and smoother. \[upbeat music\]
Okay, so now we have our theme installed in HubSpot,
and we've got our Chrome extension set up.
So the first thing I always recommend
is to not go out and create pages or anything
like that, but the very first thing is you should set
up your brand
settings within HubSpot.
So the fastest way I usually
find to get there is just to go in the search bar and type
in brand,
and then you'll see brand identity.
That's what we wanna look for.
So we're gonna click on that,
and you'll see here this is where you set
up your logos, your favicons,
which is the little, tiny icon that shows in the,
uh, browser tab there,
your brand colors, your fonts,
and also set up your theme.
If you've been creating pages and using other themes,
you might see another theme here,
and this is where you would go and just switch
to set Scaffold as your active theme.
So I'm gonna go and set the theme here. \[upbeat music\]
And now I'm going to add my logo.
And for the logo name, I'm just gonna put the company
name, Terrier
Digital LLC.
I'll copy that and put that as the alt text as
well. And then for link, I actually re-
recommend leaving this empty, because by
default it'll link to your homepage.
So I think that's usually the behavior most people
want, so I recommend leaving this empty.
Now I'm going to add the favicon. \[upbeat music\]
Okay.
And now we're gonna add our brand colors.
So obviously,
you can have your colors set up however
you want. I'm going to just put a few example
colors here.
And you'll see in a, in a minute that all of
these colors, and basically all the settings
we're, we're doing here,
tie into your theme settings, the global
Scaffold theme settings. So these colors that we're
setting up here,
in the next step you'll see how they actually map
to your theme settings, which then map
to the options you have available within
the Page Editor.
So I'm gonna save this,
and it's the same thing with these, uh, fonts. We're
setting up our fonts here, and these map
to the theme settings, which then map to
your Page Editor.
So I'm going to select here Primary font.
I'd usually, uh,
define this more as actually, like, a heading font,
so let me just maybe
find something with some sort of,
um, serif pattern.
I'll do this, actually. I'll just do this Palatino
Linotype. I'll save
this as
what... It's, here it's listed as primary, but
it's mostly, like, your heading font.
And then you have your body font.
So I usually like to use a sans serif font
here, so I'll do Public Sans.
And then you can have your fallback s- font, which is basically
just saying, if the fonts you
have chosen are not available in the browser,
like, what kind of plain font do you just wanna
set up. So I'm actually, I'll do Tahoma.
Okay, so we have that all set up. In the next
step we're gonna go look at the global theme settings,
and you'll see how all these settings we set up
here map over to that. \[upbeat music\]
All right, now we're going to go into the
global theme settings, and there's actually
multiple ways to get there.
One way is that when you're in the brand identity,
you can go to Edit Preview, and this will take
you to those settings.
But also, inside any Page
Editor, you could see on the sidebar
this, uh,
paintbrush icon, the global theme styles,
and that'll take you there as well. And you can also
click Edit and click on the theme right there,
and that'll actually take you there as well. So there's a
lot of different ways you can end up on the global theme
settings for this theme,
but since you're probably already here
from the last step, we'll go this way.
So I'm gonna click Edit/Preview.
And now you can see
all the options you have here. So you have global
colors,
and you can see what I was talking about, how these
were the colors that we just set in
our last step, and you can see how they're linked.
And you can actually tell they're linked because it says, "This
value is connected to your brand settings."
And if I were to click this and change this,
you'll see now that that link is broken,
and I can click it again to reconnect
it. And you could s- actually see right there
how it changed. So it went from,
uh, blue to red,
and now it seems to not have updated again,
maybe because I did it so quickly.
So let me change that to red again.
It's red.
And let me go back,
and see it's back to blue now.
So we have those. We also have additional
colors that aren't in your brand settings, and I call
these the utility colors.
So we have, uh,
you know, success, info, warning, and you could really
change these however you want. We have the background
colors.
Um, you can see the fonts here.
Exactly like I described, the primary font
is your heading font.
We have your body font,
and then I actually give you one additional font
that I call the accent font.
And you could use these for, you know, different, different
ways, however you wanna set it,
but it's just one extra setting. So
I- in the page editor, if you wanted to now
set this,
um, badge here to
have the accent font for whatever you set,
whether it's a monospace font or a cursive
font or whatever,
you can do that as well. But there's really not
too much else to go on here. This
is one of those things where you kinda just wanna go in here and
explore, and you just wanna think about this as, like,
this is how you make
site-wide changes, right? If you have a massive
website, or even if it's not that massive, you don't
wanna do things manually across the website. Say
your brand colors change from
blue and orange like we got here to yellow
and gold. Well, you would just go in here, and
you could do this in the brand settings as well, 'cause they're,
they're mapped,
but you can change your colors either in the brand settings
or change it here,
and it'll just automatically update across
your website. And this is also what maps
your options to what you have on the page editor,
which we'll see here
in the next section in a second. So anyway,
that's the global theme settings.
A lot to go on here. A, a lot of different ways
that you can customize your site,
but it's really one of those things, like a lot of these things, that
this is just an introduction.
You're gonna have to go in there for yourself and poke around
to really get the gist of it. \[upbeat music\]
So now we wanna create our first page.
To get started, you can go to content,
and then you can click on either website pages or landing
pages. I imagine if we're just getting
started, that you're probably gonna wanna go to website
pages first, where you can set up, like, a homepage
or how it works page or anything like that.
So we're gonna go to pages.
You see here this portal doesn't have any pages
created yet, so we're gonna go to create,
and we already have Scaffold Lite set up
here. If it wasn't set up,
you can click this link here, and
you'll see your options of the themes you have available,
and you could select to use Scaffold Lite as your active
theme, like I showed in the previous step.
But here you'll see the different options we have
here. We have a few different homepage templates,
um, a few different landing page templates,
pricing page, about us,
things like that.
So I will actually do,
um...
I'll just do this one, homepage slanted
hero, and then I'm just gonna
hit to edit.
And now you can see we're in the page editor,
and because of Scaffold Studio, like I showed
you before, you can just click on what you ever
wanna edit,
and it'll take you right there.
But that's gonna be in the next step. So
for now, you see
where to go,
how to create a page,
how to select one of the templates that
are set up for you in Scaffold.
\[upbeat music\]
Now that we're in the page editor, I'll show you how
to edit the content that's on the page.
So we're going to do this,
uh, using Scaffold Studio, because that's
what I recommended you install
in the very first step, and it is just the best
way and easiest way to go about doing this.
So you'll see here, I can click on this, and it'll automatically
take me to that text.
And here I can, you know, add whatever I want,
and it'll update.
And something cool about the Scaffold theme
is that you see those live updates just
like that in the page editor. There's other themes where
any change you make, you have to hit apply changes
first, and then the whole page has to reload,
and then you can see your changes.
But we put a lot of attention to this to make sure
that that wasn't the case here.
And you can see I can edit
any text here. It'll show here, if I click on the style
icons, I have the different styles.
And you can see this is where I was talking about in the last
step, how you can have the accent
font set up.
Then you also have the different things like font weight,
you know, letter spacing, line height, all kinds
of things that you can customize here.
And it, the point-and-click
works everywhere. This heading,
this text.
If I click on this entire
column here, you'll see where I can go
to just look at more of the column settings
and things like that. So it's really the point-and-click
works across the board. But I'll click
on this icon here and just show you that I could switch
that, say, just put it to the Airbnb icon
or something like that.
And then I'll also show you,
you know, there's the different colors that you can change, too.
So one of the things that's cool with Scaffold Studio
is these are the brand colors we set
up, as well as the colors that were set up in
the theme settings.
And you can see these little color swatches here. Well,
that's also exclusive to Scaffold Studio.
HubSpot doesn't normally do that. HubSpot
normally just has that text there with
no indication of what that color
actually looks like.
So it's just, like, another little thing
that makes it easier for you as the user
to kinda understand
what you're editing and make it as intuitive
as possible for you. \[upbeat music\]
All right, so in the last section I showed you how you
can easily point and click and edit what you
need to click, and there's obviously a lot more
different ways
that you can edit things in the page editor, but this is
just an introduction video, a quick start video.
There is extensive documentation, and also
I always recommend people just go in there
and mess around and play around,
and that's how you're gonna learn the fastest. But
what if you wanna add more content that that's-
that's not already on the page template
that you selected?
Well, that's where page sections come in, and this
is one of the things I'm most proud of with the Scaffold
themes, 'cause we really packed a lot
in there for users. So you're gonna wanna
hit this add icon,
and then now you can see that there's this thing here that says
add section,
and it's gonna show up in between any of the sections
that are already on the page. So I'm gonna hit this,
and now you can see there's tons and tons
of sections here.
And basically,
I grouped similar sections together.
So rather than having, like, multiple car-
uh, pricing card sections or multiples
of, you know, things that are very similar,
I just grouped them together so you can select them,
and then you can, you know, get rid of the one that you don't wanna
choose, and it just makes it easier for the end user.
So you can see here, though, there's a ton of pre-built
sections that you can add to your page from,
uh, FAQ and things like that. So
let's actually do
pricing cards. Let's say this is, you decide to add
pricing to your page and you wanted to put that there.
I actually like, let's say we have two options.
So I'll get rid of this,
I'll get rid of that,
and then I'll get rid of that,
and now we have our pricing section.
And we can go in here,
and again, you can click on the entire card
and see the list of everything you have here,
or you can just click directly in where you wanna
edit and update that.
One of the cool things, too, is if you did make changes
here, uh, the behavior's a little
weird in HubSpot. You have to close the sidebar.
But once you do that,
you can now actually go
and save this section
and just do, you know, custom
pricing section.
And, you know, just say, "This is
our updated
pricing."
And I'll save that.
So now when I go to add sections,
you don't have to search through all the
pre-built Scaffold sections anymore.
Or say you wanna add this pricing option to
another page. You don't have to add this,
remove the one you don't wanna use, and edit it again.
You can just go to your saved sections and reuse
it, the, the one you already updated,
and reuse that across the entire site.
So page sections are awesome.
They're really, really easy, great
way to add pre-built content to
your page.
And then with Scaffold Studio, you can easily
edit that content once it's on the page.
So now you've created a new page,
edited the content that's on the page,
and added new content to make sure everything
was just the way you like it.
So what do we need to do in order to get this
published and live?
The first thing I always recommend is to
use Scaffold Studio to look at the different screen
sizes to make sure your page looks right
on all the different devices that someone
might view it on. So the thing that's really nice
about this is HubSpot by default only
has a desktop and a mobile view,
and when you go into the mobile view,
you actually can't edit any of the
sidebar,
you know, any- anything really on the page.
So Scaffold Studio solves this issue really
nicely, where you can click in here
and you can click on these different screen sizes,
and now you can see how your website looks
on the different devices.
And something else that's really nice about this is when
you're in... So right now I'm in tablet.
If I click on this settings
icon here,
it'll actually automatically take me
to the spacing options
for the screen size that I'm currently previewing
in. So it's just one of those thoughtful things
where we try to figure out, like, how do we make
this as useful and intuitive as possible
and, and really speed up the editing process
for people using Scaffold?
But to clear away that, say you look
at everything, everything looks good, you've done all your, all
your edits, just click here, and it'll just
go back to the standard screen size.
And before you publish anything, you need to go in
here and you need to add a page title.
And then your page title will usually automatically
add to your, uh, URL here,
but on a home page, obviously, you just wanna leave
it at the root.
And then you can add your meta
description as well. So I'll just put, "This
is a test
page."
And then I'll hit publish,
and now it's,
shows it as published.
This is a test account, so it's,
you know, prompting me to add a custom domain and
all that stuff,
but normally it just shows the link to
your live page. You can click on that link,
and in a new tab
or window, it'll show you what your live page
looks like. So here I'll do that,
and you can see this is what it looks like in the browser.
So it's really that simple. Once you have everything
done, you just wanna make sure you see
how it looks on different screen sizes,
then just make sure your page has a page title
a- and the URL is correct and a meta
description,
and you're good to go.
And that's it. That's enough for you to go in
there and start building with Scaffold.
I always say the best way to, to really learn
is to just go in there, start building, mess around,
see what you can discover, see what you can come up with.
And we have extensive docs.
If you go to
getscaffold.app/docs.
You can also reach out to support
at support@getscaffold.app.
And we also have a chatbot in the docs
as well that's trained on all the documentation,
so if you have a specific question,
ask it there.
It'll do its best to answer your question for you.
And then if there's, you know, something that I need to personally
step in and help with,
I can come in there and help as well.
And same with the, uh, support ticket. You reach out
to support,
and I can personally help you with anything.
Um, so that's it. We're constantly updating.
We're, uh, constantly improving and adding new features
and things like that.
So best of luck.
Happy building. \[outro music\]
- [Introduction](https://scaffold.terrier.llc/docs/introduction)
- [Getting Started](https://scaffold.terrier.llc/docs/getting-started)
- [Building Pages](https://scaffold.terrier.llc/docs/building-pages)
- [Modules](https://scaffold.terrier.llc/docs/modules)
- [Blog Setup](https://scaffold.terrier.llc/docs/blog-setup)
- [Release Notes](https://scaffold.terrier.llc/docs/release-notes)
[](https://scaffold.terrier.llc/)
[mailto:email@email.com](mailto:email@email.com)
Copyright © [Terrier Digital LLC](https://terrier.llc/)