VIDEO TRANSCRIPT:
Let's take a look at our tabs horizontal
module.
So this module is
pretty interesting. It's a way--
Usually when you're creating a website, you wanna find a way
to, one, minimize scrolling, so
people aren't just like endlessly scrolling,
and two, you want a way that people can engage
with your website, that they could be clicking around and engaging
with it to get their attention without necessarily
having to, like,
fill out a form or download something
or something like that. So
this is a cool way to achieve that, where you have these
tabs, and it's called tabs
horizontal because you see these tabs are
laid out horizontally,
and there's ano-another module which are tabs
vertical, where they're laid out in a vertical
fashion. But you see here we have these
three different tabs here, who we are,
our commitments,
and our team. And then you could see they're
corresponding here, who we are, our commitments,
our team. So I've said it before, uh,
let me get rid of this old
thing here.
And I've said it before,
my, my,
one of my main goals with this was to make
this theme as intuitive as possible.
So here you see the tabs, and then you
could-- it's pretty easy to figure out which one you
wanna edit here. So I can click in here and go to who
we are, and you have your tab title,
and you actually have
two things here. So you have the,
the text you want to show up on the tab here, and
then you have the, the text that you want to be
the title within the actual content itself.
So we broke that up because,
you know, this
forward, forward-thinking IT company through innovation
would be way too long to be on the tab
right there. So,
uh, you set your tab text here for the
navigation of the module, and then
you set your title there.
And then there's different things you could do here. You can,
um, if you wanna highlight certain th- texts,
you go add highlighted text,
and there's all kinds of, like, cool ways that you can,
um, you know,
just s- uh,
s- you know, spruce up the tab to make things
look very beautiful for
your users.
So we have the tab title, we have tab text
here, and then we have the image,
whatever image you select.
And then on the image, you can give it, like, an accent color.
So here you see we have the yellow,
but if I, you know, remove that, it could
be removed.
And then if I wanna give it, like, another color,
I could do that. So that's just, like, a
little extra feature to give it some,
um, you know, some more style,
and then you could change your different, uh, image
width settings here.
Like a lot of settings on this theme,
you have, uh,
three buckets. You have
laptops and desktops, tablets and smartphones,
so you could choose how you want it to look
on different screen sizes. So that way you,
you can ensure that your website looks beautiful on,
on cell phones, on tablets, on laptops,
on desktops. Whatever
screen a user is looking at your website on, you
can be ensured that it'll look nice.
Um, and then you have your extra content. So
here we have buttons,
but you can add,
uh, it could be, like, a list,
it could be just more text, you could put little
images, you could put a HubSpot CTA. There's
all sorts of things
you can add there.
Uh, let me go back here and just remove
that. And then
obviously, when you're, when you're within the buttons
module, you can add multiple buttons. You could have one,
you could have two, you could have three, whatever. You can add multiple
buttons in there as well.
So, uh,
yeah, let's take kinda a look around so you could
see how these
work. So we have this one tab
here. Let me move my camera.
And then we have this other one here, where you could
see, uh, if I click on it,
you could see on their extra content, they have a list
and text and a small image of
a user there for a testimonial.
And the list items are actually pretty
cool 'cause there's, like, a few things you could do with it. You can,
here in list styles, you could choose whether you want them to be
icons or check marks.
Let me go back here. Now you can see they're check marks
instead of the icons.
Let me just undo that, though, so you could see.
And then you can also
set it to,
uh, if you want them to be, like, horizontal like
this, or you want them to be vertical.
The one thing you'll notice is every time you make a change,
HubSpot reloads the page
in the, um, in the editor,
and it goes back to that first tab, so we have to look
at it like that.
But let me just undo that, bring it back to how it was.
And then here we have a list as
well, this one with check marks, and then we have
a button down here.
So you could see just, like, the different ways
that you can edit this,
this module, and it's pretty simple. It's a, it's
a pretty straightforward,
uh, module. You have-- You can change
some of the, the,
uh, there's, like, more intricate settings, so if you
wanna change the font weight on the title or the
letter spacing, things like that, you could do that in the styles
tab. And then a-another thing you could do in the
styles tab
is you could change, like, the tab style. So say
you wanted, um,
a d-- if I wanted, like, a monospace font,
so there's, it's changed to, like, a monospace font.
Sometimes I think that looks cool. It's, like, more, um,
tech-looking, and it, it's, it kinda distinguishes,
um, you know, your functional text from
your, like, reading text that people, like,
for your content.
Then you could change the color too. So this
is set to primary. Your primary color
is whatever you're gonna set in your branding. Your
primary and secondary colors
you set in your brand settings in HubSpot,
and it'll automatically be whatever that is. So
you, it could be, like,
black and red or whatever, and it'll update.
But if I wanna change it to, uh, different colors,
now it's green.
Uh, you know, and you,
you could change it to basically whatever you want. This
one now, it's yellow.
So that's basically it. This is a, a pretty
simple module.
It's one of those specialized modules. It's, like,
made for one specific thing only,
and because of that,
it's pretty easy to figure out how it works.
So, um, you know,
down-download the theme,
play around with the module,
and as always, if you run into any issues, we
have a bunch of different ways you can reach out
to support. You can email us,
support@getscaffold.app.
You can go to open,
view your tickets at getscaffold.app/support.
And then if you're viewing this on the documentation
library,
on the bottom corner, you'll see a chat,
uh, window that you can just open up a chat
and shoot us a message,
and you can reach out to us that way.
So that's it. Happy building.