VIDEO TRANSCRIPT:
Okay, let's take a look at the Scaffold
modules
and some of the common themes you see
across each module.
There's a bunch of different modules in both
Scaffold Light and Scaffold Pro.
Scaffold Light has
fourteen modules, and then Scaffold Pro
has, uh,
twenty-six, so about double.
And each module in Scaffold Pro has
some more features that you don't get on Light as
well. But
these, uh, modules are very,
um, they're, they're
very different from one another. That's why they exist.
They each serve, uh, a unique purpose,
but there are common structures and themes
in each one.
So I just wanna show you what those are real quickly
here. So
in each module,
you have your content. So this is a hero
module here. You have your content section, and
then you have your style section.
So where you find a lot of commonality
between every module is definitely in the styles
section. So let's take a look at that real quick.
So in the styles section,
you have some main,
uh, core features
that are in every module. You have the spacing and alignment,
background, and animation.
And animation is actually something that you only
get in Scaffold Pro.
And what it is, it's, um,
it's g-- when you scroll through a page, there's, like,
little animations of things, you know, they... how
your page elements populate onto
the page so they can kinda,
uh, fade in, or they can come from the side
or things like that. Let me actually see
if I can show you an example here.
So if I reload this page,
you see how that--
these, uh, page elements, they kinda animate
into the page.
So that's what the page animations are. That's, like, a nice
kind of polished look,
but again, that's only on Scaffold
Pro. Um,
so you have your page animations where you can, uh,
change it. And by default, you have to select
this button to enable them in the page editor,
because
if they were enabled every time you made a change
to something in HubSpot,
it would reboot the animations, and it would make
it kind of a pain to edit them in the page
editor. So if you are on Pro and you do wanna
change some of your page animations,
go to that tab and select Enable.
And then you could see here where you can change the
animation type. You have so many
options here.
You can change how long they are, uh, or how,
how much delay there is when,
when the user scrolls there, if you wanna delay
it for a few seconds.
So, but you can already see how it's, uh,
made it hard to see what's going on on the page. So
that's why these are
disabled by default, but if you want to
edit it, you just check that box.
Um, let's go back to
the style here.
A common thing is spacing and alignment. So
one is to full width container, so that makes
it go across the
f-full width of the page.
Um, it's not something you'll use very often.
And then everything
in the modules,
almost everything is divided
into three categories. You have laptops
and desktops,
tablets, and smartphones.
So this gives you settings that every--
almost every single thing you could do in here, you,
you can break it down to those specific settings
because that enables your
page to be very,
uh, responsive. So it looks great on a desktop.
It looks great on a laptop. It looks great on a tablet.
It looks great on a s- a
s- cellphone. Th-- Like, that's
what, uh,
modern web
building is all about. That's what
modern web design and development is all about, is
responsiveness to different screen sizes.
So here,
um, what we did on Scaffold
is we gave you the options for each thing, and then
you can, you know, say you wanna hide it on desktops
and show it on cell phones or whatever. That's what these
things do. So if I hit hide here, you could see it disappears
'cause we're on a desktop now,
so now you don't see it. So
there are use cases where you might want something
to look good on-- You might want it on a homepage
on a desktop,
but on a cell phone you don't want it there 'cause
you have limited screen real estate and
maybe it's a really high-resolution image,
and you can't really get what you need out of it on a
tiny screen like a cell phone. So you might wanna,
um, go down here to smartphones
and select
Hide on smartphones. That's just
giving you the one option.
But here, um,
you also have text alignment, so you could change if
you wanted things to be center aligned
or, uh, left aligned. I think these other
options you're probably not gonna use very often, but
they are there.
You can select how much margin you have above
and below, and you can change your padding.
And then this is
where it gets important to
kind of explain
how this thing is set up. So
Scaffold is built on
s- a framework called Bootstrap,
and that's actually what HubSpot is built on as
well. And most modern websites
use Bootstrap or something similar to it.
And th- And what you need to know, a- and you don't
need to get,
you know, bogged down in this and make it
super complicated,
but Bootstrap works on a grid system.
So there is a grid
of between one and twelve.
That's how wide a row has.
You have these different rows here,
and they can be twelve units
wide. And you can either have twelve
units at one width, uh, each,
you can have six units at two
width each,
so on and so forth. So you can have one here
that's four
on one, uh, column,
and then it's eight on another.
So I, I hope this isn't too confusing, but
I'll go back here so you can see,
uh, kinda what I'm talking about here.
So here we have content column width,
image column width, and offset width.
So what do these add up to?
Five,
six, one.
It's twelve.
So if I set my content column to
three now, you could see now it's
narrower, and I could change this
to eight,
and it equals twelve. But then if I set this to nine
Now it's down here because I-- we went over
the width of 12.
So that, that's kind of, uh,
you know, how that works. So let's change this back
to five
and then six,
and then you have this offset here, which is like a,
a gutter right there. So if I change
it to zero,
now there's no space there. If I set it to one--
So that's just one example of how that works.
Um, so that's how the spacing and alignment
works. And you're gonna see this kind of,
um, come up again in the different modules.
So just all you need to know,
without making it super, super complicated,
is each
row is made of columns,
and each column, when added up,
can be 12 wide.
So we have one column here that's five,
one column here that's six, and then another column
here that's offset,
and this equals 12.
So I, I hope that's not too confusing
for any,
uh, newer web developers out there.
But let's go back to style.
So that's spacing and alignment. We already showed
you animation.
Then we'll show you background. So you could
change the background color
to, uh, you know, you can, you can change
it to any one of these colors. There's
a bunch of different colors you could change it.
Also, when you change the color, you could change the
opacity of it.
Um, you can add a gradient if you
want. So I'm not gonna go
through all of these things right now, but
basically, you can go around and, and mess around
with things. And then, uh, there's
also each thing here
has your grid
pattern here. So if you wanted to, you can get rid
of the grid pattern. So every module has that
option. If you wanna add that grid pattern or get rid of it,
everyone has
to change the colors or put a gradient or whatever.
And, uh,
hero modules have the option to add a background
image as well.
Or I think the row module has that as w-as
well. So you have this where this is
more of a structured
module here.
So what that means is you have predefined.
You have a top badge, a heading, a subheading,
and then the image on the right column.
And then you could see some of these styles for top
badge heading,
subheading. So you can, you can change the font
weight, the letter spacing,
but in the top badge itself, you
have things that you could change. So you can make the
color, uh,
like a lot of this other stuff. Say I wanna make
it green, which is success.
Uh, I could change the size of it, say I wanna make it
bigger. If I wanna
make it all uppercase, I could do that.
And there, there's just a few different things you could do
here. So that's,
uh, within,
within the content editor. So I go back
here. That was the top badge. Now I do the heading,
and I say, "Launch your product with
us." And you see it changes right
there. But actually, that
shows something else that's cool about this module.
So see how there's this with scaffold
and it's highlighted there?
So what you could do here
is you can select this box
here, add highlighted text,
and you paste in the text you wanna
highlight, and then there's different options for like,
you know, just to give it a little extra attention if
you wanna really highlight one of your features.
But I, I feel like I'm kind of jumping ahead here. So
this is your heading.
You-- Like everything else, you can adjust the color.
You can adjust if you want it uppercase,
lowercase. And then something that's really important
for SEO
is that you can have your heading tag here, so
I can make it H3 if I want,
but then the display size of the heading
is completely independent from
the tag.
So it is great for SEO 'cause we can, we can
say we want a huge heading that looks
massive,
but for SEO purposes, we might want it to be H6.
So you could do that on every heading
in this template, so that's pretty cool too.
And then once you're done with those main sections,
we have extra content here.
So you might want-- Here you can see we have a list item
and buttons.
So if I go here,
there's all these different things I can add. I can add,
um, images, a list, text,
a, a CTA. I can add buttons.
So that's just
w-the hero module. And then this is another
split content module, which is very similar
to the hero one. It's very structured.
And then let me show you
the two powerhouses of this,
uh, theme
are the cards module and the
row module. So this is the cards module.
And you can see this one,
it's way more flexible, so it's a little
less structured.
So here I click in it,
and I have my four cards here, and I, and I have
my row settings here.
And here I can select
how many cards I wanna show per row.
So I can change it from two to three
to five to six.
So let's change it back to four like
we had it.
I can select the spacing I want,
so, you know, how,
how much spacing I have between each card.
I could choose the padding within the card.
And then same as before,
you could change it on different things. So I can have
four cards per row on laptops
and desktops.
Then I can click here, I can have two per row on
tablets.
And then on smartphones, I can have one per row.
So if I go here to preview it,
and we're in a smartphone,
you'll see now it's on dark mode on here and
light mode in the editor, but you could see
it's showing one card per row.
So that's how that works. And I'm gonna show
you these,
the card and the row module can do
crazy things. It is
extremely flexible. It's,
it's something that I wish I had on HubSpot
a long time ago.
So I'm not gonna go too much further into
this because,
um, it's, it's probably best for me to dive
really deep into these.
But just to give you an idea of how these work,
so you have-- You set your cards here,
and it's similar to row. The row works very
similarly.
Um, and then
I ha- I can add cards, I can remove them, I
can rearrange them.
And then if I wanna edit inside here, this
is where I choose my content within.
So I have my icon, my heading, my,
my text here,
and then if I wanna add, you know, what if I wanna
add, uh,
say I wanna add an image?
So now I have an image in there.
And then I wanna add
Uh, let's say,
so some of these features like form, embed
code, CTA, social links, these are only
on pro. But say I wanna add,
um, let's say a badge.
So now I can add that little badge there. So there's a bunch
you could do in here.
I've mentioned it before, the best way for you to learn
is to go here
and poke around,
but I'm just kind of trying to show you
the basics. We're, we're gonna have another video
dedicated specifically to the cards module,
but the point is
there's two main types of modules. There's ones
like this
that are probably a little easier to edit because
they're so structured, because they're so rigid.
And then there's ones like the cards module and the
row module that they are just like, you could do
crazy things.
It's very flexible. So I'll just show
you one cool thing right here.
So I set the cards per row four, so
this gives each card a, a width of
three, three, six,
nine, and 12, right? Everything
needs to equal 12.
But I can click inside this card,
and then I can go
right here, create unique card width,
and select that,
and now I can make this card however wide I want.
So I can make this
six, and now the other cards will keep
their default width, universal width,
but I can add it. So this is what makes this so,
um, flexible and powerful, and
the, the row module is basically the same
thing with just without borders,
uh, like this.
But, um,
but yeah, you have your, your unstructured
modules
and your structured modules, and each thing basically
has your universal settings where you can,
uh, adjust the spacing,
uh, you can adjust the background,
uh, color and pattern and, and
gradient, and you can adjust the page
animation. So
I, I hope that wasn't too much for one video.
I, uh, again,
I'm just trying to show you the basic,
give you a surface level understanding of this,
and you can go in there and you can start breaking things
and messing around,
and then you can always,
uh, open a support ticket or something like that
if you run into issues. So
that's it for now.