VIDEO TRANSCRIPT:
Let's review the hero split module.
So this is a module that's both in Scaffold
Light and Scaffold Pro.
You're gonna have more features on here on Scaffold
Pro, and there's a few more sections on Scaffold
Pro that are built with this module,
but it's pretty versatile. So
the hero is just what's on top of your,
uh, page. It could be your homepage or a landing page
or whatever. It's the very first thing the user sees
when your page loads.
So you could see how versatile the hero
split module is, and the reason it's called a hero
split is 'cause it's split. You have your
content on one side and an image on the other.
The image could be a stock photo, or it could
be an image of your team, or it could be
an image of,
uh, your app or something like that. So you'll see that in
a second here, but so here's one.
Uh, here's one that's,
you know, if you have a mobile app or something
like that, same exact module, but
it's just configured a little differently.
So here's one.
Here's another one.
This one just has, like, a different color
background and this
slanted bottom onto it that
gives a little more style.
Um, here is one
where it is for, uh, like
an app or something, and I'll actually show you so
you could see how this looks.
Uh, so you could see on my,
on my, uh, computer here, I have it set up on dark
mode. You can see some of these page animations.
Again, these page animations are
only on Scaffold Pro,
um, where you can edit these.
But you could see this is, like, kind of like a cool thing.
Uh, it's just like a interactive, uh,
way that your,
your screenshot or whatever image you have there is,
it's kinda interacts with where the cursor
is. Then we have this one where
it takes up, you know, it's like you--
instead of having an image take up a portion of
the screen,
uh, you have it take up the entire,
uh, you know, right side of the screen there.
So let's go in here and click on one of these and show
you how it works.
So, um,
I, I've mentioned on some of our other tutorial
videos how
you have certain
parts of, uh, modules that are
defined and structured, and then you have unstructured
sections. So
here, what's structured is you could see we have a top
badge, heading,
subheading, and right column all, uh,
predefined here, that those are, like, the main
components
of the, uh,
split hero,
and then you can add extra content. So on this one, we have
a list, and then we have two buttons here.
Um, so,
and, and it's just, like, the same thing on this one. So
now we'll click on this one.
You have your top badge, your heading, your subheading.
Uh, you have this
cell phone image that's on the right column.
And then on the extra content, we have these little
images for the Play Store,
uh, or App Store,
and then we have a little text that's, like, uh,
showing reviews,
hypothetical reviews in this case.
But, uh,
this one is--
You could see here it doesn't have any
top badge. So if I click on here,
there's no text here 'cause there's no top badge. If I
just put here, typed top
badge,
and then change the color to
warning, now you could see we have that there.
So you have your, uh, top badge,
your heading, your subheading,
and then you have your image here,
and then you have your, uh,
buttons that were added right there. So if I click here,
you see the free trial and how it works button.
Similar thing here,
and then here we have same thing. You have your top badge.
So just to show you, that's basically
how you set it up. This one again doesn't have a top
badge where you have your heading,
your subheading,
and then we have, uh, our right column, which is
this big image, and then we have,
uh, two buttons here, and then we have two little
things with text there as well.
So you could see
the commonality of these, and then
in each one of these,
um, sections here,
let me actually go back to the top,
you can edit your, uh,
top badge. You can edit your heading.
Um, you--
I've showed you how, like
in some of these other tutorial videos, like specifically
some of the things you could do with the top badge,
specifically what you could do with the heading.
Um, for this tutorial video, I don't wanna
dive into each thing specifically. You can-- I
think the best way to learn is just to go in here
and, like, mess around and play around and see how things
work. But you could see how,
um, you have your different badge types here,
you know, rounded
or, uh, just standard
or text. You have your different, um,
sizes here that you can make them
and things like that.
And then, uh,
and then for the heading,
you have, uh, right here we have with Scaffold.
So we said add highlighted text.
We pasted with Scaffold. We changed it to
a primary color, and then we added a underl--
a yellow underline to it. So
again, this is pretty intuitive.
I think you can figure this out when you're, like, just
poking around and, and as you
go out and start developing pages and stuff,
it'll become second nature to you.
But I wanna show you, I guess the biggest thing
is, like, how do we get from this
to this to this,
uh, to this?
So the way
you would do that is when you go in this right column,
so here,
and then o- obviously
to add extra content, you have these options
here, images, list, text,
CTA. I've showed, I've showed more depth
of like how the list field works
in some of these other module training as well, so
keep an eye out for that.
But for this video,
I wanna show you kind of like the, the broad strokes
of how you, you can make it either look like this
or make it look like, uh, this right here,
something like that.
So here we have the right column,
and then you have content type. So here we have standard
image, but if I changed it to parallax
box, now it added that
box.
So if I go here,
let me reload this page.
Now it's in that parallax box.
So here,
if I set it back
to standard image,
now it goes like that,
and then if I set it to wide image,
uh, it replaces it with this. So the
way that it's coded is you'd have to
go back and, and make sure you're using
the same image.
But, um, but yeah. So you have that set up
right there.
Um, and
let me show you how this works. So
you can see how we have the different background colors.
So basically, every module has these styling
options. So
you have your
styling for your top edge heading and stuff like that, like
basic stuff like color in here in the content
tab. But then you have--
you can also change things like the font weight
and the margins and stuff like that in the styling.
And just to note, anything that's like extra
content, anytime you have to click this add
button and do it,
uh, that way,
the styling is gonna be within
the field itself. It's not gonna be in this
tab, it's gonna be here when you click on
the styles tab. It's, it's for buttons,
list, whatever is added on the extra content
section, that's where you find the styling, not
in this tab here.
But, um,
you know, everything has spacing and alignment, so
you, you can def-- uh, decide,
um, you can decide how,
how much, how wide you want your content to be, how
wide you want your image to be. So
I've said this a million times
by now, you've probably heard me say it before, but this
theme is built on something called Bootstrap,
a framework called Bootstrap.
HubSpot itself is built on Bootstrap, and
most modern websites
are built on, uh, frameworks like Bootstrap
or something similar to it.
And basically, what you need to know is
it, it creates your page in a way where
it's set up in,
um, rows, and
then each row
you have different columns. So you can have
here... And, and
each row needs to equal twelve.
So right here we have content column set to six,
which is this right here.
We have image column set to five,
and then we have image column
offset set to one, which is this gutter here.
So what is six plus five, five, uh,
plus one
is equal to
twelve,
right? But if I change this now
to seven,
you see how it breaks. Now it's down to-- it's,
it's broken, and now it's in a s- in a separate
row because we went past twelve.
So if I move this back
to five or say it changes to six, and then I
change this to zero,
now we equal twelve again. Six, six, and
zero is twelve.
So you're gonna understand this more as
you mess around with this and play with it.
But just, just like a, a basic... And it doesn't
have to-- It could be less than twelve
too. I could make this,
um, you know, I could make
this four if I wanted to. I could make this one.
But if you go over twelve, it's gonna break
the row. Or on a smaller
screen, like I have here, I have
the content column set to twelve and the image
set column set to twelve.
So when I go to preview,
the-- everything-- the content column takes up
its own row,
and the image column takes up its own row.
So this is gonna be more intuitive as you,
as you use it, but
that's just the basic how, like, the styling and the
spacing works.
And the main thing I want to show you, though, is background.
So here
you have the background,
and you have different background types. You have color,
and you could change it to an image as well. So if
you wanna, um,
you know, this is useful if you wanna
have, like, an event and your event is in
New York City and you want to have, like, a,
a dark filtered backdrop of, like, New
York behind you or something. You could set it to
image. Uh, here's where you can choose
if you want to have that grid background in the,
uh, grid pattern in the background or not.
And then you could change the color too. So
here I could change the color to primary,
and then I could change the opacity so I can make it
lighter. Another thing
you could see here on this one
is if we go to styles and background,
we have,
uh, a gradient that we added. So here
you could change your gradient direction, so bottom
to top.
Uh, you could see it or, uh, you could change,
you know, the, the,
the way it's
set up.
So you can go left to right,
uh, top left to bottom right. So you can, you know, you can
set it diagonal, you could set it
vertical, you could set it horizontal, however you
want. And there's-- You can really
change your, uh,
your page around this way. You can really,
uh... Basically, you can mess around
in here and change--
You can make this, like, look however you want to.
The, the possibilities are endless of how you can make
this gradient backdrop look.
And then you see we have the slanted bottom
section too. So here, if I click on this one
or the slanted bottom,
um, option. So here
we have,
uh, this
set up.
Well, this is actually interesting. So
we have predefined colors here,
and then we have, uh, opacity.
But then also,
say we can't find the color
we want for the background this way,
we could select to add a gradient
and then just select the same color for
gradient one and gradient two and set the same opacity,
and then that's another way that we can create, like,
a unique color.
So again, th-
there's, like, a bunch of different creative ways
you can use this to, to make the background
what you want.
But, uh, here we have the check mark of, like,
slanted bottom. So if I uncheck that, it
goes away.
But then you'll see when I check that, it has that slanted bottom.
It's just, like, a little extra
stylistic thing. So
I'm not sure
what else to show you here.
I really think
this is,
like most modules, you need to go in here and mess
around and, and, uh, I always say,
uh, find some sections you like,
clone them,
mess around with them,
break stuff.
And if you, if you have any issues
and, and you can't figure something out, you can always
just reach out to us. You can,
um, open a support ticket. We have
many-- You can open up a chat window.
You can email us at support@getscaffold.app,
or you can go to getscaffold.app/support
and reach out to us that way.
So, uh, that's it, and happy building.