---
title: Sections & Layouts
description: How to add, reorder, and customize sections
---
[Skip to content](https://scaffold.terrier.llc/docs/sections-layouts#main-content)
Open main navigation
Close main navigation
- [Contact Support](https://getscaffold.app/docs/getting-help-with-scaffold)
[Contact Support](https://getscaffold.app/docs/getting-help-with-scaffold)
How can we help you?
- There are no suggestions because the search field is empty.
1. [Scaffold Docs](https://scaffold.terrier.llc/docs)
2. [Building Pages](https://scaffold.terrier.llc/docs/building-pages)
# Sections & Layouts
## How to add, reorder, and customize sections
---
###### VIDEO TRANSCRIPT:
Page sections.
What are they? How do they work?
Let's get into it.
So in this video, we're gonna go
over page sections, as mentioned, and the first
thing I wanna do is go over just how useful
page sections are in HubSpot.
For a long time,
uh, originally in HubSpot,
they didn't have page sections in the page editor.
You only had access
to modules. So if I go here
and click to add,
you could see all the theme modules right here,
and you can, you know, drag and drop them
wherever you want within,
uh, the page editor here. The only problem
is, as you can see, is you can't really see
what these modules look like. So,
you know, you can have icons that could be kinda
descriptive of what they are, but you don't really know what
they look like.
So that's an issue because,
you know, it's,
it's hard to remember,
you know, if you have two dozen modules,
it's hard to remember off the top of your head what each module
looks like, uh, specifically. And,
you know, so in some cases that leads you taking shots
in the dark, just like dragging and dropping and,
you know, seeing if you like it or not.
Um, the other thing too is, you know,
one module can have a lot of-- can be edited
in a lot of different ways. So,
for example, I have the cards module and
the row module
in here that
the-- there's endless ways you could use those
modules. So I, like, I think the, the
row module, for example, is like
there's probably,
you know, maybe ten or so page
sections I've built with that one module. So there's
a lot of different ways.
So that's where page sections come in, because it allows
you to take your modules and then pre-configure
them into different page sections.
And this is the best part here,
there's screenshots, preview
images of what these page sections look like.
So I'm gonna show you how to add a page section here.
You could see we're on our webpage
here, and you could see these,
uh, areas where it says add page section.
So be-- in between,
you know, the page sections that are already on the page,
you can see you have the opportunity here to add a page
section. So we can find,
you know, where we wanna add a page section here,
and I'll click
add page section.
And then here you could see
the, uh,
screenshots of what they look like. You, we--
and, uh, we're in Scaffold Pro here, so you can
see some of them are in light mode, some of them are in dark
mode. Um,
if we were in Scaffold Light, you would just
see all screenshots of them in light mode.
But I really wanna bring your attention real quick to
something that,
uh, we developed that we call super
sections.
So what a super section is, is...
I guess I'll tell you what a super section is not. A super--
Th-this is a what a regular section is right here, about,
images, and list.
It's one section,
and it's basically one block of code that--
or one block of the website that we'd
like to use. So we have this one, this one,
this hero image here, this hero here,
this hero here.
But then we added super section. So,
uh, this right here, soft conversion form.
We didn't think it was useful for the user
to have three different page
sections with just slight variations
on, um, you know, the soft conversion
form for like a webinar or trial request.
But we did wanna
pre-configure as many things as we could for
users. So it's like, you know, some of them
have list items with icons, some of
them have list items with bullet points.
So this can give the user, like, you know, they can
click this and see as many options as possible
without, you know,
overburdening the, the page editor
with like, you know,
too many page sections to, to choose
from. So when you could see
on, on these super sections, it'll say
how many variations are-- there are. Three variations.
This one, split content, six variations. So
on some of them, there are so many variations
we're providing that you can't actually fit them
all in a screenshot and have the screenshot still be
useful. It'd be too small. So like this one, we--
you could see we have, um,
you know, three variations that you could see here,
but here for the app integrations, two variations,
so on and so forth.
Um, so let me find one that I think
we can use.
You know, let's actually do this one,
carousel split. So it's a carousel split. You
have content one
si-side and a s-carousel on, on the other.
So let's click this.
And when it gets added here, you could see there's,
uh, you could see
I have, you know, we set it up in a way that you could see
both options here,
option, uh, option two, it says carousel
split option two,
and then carousel split option one.
So let's go with option two. So what
I'll do is I'll delete this right here,
I'll delete that right there,
and delete that right there. And then now we're left with
the one. So I,
I think this really enables users to come
here, find what they want,
um, you know, find, find the page sections
that's most useful for them,
and then just
click, click the one they want, and then just like remove,
you know, remove the ones that aren't useful to you,
and then you're left with this.
So you click here, and you edit it the same way
you'd edit any module. This one's actually pretty
easy 'cause it's only one module.
So let me just move my camera real quick.
Okay. So this one's just
one module. It's a split carousel module. So
if we wanna, you know, edit
whatever
featured, I'll say featured,
uh, projects.
And,
uh, let me change the background color
to light.
And by-- You know, that's--
We'll just leave it like that. Just simple, simple
change. And you know what? I'll actually,
I'll get rid of the top badge.
So here's something that you could do,
is now that you've
edited this, right? And say, say
you wanna use this, you-- I, I wanna u- You
wanna use this on three different pages now on your
website. Instead of having to go,
uh, back here, and by the way, when you're in the editor,
see how that,
um, add section isn't showing
up anymore? All you have to do is hit this plus
icon, and now it'll show up again.
So you edited this.
Instead of having, say you wanna add this to
three other pages,
instead of having to go here,
find it again-
It's right here.
Click it on the other page,
delete the one you don't want,
edit it from scratch again, edit the background,
edit the text, whatever,
uh, you know, the images, edit it again.
What you're gonna do is now that you've made your
changes, you're gonna go up here,
and you're gonna hit Save Section.
And let me just say, you know, uh,
portfolio
\[keyboard clicking\] section
edited. \[sniffs\]
And then I'll say, um,
you know, updated
portfo- portfolio
\[keyboard clicking\]
section
with light
background.
And then what we'll do is we'll save
this. So
the section saved,
uh, successfully. So now in your section
library,
if you go to Add Section, you go to Save Section,
you'll see it here. And you'll also notice, uh,
uh, whenever you save a section in HubSpot, if
you're on Scaffold Pro, it's going to save in light mode.
Don't know why exactly it does that, but that's just the way
it is. It'll always automatically save this preview
image here in light mode.
But that's,
I think, the most useful part, that you can,
you can go to Add Sections,
you can add just a regular section or you can add a super
section.
Again, here we'll do with the, the, um...
We- we'll do it with the, uh,
download form here or the, the soft conversion
form. Uh,
let me get rid of... My camera's in the way, so
let me get rid of
this here, this here.
We see this one, it says
Option Two.
Uh, let's do it for the webinar. So I'll get rid of this
and I'll get rid of this indicator text right here,
and then I'll add the form.
So I'll go to Column. So we have Column One and then
Column Two. I'll go into Column Two.
I'll edit the form.
I'll just pick whatever. I will do
just for this example, Demo Form, even
though this is for a webinar.
You know what? Actually, I don't like that. Let me do...
There's too many form fields. \[sniffs\]
Okay. And
let me just say...
Let me go back here
to Column One,
and then I'll edit the date
to say it will be \[keyboard clicking\]
August 14th. August 14th. We'll change the date.
Okay, so
we added a s- a, a super section. We
got rid of the two options we didn't want.
We edited this.
So now I'm gonna go here.
Sometimes it's weird. Sometimes you have to close
this left sidebar out to get the option
to save it as,
as your own section. So I close this,
and now you can see it popped up there. So I'm
gonna hit Save Section,
and then I'm just gonna go Webinar,
uh, Registration Form. \[keyboard clicking\]
"Updated
form for
upcoming
webinars."
So then you can see again,
it's saving, uh, the preview image here.
It's saving it in
light mode.
We're gonna go hit Save.
And now if I go back here,
say I wanna... Say now I,
I have six upcoming webinars, so I wanna create
six pages. Obviously, you can just create a page
and clone it.
But say, you know, you're building it from scratch,
a new page.
Instead of having to add this super section
that, and removing the two options I don't want,
I, and, you know, updating everything I want manually,
I go to Saved Sections. Oh,
let's see. For some reason it's not showing.
Let me reload the page. Sometimes it takes
a minute to show up.
Okay.
There it is. Okay, so now you see here, Webinar
Registration Form. So
that's basically it.
I think the most important thing here is to know
what page sections are.
They're very useful. So
in Scaffold Pro,
uh, let me just see my notes here. In Scaffold Pro, you
have forty-three
page sections,
but with super sections, you know, some
of them have six variations, some of them have three.
You actually end up having ninety-one
blocks of code, blocks of, you know,
your webpage module, modular blocks,
ninety-one different modular blocks you can use
and reuse across your website. So that's huge.
That's very
useful. Now in Scaffold Light, you have twenty-four
page sections, but with the super sections
and the variations, you end up with fifty-two
pre-built, uh, page blocks, modular
page blocks that you can use across your website.
So again,
page sections, tremendously useful.
Learn how to use them on your website.
Uh, learn how to use the super sections,
re- remove the ones you don't want,
edit them, and then save them as your own.
So if you, you
use them a lot, you won't have to go through the process
of like downloading a super section or,
you know, you adding a super section and removing the
areas you don't want. You just add your saved section over
and over again. So that's it.
Um, I hope this video is use- was useful.
If you have any issues or questions, you can find
us on support.
You can find more information at scaffold, getscaffold.app/docs.
You can, uh, email us at support@getscaffold.app.
Thanks.
- [Introduction](https://scaffold.terrier.llc/docs/introduction)
- [Getting Started](https://scaffold.terrier.llc/docs/getting-started)
- [Building Pages](https://scaffold.terrier.llc/docs/building-pages)
- [Modules](https://scaffold.terrier.llc/docs/modules)
- [Blog Setup](https://scaffold.terrier.llc/docs/blog-setup)
- [Release Notes](https://scaffold.terrier.llc/docs/release-notes)
[](https://scaffold.terrier.llc/)
[mailto:email@email.com](mailto:email@email.com)
Copyright © [Terrier Digital LLC](https://terrier.llc/)