VIDEO TRANSCRIPT:
Let's take a look at the hero
standard module.
So the hero standard
module
is in both,
uh, Scaffold Light and Scaffold
Pro, but there are a lot
of features
that you'll get in Scaffold Pro that you might not
necessarily get in Scaffold
Light. So let's just kinda jump into
this right now. Here you can see two examples.
This is probably your most basic one.
You just have a centered hero. You have a top
badge, a heading, subheading, and then you
have some extra content here, which are buttons.
So, uh, you can add, you know, you can add list
items,
you can add images, you can add, uh,
HubSpot CTA, you can add all sorts of
things. Um,
but let me get rid of that one I just added.
Let me just go here, delete that,
and, um,
and I'll show you. So this is just like a standard
centered one.
Here is one with a background
image, and you
can see that there's, uh,
you know, we have these list items here,
a horizontal list.
Um, and then I'll show you
two other ones that you wouldn't be able to do. So you
can do both of these things in
Scaffold Light. You can have just the regular one,
or you can have the one with the background image.
Uh, but let me show you two that are only in Scaffold
Pro. So
this one
is a, uh,
has a background image, but it has a parallax
background image. So
it's just like a,
gives a parallax effect when you're, when
the user's scrolling. It's like the content scrolls
over the background image rather than a static
background.
This scrolls with the page.
And then this one, as you can see,
has a video background. So both,
uh, just having regular background,
background colors, things like that,
and having a static background image
are available on Scaffold Light, and then
having, uh, a parallax background
and a background video are features
that are only on Scaffold Pro.
So, uh, just to go in here
for a second
and I'll show you, uh, if you've seen any of the
other tutorial videos, you know that
you could see there's structured content on
this, uh,
hero section where you have a top badge heading, subheading,
and you can come in here and you can edit it however
you want,
um, and you can change the color.
You can see your changes take effect right there.
You can change the size, things like that.
These are things you're probably gonna figure out just by--
they're pretty intuitive, and you can probably figure
out just by, uh, messing around with it.
One of-- Something that was important to me
was that I wanted you to easily
see what you need to click on to edit things
and to make as little clicks as possible.
So here we, we have our hero.
We click on it, that's one.
Then we click on top ba-- oh, I wanna edit the top
badge, or I wanna edit the heading.
We click on that, that's two.
And then boom,
we can go in here
and edit it however we want. So I-- that's
just important to me, that it's intuitive. You
can look at it and figure it out
without needing a tutorial video. But hey, we're
here. Um,
but that's for some more of the advanced stuff I'll show you in
a second. But, um... And the,
and that you have to click as few times. I mean, I've
seen some other,
um, you know, templates and
themes in HubSpot where I, I have to like search
for-- I wanna edit some text, I need to search,
I need to click around fifteen times
before I'm able to find what I need to click on
to edit. So
anyway, that's just a note of like
where my head was at when I was developing this.
But I wanna show you, uh,
how this works. So
here, uh,
you have
your main content. Again, you have your top badge, your
heading. You could see
the different styling options. You can add a link
or you can add highlighted text, things like that.
And then you can add your extra content. I showed you that.
And then, uh,
if you wanted to change things other than like the
display size of the heading
or the size or color of the
top badge, things like that,
you can go in here and see that you have those options in the
styling right here. Top badge heading
where it adds, uh,
you know, you can change things like font weight or the
margin above and below.
On all-- On, on a lot of these settings you have,
uh, three different buckets to
adjust these settings. You have laptops and desktops,
tablets, and smartphones.
So that's just so you can have mobile responsiveness.
So you can make sure that,
you know, what, what looks good on a laptop or desktop
might not necessarily look good on a smartphone,
so you can custom tweak it.
And I've already done a lot of the work by pre-building
you a ton of page sections where
I've tested these and,
and tweaked these and made sure they look good
on different screen sizes. But that's just something to
be aware of. When you,
when you change,
uh, something, a setting and, and
like how it looks on a laptop,
make sure you look at the settings for the tablets and
smartphones as well,
and you can test out those different screen sizes.
And something e-else you could do is you could say,
uh, so we're looking at the top badge now. You could say,
"You know what? Actually, I wanna hide this
on a smartphone,"
and it'll just make it so if I,
if I click here to preview,
you'll see the top badge no longer shows there. So
there's different use cases for where you'd want
that. You could have a giant image or,
uh, I don't know, you can have a big high-definition
image that you just think doesn't make sense to put
on a smartphone, so you might hide it.
But, um,
the main thing I wanna show you is how you can get
these different things, how you can get one looking
like this, how you can get one looking like this,
and how you can add, you know, a, a background
image or a,
a parallax image and things like that.
So when you click on
here, you go to style,
and you have your spacing and alignment and things
like that, but you also have,
uh... So real quick actually, let's look at spacing
and alignment. So you could do full width container,
which just makes it like the full page
width rather than just aligned in the middle,
like a kind of, uh,
gutters on each side of the page.
And then you have your text alignment here.
Like everything else you have, you can
make it left aligned on a,
on a desktop and have it centered on a tablet
or whatever. All of these have
the different settings that you can set on different
screen sizes. So here it's like for text alignment,
spacing, and things like that
Then we go back to style. You have,
uh, your animation that-- which is only available
on Scaffold Pro, which
you can have it so
this is when you're scrolling, it can, like, zoom
in, or it could fade in, or it can come in from
the left or come in from the right.
So it really gives your,
uh, website... It's, like, engaging for the user
when they're scrolling through your website. It's, like, a nice
touch. So that's something we definitely are
proud to have on Scaffold Pro.
But let's look at the background.
So here you have background type.
You also-- every single module on
the background setting, you can say, "Do I wanna include
the grid pattern
or not have it?"
Um, and you have your scaffold type. So if you choose
color, you can select, you know,
what color you want,
then you could change the opacity.
If you wanna add a gradient,
you can add a gradient. So let's change this to
secondary.
And you could change the gradient opacity
and, and things like that.
So there, there's a bunch of different things you can go
on here, but I wanna show you, too,
when you go to background image.
So now you set your background image.
Uh, I'm just showing you how it works. Obviously,
this doesn't look great right now,
but you can also choose here. So
this is where a lot of the different settings go. So here
you could choose, like, where it's aligned. So
you want it to be... line up on the
bottom?
Do you want it to line up on the top,
or do you want it to line up in the middle?
Then you can also, uh, add a blur.
So if you, if you think it's hard to see your text,
you can make it, like, blurry. You can add a blur
and, uh, adjust your blur. So this is something I think is
really cool 'cause I used to...
Uh, I've been a web developer for a long
time, and when I would add background
images to
websites,
I would have to change these things in Photoshop. I
didn't have a theme in HubSpot
where I could do these things dynamically, just in the
settings. So that's why I built it like
this. So I w-- So it took so much time to
download an image,
add a blur, or make it darker
or whatever
in, uh, in Photoshop and then upload
it and see how it looks and say, "Oh, you know what? That doesn't
look quite right."
So then go back to Photoshop, make it,
and tweak it back. Here,
you can do everything in the editor itself. So
you can add a blur,
um, and then there's, like, some filtering options.
You can make it grayscale if you want.
Um, and then here's the other filter option.
So, uh,
one other thing too, you can see we have the parallax
here. So the parallax is, like,
that scrolling thing we were talking about before.
Uh, that's only available on Scaffold Pro.
[lip smacks] But on both Scaffold Light and
Scaffold Pro, you can add a filter. So I can say,
"I wanna..." Uh, well, we have dark
text here, so what I'm gonna wanna do is I'm
gonna wanna lighten this image.
And then I have this option of how light do I
wanna make it.
And now you see it takes a minute to load,
but now you see the image is lighter. So again, these
are things that I couldn't do
on, uh, uh, uh... I've never seen this
on a HubSpot theme before, so that's why I'm really
proud of it.
And this is, uh, both on Scaffold Light and Scaffold
Pro. [lip smacks] But here on
Scaffold Pro, you have dark mode filter. So basically,
the reason that's like that is because...
Let me show you, actually.
So the reason being is here
on Scaffold,
um, on, on scat-- uh, on
the light mode, we have dark text,
and then when we go into dark mode, we have dark text.
So there, there's,
uh, some use cases where you might wanna have
a different filter, a different background
filter when your page is in dark mode
than when it's in light mode. So let me go back here to
background,
and if I wanted, I could hit dark mode filter,
and then I could choose a completely... I could say
I wanna, uh, darken it or lighten it
or whatever. Uh, you'll see, uh,
you know, you-- Like anything else,
you should just play around and mess with things.
But again,
this is, like...
I, I'm very proud of this feature
'cause I spent a lot of time thinking about it, and I really
think it opens the door for
you to make your website. You, you don't have to
edit the background image in a photo
editor and lighten it and blur
it and do this and do that to see how it looks. You could
just pop in a regular image,
and you could change all these settings in the back. You can
add a blur. You can lighten it. You can darken it.
You could do whatever to make it so you can have
that image in the background, and still, your hero
is readable, your text is readable.
So I guess the last thing I'll show you too
is the, uh,
video here. So this is pretty cool. Of course,
this is a Scaffold Pro-only feature.
But the video has basically the same,
uh, uh,
not the same exact options. So actually,
I'm glad I came across this. So
the way that HubSpot is developed,
I couldn't do any of those settings in
the Style tab. So here you go Style,
and if you go Background and you select Video,
you have a note here that says, "Due to back-end restrictions
in HubSpot,
you must go back to the Content tab
to select a video to use as your background."
So now we'll go back here to Content,
and now because I have it selected in the
Styles background, we have this new field here
that says, "Background video settings."
And here is where you can
put in your video file,
and then you can also change things like before
with, uh, your blur and your filter
and your things like that.
So I think that's
basically it for the hero section.
It's very flexible. There's a lot of different things
you could do with it.
Um, but the main thing I really wanted to
show you is, you know, there's text alignment
and things like that. I think a lot of this stuff's pretty intuitive,
but I really wanted to show you the different background
options of, um,
mostly just a-adding a background image
and being able to lighten it and darken it and
give it a blur and filter it
so you...
it, it can really make your background, uh, if
you wanted to do something that looked really, really nice.
So that's it.
Um, good luck with building out your pages,
and if you have any questions,
you can just reach out to us, uh, through
various support channels.