---
title: Content Split
description: Split your content into two balanced columns for text and visuals, ideal for product overviews or feature highlights.
---
[Skip to content](https://scaffold.terrier.llc/docs/content-split#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. [Modules](https://scaffold.terrier.llc/docs/modules)
# Content Split
## Split your content into two balanced columns for text and visuals, ideal for product overviews or feature highlights.
---
###### VIDEO TRANSCRIPT:
Okay, let's take a look at the content
split module.
So this is a module that's both in Scaffold
Light and Scaffold Pro,
and it's basically what it sounds like. You have
split content here, so you have image on one side
and your content on the other,
and you can alternate
if you want your image on the left, you want your image on
the right, so on and so forth. We
have a bunch of these pre-built in both
Scaffold Light and Scaffold Pro.
I'm sure there's a, a few more
that are pre-built in Scaffold Pro,
but, um,
let's take a look into one of these so we can see what's going
on. Let me
click inside
here, and I'll actually move my camera.
I'll move right here.
And, uh, you can see that this
is a structured
module, so we have
things that are predefined on every,
uh, one, every instance of the
content split module. You have a top badge, heading,
subheading, and image,
and then you can add extra content. You can add, uh,
list, buttons.
There's all sorts of things you can add in here. You can
add, um, a CTA,
uh, you know,
smaller images and things like that. So
I'm gonna go back here
and just delete this.
And then obviously you can see, you can add multiple buttons
in, in a row and things like that.
But, uh,
one of the distinctions I've drawn in
some of the other module videos is that
when it comes to these modules, when you have something that's
like predefined here, like top badge, heading,
subheading,
uh, you're gonna see those styles in
the Style tab. So when you click on it, you can change things
like the color and, and certain things like that.
But you can also get more like finer details
like, uh, font weight and
letter spacing and margin
above and below
in the Styles tab.
Whereas anything that's extra content, like button
or list, if I click on here on the buttons,
the button styles are gonna be
within the actual, uh, field
there rather than on the Styles tab.
So just a quick distinction there.
But if I go here
back to Content, and I go to Top Badge,
if I, uh, wanted to,
uh, say, you know,
change it, obviously, I can say Contact Us,
and you can see the changes
are live right there to the right. You have your
editing field on the left.
One of the things I try to do with this module is I always wanna
make it as few clicks as possible.
I want it to be as intuitive as possible and
take as few clicks as possible
to edit what you need to edit.
So here you click on this.
You see you have top badge heading.
You, uh, click on the top badge,
and then right there you can edit it. So it's just a, a
couple clicks, and you can get to what you need.
And then here you could change if you want it to be all lowercase,
you want it to be uppercase, or you just wanna
keep it regular. You could change the color,
different colors there,
and, uh, you could change the size,
uh, if you want to.
Uh, so
let's go here. So ba- basically, so on
and so forth, you can change the heading text.
Same, same thing if you delete it,
it'll just be removed.
Um, but let's put that back there.
You have two options. You can change the
heading tag to be whatever you want, H1,
H5, whatever.
And then the display size is unique.
It's, uh, it's separate from what the heading tag
is, so this is really useful for SEO purposes.
One of the cool things about the heading is this feature Add
Highlighted Text.
So if I say, "Yeah, I wanna add light- highlighted text,"
and I want to take the word experience
and put that in here,
now I can change the color. I could change it to,
uh, orange, or I could
change it to yellow
or whatever. And this is like if there's a certain word you really
wanna highlight.
And another feature is you can add like an underline
to it. So,
um, you know, there's,
there's different use cases for that, but I always thought that was
pretty cool just to be able to add a, a
extra flair to your,
um, headings and things like that.
So let me go back here.
Uh, subheading is pretty self-explanatory. This
one doesn't have a subheading,
so it's empty.
And then you just see we have the extra content with the
list item and the buttons there.
But I wanna show you how this image works. So
we have the image here,
and you can change the border radius, you can give
it a shadow.
Uh, let's give this one a big shadow, so you just see
that shadow now.
Uh, border box is just like if you wanna add an extra
border around it.
Uh, you could change the colors
to be... Let's make this one red, and
then we'll change the opacity.
So you really see there's like a lot of ways that you can
stylize this.
Um, and then you can change the border width. There's all
kinds of things you could do.
Uh, you could change the padding here.
So I don't want it to look too crazy, but
what I do wanna show you is here when you get to image settings,
you can change
the image width, the alignment,
uh, margin above, margin below.
Like every other setting you see on here,
you have-- it's divided into three brackets.
You have la- laptops and desktops,
then tablets,
then smartphones.
So this is so your page can be like super
responsive and look good on every,
every, um,
different screen size. And I've
done a lot of the hard work. I've pre-built these
sections for you with all of this stuff thought out
and tested.
But if you wanna start something from scratch or edit things,
just keep in mind,
you're gonna wanna, um, make sure that you see
how it looks on these different screen sizes and make
sure these settings are consistent
or what you want them to be in these different
screen sizes.
But one of the things you'll see here
is it says order,
um, left or top or
right or bottom. So what this means is on a larger
screen, if you have it set to number one,
it's gonna be on the left of the screen,
and on a smaller screen, it's gonna be on the top.
And then, uh, number two, if I change
it like this, you can see it moves to the right. And then
a smaller screen, if I had it set
here to be number
two, it would be on the bottom. So for example, I could do
this. I want this to be
on the top, on the left on a larger
screen. But now that we're on a smaller screen
on our smartphones,
I set it to right or bottom, so on a
smartphone, it's gonna be on the bottom.
So, uh, l-
you know, we can just take a look at that real quick
So you see here now on a smartphone, it's on the bottom.
So that's just
showing you how you can kind of basic, uh,
image editing or setting those,
uh, image settings.
But let's go into styles real quick to show you
how you define, uh-- So that's how you define
what's on each side of the screen.
But let's show you how you can define,
um, like, the, the width of these columns.
So you have different, um,
you know, different settings here. You could
line everything up at the top for vertical alignment
or bottom or the middle.
You can change the text alignment and things
like that.
But the most important thing is
the setting up the different, um, content
column width or the image column width.
So I've said this probably in every module
so far or close to every module,
but Scaffold is built on
something called Bootstrap, a library, uh,
um, a framework called Bootstrap.
HubSpot's built on Bootstrap.
Many modern websites are built on Bootstrap
or something similar,
and that's what makes your website very responsive.
And to put this as easily
as possible,
you have everything set up into rows,
and then within that row, you have columns.
And the maximum units a column can
or a row could be is twelve.
So you can have two columns that are
six, uh, units wide, so
six plus six is twelve. So
just to show you what this looks like here, you can have
four columns that are each set to three, so
three, six, nine, twelve.
Just to show you so you can kind of understand,
we have content column width here, five,
image column width set to six,
and then column offset, which is this,
you know, gutter you see here, is set to one.
So what's five plus six plus one
is twelve.
If I set this to two,
now you'll see it's on a separate,
uh, it's on a separate
row. It, it broke the row because
we've exceeded twelve. We're at thirteen now.
So you can set this up in
any way you want as long as you're within twelve.
So if I go set this to, uh,
let's say I set the content column--
Let me set the image to three
and then the content column,
uh, the offset to just zero
and then the column to nine.
So you can see that
that's how we're gonna adjust it. Let me actually
change this. I will do one offset here.
And now you can see that's how you can adjust the different,
um, settings here.
And let me actually, now that we have it
set up like this, if I do top alignment,
you'll see now the image is aligned with the top.
If I do bottom, it's aligned at the bottom, and then we have
the center.
So I don't think there's too much
more for me to show you in here. Just
basically, you
should understand that you click inside here,
and then you have your top badge. This one doesn't have
anything, so it's empty.
Um, but you have your top badge,
your heading, your subheading, your image,
and then you have, uh, your
extra content. You can add buttons, lists,
smaller images, all kinds of things.
When you're in the image here is
where you can, uh, stylize the image, but you can
also choose the order you want it to show
up. Do you want it to be left? Do you want it to be right?
And then to-- if--
You know, I have basically all of these pre-built
with, like, a even split down the middle
of the page.
But if for some reason you said, "You know what? I
don't like the way that looks. I want it to look a little
different," you go to Style,
Spacing Alignment,
and then, uh,
everything is divided into three settings: laptops
and desktops, tablets, and smartphones.
So, so make sure you take a look at that.
But we'll go to laptops and desktops here,
and then I will do-- I'll make my image
a little smaller for this one. Let's make
it, uh,
four, and then let me make
my, uh,
let me make this
seven, and then plus one
is we have seven plus four plus one.
That's twelve.
It doesn't have to be twelve. I could set this to six
as long as it's under twelve, but twelve
is the maximum.
So let me set this back
and, uh, and then you can see here
for smartphones,
we have the content column set to twelve, the
image column set to twelve.
So that's why when
we go on a s- on a s-
a cell phone,
it's, you know, a full
r- a full row is there twelve, and a
full row is there twelve.
So anyway, I,
I think, uh, I've said this on
every tutorial video I've made,
uh, for each module. The best way to learn is to
go into Scaffold, go into HubSpot,
and edit things, clone themes,
break things, mess with things. And then I,
I really think you'll pick it up, and it'll be intuitive,
and you'll see how powerful this theme is
once you start experimenting. But if you do run into,
into any issues as you're building or anything
breaks or you find a bug or anything,
just contact us at support.
- [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/)