VIDEO TRANSCRIPT:
Okay, this is just a quick tutorial
to show you how to get started with
Scaffold Studio.
So if you are in any
of your pages here,
um, the first thing you're gonna do is open
any of your modules, and on the top here where
we have the links to the docs and
support, there's this new line that says,
"Speed up your editing with Scaffold Studio."
So when you click this,
it's going to take you to the
Chrome Web Store, the listing for Scaffold
Studio. Uh,
I already have it downloaded, so right now it says Remove
from Chrome, but for you it's going to say
something along the lines of Install
on Chrome or just Install. So
once you install that,
it should automatically just show
right here on your top, and you can obviously,
you know, rearrange it how you want.
Um, but if it's not showing there, you probably
need to go into your extension settings. So
first thing I would do is go to Manage Extensions
and find where it is and make sure it's enabled
here. So you just click that toggle,
and then when you go back, if you know that it's enabled
and it's still not showing there,
you need to click here,
and you see this little pin icon. You just need
to make sure that it's pinned
to your, uh,
to your window here, to your Chrome window.
So we have that taken care of. So now
that it's on,
make sure when you're in one of the pages
that it's enabled,
and you'll see, you know, everything, uh,
comes t- where you can select. It's not grayed
out anymore once it's enabled.
Um, and you, you only have access really to do
this inside, uh, HubSpot.
You'll see if I go to, say, my LinkedIn
account and I go here, it'll say,
"Must be in a HubSpot page"
or, you know, u-
or using one of the,
the Scaffold themes in a HubSpot page.
So, uh, let's go back here,
and now that it's enabled, you can see you just
point and click,
and really that's... it's as simple as that. Now
you can just point and click and go where you want to go.
Um, basically the way it's supposed to work
is that you click on something and then it'll scroll
to the top of that sidebar there.
If that doesn't happen, just,
you know, write a ticket and let me know and, and
we can fix it.
Um, but yeah, so there's that.
You'll also notice
that there's this little paintbrush icon on
each section. So when you click on this, it goes to the style
settings for that element. So
here we have the font
weight, uh, and then the different sizing
options, margin options.
It's the same thing for up here
where I click this and it's in the actual Styles
tab here,
and same thing, it's got the sizing options and
the, the font and,
and things like that.
So there is that.
Um, there are also
some other cool features here. So if I go
here, if I go to the corner
here, it
seems to have... it's having
trouble showing up. Let me try this one. Here
we go. So if you go to the corner here,
it'll also take you to
the style settings for that
entire module. So if I go here,
it'll take me to the spacing settings for the module.
If I go in the middle here,
it'll go to the background settings.
And then if I click this, it'll go to the animation
settings for that entire module.
So there's that,
and then of course you can actually see it better here.
And then of course, when I go up here as well,
there's the different screen sizes. So something that
has always driven me crazy about HubSpot
is I'm in the editor,
I have two options, desktop
and mobile,
which anyone who creates websites for a living
knows that there's,
there's a lot of different screen sizes between
desktop and mobile. There's quite
a bit actually. You have, you know, tablets,
laptops, and things like that.
So that leaves something
to be desired, only having those two options.
But then there's also, uh, when you
click on mobile,
you can no longer edit anything.
Drives me up a wall. Why--
What's the point of showing me how something looks
rendered in mobile if I can't
even edit it?
Also, I don't know
what's going on there, but something's going... Oh, it's the
border radius I added to it. Okay.
So to show you how Scaffold Studio
fixes this,
you can click on here
and rearrange your sizes,
and you can still edit on the side
here. So if I click this, and what's
cool actually is
it automatically knows what sizing,
uh, option you have here.
So now if I click on the style
icon again,
it'll automatically take me to
ex- it, it'll automatically,
automatically expand the
style options for that screen size.
So it really makes it that, like, you,
you... 'Cause that's usually what you adjust
when you're doing mobile development, right? You're checking out
the different spacing and things like that.
So, um,
that is basically it.
Uh, again,
if you're just starting out here, what you're gonna wanna do
is you're going to want to go
on the top of these modules. Every
module will have this link.
You can click on here to Scaffold Studio,
down- go to the Chrome Web Store, download it,
make sure it's up, and then it's as simple as
just making sure it's enabled and now your editing experience
in HubSpot is just significantly
better. Um,
that's it. If you have any questions, you can always reach out
to support@getscaffold.app.
Thanks.