Navigation

VIDEO TRANSCRIPT:

Let's take a look
at the navigation module.
So the navigation module is a
global content,
uh, module.
So what that means is if you edit it,
um, in one place, it's gonna-- those changes
are gonna be live across your entire website. Every
we- every page that has your navigation,
those changes are gonna be live, which
makes sense because if you have three hundred
website pages and you update your navigation,
you're not gonna want to manually update your navigation
on every page. You're gonna wanna update it one time,
update your links,
and then across your whole website, whatever page
has your navigation
is gonna get the new updated links.
So, uh, to access
this, let me go back. I already have this,
uh, open.
Let me just show you how to get into
this. So you,
you go to edit any page in HubSpot
that has your navigation module.
It could be your homepage, it could be whatever.
And you s-
go to the top, and you hover over your navigation.
You can see how it's like that
orange color, and it says, "This is
a global content."
So you click on that,
and it says, you know, "Do you wanna edit this
global content?" And you say yes, you
click on the button.
And then you see this right here. You, you wanna click
on your, uh, navigation here.
The search input I wouldn't worry about,
and that's,
uh, search functionality is only available on
Scaffold Pro, so on Scaffold Light,
you don't need to worry about that either.
And if you are on Scaffold Pro, and for whatever
reason you wanna get rid of search functionality on your website,
you could do that in the global,
um, theme settings.
So let me just click on here
now, and it says, "Open in Global Content
Editor." You click on it again,
and then you go here, you see your contents,
and you click on it again. So it takes a few
clicks to get to where you need to go, but it
makes sense because,
uh, these are very widespread
changes, so you wanna make sure that you're absolutely
certain of what you're doing when you get in here.
So you have
your logo here,
you have
your links in the middle,
and then you have some CTA buttons on the end,
and then, of course, the search
icon, search button.
So let's first just look at our styles real quick.
So one of the things you could do is full width nav
bar. So
you could see here how there's like a gutter, and
you could see I'm on dark mode here,
but it-- there's like a gutter to it. If I hit,
hit full width, it would be, you know,
this Scaffold logo would be here,
the buttons would be on the right. And then,
uh, the main reason to provide this was
if you have like a lot of links in the middle,
that you have more room. You know, you have
more room. It, it wouldn't be so crowded. So
that's like why I think you would want a full width
nav bar if you had a lot of content
and links to put in the middle there.
But let's look at this. You could change the button size of
these CTA buttons here.
And something, uh, to notice too is like
when it comes to global content editors in HubSpot,
it-- you make your changes, and you have to hit
apply changes to see them take effect.
So you see the buttons are smaller now,
where, uh,
you know, on a regular page editor, you might be able to--
like a regular page editor, I can edit this heading,
and I could see the changes like happen
in real time. Where on a global content
editor, you usually have to hit apply changes
to see them. But we can change our border radius.
The icon size is only relevant for Scaffold
Pro. So,
uh, this does have mega menu options,
which I'll show you in a minute,
and you can add custom icons to your different,
um, you know, navigation links, which I
love. I think it just makes your website look very,
uh, like professional and,
and just really, uh, modern and professional,
and it gives it that extra something. So,
so anyway, you can adjust what size you want those icons
to be, and we put them in the style tab here
because you're not gonna wanna have to edit
the size of each icon individually.
You're gonna wanna set it in one place, and all the icons
are gonna update automatically.
You can set the border radius of these icons.
So here you can see. And just one note
too, I don't know why in the HubSpot
global content editor,
you can see the drop-downs show here, but whenever I
try to hover over it,
they just disappear. But if I show you the regular
page,
you'll see obviously the navigation is functional.
So that's like a weird quirk of the
HubSpot global content editor, and
I'll see what I could do to figure out why that's happening.
But just something to note. But you could still
see all your changes. Just keep in mind that when
you hover down like that, for whatever reason,
it doesn't wanna play nice.
But, um, but yeah, that's it for style.
So let's go here,
and you have your logo. Your
logo's automatically gonna be taken from your,
uh, brand settings in HubSpot.
But if you wanna override your logo and put a different logo,
put this. I have said this a few times.
I always suggest having,
especially on Scaffold Pro, but any ro--
uh, even if you're on Scaffold Light,
that your logo should be like a high-resolution
PNG with a transparent background
or an SVG.
The reason this is important in Scaffold
Pro is that if you're in
Scaffold Pro and you have, uh, light mode and
dark mode,
when it goes into dark mode, it's automatically gonna
add a white filter to your logo.
So if you have a JPEG there, it's
just gonna be like a white rectangle rather
than what you'll see here.
It took my colored logo, and it turned
it into a, a white outline, so it's
still... You know, you could see it on Scaffold
when it's in dark mode.
But let's go down here.
Um, you have your CTA buttons here. They're pretty self-explanatory.
You, you know, just like every other button
you edit on this theme,
you can change where it links, you can change the
color, you can have it to be outlined or
solid, and that's pretty simple.
The links is where things get
pretty, uh,
I w- I don't wanna say complicated, but you c-- there's like a lot
you could do here. So the,
the links is where you--
th-this navigation module really shines
and where you're gonna see the most difference between
Scaffold Light and Scaffold Pro. So
just to show you real quick,
and we'll dive into this in a second, but how it
works is you add your nav
link here,
and then you get an option. Do you wanna have it be
a regular link or a drop-down?
So the blog is a regular link, and then we have a bunch
of drop-downs here
Then when you, if you select dropdown, you have two options,
um, two different distinct settings
that you can do.
One setting is do you want it to be
a single column or a multi-column
dropdown?
So like here is a single column
and here is a multi-column.
And then the other option you have is if you want it to
be a simple dropdown or a complex
dropdown. So here we have a simple co-dropdown,
and here we have a complex one where we have,
you know, a, a heading and subheading,
icons, we have a
main text, and it's like a subheading under...
or the main link text and like a subheading
link text underneath it. We have a button on the
corner there.
So that's basically, I'll show you that in a second. So let's
look at the blog because that's the most simple one,
and it's, yeah, it's pretty simple. Hey, we
want the nav item to be
blog. And of course, like everything else, we can,
you know, we could change the order of these however we want.
But let's just go back in here,
and we have a blog, and we wanna link it to,
you know, one of your pages, a file, whatever,
and you set the link you wanna link it to.
Now let's go here.
Let's go to pricing because that's a simple one.
So you-- let's go click on pricing.
And you see your options here. You say,
do you want it to be a, uh, single column
or multi-column or simple
or complex? So in Scaffold
Light, your only
options, basically, if you have a dropdown,
you're only gonna get access to the single column
and the simple.
So if your options basically on Scaffold
Light are,
uh, I want a regular link like this blog,
or I want a dropdown with,
with different, uh, links and sections
on it. If you're on Scaffold Pro,
you get access to-- You can make it a
single dropdown and complex,
which means you get the icons and the headings and stuff
like that, or you can make it multi-column,
uh, just like this, or you can make it multi-column
and complex, where you get all these like different options
here. So that's where you get the
benefit of Scaffold Pro. But let me just show you here for
pricing. So once you select
you want a dropdown and you want it single
and simple,
now you have different link sections within
that dropdown. So it could just be one,
but now I think it, you know, gives the users
more options that they could put like multiple sections
here. So we have HubSpot themes and services.
So let me click on HubSpot themes,
and then I have the links there. So HubSpot themes,
we have Scaffold Light and Scaffold Pro. And I click in
here, and it's just like it was on the
blog link before. You put the link text and
where you want it to link to.
So it's pretty simple.
Let's go to
Why Scaffold, which is like a little bit more,
um, you know, because it's a s- it's...
So here you see
we have a single column dropdown, but it's complex,
which has more options.
So and then here you have the
choice if you wanna include icons
or not. So
basically it's like
you have the option if on the whole
section of the dropdown if you wanna include i-
uh, icons, 'cause you're not gonna wanna have
icons on some links
and no icons on others. That would look like a,
you know, a chaotic mess. So this is where you set
it, uh, you know, on the dropdown wide.
Do I want icons or not?
So here we said we want a, a single column,
complex, which means you get more options,
and we do want icons on there. So let's click on
this section, Why Choose Scaffold, and you see you have
a heading, uh, a subheading,
and then we have the links. And then you can say if you
wanna add an extra button on the bottom there too.
So you can see all that here.
And let's actually li- clink, uh, click inside
one of this. So you have the link text
About Us,
the subtitle, Our Mission. So you see
that here, About Us, Our Mission,
and then you have different types of, um,
icons that you can have. So we have two different font
or two different icon libraries. So
you have Font Awesome, which is,
uh, integrated into HubSpot really nicely.
You just click on what--
you click on Replace, and then you can find whatever
icon you want here.
And then we also have Bootstrap icons,
which takes a little bit more work. You can click
on this, and then if you hover over here,
you'll see the link to the Bootstrap icon
library.
And then here we can find whatever icon we want,
and then you click on, you know, you select the icon
you want, and then you click on this little clipboard
here to copy the snippet.
And then you go in here, and you paste it in here, and
then it'll update. And you just apply the changes,
it'll update. So
it's cool you have, you have access to d- two different
icon libraries. You know, they have,
uh, you know, different looks of, uh... So if
everything you want, you can't find in one,
you can find in the other and vice versa. So
that's just to give the users of Scaffold Pro
as many options as possible.
And then you could see too with light mode and dark mode
how the icons will automatically change color,
and the links and all that will automatically change color
based on if you're in light mode or dark mode.
Um, let me show you now, so you have
pri-- we looked at Why Scaffold, we looked at pricing,
so let me show you,
uh, resources because that
is, you
see that you have a multi-column but simple.
So here we have multi- multiple columns
here, but we don't have icons
or headings or anything like that. So we have the different link
groups. You see link group one, two, three.
It just goes in sequential order. So this
first one on the left is one, the middle one is
two, and the one further to the right is
three. So let's click in here.
And then here you have li- uh, link group one.
So basically, the reason it's like that is
because if I just, uh, clone
this, for example, now we have link group two.
Now you can see I have a whole another section there. So this
is w- this is just to like open up, uh,
make it as flexible as w- as you want.
You can add a, like a really lot of content
here. And,
uh, if we go back here...
Sorry, one second. If we go back here to resources,
if you-- whenever you add the amount of, um,
columns, it'll automatically,
you know, it'll automatically update the width of
like these columns and stuff like that. So I think you
can have, I think it's
six, but it might be four. You might max out at four,
uh, columns,
and then you can add like multiple,
you know, ro- like rows in each column.
So let me go back here
And I'll delete this, but just to show you, that's how,
how it works. So,
uh, you, you have your different columns,
and then within your different columns, you can have
even more sections broke down. But
let me remove that,
and you can look at this, and it's pretty self-explanatory. You
have the heading there, the title,
and then you have your links,
and then if you wanna include a button on the bottom, you could
do that. But here,
uh, you s- you just see, like, the case study link,
and it's, it's just as simple as every other
link. You, you know, you put the link, you put,
uh, the page you want it to go,
and that's that.
So now let's look at the
big one, the most complex
one. This one, where you
have the headings, you have the page sections,
you have the button, you have the icons, and all that
stuff. So this
one is our solutions one,
and you see we have solutions,
we have dropdown menu, we say we want a multi-column,
we say we want it complex,
and we say we wanna include icons. So then
here you get a mega menu heading,
which you see here,
"See how Scaffold can help your teams move faster." And
then you have a mega medding s-
mega menu subheading that you put
there, and then you have your different link groups.
So this is actually pretty cool because you could
see how we have it set up. We have, like, one column
here for theme,
we have one column here for features, then we actually have
two columns under the industry section.
So let me just show you this real quick.
Here you can set the column width. So,
um, as mentioned before,
you, you've probably heard me say this a few times,
but everything is built on Bootstrap,
so it's, it's all about rows and columns.
So here we have this set to
three because
basically the whole width needs to be 12
or less. So we have this one set to three theme,
and then if I go back to the
next one, now features is set to three as
well. And then if I go to this last
one, link group, uh,
industries, it's set to six. So three plus
three plus six is 12.
And then when I'm in industries, I actually have two
separate link groups within that,
where if I click that, you can see the width again
is six
and six. So this, you know, this now
is at now its own row
that needs to equal
12, so we have six and six.
So this is something if you don't know Bootstrap,
um, it--
that's basically the gist of it. You, you have
different, uh... everything is
into rows, and you can have twel-
they could be 12 units wide,
and you just need to figure out how to,
if you want them two of six or,
uh, one three, one three, one six, whatever,
it just needs to equal 12. And it's, it's very intuitive
once you get some practice with it. But,
um, I know it could,
you know, maybe a,
first glance this, this may seem like a lot,
but this is how...
There's no other way to really deliver this
sort of, um,
just, like, flexibility with the navigation
without there being some sort of a
complexity to it. So anyway,
here you can see we have,
uh, industries and then we have
our links here, retail, f- uh, technology,
finance, and then I go to the next one and I see the other
one. So, um, I wish there
was a way that I could just keep this
nav open
while I'm showing you everything 'cause it's kinda hard to
go back and forth.
But that's the gist of it. I think I say
this with every module,
that the best way for you to
learn is to just go in there
and mess around. Just go in there,
clone it,
break things. Don't be scared if,
like, something gets, uh,
you know, if you, if you put a broken link or you do
something weird or whatever.
I just noticed that this screenshot of
this, uh, [chuckles] of this
phone says, "Current progress," and progress is
spelled with two Gs. So,
uh, [chuckles] I don't know, I just thought that was
funny. But anyway,
go in there, mess around with it,
and, uh, if you have any issues,
we have several ways that you can reach out and
get support. You can email us at support@getscaffold.app.
Uh, you can--
If you're on the docs right now,
on the bottom right corner, there's a chat window.
If you can open up a chat at any time
and submit a question.
And once you do either one of those things,
you can go to getscaffold.app/support,
and you can see your tickets and keep track of,
uh, the updates and things like that.
So that's it for now,
uh, and I hope I... I'm excited to
see what you guys build with this. So good luck.