How to design the blog list and post pages

When you switch the TeleportHQ blog on, it builds two pages in a blog folder: blog-posts-list, the list of your posts at /blog, and blog-post-details, the page every post uses. You style them like any other page, and every post follows the same design. In Blog Settings, Listing Page Settings set up the list page: its Home or Sidebar page layout, the category filter, search, sort and how the posts are laid out. The Post page block switches the post page's elements on or off, and Restore Default Layout… puts both pages back to the default. The Help Center works the same way, with help-articles-list (/help) and help-article-details in a help-center folder.

Before you start#

• Your project needs the Blog or the Help Center switched on. See How to add a blog to your site or How to add a help center to your site.
• Design changes reach your live site after you publish again. New and edited posts show without publishing.

What's on each page#

The list page (/blog) starts with the Home page layout. It opens with a panel holding the title Blog and the line "Read our latest articles and updates." at the left and, on the same line at the right, the category filter, the sort and a Search posts... box. With Category Pages on, your categories show as cards under Browse by category. Below, your published posts show as cards, newest first, 20 to a page. In the Sidebar page layout, your categories are listed on the left instead, and the posts sit beside them; that list is the category filter, so there is no dropdown.

The post page (/blog/ followed by the post's address) shows the breadcrumbs, the category chips, the title, the author, date and reading time, the main picture with its gallery, the text and the tags. Below the text come the Share Buttons, the Author Box, Previous & Next Posts and the Related Posts, and a Reading Progress bar runs under your header. A post without tags shows no tags row, and when a post has only a Next link, that card sits on the right.

The post card (Blog Post Card) is one component shared by the list and the Related Posts strip: edit it once to change every card.

In the Help Center, the list page reads Help Center and "Guides and answers to common questions.", puts the category filter, the sort and the Search articles... box beside them on the same line, shows the categories under Browse by topic and then the articles, as text cards without pictures. Its article pages also start with a Contents list. See How to show a table of contents beside a post or article.

Set up the list page#

The Listing Page Settings of the TeleportHQ Blog decide how the list page works: its page layout, how readers filter the posts, what they can use above the posts, and how the posts are laid out.

1. In the left sidebar (the icon column), click Blog, or Help Center.
2. At the top right of the panel, click the gear (tooltip Blog Settings, or Help Center Settings).
3. Under Listing, click Listing Page Settings next to Listing Page. The Listing Page settings open beside Blog Settings. View on Canvas at the top of the panel, left of its x, shows the list page on the canvas with the settings still open; it is greyed out while the canvas already shows the list page. With the list page open on the canvas, you can also click Blog page settings (Help Center page settings) above the posts.
4. Change a setting. TeleportHQ applies it to the list page at once. A Blog Listing Updated window (Help Center Listing Updated in the Help Center) then offers Show the Page, which closes the settings and shows the list page at its filters, or Keep Editing, which leaves them open and doesn't ask again while they stay open. After Show the Page, a Back to blog listing settings button (Back to help center listing settings) above the canvas opens the settings again for a few seconds.

The settings come in four blocks:

1. Layout: the Page layout, Home or Sidebar. See the next section.
2. Filters: one row, Category filter, with four buttons. A page shows one category picker, so picking one puts the others away.
   • Off: no category picker above the posts.
   • Dropdown, the start for a new blog: a dropdown of your categories beside the search. Picking one also shows its sub-categories' posts.
   • Panel: your categories in a panel beside the posts, always open, with a search and a checkbox per category.
   • Tabs: a tab per category above the posts, with the one on show highlighted. It suits a blog with a few main topics. In the Sidebar page layout the row is greyed out: "The categories list beside the posts does this in the Sidebar layout."
3. Search and sort:
   • Search: a search box readers find posts with.
   • Sort: a menu with Newest first, Oldest first, Title (A-Z), Title (Z-A), Reading time (shortest first) and Reading time (longest first). Readers land on the newest posts. With Manual Order on, Your order comes first and is where readers land; see How to put posts or articles in your own order. Sort is on for blogs set up now, and off on older ones.
4. Post views (Article views in the Help Center):
   • Grid of cards, List of rows (one post per row, its picture beside its text), or both. With both on, Default view picks the one readers land on, and they switch with a toggle beside the search.
   • Card pictures: each card opens with its post's picture. The layouts that set a card apart need it. In the Help Center it's off at the start, and when you turn it on, only articles with a picture show one.
   • Card layout, while Grid of cards is on: Grid, Spotlight, Bento, Editorial or Masonry, then the cards' colours: As designed, Featured (needs a layout that sets some cards apart) or Colourful.
   • Cards per row, while Grid of cards is on: Auto, 2 per row, 3 per row or 4 per row on wide screens. Narrower screens show fewer, phones one. A blog set up now starts with 3.
   • Posts per page: between 1 and 100. The default is 20.
   • More posts: how readers reach the next posts: Numbers, Previous / Next, Load more or Infinite.

If the list page is a page of your own that you connected to the blog, the Layout block says "This is your own page: its cards keep the layout you gave them." and the Post views block offers only Posts per page and More posts. Its own search box and category links stay: the Search switch says so, and Tabs can't be picked under Category filter.

Choose Home or Sidebar for the list page#

In TeleportHQ, the blog's list page has two page layouts. Pick one in Listing Page Settings → Layout → Page layout, the first row of the Layout block:

• Home: a panel across the page with the title at the left and, on the same line, the category filter, the sort and the search, then your categories as cards when Category Pages are on, then the posts.
• Sidebar: your categories in a list on the left that stays in view while readers scroll, with the posts beside it. The list is the category filter: a category opens its category page when Category Pages are on, and narrows the posts otherwise.

Every other listing setting applies in both. A few work together with the page layout:

• With Sidebar, the Category filter row is greyed out on Off. Your choice is kept and comes back when you switch to Home again.
• With Sidebar, Cards per row goes up to 3 ("Up to 3 beside the topics list."). If you chose 4 for Home, it comes back when you switch to Home again.
• The category page (with Category Pages on) takes the same page layout. In Sidebar, its posts follow the list's Card pictures, Card layout and Cards per row.

TeleportHQ rearranges the list page, and the category page, as soon as you click a tile. The page keeps its address, your texts and your settings. To go back, click the other tile, or undo. If neither tile is selected, your list page was built before these layouts: pick one to lay it out again.

Choose what the post page shows#

In the same settings, the Post page block (Article page in the Help Center) switches elements on or off on every post page at once: Contents, Share Buttons (click Networks to choose them), Author Box (click Authors to manage your authors list), Previous & Next Posts, Reading Progress and Heading Links. See How to add authors to your posts and articles and How to show a table of contents beside a post or article.

Style the list page#

1. In the left sidebar, click Pages, Components & Tree View and open the blog folder.
2. Click blog-posts-list.
3. If your blog has no posts yet, click Preview with example posts on the canvas. Three example posts fill the list; they are never saved or published.
4. Select elements and style them in the right panel, like on any page. To restyle every card, edit the Blog Post Card component.
5. When you're done, click Clear example posts.

Style the post page with a real post#

1. In the blog folder, click blog-post-details.
2. Above the canvas, click the post picker (Select Post) and pick a published post. The canvas shows it.
3. Style the page in the right panel. The design applies to every post.

To show a post on the canvas from the Blog panel, double-click it in the list, or click View on Canvas at the top of its panel. To jump from a post's text on the canvas to its panel, double-click the title, excerpt or date.

Show your latest posts on another page#

1. Open the page, for example your homepage.
2. In the left sidebar, click Elements.
3. In the Blog group, drag Grid Blog Posts or List Blog Posts onto the page. Details Blog Post adds a single post instead.

4. Style the list like any list. To change how many posts show, see How to split a long list into pages.

The group's other elements (Share Buttons, Author Box, Previous & Next Posts, Reading Progress and Contents) go on the blog's post page only.

Put the pages back to the default layout#

Use this to undo design changes on the list and post pages, or to pick up what TeleportHQ improved since you switched the blog on.

1. In Blog Settings, under Restore Default Layout, click Restore Default Layout….

   

2. Read the window. What is kept: your posts, categories and settings; the post card with your design; links other pages have to the two pages; a page of your own that you converted into the list or the post page. What is lost: design changes you made on the two pages, and addresses you gave them.

   

3. Click Restore Default Layout to rebuild the pages, or Cancel.

Rebuild deleted blog pages#

If the blog's pages were deleted, your posts, categories and blog settings are kept. The Blog panel then reads Blog Pages Deleted, and the pages list shows a blog placeholder with an Activate button ("This folder was deleted, but your posts, categories and blog settings were kept. "Activate" builds its pages again.").

1. In the Blog panel, click Activate Blog (or Activate on the placeholder).
2. Follow the Activate Blog window. It says "Your blog pages were deleted, but your posts, categories and blog settings were kept. Activating the blog builds its pages again, with:" and lists what you get.

The rebuilt pages have the default design. See How to add a blog to your site for the window's steps.

Check that it worked#

• On the canvas, blog-posts-list shows your cards with the new style.
• After you publish, your live /blog page and each post page show the new design. See How to publish a web app.

Troubleshooting#

The canvas shows "Post Not Available" The post picked on the post page is a draft, scheduled or archived. Click Publish Post to publish it, or pick a published post in Select Post. In the Help Center, the box reads Article Not Available, with Publish Article.

The canvas shows "No Blog Posts Yet" Your blog has no published posts (No Help Center Articles Yet in the Help Center). Click Create Manually to write one, or Create with AI. Preview with example posts only appears while the blog has no posts at all.

"This project has no blog post page to show it on." The blog-post-details page was deleted. Rebuild it with Restore Default Layout…, or as described in Rebuild deleted blog pages.

The Blog group in Elements says Blog Required The blog isn't on. Click Enable Blog to start the setup.

Listing Page Settings say "Your blog has no listing page." The list page was deleted. Click Regenerate blog pages: the Regenerate Blog Pages window builds the missing page again.

A switch in Blog Settings is greyed out Its note says what's missing, for example "Your blog has no post page to add this to." or "Your blog has no listing page for tags to open." Rebuild the pages with Restore Default Layout….

Good to know#

• If /blog was already in use when you switched the blog on, the list page gets a different address. You can change the blog pages' addresses like any page's: post cards, breadcrumbs and category links point to the pages themselves, so they follow. Restore Default Layout… puts the default addresses back. See How to change a page's URL and create nested URLs.
• Preview with example posts exists on the Blog's list page only, not on the Help Center's.
• You can also ask the AI Assistant to change the Blog's list page, for example "add a sort to the blog" or "show 9 posts per page, 3 per row". It changes the same settings as Listing Page Settings, except the page layout, and only for the Blog.
• A post's reading time is worked out from its text when you leave it empty.
• The live list can take a few minutes to show a change in rare cases; normally new posts show within seconds.