Row

VIDEO TRANSCRIPT:

Let's take a look at the row module.
So the row module is available in
both Scaffold Light and Scaffold Pro,
but there's gonna be certain features that are
only available in Scaffold Pro. But
regardless of whether you're in Scaffold Light
or Scaffold Pro,
the row module is by far
the most powerful
module in
the Scaffold theme. It's
the powerhouse of the Scaffold theme. It's by
far the most flexible.
It's, um,
right, right behind
the, the row module is the cards
module, which is also very flexible,
and there's like a ton you could do here.
And I've pre-built a bunch of page
sections with it
and made it, uh, as easy as possible for you
to go in there and edit things and stuff like that.
But you'll see
that it's very, very flexible, and
if you want to, you can do a lot of things with it. But
with flexibility and, um,
you know, a lot of things you could do with it, versatility,
sometimes there can be complexity. But it is,
uh, very intuitive once you get started.
And let me just show you real quick some of the
different ways that you can use this
module. So right here,
we have the top of a landing page, and you can see
you could change the background if you want a background
image or something like that.
Uh, here we have another hero
section for a landing page for a trial.
Here we have a row of, uh,
customer logos,
another row of logos.
Here we have just some info or features
about your product.
Here, this is just, uh, if you have a lot
of text and information you wanna show the user,
you can use, uh, the row module for that.
And just, uh, rather than a blank wall
of text, you can have it broken up in a, in
a more engaging way for the user.
We have some testimonials here, different...
Th- these are both set up on the row module, but you could see
how flexible it is. You can set it up in different ways.
We have another form. Now we have the form on
the left side
instead of the right side.
Um, and then we have, uh,
this one is a pretty advanced one, and
I, I'll show you when you click on it, but I, I wanted to
put a, a,
a range of different things in here where you could see
very simple
modules or page sections created with the row
module and a little bit more complex one.
So this is created with the row module and a little bit
more complex.
Here you can see this one,
this one.
We have some more features here.
Here we have some portfolio items
and then some FAQs here,
and then down here we have, uh,
it could be locations. So it could be your office location,
or if you're throwing an event,
you can have the physical location of the event. We
have a map embed and things like
that here.
So, and if you're on Scaffold Pro,
you have light and dark mode. So you can see here
how it's loading on, uh, dark mode.
So you have, you know,
all the same things. We could see
what comes on Scaffold Pro is dark mode
and page animation. So you can see how
these page animations, uh, look nice and
polished for the user. Just gives your website
like that little extra something when people
are engaging with it.
So with that being said, let's jump
into this.
And actually, the first thing I think
we need to go over is,
uh, the fundamentals of how this
works. So,
uh, Scaffold is built on a framework
called Bootstrap,
and a lot of modern websites are built
on Bootstrap. HubSpot itself is
built on Bootstrap,
and it's a way that
it, it's how you can make...
It- it's a way that you can lay out your website, and you can also
make it very
mobile responsive, so it looks good on a tablet,
looks good on a
smartphone, looks good on a laptop,
all that good stuff. And, and, uh, the
modern day, you need to make sure your website's gonna
look good on a bunch of different screen
sizes. So
the way that is achieved is
by having the grid system.
And how the grid system works is you can see here
that there's, um,
basically everything in Bootstrap is set up as
rows,
and within the row, there are columns.
So we have here in each row,
you have a maximum number of twelve units,
and then each column you could decide how many,
you know, units you want it to be. So you can have twelve
columns of one,
you could have six columns of two,
four columns of three,
so on and so forth. But it doesn't also
need to be
symmetrical like this. So you can have one column
of four and one column of eight
and combine to equal twelve.
If you exceed twelve, then it'll go
into the next row. And it, it could,
it could be under twelve too. You could just have,
um, two columns of four,
like right here, and then you just wouldn't
have that third
column there,
and that will work too. But just basically,
that's how it works. Uh,
there's a lot of web developers that are watching
this that already know this,
but there are some people that might be newer
to this, and I... it's, it might be, uh,
tough for you to understand now, but trust me, it's
very intuitive. If, uh, you need
to, there's plenty of tutorials on Bootstrap
on YouTube, but that's not really necessary. Once
you go in here and you start experimenting, it'll...
you'll kind of figure it out pretty quickly. But I just wanted
to make that announcement of like how--
so you understand the foundation of how it works.
So let's go back here on the page editor,
and you could see
here [clears throat] on
one of the, um,
on one of the
hero sections for a landing page.
You can see here we have column one and column two.
So we have this column here and this column here.
When I click in column one,
you can see all the content. So we have a heading,
we have text,
we have a list below it, and then two more text
blocks below.
So, you know, you-- and then if I wanted to
rearrange it, you can rearrange it however
you want.
Um, this is a very,
uh... There's a lot of content on
this page right now,
and it's a very,
uh, big and complicated
module,
and it's very flexible.
So because of that,
uh, sometimes you have to hit Apply
Changes to see your,
your changes take effect here. So I hit Apply Changes,
and now you can see my heading is back there.
If I move it back up,
I hit Apply Changes, and you can see that.
That's probably partially because the module
is so complex,
but al- also because I just
through so many things on this page right now, but that's
just something to keep a note of. It's very
powerful, and because of that, it takes, uh,
you know, a certain amount of computing power for HubSpot
to see the changes you make.
But I try to make it as intuitive
as possible. One of the
big things
I-- One of my big mantras when I was building
this is I want it to be powerful, but I also
want it to be intuitive, and I want it,
it to take--
I want it to be easy for you to figure out what
you need to click on to edit what you wanna edit,
and for it to take as
few clicks as possible to get there.
So I've been on certain themes where
I see something like this,
a, a, uh,
you know, a hero section for a landing page or
something like that, and I have to poke around
and click on like 12 different things
before I can finally find where I need to edit.
Where this, especially when you get used
to it, you'll figure out,
okay, we're in, [clears throat] we're in the row
module, and we have
columns.
So right here we have three columns, column one
right here, column two right here,
and column three with the form right there.
So if I click on
I, I wanna h- edit this heading,
or say I wanna edit this list,
I click on column one.
Okay, and I see I have my heading, my text, and my
list. So let me edit. I wanna edit the second
list item. [clears throat] I click on list,
and then I can see my second list item there,
and I can make whatever edits I want.
So that's just, um,
you know, showing you
how you can go in there and make some of those changes.
But I, [clears throat] I, I think
really what's probably the best way to show
this is
to show you from scratch, like
how some of this stuff works.
So let me go here,
and I will drag and drop a row
module to the top of this page.
Excuse me for one second as I get a
drink of water. [clears throat]
Done a lot of
tutorial videos today. [clears throat]
Okay. All right.
So
as you get in here, there's the basic styles
that are applied to every module.
So if you're spacing alignment,
you can, [clears throat] you can set up how you want things.
If you want things to be,
um, [clears throat] vertically aligned at the top
or you can have them vertically aligned on the bottom
or the middle. So th- these things you'll
just figure out [clears throat] a, a lot of times intuitively.
You have text alignment,
margin above,
and for all of these things, you could do it on different screen
sizes. So I can have text alignment
to the left
on a, a large screen, and then on a
cell phone, I say I want everything to be center aligned.
So there's different ways.
Basically, uh, almost everything
in here, you can edit things based
on different screen sizes.
But let me go back to the content so you can see this.
So you see here,
right here we have four columns.
So when you click on the module itself,
you go to row settings,
and you can choose how many columns you want per
row. If I say two,
now I have one, two, three, four. So I have
two per row. So now this is set to six.
This is set to six,
six, and six.
If I set it to
four, now I have four per row, and you
can see if I set it to six, now they're smaller.
So that's how you,
you decide on the top
level how many columns you want per row. So
let's, let's go back to four.
And you could change your column padding.
You know, uh, this is basically like how much padding
is inside. It, it creates like how much
spacing is between each, um,
column in the row.
And then as mentioned before, you have the different sections,
so you can have four columns per row
on a laptop and then two columns
per row on
a tablet,
and then on a smartphone you have one. So basically
right here on a larger screen you have four,
and then on a tablet, this could be
one, two, and then three, four,
and then on a smartphone, it's just gonna be one per row.
So you're gonna-- These, instead of being next to each other,
these are all gonna be on top of each other.
But let me show you where this
really kind of takes to the next level. So you have your,
your co- your row settings here,
and then if you wanna add borders, you can add borders and
things like that.
But you have your row settings here. So you set columns
per row, four.
But when I click inside each,
uh, column,
I can click inside this and say, "Create unique
column width."
And once I set that,
now this column was set to six, I
can set it to 12.
So I think actually the best way to show you this
is to go inside one of these things
and, uh, show you how this works. So
this is actually--
Let me actually go, I think
this is probably a good one to show.
So you see here
we have two columns, column one and
column two.
And I go to row settings, and we have two columns per row.
But this is just,
by default, it's gonna make it so you have the
exact same column width on each
one. That it'll be--
This should be split down the middle, not like
we have it here,
where you have, uh, you know, this, this
one looks like it's set to around four or five,
and this one, like it's about seven.
So what I did is I clicked in
here, and you can see here,
create unique column width,
and it's set to a value of four,
and that's how you get this,
um, you know, that, that's how you get it. So here
it's set to four,
and then on the next one,
it's set to seven.
So you could see that,
uh, seven plus four
is 11. So it's shy of 12, and that's
how you get this,
uh, set up this way.
And you can also do offset. So this is
like to, to offset.
So let's go. I'll show you. So that's how you get--
There's, this is set to
four, and then this is set to seven,
which equals 11,
and then I gave it a column offset of one,
so you add one, and now you have 12. So
that's how you get this layout.
I, uh, I understand that this might be kind
of confusing if it's the first time you're looking
at something like this,
but really
this-- it can't be, um-
It can't be
over-exaggerated, like, how much flexibility
this gives the user, the ability
to override
the default or the universal width
and then customize things to make different ways.
But so that's how you do
your layout. That's how you set up,
uh, how you want your, uh,
how you want your columns to be laid out, how wide you
want them to be, and things like that.
But let me go actually
inside the, the column itself.
So here, if I click in, if I go back to
row, and I click on column one,
you could see how we set up. So we have our heading, our text,
and our buttons.
So let me add, you know, there's a bunch of
things. And actually, you could see here,
like I mentioned before, now
you can actually see the changes live. So I delete
that, and you could see it go
if I add it,
and you have all these different options here. So I can
add, uh, a list,
I can add,
you know, an icon,
and you have two different icon libraries you can work
with, Font Awesome or Bootstrap.
Um, and then in each item, so
we have all these different items you could set here,
and within each item,
you have your styles.
So normally on, like, more structured
content, we have the styles tab where you
put things, but because this is so flexible
and there's nothing,
there's nothing guaranteed to be there, you can choose
what's there and what's not.
It didn't make sense to put this stuff in the styles,
uh, tab. It makes more sense that
you have your individual items,
and then when you, when you click on them, the, the
styles are in that field itself.
So here we can choose the size
of it, we can choose the color.
Um, so th-this actually you can
choose the icon color, and then you could choose the
color of the box around it.
So let me change this to secondary.
You could choose whether you want a box around it,
so you can make it just so it's a,
a plain icon.
And then right here,
just like I was showing you before,
you have different, uh,
different options for how you want it to look on different
screen sizes.
So here we have margin above,
so let's set this to four.
And then there's use cases where you might want
less margin on a smaller screen, so it's less
scrolling. So let's set it back to four
here, and then we'll set it to two
on smartphones. But something that's
cool, you can set this on every
column, you can set this on every row, you
can set this on every
field within a row,
um, or within a column,
is the ability to hide on different screen
sizes. So I could say here,
hide on smartphones,
and for whatever reason, there's use
cases where you have this, where you might wanna have a list
showing on a large screen,
but it's too much text for a phone.
So you could say, "I wanna hide this on a phone,"
and that's, uh, what that does. So if I-- just to
show you how it works right here,
we're on a larger screen. We're on a laptop now.
So if I hit hide on laptops,
it disappears.
So that's just, like, a cool little thing that you'll see.
But, um, but yeah, you
have these different items here. You can,
you can clone them, you can
rearrange them, you can do whatever you want,
and there's really a ton of flexibility. So we have
headings,
regular text,
list items, buttons,
icons,
badges. We have-- You could do a large image,
or you could do multiple small images next
to each other.
You could do a video. So now we're getting into Scaffold
Pro. Most of the things I just told you are,
or all of the things I just showed you
are in Scaffold Light,
and now some of these things are in Scaffold Pro. So on Scaffold
Pro, you can add a video,
you can add a HubSpot CTA,
you can add a form in Scaffold Light as well,
because a website needs form
functionality.
But on Scaffold Pro, you can add embed code,
which is really flexible. You could do all
kinds of things. You could do map embed,
you could do social media embeds,
like a post.
You can do, um,
one of the things, uh,
g- use cases I like is when you embed,
uh, say there's like a third-party review
site like G2 or Gartner, and
they have an embed module. You can embed
third-party reviews on your website. There's a
s- there's a lot of stuff you could do with this embed code.
Social media icons and rich
text is, is only on Scaffold Pro as well.
Uh, you might notice that I avoid
rich text in, in a lot of these things,
Scaffold Light and Scaffold Pro. So
this is just, um,
a text field,
and the reason I avoided rich text,
but I, I still want to give users the option to
use it on Scaffold Pro,
but I do not like rich text
because it makes it too
easy for any-- like, it makes it too
easy to not have consistent styling
across your website.
Um, so,
so you can, you can have, you know, your,
your text size can be all over
the place, your font weight can be all over the place.
The co- it might not be the right font family, it could
be the wrong color, and things like that. So it makes it really
difficult to ensure you have consistent style
across the website,
and especially if you give access to, like,
um, sales reps or, or different marketing
reps or different, um...
If you give access to multiple people to
your website to-
so they can, like, easily go and edit pages and
things like that,
and they might not be, uh, necessarily web developers
that are keeping an eye on consistency through
your website, giving them access to rich text
areas really makes it so your website can
be, like, all over the place stylistically. So
anyway, there's my rant about rich text areas
if you're wondering why I don't have them. But
we came up with some creative solutions
around that. So, like,
obviously, what's good about a rich text area is you
can bold things, you can change different
colors of certain font if you want,
and you can link to certain things.
But we've, we have,
uh, solutions, uh, that we've custom-built
for that. So
let's actually look at where are we.
So here we have this w-
let's just to show you,
let's go back here.
So we're in column one,
right? We have column two and column... I mean, column
one and column two. So we're in column one right
here. And then we
have our heading,
our text, our button. So it's very intuitive
for you to see how this is mapped out and what you need to
click on. Again,
I want it to be easy to figure out what you need
to click on to edit and to take as many,
or sorry,
as few clicks as possible to
get to what you need to,
to edit it.
So let's click on this text right here
And say there's this portion of this text I wanna highlight
somehow or link to.
So let's say we've answered
a few FAQs to help,
uh, let's see.
Right here, we'll go,
help you get started.
So what I'm gonna do is I'm gonna copy that text,
and then here we have
highlighted text or link.
I'm gonna choose
highlighted text,
and then I'm gonna paste it in there exactly how it's
on there, and then we could choose, do we wanna
make it bold? Do we wanna make it italic?
Do we wanna change its color?
So we can make it, uh,
this color,
and let's-- and the-- you could see the changes there. It
looks like for whatever reason... Okay, now
it's italic.
It looks like... Okay, now it's bolded. So you could
see, um,
so if
this is a way that
when you, when you're in the text field, if there's
certain things you wanna highlight, you could do
that, or,
uh, I can even,
if you wanted to link to something. So say, let's
actually go
back. Let's go back to
the row. We'll go in column two,
and then see, this is, this is where it can
get a little more complicated because this
is such a flexi-flexible module
where you have something like the accordion module,
where it's like you can't do... It's very,
uh, custom-made for a specific task,
and it makes it more, uh, easy to
kinda navigate.
This you could see it's so flexible, but
w- because of that,
sometimes, like, you could see something and be like, "Whoa, that's
a lot." But it's really not that complicated.
So here you see we have a heading,
a text, and a horizontal line.
A r-- we call them horizontal rule.
You have a heading, text, horizontal rule,
heading, text.
So you can follow that along here. Heading, text,
HR, horizontal rule, heading, text,
HR, heading, text,
HR, so on and so forth. So
I wanna edit
this text right here. Absolutely...
So your products will be great on any device. Okay.
So I could see heading, text,
horizontal rule,
heading, text,
heading, text, horizontal rule, heading, text.
So that's where I wanna edit it.
And also,
not for nothing, you could just
navigate it through this way too. You can click
on one of them and just hit next
until you find what you're looking for.
But for this one,
I just wanna show you,
uh, how with these text fields
too, I can add a link
in there too. So I could say, "Looks great on any device."
I copy it. You copy it exactly how it
is. And I say, I
wanna add a link,
and I paste this on here,
and now you could see it's a link.
So I can, you know, I can link to whatever
I want. I can link to another one of,
uh, my pages.
I can link to,
uh, a blog. I--
There's a bunch of different things I can link to,
but you could see that. And then if I really wanted to,
to, uh, change the link color, I could do that as
well. But
that's just kinda showing you some of, some of these
other, uh,
features in here.
So there's a lot. And then, and then if I go down here,
text styles, this is-- you could see,
uh, this, this edits, like, the whole thing.
So if I change the font weight,
it could be wider.
I could change it to a different font family.
Um, I could change the letter spacing, obviously.
Uh, I'm,
I'm doing some of this stuff. It doesn't look,
uh, great. It's just to kinda show you
what it looks like. I, I don't think, uh,
you know... I-I was just kinda
making all kinds of changes so you could see.
But I would recommend that's what
you should do. You should
find sections you like
or modules you like,
um, and on the, on the website, on,
on any of the pre-built themes or pre-built,
um, pre-built templates or pre-built
sections,
and you should clone them,
and you should just, like, mess around and break things
and, and whatever, and just...
That's how you're gonna learn the most is you go into some
of these things,
and you click here. So this one's actually pretty
easy. So let me apply the changes on that one.
And you can see this one
is much more straightforward because there's no
unique column width here. It's all,
uh, even. So we have six columns,
and then I said that I want three per row. So
we have one, two, three, four, five, six.
So these are all set for a width of four.
So we have four, six, 12. That's
one row.
And then four s-- Uh, sorry.
Four, eight, 12. That's one row.
And then four, eight, 12 again for another row.
So that's how that's set up in the padding,
and then I have it set up two per row
on a, on a tablet.
So then when, when it's on a tablet, it'll
be one, two, three, four, and then
the bottom two will be,
uh, set underneath.
And then if I go to smartphone, I
have one per row, so you'll just scroll,
you know, as you go.
But let's click on one of these, and you can see how they work.
So it's very intuitive. You click inside
there, and you see icon, heading, text.
Pretty straightforward. I wanna edit the text,
and then this is how it goes.
And it, it's just,
you know, it's just, uh,
you know, built to be as powerful as
we can make it, but also as intuitive as we can
make it. And then you also have, uh,
the style tab. So you could change, like, the
background. You could--
Here we have a different color background.
There's a bunch of different ways you can change this background.
Uh, you could choose whether you wanna show this grid
or not. That's on every,
uh, module. So
include grid pattern
because this is a complex one.
But you know what? Actually, one of the things I noticed
is it's usually when you have a form.
For whatever reason in HubSpot, when you add a
form to a page section
or, or, and when you're editing a module, for whatever
reason, whatever changes you make,
uh, you have to hit this apply changes
button to see them.
I don't know why that is, but it's just something I've noticed.
So, uh, 'cause you could see on the ones
where we don't have a form,
I can, like,
go here.
Let's see. This one.
Let's see how this works.
We have a top badge.
See, the changes are showing right there.
So yeah, that's just, uh, something to be aware
of. But I
just wanna show you some of the background options. So here
On this one, it's for an event, a hypothetical
event that takes place in
San Francisco,
and we thought it would be a good idea
to show, like, a background image
of it. So we have a, a background image of San Francisco.
And this is something I'm, like, really proud of
building into this,
uh... building into
these themes is
when I-- Every time I've worked as, like, a web
developer,
uh, on a marketing team and things like that,
and I thought I wanted to add a background image
to a, a, a hero or a
landing page or whatever,
I always-- I never had the ability to,
like, adjust the way it looked in
HubSpot. I always had to download the image,
open up Photoshop,
and make it lighter,
like you see here,
or if I wanted to make it darker or whatever,
or give a blur to it. What's really cool about this
is you say you, you say you want a background image,
and you upload it,
and actually, let me get rid of this form so
you could see these changes live.
Let me go back here
and...
Whoops. Let me go
to edit,
and I'll just add
a heading,
and I'll go back here,
and I'll delete this form.
Okay. See? So now you can see the changes
are taking live. Or you know what I'll do, actually?
Let me go back here,
delete this,
and I'll clone this.
So we have them right next to each other, and I'll hit Apply changes.
Okay. So
let's go in here to the Styles,
Background, and you see you have your image here. So
you have background type, and you select Image,
and you could choose, like, how you want it aligned.
So you can have it, um,
you can have it showing, like, on the top. And let me
remove the parallax. So you can, you can give, like,
parallax to it, which is basically, like,
the content scrolls over the background
image rather than
the whole background image,
uh, scrolling with the content, with the page.
But you have
here, so we have
this thing. You can set the alignment. So do you want it to...
Let me see here.
Let me get rid of this too.
Sorry. Whoops.
Got rid of the wrong thing.
Okay. No,
stay there.
Okay. So
let me get rid of this filter.
So one of the things that I'm most proud
of on this thing
is how I mentioned
the, there's ways to adjust your background
image to make it easier for
y-the user to see your,
your content in front of it
without having, without you having to
do this physically or, um, manually,
rather, in a photo editor.
You could just find an image you want to. I found
an image of the Golden Gate Bridge because this
hypothetical event is in San Francisco.
I made it the background image, and now I could choose,
do I want it to be,
um, center aligned? Do I want it to be aligned
on the top
or whatever? So that's how you can adjust the vertical alignment.
But then here,
you can add a blur to it.
Let me click here to save these changes so you could
see them. So
you can add a blur,
uh, here. Let's see. It's, it's a lotta,
um, stuff here, so it's...
Okay. Here. It's, it's a little laggy,
but you could see.
Just give it a second.
Okay. So now you could see there's, like, a super blur
there. But I like to do just, like, a tiny blur.
So you can add a blur to make it more readable.
You can make it, uh, gray and white by clicking
Grayscale.
And then also what
you can do is click if you wanna
add a filter. So do you wanna lighten it or darken
m-darken it? Because we have,
um, we're in light mode now,
and we have
dark font, I'm gonna say I wanna lighten this.
And now you could see this is how you lighten. So you could scroll
this up and down,
and you could choose how light or dark you want this to
be, so it makes it easier for the user to
read the, the text in, in front
of the background.
But another cool thing
is that if you're on Scaffold Pro, you have light mode and
dark mode.
So right now, this font is
dark 'cause we're in light mode,
but it's gonna be,
uh, white or light once we're
in dark mode to contrast the background.
So you wouldn't want this image to be light
when it's in dark mode 'cause then it's gonna be a light background
with light font. So you could s- choose here
to set a specific dark mode filter,
and in dark mode we darken it.
So what's cool is here in light mode, you could see we
lighten it,
and then in dark mode
you could see it's darkened. So it's,
you know, you can have those contrasts in both ways. So
anyway, that's just some of the background. Again,
this is a very,
um, powerful module. It's very
complex.
Some of them are really easy. This one, you have five
columns.
You click on it.
Oh, great. You have the image,
and then you could see the image, and then you, you just
go along and edit it.
This one is pretty easy. You have two columns.
Uh, you click on it,
and you see you have your top badge, your heading, your
text, your buttons,
and then you can click in here.
And if I wanna add another button, I can add another button,
and then I can go
and I can change it to whatever I want.
Um, and, and so on and so forth.
This one's pretty simple. A lot of these are pretty simple,
but some of them
get a little more powerful. So this one,
uh, you see it's not a perfect split down the middle.
This one is
probably the most complex one, to be honest. You could
see we have all these columns here, and
there's part of me that's kinda worried about
this one because it's so complex. I don't want
it to, like, be scary to people,
but I'll actually show you a cool thing too.
So if you're on Scaffold Pro,
you can access by clicking this,
uh, contents
icon here
and then clicking Development options.
You can select Design mode.
And what it does
is it adds like a bright red dashed border
around everything.
So let me go back
where I was here.
So here you can actually see how this is
set up. So you can see how we have,
uh, our column here, column here, column
here, column here. So we have one, two, three, four,
one, two, three, four.
So, and when I click inside this,
you can see here we have 12 columns. So one,
two, three, four, one, two, three, four, one, two, three,
four. And this one is
like very,
uh, complex. We can see this one has a column
width of 12.
And then this one probably has a column width
of five,
or sorry, let me go back
because that was confusing. This one has a column width
of one, not 12.
This one has a column width of one.
This one has a column width of five.
And this one has a column width of one again, and
then five. So you can see that's how it's
spread out. It
could also be easier if you just wanted to do
these each in their own module rather than
stacking them all in one module. It could be less
like crazy to have all 12 in one.
But you can see that's how, um,
this one is, is laid out. So
this is one, like
the reason I put this here is I wanted to show an example
of like how you can have really,
uh, it could be really simple and
really intuitive. And even with the more
complicated ones, I do think they are intuitive,
especially if you understand how the grid system works
and how the row module works.
But I, I basically wanted to set it up where you
have like really simple,
um, row modules here where
you just, okay, so, you know, I have
five logos. I set the
columns per row to five and I put one
logo in each column.
You know, same here.
This one is just split down the middle. And then
it's like, okay, I have a badge, a heading text,
whatever. So I had those simple ones.
This one, I have three columns.
Each one has a heading and text, like literally
as simple as you could be,
uh, as, as simple as it could be.
But then I put this one on here just to show you like
you can do very like
flexible and, and, uh, creative
things. And, and there's,
it's endless. The possibilities are endless. There's like,
um, countless things that the, the
users, you as a user who are using
this, um,
theme, whether you're using Scaffold Light or Scaffold
Pro, you can do like,
I, I, I can't even put an idea of
like how many things you could do on this. It's countless.
So that's it.
I, like every other module, I always say
just go on,
clone things, break things, explore,
play around.
Uh, if you run into any issues, you can always just
reach out to us at support.
But that's it. I'm like really excited
to see what people build with this. And
I'm really excited for you guys to go out there and
create some great websites with it.