Site Administration Manual

Tags

Ghost supports two types of tags: regular or “public” tags and internal tags.

Public Tags

Regular tags that are visible to visitors. They appear on posts, in tag archives. They can be used for navigation and to assemble different posts together. Examples of good internal tags could be:

• Sales
• Leadership
• AI

The tags are important and should be defined carefully.

Internal Tags

Tags prefixed with # that are hidden from visitors. They are only visible in Ghost Admin and are used for organizing content. All internal tags start with #zz- which makes them “internal” in Ghost (the # prefix hides them from visitors). The zz- prefix groups them together and ensures they sort to the bottom of your tag list in the admin panel, this will show the external tags, you use for editing Posts, at the top.

How to use: When editing a post or page in Ghost Admin, add the appropriate internal tag to control its placement on the site.

Content Truncation (Automatic)

A page can have an introduction which can appear on another part of the site like the home page. To store both the contents of a page and this introduction in one page, we use the same content section in the edit mode.

How it works

• On homepage sections (hero-book-promote, academy-services, etc.): Content after the first divider (---) is automatically removed. Only the content before the divider is shown (useful for short teasers).
• On full pages (page.hbs): Content before the first divider is automatically removed. Only the content after the divider is shown (useful when the beginning of a page is used elsewhere as a teaser).
• In both cases, the divider itself (<hr>) is also removed.

Important — <hr> quirks for editors:

Because truncation is always active, any <hr> (horizontal rule / divider ---) you insert in content will trigger truncation. This means:

• If you use a divider (---) in the Ghost editor, everything after it will be hidden on homepage cards, or everything before it will be hidden on the full page (depending on the template).
• If you need a visible horizontal rule in a post or page without triggering truncation, insert a phantom <hr> — an HTML block that looks like a divider but is not a real <hr> element. For example, use a styled <div> instead:

  <div style="border-top: 1px solid #ccc; margin: 2em 0;"></div>
  

• Best practice: Only use --- (divider) deliberately as a truncation separator. For decorative line breaks, use the phantom approach above.

Deprecated: The internal tag #zz-hr-truncate is no longer used. If you see it on existing content, it can safely be removed — it has no effect.

Example

Pages tagged with #zz-academy-service-offer appear as service cards in the Transform section on the homepage. Use a divider (---) to separate the teaser from the full content — truncation is automatic.

Required tags: #zz-academy-service-offer

Card Icons via Feature Image Caption

Transform offer cards can display a Font Awesome icon above the title. To add an icon:

1. In the page editor, click on the featured image and find the Caption field
2. Enter the icon name in the pattern [fa-icon-name], e.g. [fa-graduation-cap]
3. The theme’s JavaScript will detect this pattern and render the corresponding Font Awesome icon

Rules:

• The caption must contain only the icon pattern — nothing else (e.g. [fa-handshake])
• The fa- prefix is required; the full class name maps to Font Awesome Solid icons (fa-solid)
• If the caption does not match the [fa-xxxx] pattern, it is hidden on the card
• Font Awesome must be loaded on the site (added in the theme’s default.hbs head)

Common icons for services:

• [fa-graduation-cap] — Academy / Training
• [fa-handshake] — Counsel / Consulting
• [fa-microphone] — Keynote / Speaking
• [fa-calendar-days] — Events
• [fa-book-open] — Book / Reading

Browse all available icons at fontawesome.com/icons.

Example page structure:

Tags: #zz-academy-service-offer

Title: Academy
Featured Image: [upload an image]
Feature Image Caption: [fa-graduation-cap]

Learn to master the human edge in sales...
(This paragraph appears on the homepage card)

---

[Detailed content, pricing, schedules, etc.]
(This content only appears on the /academy page)

Feature Image Caption Directives (Pages)

The feature image caption field on pages can also be used for layout directives. These are detected by the theme and are not displayed to visitors.

How to use: In the page editor, click on the featured image, find the Caption field, and enter the directive (e.g. [no-border-radius]). The match is case-insensitive.

How to structure a Transform offer page:

1. Title - Becomes the card heading (e.g., “Academy”, “Counsel”)
2. Featured Image - Displayed as the card background
3. Feature Image Caption - Optional icon using the [fa-xxxx] pattern (see below)
4. Content before divider - Shown as the card description on the homepage
5. Content after divider - Only visible on the full page, not on the homepage card

Hero Color Templates

To change the hero section background color on a page, use the Template dropdown in Ghost’s Page Settings (instead of the old #zz-hero-* internal tags which are now deprecated).

How to use: In the page editor, open Page Settings (gear icon), scroll down to Template, and select one of the hero color templates from the dropdown.

Navigation Menus

Ghost Admin has two navigation sections under Settings → Navigation: Primary and Secondary. Both use the same > convention for parent/child hierarchy.

Primary Navigation (top menu bar)

The primary navigation is displayed in the header as the main menu. Use the > convention to create dropdown sub-menus:

Children must immediately follow their parent. A new parent or regular item ends the previous group.

Secondary Navigation (member menu)

The secondary navigation feeds into the member dropdown menu in the header. This dropdown is only visible to logged-in members (behind the “Members” button).

It uses the same > convention for hierarchy, plus the [fa-xxx] convention for Font Awesome icons on parent items.

How to configure in Ghost

Admin → Settings → Navigation → Secondary:

Tree structure:

The flat list above is restructured into a proper nested tree in the browser. Each parent becomes a container with its children nested inside it (<ul><li>…</li></ul>). This allows the theme to show or hide entire branches based on membership tier.

Tier matching and visibility:

• Parent labels must match the tier names configured in Ghost Admin → Settings → Tiers (case-insensitive)
• The member’s active subscription tier determines which parent gets the tier-active class
• Active tier: fully visible with highlight color, children are shown and clickable
• Non-active tiers: dimmed (opacity 0.4), children are hidden and not clickable
• Free members (no paid subscription): the first parent in the list is automatically activated — so the free tier should always be listed first
• An “Account” link is automatically appended at the bottom (links to the Ghost Portal account screen)

Icon rules (same as feature-image captions)

• The [fa-xxx] prefix is optional — parents work without icons too
• Only one icon per label, placed at the start within square brackets
• Icons map to Font Awesome Solid (fa-solid), e.g. [fa-user] becomes <i class="fa-solid fa-user"></i>
• Browse icons at fontawesome.com/icons

Custom settings

Settings related to the header buttons

Ghost Admin → Settings → Design → Site-wide