Skip to content
  • There are no suggestions because the search field is empty.

Landing Header

A clean, minimal header for landing pages that focuses on conversion and clarity.

 


 
VIDEO TRANSCRIPT:

Let's take a look at the landing header module.
So the landing header is where you're gonna wanna
put on landing pages. It's,
um, you know, on, on a landing page,
like a webinar registration page or a trial
page or
a white paper download page,
you don't wanna give the user a bunch of options.
You know, you don't wanna have your regular navigation with
thirty different links on there for your user
to have a, a, a
bunch of different exit strategies of how
they can leave the page. When someone lands on your landing
page, you want them to basically
only have one choice. Do they wanna fill out the form
or not? So for that reason, we-- you
usually have a simplified header on here.
Now, normally, what you'd want is, uh, for
a navigation or a header or a footer,
you'd want a global content, a global module
where it's, you know, you change it once, and it, it
updates across the entire website. But
this one's a little different. You're gonna see why in a second.
So in order to access this,
you can't click inside of the regular, uh,
editor to get it.
What you need to do
is you need to click on this little icon here,
the contents icon,
and then you'll see static modules, and you click
on landing header right there.
So now we're on the landing header. Let me move my camera
over. Okay.
And you can see you have your,
your company logo. So this is taken
from your, uh, brand settings within HubSpot
in your HubSpot account.
But if you wanna override it, you can override it right
there, and you could change the logo size
and things like that. And
obviously, if you click right here, this, this link will
take you to your brand settings where you could change this logo.
One thing to note is that if you are on Scaffold
Pro, I mean, if you're on any Scaffold,
if you're on Scaffold Light or any website,
it's usually best to have your logo to be a
trans-- uh, a PNG with a transparent
background or an SVG
is even better.
But if you're on Scaffold
Pro, it's even more important because,
um, of light mode and dark mode. If you have light
mode and dark mode enabled,
when the page is in dark mode,
it'll automatically make your logo white,
so it, you know, it stands out from the
black background or the dark background.
So, um,
if you had a-- if you didn't have an image with a transparent
background, like a PNG or an SVG,
and you just had a JPEG, it would just turn into, like,
a big white square, basically. So
just something to note. But
here I'll show you, uh,
one of the settings here is,
uh, one is you can have a full-width nav bar.
So you're not gonna really see,
um, much here. Or actually, let me close it so
I can see it. So see how there's, like, a
spacing here and everything is within this kinda,
um, center container?
If I go back here,
and I go to set style, and I go full-width
nav bar and click
to save it,
you'll see now it's over to the side. So that's
just something, uh, some people like the look of that more.
Let's go back here.
And something you may have noticed is, like, when you're on a
regular module,
uh, in here,
it-- you could see kind of most of the changes
as they're happening live. But for whatever
reason, like header and footer modules, HubSpot,
uh, sometimes will make you hit Save
Changes to see those changes take effect.
So another thing is you can change, like, where the logos
are aligned.
So you can make it if you want it to be on the right
side of the page,
now it's showing on the right.
If you want it to be in the center, and I click here,
now it's in the center. But just keep in mind that this
is a local module. So if you make
it, uh, center on one page or
whatever,
uh, it's not all--
Whatever you make on these changes aren't gonna automatically
update on your other pages. And there's a reason for
that, and I'm gonna show you this in a second here. So let
me change it back to left
and go back to content.
And one of the things that's
cool, this is on the Scaffold Pro feature,
but I will kind-- I'll show you, like, a
way that if you're, um,
if you have enough skills and, and you're
tech-savvy enough, you can kind of find a workaround,
even if you're on Scaffold Light and get something similar.
But something that's really cool about this is, uh,
on Scaffold Pro, the ability to add extra
logos for co-branding. So
when-- for years when I worked as a,
a web developer and on a marketing
team and stuff like that, when I was managing websites,
there were a lot of times where we would do webinars with partners
or have events with partners where we would want both logos
there. We'd want our logo
and the partner logo
on the registration page.
So that's what this is here for. You can add additional
logos, which is referred to as co-branding.
And I can go here, and I can add...
You could see this is example one,
and you could change the size, and then you can change
the alt text, and then you can also add a link. So if you
want it to link to,
uh, this company's homepage or whatever,
you could do that.
But let's click here and just see how it looks real
quick. And you can see here
now we have that additional logo,
and we could do this a few times. I can keep adding more
if I want to.
So if, if I wanted to add a few more, if we had
two lo- partners or whatever, but it's usually you
just have one.
Um, and then
if I go in here,
you know, same thing. If I can,
you can center them.
And then something that's cool
is, uh, when you have more than one, you can also just
distribute them.
So now they're-- You have one logo on one side and one
logo on the other. If there was a third one, you'd have
one on the left,
one in the middle,
and one on the right. So it's just kind of like a cool
little, uh, option you have there. But
I'm gonna move it back to the center here.
And, um, basically, the reason I put
this in here, as I mentioned,
when I w- had to do this in the past,
there was only the option to add one logo
on the themes I was working on in HubSpot. So it
wasn't easy for me to just say, "Oh,
yeah, let me add... We're working with XYZ
partner. Let me add their logo." I check a box,
I upload their logo,
I can link to their website, and everything's great.
And I have options of how I want it to line up.
Basically, my only option was to,
uh, manually go in Photoshop
and create a logo, which was a combination
of, like, my company logo or the company I worked
for logo
and the partner logo
and combine them into one image
and put them on, on the, uh, header
for co-branding. So,
uh, I just mentioned that because Scaffold
Pro, it makes it very easy to do co-branding.
But if you're on Scaffold Light, you still have that
option. So if I remove this,
and then you click here to override default logo,
you can edit,
uh, you know, you can edit a picture yourself
of, you know, your logo and
a partner logo and hit this button to override
the default logo and up- uh, you know,
upload that. So
just throwing that out there, but that's basically it. Those
are the main benefits
and features of the landing,
uh, the landing header,
and also the main reason why this is
a local module, not a global
module, because you, you wanna have, uh,
individual, you know, a part- someone that's
a partner on one
webinar
might not be a partner on all your webinars.
So you wouldn't wanna
edit it one time and have that partner logo added
to every single landing page. So
anyway, that's it.
Um, if you have any questions, you can always reach out
to support.