Designing Your Blog Listing Page
Your blog listing is the page at /blog where all your published posts appear together, each one as a card a reader can click. StoutStack builds and maintains that page for you, but how those cards look is entirely up to you: how many sit side by side, whether they're framed or bare, what shape the photos are, and what information each one shows. This article walks through every setting so you can make the listing match the rest of your site.
You'll find these controls in Site Settings → Features → Blog Design. Site Settings is available to Site Admins; Site Editors won't see it. These settings only appear once the Blog feature is switched on, so if the whole section is missing, that's why.
One thing to keep straight before you start: this article is about the listing, the overview page with all the cards. Styling a single post once a reader clicks through is a separate set of settings, covered in Designing Your Blog Post Pages.
Choosing a layout
Start with the overall shape of the listing. This is the biggest decision, because the rest of the settings adjust to it:
| Layout | What it looks like | Best for |
|---|---|---|
| Grid | Evenly sized cards in neat rows | The classic blog look, and the safe default for almost every business |
| List | One post per row, stacked top to bottom | Posts with longer summaries, where you want room for a couple of sentences per entry |
| Carousel | A swipeable, side-scrolling row | Keeping the blog compact, so it takes up less vertical space |
If you pick Carousel, one extra option appears: Auto-scroll. Turn it on and the row glides along on its own instead of waiting for someone to swipe it. It's eye-catching, but it also means a reader can't linger on one card without it moving, so leave it off unless you specifically want the motion.
Columns
For a Grid layout, choose how many cards sit side by side: 2, 3, or 4. Three is a comfortable default. Two makes each post feel more substantial and gives the photos more room; four fits more on screen at once and suits a blog that publishes often. Your site stacks these into a single column on phones automatically, so it always reads well on a small screen.
This option only appears for the Grid layout. A List has one post per row by definition, and a Carousel is a single scrolling row, so neither needs a column count.
Card style
This sets the visual treatment of each card:
- Framed: each card sits in its own bordered container, clearly separated from its neighbors.
- Inset image: the photo is nested inside the card with padding around it, a softer, more contained look.
- Minimal (no card): no border or box, just the photo and the text. Clean and open, and the style your blog starts with.
Image ratio
Choose the shape every card photo is cropped to. Picking one consistent ratio is what makes a listing look sharp and deliberate even when your original photos are all different sizes. Your choices are Auto (fits layout), Square (1:1), Portrait 4:5, Portrait 3:4, Landscape 4:3, Landscape 3:2, Landscape 16:10, and Landscape 16:9.
Landscape shapes are the usual choice for a blog, since most featured images are wide. Portrait shapes give each card more height and suit image-led blogs. Auto lets each photo keep its own proportions, which is the one option that can leave your rows looking uneven, so use it deliberately.
This setting is hidden if you've turned Show image off, since there's no photo left to shape.
What each card shows
A set of simple on/off toggles decides what information appears on every card. Turn on what helps a reader choose, and hide the rest:
- Show image: the post's featured image. Usually yes, since a photo is what draws the eye.
- Show excerpt / description: the short summary you write on each post. This is the teaser that earns the click, so it's worth keeping on. (Remember that StoutStack doesn't write excerpts for you. See Writing Blog Posts & Using Categories.)
- Show category / tag: a small label showing which category the post belongs to.
- Show meta (date · author): the supporting details under the title.
- Show "read more" link: an explicit link that reinforces the card is clickable. The whole card is already clickable without it, so this is about emphasis rather than function.
When you turn the "read more" link on, a "Read more" label box appears so you can change the wording. Leave it blank and it simply reads "Read more"; fill it in for something with more personality, like "Read the full story" or "See how we did it."
Fine-tuning the look
Four more settings let you dial in the details:
- Spacing between items: how much room sits between the cards. Choose Compact, Comfortable, or Spacious. More spacing feels calmer and more premium; less pulls the posts together into a denser, busier grid.
- Title size: how large each post's headline appears on its card. Choose Small, Medium, or Large. Larger titles work well when you're showing two columns; smaller ones keep a four-column grid from feeling shouty.
- Text alignment: whether the words on each card sit to the Left or are Centered. Left is easier to scan and is the usual choice; centered suits a short, punchy blog with brief titles.
- Hover effect: what happens when someone points at a card. None keeps it still, Lift raises the card slightly, and Zoom image gently enlarges the photo inside its frame. A little movement here is a helpful cue that the card is clickable.
Card fonts
Two settings control which of your brand fonts the cards use:
- Title font: the font on each post's headline. Choose your Heading font or your Body font.
- Body text font: the font on each card's summary. Choose your Body font or your Heading font.
These only ever use the two fonts you already picked in Branding → Typography, so nothing extra loads and your site stays fast. Most people leave these alone: titles in the heading font and summaries in the body font is the pairing that already looks right. Swapping the title to your body font is a nice trick if your heading font is dramatic and a page full of headlines starts to feel loud.
The category filter
Above your posts, readers get filter buttons so they can narrow the listing to a single category without leaving the page. Two settings control how those look:
- Category filter style: choose Pills (rounded buttons), Underline on hover (plain text that underlines as you point at it), or Plain text (simple text links). Pills read most clearly as buttons; the other two are quieter and suit a minimal blog.
- Show counts on categories: adds the number of posts beside each one, like "News (12)". Counts are genuinely useful once a category has a decent number of posts in it, and slightly discouraging when one only has a single entry, so switch this on when your blog has filled out a little.
The buttons are built automatically from the categories you've created, so there's nothing to wire up. Add a new category and a new button appears on its own. See Writing Blog Posts & Using Categories for how to create them.
What your blog starts with
If you never open this tab, your blog still looks good. These are the settings it ships with:
| Setting | Starting value |
|---|---|
| Layout | Grid, 3 columns |
| Card style | Minimal (no card) |
| Image ratio | Landscape 16:9 |
| What each card shows | Image, excerpt, category, and meta all on; "read more" link off |
| Spacing / title size / alignment | Comfortable, Small, Left |
| Hover effect | Zoom image |
| Fonts | Titles in your heading font, summaries in your body font |
| Category filter | Pills, counts off |
Good to know
- These settings apply to your whole blog. You're designing the listing once, not post by post, which is what keeps every entry looking like it belongs to the same publication.
- Change the design, not the posts. Nothing here edits your writing. You can switch layouts as often as you like and your posts are untouched.
- Consistent photos matter more than any setting. A fixed image ratio does a lot of the work, but featured images shot at wildly different qualities will still show. If your listing looks untidy, look at the photos before the settings.
- Check it on a phone. Most blog readers arrive on a phone, where every layout collapses to a single column. A four-column grid and a two-column grid can look surprisingly similar there, so judge the desktop and mobile views separately.
Related reading: Designing Your Blog Post Pages (styling a single post), Writing Blog Posts & Using Categories (creating posts and categories), and Fonts & Typography (choosing the two brand fonts these cards draw from).