VIDEO TRANSCRIPT:
Let's take a look at the marquee module.
The marquee module is only available on
Scaffold Pro,
and it's a way for you to highlight... There's various
ways you can use it to highlight certain things on your
website. So here you could see,
um, if you wanted to highlight certain screenshots
of your app or something like that.
Um, if you wanted to highlight
customer logos or client logos, you could
use it that way.
And then if you're a
s- a SaaS company or a software company and you
have a bunch of integrations,
uh, you can use it to highlight some of these integrations,
like this example here
or this example here. And there's a few ways
you can even, um,
if you want to, like, link these individual items.
So say you had an integration with HubSpot and you had a
specific page for it,
you can have it so if the user hovers over this,
it can link to that page.
Um, one thing I wanna-- I've mentioned
in a few other videos is
see, you can see it's like very snappy when you
hover over this, these animations.
A lot of these page animat-
page animations, when you're in
the HubSpot page editor,
they're very snappy like that. But when they're
actually live on the website, they're very
smooth. They have like an animation, they have a delay,
they're very smooth. So just something to keep in mind. When you're
editing a page on the page editor and it looks kinda
snappy, these page animations,
uh, they're much smoother when you can see
them on the, um, the real page once
it's published.
But, uh,
let's take a look at some of these use cases. So
basically, when you set up, uh,
your marquee module, you're gonna have it-- you're
gonna do it one row at a time. So this is,
this row is one marquee module,
and this row right here is another marquee module,
and then same here. This is one module.
Here we have three
stacked on top of each other, one, two, three,
and here we just have one.
And when you click inside these, you basically have,
uh, three different choices of what you want it to look
like. You can have
something like this, where it's a large image,
something like this, where it's set to small image,
and then something like this, where it's set to pill, where you can
have, um, you know, like a icon
or logo of a company, and
then you can have text next to it. Or you can have a
image of whatever and text next to it.
And, uh, and then this one is the pill
as well, but we just
removed any text that was next to it
and changed the border radius a little
bit on it. So there, there's a lot of different ways you can tweak
this, but I'll just show you the basics. So
one thing that's actually on every module is
the ability that when you click in here and you go to style,
spacing and alignment, you can make it a full width container.
So instead of having,
uh, it, a regular container where there's
like gutters on the side of each page,
you have the full width container.
So w-what that is, is like
I, I think basically the
marquee module is basic-- is like one of
the only places you'll really use this. So you can see
here, these are set to full width,
and you can have, you know, you see it goes across the whole
page, and then on this one it's set to, uh,
regular where it has a container and there's like those
gutters on the side. So
it's up to you to decide which one you wanna use. I
think on smaller ones, it looks better
to have those gutters on the side.
But then for larger images like this, I think it looks
nice to go across the whole page.
Then when you click in here, you can see marquee direction. So
you could choose if you want it to go left or right.
So, you know, I think if you,
if you just have one,
uh, marquee row, I think it usually looks
good to go to the left.
It's just my personal preference. But then usually when you
have them stacked on top of each other,
you're gonna want 'em,
you're gonna want them alternating. So like one going left,
one going right,
so on and so forth.
So let's click into one of these so
you can actually see some of the editing styles
too. So here we have the large image
one, and if we go to marquee settings here,
you can change
how big or small you want the image to be. So
we just made them much bigger here.
You can adjust the border width, the border radius,
um, and then the spacing in between each
item. So that, that's,
uh, you know, just ways that you can customize how you--
the look and feel of it, what you want it to look like.
Uh, here something that's cool is when you have it on
the small image
is, uh, you have your spacing here,
but then you can indu-individually set
the size here. The reason I have it set up that way
is because
sometimes you have logos set up in a certain way and
they can-- if they're all set to a size four,
it might not look right. Like sometimes you,
you decide, oh, you know what? I want one logo
to be set to a size three
and one logo to be set to a size four,
and that actually looks more appealing and even
to the eye.
So that's why on these ones,
individually, when you have it set to small image,
you adjust the size individually, where this
one you have the option to set them
basically universally. You set them in one place
and then they, they, uh, adjust
everything in that marquee.
But another thing I think is really cool here
is one of the things I
always try to think about is like
when I'm developing websites, what makes my life
easier? So one of the things
that was always a pain is sometimes I'd get
a bunch of logos to put on a website
and it was almost too colorful.
It would be distracting. You know, if I, if I have a
landing page that I want someone to submit a trial
or demo for
and there's like all these colors of all these different logos,
it can be distracting for the user and
distract from the form I want someone to submit on. So
sometimes I would go into Photoshop and I would edit every
image to be like gray or edit every
logo to be black or whatever.
So something that I built into here that I think is pretty
cool is these filters
that you can actually just,
you know, decide I want this logo to be black,
or I want it to be white, or gray, or whatever. So
let's look at one that's actually on the page here.
Let's see.
Uh, LinkedIn.
I wanna make sure...
This one. This is a good one.
Is it-- It's not showing on the page though.
This is like-- Okay, it's actually gonna come up on the page
in a second here.
So this is like the Svelte logo you can see right there.
And then if I chose filters
and then I chose
black...
Oh, it restarted the whole thing.
Just give me one second here. You'll see it come up
now. If only it was
going faster.
So you can see this logo is now black there.
And then you have the option if you-- Well,
this is only available on Scaffold Pro. So you also
have the option
to give it a separate filter on dark mode. So
here, if I look at this preview in another page
and I go to dark mode,
you'll see all of these have a white filter.
So the LinkedIn, for example, it looks, doesn't look
great 'cause
it would be better if the,
the I and the
N were there, were the transparent so you could see
the background.
But you could see how some of this,
um, looks now we're on dark mode
and it was, it was made so these have a white
filter so they're easier to see on dark mode.
So that's just something I,
I thought is, uh, definitely worth knowing
and, and then you can add a link to it too if
you wanted to link it to a page or,
uh, something like that. So
I think that's basically it. You could see this pill one
as well here. There's the different settings.
You can set the spacing, the border radius
if you want it to lift on hover.
Um, and then
you can see the different things here, like the size of
it. Um,
and then, and then
you ha-have different filters and stuff like that here.
You could change your text,
all kinds of things. So
like any other module, I always say,
um, the best way for you to learn is just to
go in there
and, you know, mess around with things, clone
it, break things,
do whatever you need to do and it'll,
you know, you'll find common themes a-a-along
the whole theme and
it'll get pretty intuitive to you pretty quickly.
But if you do run into any issues, we have
several different support channels that you can reach out to
us at.