Posts and site content

Design your post pages

Every post on your site uses the Post template. Its default sections are, from top to bottom:

Section What it shows
Post Header The primary tag, the title, the excerpt, and a byline with the author, the date and the reading time
Featured Media The post's feature image and its caption
Post Content The text you write in Ghost, and a sidebar with a table of contents beside it
Post Comments Ghost's comments, when they are on in Ghost Admin
Related Posts Four posts that share the post's primary tag

The text of a post comes from Ghost Admin, and you edit it there. Its fonts and sizes come from Styles in the left sidebar, and the sections around it come from this template. Ghost pages use the Page template, which has a Post Content section of its own.

Open the Post template

  1. Open your project in Fantasma.
  2. In the left sidebar, under Templates, click Post. The canvas shows a sample post.

A change here shows on every post. To give some posts a design of their own, see Give posts with a tag their own design and Let writers choose a template in Ghost.

The header and the other sections hold data blocks, which show each post's own title, date and author. Show the post title and other page data explains them.

Set up the sidebar beside the post

The Post Content section puts the blocks you add to it in a sidebar, and the post text in the main column. By default the sidebar holds a table of contents.

  1. In the Sections list, click Post Content.
  2. In the right sidebar, under General, find Widgets. In Position, click one of the four arrows, which are, in order, Up, Down, Left and Right. Left and Right put the sidebar beside the post, Up and Down over or under the post text. Right is the default.
  3. With Left or Right, Sticky keeps the sidebar in view while readers scroll. It is on by default. Turn it off to let the sidebar scroll away.
  4. With Left or Right, Wide-screen sidebar layout keeps the post column in the middle of the screen and puts the sidebar beside it. Turn it off to center the post and the sidebar together.
The Post template with Post Content selected, its Widgets settings in the right sidebar, and the table of contents beside the post text on the canvas

The sidebar sits beside the post on screens about 1024 px wide or more. On a narrower screen it moves under the post with Right, or above it with Left. An empty sidebar takes no space.

To add a block to the sidebar, point at the Post Content row in the Sections list and click the + at its right end. You can add up to 21 blocks to it, such as a heading, share buttons, Search, a post list, or custom blocks such as About and Recommendations List under Custom in the block picker.

Change the table of contents

The Table of Contents block lists the headings of the post and links to each one. In the Sections list, click the arrow beside Post Content, then click Table of Contents.

Setting What it does
Headings Which headings it lists: H2, H2 + H3, the default, or H2 + H3 + H4.
Highlight Active Link Marks the heading the reader is at while they scroll. On by default.
Collapse on Small Screens On small screens, where the sidebar leaves the side of the post, the list also shows above the post. With this on, that copy starts closed and opens when the reader taps it. On by default.

A post without headings shows no table of contents. When the sidebar holds only the table of contents, it hides on small screens, and the copy above the post takes its place. When a Heading block sits right above the table of contents, the closed copy on small screens uses its text as its title. On a locked post, the list ends with an Unlock full content link to the sign-up box.

Start from another layout

To swap the whole Post Content section, add a section under it, click All patterns and pick one from the Content category. With Sidebar has a table of contents and a list of popular tags beside the post. Narrow has no sidebar. Then select the old Post Content section and press ⌫ (Backspace) to delete it. Add a section to a page shows how to add one.

Change how the post text looks

Two switches in Project settings › Features change the post text itself. Project settings opens from the project name at the top of the right sidebar. Lightbox opens post images full screen when a reader clicks them, and it is on by default. Code highlighting colors the code blocks in your posts, and it is off by default.

Drop Cap, in the Post Content section's General group, makes the first letter of each post large.

Your site shows these changes after you publish the theme.

Was this article helpful?