---
title: Blog Listing Template
description: Display your latest blog posts with built-in pagination, thumbnails, and metadata styling.
---
[Skip to content](https://scaffold.terrier.llc/docs/blog-listing-template#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. [Blog Setup](https://scaffold.terrier.llc/docs/blog-setup)
# Blog Listing Template
## Display your latest blog posts with built-in pagination, thumbnails, and metadata styling.
---
###### VIDEO TRANSCRIPT:
Let's take a look at your blog listing template.
So the way you wanna
edit and
access your blog listing template is that no
matter where you are in HubSpot,
go click on the gear icon, your settings icon
on the top of, uh, your
portal right here.
You click that,
and then you are going to see this
left, uh, navigation bar here, and you're gonna
scroll down to the bottom,
and then you're gonna see Content,
and you expand that, and then you see Blog.
So if you don't currently have a blog set up, you're gonna
see the option that you can create a blog
and set the name and,
uh, the URL and all that stuff. But if you do
have a blog or once you create a blog, you'll see these
tabs here,
and you click on Templates.
And you see that there's two different templates. You have one template
for your blog post,
and then you have a template for your blog
listing page. So you know, one is
what the template for the individual posts
are, and one is for,
like, your blog homepage, basically, where you have
the list of all the different blog articles.
So for your blog listing page,
uh, if you don't have it set to Scaffold yet, you can
click here, uh, and hit Change Template.
And it's gonna take you, and you're gonna have to open
up your-- this is basically the editor for
your, uh, the homepage of your blog.
You're gonna see Template here,
and you can say Use Different Template,
and you're gonna say, you know, select what
template you wanna choose.
And if you have Scaffold set up, whether you're in Scaffold
Pro or Scaffold Lite,
you're gonna see the blog listing here. In Scaffold
Pro or sorry,
Scaffold Lite is gonna look a little different because Scaffold
Pro has light mode and dark mode,
and Scaffold Lite does not.
So you just select that,
select Template,
and you have it set up this way. So
let's click in this, and you can--
I can show you how to edit your, um,
Scaffold,
uh, how you, you can edit your, uh,
blog listing template here. So
let me actually just make a quick change
real quick.
Oh, I was actually in the wrong area.
Let me remove that
and that.
Okay. Okay,
so let me just show you real quick.
So here we are at our
blog listing template, and
you're gonna have a few different
features here based on whether you're on Scaffold
Lite or Scaffold Pro. So obviously, you're looking at this
on dark mode, which,
which means I'm on Scaffold Pro.
But let me show you here. So you have your
different layout options. This portion is
available on both Scaffold Pro and Scaffold
Lite. So you have your single column here,
and these, these zoom in when you, when you,
uh, hover over it. It's just like a little zoom-in,
uh, feature,
this, this part of here. And I mention this anytime
there's an animation.
It looks very snappy when you're in the page
editor, but when you actually view it on the website
and it's live, it's like much more smooth. There's
like a smooth animation to it. So just be aware of
that. If you see that and you're like, "Oh, I don't,
I don't like the way that looks," because I don't like the way it
looks personally,
um, it looks
way smoother and way better when it's live on the website.
It's not snappy like that.
So anyway, you have your different options here. Single column,
so that's what this looks like.
We can go to two-column grid,
so this is what it sounds like. It's a two-column
grid with the layout.
And then you can do three-column grid like
this. So
I think if you're on Scaffold Lite, this is probably
the best layout I like the most, three, uh,
three-column grid. Let me just go here
real quick. So
if you go into your styles
too, you have different style options. So
you can, uh, this changes the space, so the
spacing horizontal. So if I make this ten,
now they're more
spread out. If I bring it down to
one, there's barely no gutter there.
So let's change it back to where it was.
And then you have your, your, uh, vertical spacing.
So if I change this to ten,
now there's more spacing from top to bottom.
Um, and then this
right here, blog content width, is just like,
it, it makes the whole width of the thing,
how wide you want it to be between one and twelve.
So, uh, I think for
now I'm gonna keep it full width,
and then you can have margin above and below.
And like most things in this theme, you have,
uh, you can change these options
on different screen sizes. So you can have
one set of spacing on
a large screen, like a laptop or
a desktop,
one set of spacing settings for tablets,
and one set of spacing settings for
smartphones. So that's, you know, we, we
put that everywhere. It's a lot of work, but
we put that everywhere on both Scaffold
Lite and Scaffold Pro because that's how you make sure
you have a very beautiful and mobile
responsive
website that looks good regardless of what screen
size your users are looking at
it on. But let's go here.
So, uh, I'll show you
your blog post details here. So
this is where you could change things like the border radius
of the featured images here.
Uh, you could change the title tag. So here
we-- if you want it for SEO purposes, you
want every one of these to have an H1 tag. Now they
have an H1 tag, and then you could change the size
here. So if you want them bigger, you can make them bigger
like that.
I'm gonna make them a little lower,
smaller rather.
And then here, this is something cool actually. I,
I haven't seen this...
I haven't personally seen this on another theme, and I think
it's pretty cool. So
you can say include preview text, right? That's what
this is here.
So I say include,
include preview text,
and you actually have two options of
how you want your preview text to look. So you can
either make it the post summary, which is just
the first few sentences
of your blog post,
or you can make it the meta description of your blog
post. So if you don't know, when you're in a blog
post, you go to the settings,
and you can set a different meta description.
So if you wanna like-
Make it different. It, it, you know, you can't do it on
the individual post level, but you could do it across
the blog. You could say,
"You know what? I don't want my
preview text to always be the first few lines of
the blog," which is probably the easiest way to
do it. I want it to-- I wanna cultivate,
I wanna make it specifically what I want it to be,
so I'm gonna set it to,
uh, the meta description.
And then you can kinda get the best of both worlds, 'cause
what you could do is you can copy the first few sentences
of your blog and put it on the meta description.
But then if you have, like, a really important blog, you
can put in the meta description like, you know,
"Read now," or
"Breaking news," or whatever,
and then it'll show up there. So anyway, that's just cool. You have
the two different options
of what you want it to look like. So here you can see
I switched them, and you can see it's changing
because I have a different meta description for each one
of these. Here you can
change the size, and then this is cool, too. You can change
the preview text character count. So I could set
this to three hundred
and make it more, or I can set this down to... Or,
sorry, you can set it up to five hundred or down to
eighty. Um, so that's, like, a
cool customer, customization feature
that I haven't seen on other, uh, themes
as well.
So let's see. It seems like it's lagging a little bit.
Let me click here.
All right, it seems like we're getting some lag. But
here you could choose if you wanna include the author or not.
Uh, you could choose, if you do have the author,
you could choose, like, what kind of font. You have the text,
the author image size,
the author border radius. All these things are
just cool little customizations that you can make.
You can include the publish date. I,
I think it's pro-probably pretty normal to have a publish
date, but I know sometimes people might not want
that. You could see that I have font monospace.
So, uh, in, in your global
settings, you could choose what you want your monospace font to
be. But I think it's very cool for things like
this. When you have things like,
um, you know, little dates
or, or badges or things like that, it's, like,
a very cool-- gives it, like, a techy feel
to your, your, uh, blog or whatever
you're using it for. So usually things like that,
I use font monospace.
So you have the tags, include tags, and then
you have the tag border, border radius as well.
So if you want everything to be squared off, you can make it squared
off. You want it round.
So this feature, basically everything you saw there
is on Lite and Pro, but this feature right here,
Customized Tags, is only available on
Pro. So what this is,
is you see your different tags here.
You can select one of your blog tags,
so let's do marketing,
and you can give it a custom color. So I'm gonna make
this one
red. And then you can make it if you want
it to be, like, a light color or a dark color,
and it just looks different on different screen sizes. So
then let me add one more.
I'll do strategy.
So let me go strategy,
and I'll make that one green,
and I'll do dark for that one, too.
So you could see here
the reason this is cool is, like, some blogs,
they'll have three main blog types.
No matter what, they'll have three main blog types.
It could be, like, breaking news,
um, you know, I, I don't know, breaking
news about our company and
whatever. And you could,
you could have
basically, like, custom color schemes
for each one of those, uh,
blog types, and it's just, like, a way to add extra
branding to your, your thing. So,
like, you can, you can have color-coded,
uh, tags or topics. So this one
on these examples, we have multiple tags,
but think about how, like, some of these blogs, if
you just have three different types of blog
posts, each one would only have one tag,
and then you can have, like, a different color for each,
each blog. And then even on your featured images,
if you wanted to incorporate that color into your
featured images, you could do that. So it's just,
I don't know, it's, it's just, like, a cool little extra
thing that I thought was nice to give, uh,
our, our, uh,
lovely Scaffold Pro users.
So let me go back here and show you
something else that's cool. So
those are the blog post details you saw that.
Here is something again that's also
only on Scaffold Pro.
So on Scaffold Lite, I think this is probably
something similar to this is the best layout for your
blog. On Scaffold Pro, though, you
can include the sidebar.
And this feature is also available on, um,
on, on the blog post itself on Scaffold Pro.
But you can see the sidebar here, so we have different, um,
navigation based on the tags. So if I wanna
see all posts
that are tagged with marketing, I can click that and do
that. You can also click on the tag right
there. So it's not
like you're missing that much functionality on Lite, but it's
just a nice little
feature there to have the categories.
And you have this, um,
CTA card here. I don't have the form
connected right now. Let me see.
It doesn't seem like the form is showing right now, but
you have a CTA, \[clears throat\] a
CTA card there. So you can
put, um,
"Subscribe to our newsletter" form, or you can
put a button where they click it for, they
could say, you know, "Get a free
trial or demo," and they click it, and
it takes them to the demo page. Or you can have, like, a,
a timely offer where they click, and a pop-up
form comes up. So
there's all kinds of cool, cool things you could do there. I
think the CTA card is pretty useful if you have
a high-traffic blog, and
you wanna try to capitalize on that traffic.
So that's another cool thing about Scaffold Pro,
you get that.
And then you have the popular post module,
uh, or card here.
And we're gonna keep adding all kinds of cool things
to the, the sidebar here,
and if you have any ideas, definitely let us know. But
we're gonna add a lot of different functionality to the sidebar
here. But for now,
uh, again, this is just something, a feature
that you get with Scaffold
Pro. And then you can see our, um,
you know, our, our pagination down here,
too, which you can,
if you wanna edit the way that looks, you can do
that here. But let me go back here
and, um,
let me show you
real quick how my favorite... So if,
if you're on Scaffold Pro, you see how this looks very, like,
small, like, right now.
I'll show you my favorite layout for Scaffold Pro.
So on Scaffold Pro, what I would do
is I would take this to now
single column.
And let me edit some of these post details.
Let me bring back the border radius.
Let me bring down this.
Let me
make this text small. Okay,
now it's going. Okay.
Uh, let's see.
Okay, that looks better. And then
let me re-bring--
Let me make my author s-image smaller.
Let me make it round.
And,
uh, let me add the border radius back on that.
Uh, that's not great. Let me go like that.
No, not that.
Okay, that's better.
And let me
change,
let's see, this.
That. Okay.
So I'm still, you know, you can see I'm
messing around with it, tweaking it, but I think
that's, like, my favorite kind of layout. Something
similar to this is my favorite kind of layout
if I'm on Scaffold Pro.
Um, something where you have, like,
your, your blog listing here, you have your sidebar,
and then you have your pagination down there.
So that's it for now,
um, with the
setting up your
blog listing page and editing it.
And, you know, there's a lot of different
ways you can customize this
and things like that. So I hope that you found this
video useful. If you have any questions, you can reach
out to us on support. You can
open a chat on the bottom corner of this page,
or you can send us an email to 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/)