How to use the public preview card in Ghost

The public preview card in Ghost is a simple yet effective tool for engaging your readers and growing your membership base. It allows you to share a sneak peek of your premium or members-only content with everyone, giving them just enough to entice them into signing up for full access. This feature is especially useful for publishers who want to increase newsletter signups, boost membership growth, or simply monetize their content more effectively.

When used correctly, the public preview card serves as a bridge between free content and exclusive material. It helps create a sense of urgency and curiosity among your visitors, encouraging them to take action.

In this guide, we'll show you how to add the public preview card, configure the access levels (free, members-only, or paid), and add some styling effects like a fading content effect to enhance the user experience.

How to add the public preview card

The public preview card is a built-in feature in Ghost and you can add the preview card to any content that has restricted access, such as members-only posts or paid articles, making it easy for your audience to get a glimpse of what they’re missing.

To add the public preview divider select the option from the card menu in the editor or type /paywall on a new line.

You can place the preview card to a specific location within the content wherever you feel it's most effective. For this simply drag can drop the card in the editor.

To control the visibility of the preview card, you need to configure your content’s access level. Ghost allows you to set visibility for posts and pages, and this directly influences the preview card’s behavior. For example:

• Public – No restrictions.
• Members only – Only logged-in users can read the full post.
• Paid-members only – Only paying subscribers can access it.
• Specific tiers – Restrict content to certain subscription tiers.

Once the preview card is in place, visitors can see a teaser of the content behind a paywall, prompting them to subscribe or upgrade their membership to access the full post.

In addition to adding the preview card, you may want to customize the content CTA to drive conversions effectively. The content CTA can be used to guide users to either subscribe or upgrade their membership, depending on whether they’re logged in or not. For detailed steps on how to customize the content CTA, refer to our previous post on customizing the default content CTA in Ghost.

Add a fading effect on the public content

You can enhance the user experience by adding a fading content effect to smoothly transition from the public preview to the restricted content. This effect creates a visually appealing way to indicate that more content is available after signup, rather than abruptly cutting off the text.

This can be done with CSS and even from code injection

<style>
.ghost-content { position: relative; }
.ghost-content:after {
  z-index: 0;
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: min(100%, 500px);
  background: linear-gradient(transparent, #fff 50%);
}
</style>

The above creates a transparent overlay that sits on top of your content. You can see this in action in the Brief theme.

To apply this for a different theme, you should consider the following changes:

• the .ghost-content class: your theme might use a different class for the main article element, so you might have to change that.
• the height: min(100%, 500px): change the 500px to make the fading smoother or more abrupt
• the background: linear-gradient(transparent, #fff 50%): change #fff to the background color your theme uses

Final thoughts

The Public Preview Card in Ghost is a powerful tool for converting casual readers into engaged members. By strategically placing the preview divider and setting the right visibility levels, you can create an effective teaser that encourages users to sign up or upgrade their membership.

If you're looking to further customize membership-related content in Ghost, check out our guide on creating member-specific blocks and how to customize the default content CTA to maximize conversions.