Ghost 4.0: Basic and Advanced functionalities of the Public Preview feature.
Ghost CMS aims to build the most convenient, minimalistic, and affordable website engine for writers.
One of the main features of the newly launched Ghost 4.0 public preview card/divider. This function is great to regulate your audience based on plans. You can use this feature either on posts or pages of your website to make a part of your content visible to all (Public). It lets you restrict the visibility of the remaining content for paid members or logged-in users.
The previous version, Ghost 3.0 required you to hardcode and embed your code to protect the content from a specific set of users. In most cases, the content was blurred to control the visibility. The latest Ghost 4.0 Theme has added significant flexibility to control the content visibility. You can manage the visibility according to your preferences for each post. Moreover, this feature is easy to use and does not require coding or updating the theme.
Public Preview feature in Ghost 4.0: Basic functionalities.
In the card menu, scroll down to the Public preview option and select it. Selecting this option will insert a divider on your page/post.
You can drag and drop the divider anywhere on the page and set the visibility preference as per requirement. The Public Preview lets you set posts for free members and paid members. To control this preference, you need to go to the post settings and select Post Access.
When you set the preference to members only, the content after the divider is visible to all the logged-in members. Whereas, when you set the post preference to Paid members only, only the people with an active subscription can view the content after the divider.
These dividers can be placed and moved anywhere around the page as required. There is no limit on how much content you can include after the Page Preview divider.
Create custom CTA using the Public Preview feature in Ghost 4.0: Advanced functionalities.
The Public Preview feature in Ghost 4.0 lets you apply some changes at the theme level. You can modify the template files and create a customized call-to-action (CTA) to control the visibility. For example: Fade out effect.
The default settings of the {{content}} helper in post.hbs displays the part of the content set to the public. The call-to-action is also set to default which comes with Ghost Content Management System (CMS). You can modify this CTA by creating a new file named content-cta.hbs
An example of this is as follow:
This setting also allows you to customize your messages and make them more relevant to your business and audience. You can even regulate how the CTA functions.
Following is an example that will help you create a fading effect for your public content.
<div>{{#if access}}{{content}}{{else}}<div>{{{html}}}</div>{{> content-cta}}{{/if}}</div>
You can restrict access to some contents using {{access}} helper. For example: For content that is restricted to logged-in paid members only, the {{access}} helper will return true, and the content will be visible. Whereas, {{html}} and the{{> content-cta}} will be visible for the regular users.
CSS handles the advanced public preview fading out effect. You can see the .fading class below:
.post-sneak-peek {
position: relative;
}
.post-sneak-peek.fading:after {
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 80%;
background: linear-gradient(transparent, var(--color-bg-body) 85%);
}
Perks of the Public Preview feature
- A little sneak peek into your content will help you convert anonymous users into logged-in or paid members.
- Control the visibility and save the best part at the end of the article.
- Include crawlable content in members-only URL to gain maximum exposure and rank on top in search engines.
If you still need any help to customize the ghost theme, feel free to contact us.
