Skip to main content
The Blog Preview section shows up to 3 of your newest blog posts as cards, with a button to the rest of your blog. Use it to keep your home page fresh, or to suggest more reading below a post. Who can do this: anyone who can edit the page. The CSS tab is for Admins and Owners.
Parker's Blog Preview as visitors see it: heading "From the blog", a one-line subheading, an "All posts" button on the right, and 3 post cards, each with a photo, category badge, date, title, excerpt and "Read post" link.Parker's Blog Preview as visitors see it: heading "From the blog", a one-line subheading, an "All posts" button on the right, and 3 post cards, each with a photo, category badge, date, title, excerpt and "Read post" link.

Your newest posts, with a button to the full blog.

When to use it

  • To show visitors your business is active, right on your home page.
  • To point readers to more posts at the bottom of a blog post.
  • To pair news or tips with a related page, such as a training page.

Where the posts come from

You don’t pick posts in the section. It shows up to 3 of your newest posts, newest first, by each post’s Publication Date. To change a post’s place, change its Publication Date on the post’s Basics tab. You write posts in the Blog Posts manager: press ⌘K (Ctrl+K on Windows) and choose Blog Posts under Manage. Each card uses the post’s main picture (its featured image), title, short summary (its excerpt), category, date and author. See Blog for how to write posts and set up categories.

Add it to a page

1

Open the page

Sign in, open the page on your site, and choose Edit in the edit bar at the top.
2

Find the spot

Select the section next to where the new one should go. A round + button appears on its top and bottom edges. On an empty page, choose Add Content in the middle.
3

Choose the section

The Add Content menu opens with its groups. Choose the section, then select it and choose Edit in its side toolbar to make it yours.
For the full walkthrough, see Add, move and remove sections. Choose Add Content → Content → Blog Preview. To suggest more reading below a post, add it to the post’s After content, the full-width space under the post’s text. Press ⌘K (Ctrl+K on Windows), choose Blog Posts under Manage, and open the post. On its After Content tab, choose Add Content → Content → Blog Preview.

What you can change

Select the Blog Preview on the page and choose Edit. The editor opens beside the page, so you see each change as you make it. It has five tabs. Your changes go into the page’s draft. Visitors see them once the page is published with Update in the edit bar (Publish on a page never published).
The Blog Preview editor open on the Blog Preview tab beside the live section, with the tab strip ringed (Blog Preview, Background, Fonts, Button, CSS) and Heading ringed, then Subheading, Image shape, Image hover and Image fills the card.The Blog Preview editor open on the Blog Preview tab beside the live section, with the tab strip ringed (Blog Preview, Background, Fonts, Button, CSS) and Heading ringed, then Subheading, Image shape, Image hover and Image fills the card.

The Blog Preview editor, with the section updating beside it.

The heading and how each post card looks.Heading
  • Heading: the section’s title. The default is “From the blog”.
  • Subheading: one short line under the heading. Clear it to hide it.
Image
  • Image shape: Wide (16:10), Photo (4:3), Classic (3:2) or Square (1:1). Choose Hidden (no image) for text-only cards.
  • Image hover: Zoom in or None.
  • Image fills the card: the photo becomes the whole card, with the title over a dark band. Posts without a photo keep a normal card.
Card
  • Card style, Card corners and Card hover effect: the card’s frame, its corners and what it does on hover. See Buttons and card styles.
  • Hover accent color: the color of the hover effect. Leave it empty to use your site’s accent color.
What each card shows
  • Show category: the post’s category badge, a small label with the category’s name. Category badge style can be Filled, Outline or Minimal. Each category’s color is set in the Blog Categories manager: press ⌘K (Ctrl+K on Windows) and choose Blog Categories under Manage. See Blog.
  • Show date, Show excerpt and Show author: turn each one on or off. Excerpt lines sets how many lines of the excerpt show.
  • Show “Read post” link: the link at the foot of each card. “Read post” placement can be Auto (per layout), Below the text or Right side. This section always shows its cards in a grid, so Auto (per layout) puts the link below the text.
Text colorsSet the color of the title, the excerpt, the date line and the “Read post” link, and their hover colors. Each color can be set separately for the dark and light themes. You can also set Title weight and Excerpt weight.
Give the section its own background color, from your site’s palette or a custom color. See What every section shares.
Use a different typeface for parts of this section only, such as the heading. Leave it empty to use the page’s fonts, which normally come from Site design → Typography. See What every section shares.
The button beside the heading. It starts as “All posts”, linking to your blog page. Change the label or the link, or clear the label to hide it. See Buttons and card styles.
Custom styles for this section only. Admins and Owners can change this tab. See Custom CSS.

Looks you can make

A Blog Preview where each card is a full photo with the title and date over a dark band at the bottom.A Blog Preview where each card is a full photo with the title and date over a dark band at the bottom.

Image-filled cards put your photos first.

A photo-led strip. Choose Photo (4:3), turn on Image fills the card, and turn off Show excerpt.
A Blog Preview with text-only cards: outline category badges, titles, 2-line excerpts and "Read post" on the right, on a soft accent background.A Blog Preview with text-only cards: outline category badges, titles, 2-line excerpts and "Read post" on the right, on a soft accent background.

Text-only cards suit news and quick tips.

Quick news and tips. Set Image shape to Hidden (no image), choose the Outline badge style, and give the section an Accent (soft tint) background.

Good to know

  • No posts, no section. With no posts to show, the section stays hidden, even while you edit. It appears once your blog has a post.
  • Up to 3 posts. With 3 posts, the cards sit side by side on wide screens, 2 per row on tablets, and stacked on phones. With 1 or 2 posts, the cards keep the same width and the rest of the row stays empty.
  • Drafts show while you edit. You see posts you haven’t published yet. Visitors see only your newest published posts.
  • Where it fits. Blog Preview is a full-width section. It isn’t offered inside columns or in a post’s Body.
  • Write alt text for your post photos, so every card makes sense to screen reader users. Alt text is a short description that screen readers read aloud, such as “Two puppies playing tug-of-war on the lawn”. To add it, open the command palette (⌘K, or Ctrl+K on Windows), choose Images, choose the photo, and fill in Alt Text. See The media library.

Appearance options

Most sections also share a few tabs that work the same everywhere:
  • Background: set the color behind the section, separately for the dark and light themes.
  • Fonts: use a different typeface for parts of this section only.
  • CSS: add custom styles to this section. Admins and Owners can change it.
See What every section shares for every option.

Blog

write posts, add categories and authors, and set up your blog page.

Buttons and card styles

every card style and hover effect.

What every section shares

background, fonts and custom styles.