The Learn Ghost Theme includes special custom settings that allow you to adjust the appearance and functionality of your site directly from the Ghost Admin Panel.
These options give you full control over colors, layouts, cards, headers, and additional theme features—without editing any code.

You can find these options inside:
Ghost Admin → Settings → Design → Site-wide Settings

Color Settings

These settings let you align the theme with your brand identity. All color pickers support HEX codes, so you can match your exact design palette.

• Body Text Color
  Default: #575961
  Defines the default color of all text in body content, including paragraphs and list items.
  Tip: Use a darker gray for better readability instead of pure black.

• Heading Text Color
  Default: #022249
  Controls the color of headings (h1, h2, h3, etc.).
  Tip: Use your brand’s primary color to make headings stand out.

• Border Color
  Default: #e5e7eb
  Applies to borders around cards, forms, and dividers.
  Tip: Keep this neutral (light gray) for a clean look, or switch to brand tones for more emphasis.

• Light Gray Color
  Default: #f6f5f5
  Used for subtle background areas, section separators, and muted highlights.
  Tip: Ideal for section blocks behind testimonials, feature grids, or course previews.

• Brand Color Light
  Default: #e6eefd
  A lighter accent version of your brand color, used on buttons, highlights, and hover effects.
  Tip: Pair this with your main brand color for consistent CTAs.

Homepage Settings

These settings let you control special sections on the homepage layout.

• Course Tag Slug 1
  Default: android
  The first tag used to display a categorized block of courses on the homepage.
  Example: If you enter design, all posts/courses tagged with design will appear here.

• Course Tag Slug 2
  Default: web-development
  The second tag for another categorized block of courses.
  Example: Use this for popular topics like marketing or seo.

• Enable Categorized Course Section
  Default: true
  Turns the categorized course blocks on or off.

• Enable Latest Course Section
  Default: false
  Displays the most recently published courses on the homepage.
  Great for keeping your site fresh if you publish often.

Post Settings

These settings define how blog posts appear and behave.

• Post Share Enabled
  Default: true
  Shows or hides social media share buttons at the bottom of each post.
  Disable if you want a distraction-free reading experience.

• Post Header Style
  Options:

  • No Image → Text-only header
  • Image on Right → Title on left, feature image on right
  • Image on Left → Title on right, feature image on left
  • Image on Top → Feature image above the title
    Default: Image on Right
    Tip: Use No Image for minimal layouts, or Image on Top for a more blog-like feel.

Page & Lesson Settings

These settings apply to static pages, course lessons, and course detail pages.

• Page Header Style
  Options: No Image, Image on Right, Image on Left
  Default: Image on Right
  Controls how static page headers (like About, Contact, etc.) are displayed.

• Lesson Header Style
  Options: Image on Right, Image on Left, Header Inside Content
  Default: Image on Right
  Defines how lesson pages display their titles and media.
  Tip: Use “Header Inside Content” for a tighter layout when lessons are short.

• Course Header Style
  Options: Image on Right, Image on Left
  Default: Image on Right
  Defines how the main course detail page header is displayed.
  Tip: Keep consistency across all courses for a professional look.

Card Styles

Control the design of the “cards” used across your site for courses and posts.

• Choose Post Card Style
  Options: Style 1, Style 2, Style 3
  Default: Style 1
  Changes the layout of blog post previews (image orientation, metadata placement, etc.).

• Choose Course Card Style
  Options: Style 1, Style 2
  Default: Style 1
  Changes the layout of course previews.
  Tip: Try different styles to see which makes your course catalog more engaging.

Layout & Design

• Disable Rounded Corners
  Default: false
  If enabled, all rounded corners (on buttons, cards, images) will be removed.
  Tip: Use this if you prefer a sharp, modern design instead of a soft, rounded look.

Footer

• Footer Copyright
  Default: All Rights Reserved
  The text displayed at the bottom of every page.
  Tip: Replace with your brand name, e.g. © 2025 Learn Ghost. All Rights Reserved.

✅ Summary

With these customization options, you can:

• Match your site’s colors to your brand identity
• Control homepage blocks for courses and latest content
• Adjust headers for posts, pages, lessons, and courses
• Choose between multiple card styles
• Fine-tune the overall design feel (rounded vs sharp)
• Update footer branding easily

All of this can be done directly from Ghost Admin without touching any code, making it beginner-friendly yet powerful.

The Learn Ghost theme includes three unique header styles for lessons. These header layouts give you the flexibility to display the featured image in different positions, allowing you to customize the look and feel of your lesson pages.

You can easily configure the image position directly from the lesson settings. The available options are: Left, Right, and Top.

Image Position: Right

• The featured image appears on the right side of the header.
• The lesson title and content are aligned on the left side, balancing the layout.
• If no featured image is set, the header automatically becomes full-width, focusing only on the text content.

Image Position: Left

• The featured image is placed on the left side of the header.
• The lesson title and content are aligned on the right side.
• Without a featured image, the design defaults to a full-width text layout for a clean look.

Image Position: Inside Content

• The featured image is displayed above the lesson content, spanning the full width of the header.
• The lesson title and content are placed directly below the image.
• If a featured image is not available, the header displays only the text area in a centered, full-width style.

Here an example of the header style with no image: (No Featured Image Added Here)

Sometime you may want to display the lesson title and content without an image.

Installing Your Ghost Theme

Follow these simple steps to install your new Ghost theme:

1. Log in to your Ghost Admin Panel

• Go to your blog’s admin URL (for example: yourwebsite.com/ghost).
• If you don’t have a Ghost blog yet, you can get affordable managed Ghost hosting from ghost official team.

2. Open the Design Section

• In the left sidebar, click on Design.
• This will take you to the themes area of your Ghost admin panel.

3. Upload Your Theme

• Click the Upload a Theme button.
• An upload window will appear.
• Find the theme ZIP file (for example, sinju.zip) in your downloaded package.
• Drag and drop the ZIP file into the upload area, or click to browse and select it.

4. Activate the Theme

• Once the upload is complete, click the Activate Now button.
• Your new theme is now live on your site!

That’s it! Your Ghost site should now be using the new theme. If you have any issues, double-check that you uploaded the correct ZIP file and that the upload finished successfully.

Managing your site’s navigation in Ghost is simple and user-friendly. You can add, remove, reorder, or edit menu items directly from the Ghost Admin Panel, without editing any code.

Navigation Settings

To access the navigation settings:

1. Log in to your Ghost Admin Panel
2. Go to Settings > Site
3. Scroll down to the Navigation section

Example direct link:
yoursite.com/ghost/#/settings

Adding or Editing Menu Items

Within the Navigation section, you can fully customize your site’s menu:

• Add new items – Enter a Label (the menu name) and its URL.
  You can use external links or internal paths (e.g., /about/, /contact/).
• Edit items – Click into any label or URL field to update it.
• Reorder items – Drag and drop menu rows to change the order.
• Remove items – Delete a row to remove it from the menu.

Important Notes

• Always click Save after making changes.
• If you navigate away without saving, your updates will be lost.
• Ghost supports both a Primary Navigation (main site menu) and a Secondary Navigation (footer or additional menu). Make sure to update the correct section.

For more details, see the official Ghost docs: Updating Navigation

By following these steps, you’ll keep your site’s navigation clean, intuitive, and up to date with the latest Ghost features.

Ghost CMS provides a Featured Post option that allows you to highlight specific content on your site. In themes that support this functionality (including ours), featured posts are displayed prominently on the frontend.

How Featured Posts Work

If you have more than one featured post, they will automatically be displayed on the theme. This is a great way to draw attention to important content, such as announcements, popular articles, or cornerstone content.

How to Mark a Post as Featured

To mark a post as featured:

1. Open the post you want to feature in the Ghost Admin Panel.
2. Click the Post Settings gear icon in the top right corner.
3. Enable the “Feature this post” option by checking the box.

Once a post is marked as featured:

• It will appear in the featured section of your site’s homepage or designated area (depending on your theme).

Styling and Customization

Since featured posts receive the feature class, you can target them specifically in your CSS for custom designs — such as different backgrounds, font styles, or animations.

Using featured posts effectively can help improve engagement and guide your readers to the most important content on your website. Be sure to keep the section updated with fresh or strategic posts to make the most of this feature.

In the Learn Ghost theme, we have added a dynamic dropdown feature for navigation. This allows you to easily set up your site’s menu directly from the Ghost Admin panel.

How to Set Up Dropdown Navigation

1. Log in to your Ghost Admin panel.
2. Go to Settings > Navigation.
3. In the Primary Navigation section, add your main menu items. This menu appears at the top navbar of your website.

Example Navigation Structure

Home
- Home v1
- Home v2
- Home v3
Courses
Pages
Blog

• Add [-] in front of any parent navigation item that has dropdown child items.
• Child items should be listed as - under the parent.

Secondary Navigation

Ghost also supports a Secondary Navigation option, which you can set up similarly in the admin panel. However, the secondary navigation does not support dropdowns and is usually displayed in the footer area.

This guide walks you through the process of adding a lesson in Ghost CMS, covering everything from setting lesson details to managing access and tags.

01) Add Lesson Information

Important: Ensure you are creating a Post and not a Page when adding a lesson.

Start by entering the core information about your lesson:

• Title: The main name of your lesson.
• Description: Provide a clear, concise overview of what the lesson covers.
• Meta Information: Add any additional meta details necessary for SEO and organization.

Using Ghost Public Preview for Lesson Description

We recommend enabling the Ghost Public Preview feature when adding your lesson description. This option allows non-members or visitors to preview the lesson overview without full access.

Why use Ghost Public Preview?
For premium lessons, if you do not enable Public Preview, visitors won’t be able to see the course description unless they are members with access. Enabling this option makes the lesson more visible and appealing to potential students.

In our setup, we have used the Ghost Public Preview option to ensure the lesson description is visible.

02) Add Tags

Tags are essential for organizing and internal referencing of lessons and courses.

Required Internal Hashtags

Each lesson must include exactly two internal hashtags:

• #course-id-X — where X is the unique ID number for the course (e.g., #course-id-2)
• #lesson — this tag is required for all course lessons

Example: #course-id-2 #lesson

Adding Public Tags and Categories

You can also add public-facing tags or lesson categories to improve discoverability and grouping.

Example: UI UX Design

Important Tagging Rules

• Always use a consistent format for course ID tags. For example: #course-id-2, #course-id-3, #course-id-4.
• Different or inconsistent formats will not work with the system.
• Public tags are allowed but must be placed after the #lesson tag.

03) Course Access Settings

Ghost CMS supports three main types of post access levels to control who can view your lesson content:

1. Public Access:
   Use this setting for free lesson or lessons that everyone can view.

2. Basic Membership Access:
   This restricts access to users who have subscribed to the basic membership tier. It is recommended for some premium lesson.

3. Premium Membership Access:
   This grants access to all premium content for members who subscribe to the highest tier.

Tip: For premium lessons, always assign the correct membership tier to control who can access your content effectively.
We recommend using Basic Membership for selected premium lessons and Premium Membership for all-access passes.

04) Add Author Information

Every lesson should clearly specify the author’s name. This helps learners know who created the content and adds credibility.

05) Select Lesson Template (Layout)

Choose the appropriate Lesson Layout Template to define how the lesson content will be presented on your site.

• The template controls the visual structure, including lesson navigation, sidebar elements, and overall styling.
• Make sure to select the template designed for lesson to ensure a smooth learning experience.

Summary

1. Create a Post, not a Page, to add lesson content.
2. Add lesson title, description (enable Ghost Public Preview for visibility).
3. Include two mandatory internal tags: #course-id-X and #lesson.
4. Add public tags/categories if desired, placing them after the internal tags.
5. Set lesson access based on membership tiers (Public, Basic, Premium).
6. Assign an author name to every lesson.
7. Select the appropriate lesson template for consistent lesson layout.

Following these steps will help you maintain a consistent and well-organized lesson catalog on your Ghost CMS site.

If you need any assistance or have questions, feel free to reach out to your site administrator or consult the Ghost documentation.

This guide walks you through the process of adding a course in Ghost CMS, covering everything from setting course details to managing access and tags.

01) Add Course Information

Important: Ensure you are creating a Post and not a Page when adding a course.

Start by entering the core information about your course:

• Course Title: The main name of your course.
• Course Description: Provide a clear, concise overview of what the course covers.
• Meta Information: Add any additional meta details necessary for SEO and organization.

Using Ghost Public Preview for Course Description

We recommend enabling the Ghost Public Preview feature when adding your course description. This option allows non-members or visitors to preview the course overview without full access.

Why use Ghost Public Preview?
For premium courses, if you do not enable Public Preview, visitors won’t be able to see the course description unless they are members with access. Enabling this option makes the course more visible and appealing to potential students.

In our setup, we have used the Ghost Public Preview option to ensure the course description is visible.

02) Add Tags

Tags are essential for organizing and internal referencing of lessons and courses.

Required Internal Hashtags

Each course must include exactly two internal hashtags:

• #course-id-X — where X is the unique ID number for the course (e.g., #course-id-9)
• #course — this tag is required for all courses

Example: #course-id-9 #course

Adding Public Tags and Categories

You can also add public-facing tags or course categories to improve discoverability and grouping.

Example: UI UX Design

Important Tagging Rules

• Always use a consistent format for course ID tags. For example: #course-id-2, #course-id-3, #course-id-4.
• Different or inconsistent formats will not work with the system.
• Public tags are allowed but must be placed after the #course tag.

03) Course Access Settings

Ghost CMS supports three main types of post access levels to control who can view your course content:

1. Public Access:
   Use this setting for free courses or lessons that everyone can view.

2. Basic Membership Access:
   This restricts access to users who have subscribed to the basic membership tier. It is recommended for some premium courses.

3. Premium Membership Access:
   This grants access to all premium content for members who subscribe to the highest tier.

Tip: For premium lessons, always assign the correct membership tier to control who can access your content effectively.
We recommend using Basic Membership for selected premium courses and Premium Membership for all-access passes.

04) Add Author Information

Every lesson should clearly specify the author’s name. This helps learners know who created the content and adds credibility.

05) Select Course Template (Layout)

Choose the appropriate Course Layout Template to define how the course content will be presented on your site.

• The template controls the visual structure, including lesson navigation, sidebar elements, and overall styling.
• Make sure to select the template designed for courses to ensure a smooth learning experience.

Summary

1. Create a Post, not a Page, to add course content.
2. Add course title, description (enable Ghost Public Preview for visibility).
3. Include two mandatory internal tags: #course-id-X and #course.
4. Add public tags/categories if desired, placing them after the internal tags.
5. Set course access based on membership tiers (Public, Basic, Premium).
6. Assign an author name to every lesson.
7. Select the appropriate course template for consistent course layout.

Following these steps will help you maintain a consistent and well-organized course catalog on your Ghost CMS site.

If you need any assistance or have questions, feel free to reach out to your site administrator or consult the Ghost documentation.

Ghost CMS allows you to create custom pages using templates, including one that can automatically display all your tags. This is useful for organizing your content and helping visitors explore topics on your site.

Steps to Create a Tags Page

Follow the steps below to create a dedicated Tags page:

1. Log in to your Ghost Admin Dashboard.
2. Navigate to the Pages section.
3. Click the “New Page” button to create a new page.
4. Name the page something like “Tags” or “Explore Tags” - whatever fits your site’s style but make sure page slug/permalink is tags.

How it works

After assigning the tags page:

• The page will automatically display all available tags on your site.
• Each tag will typically be linked to its own archive page, allowing users to browse content by tag.
• The layout and style of the tags page will depend on how the tags.hbs template is defined in your theme.

By using this method, you can easily create a dynamic Tags page that updates automatically as you add new tags to your content.

Adding analytics or other third-party scripts (like Google Analytics, Facebook Pixel, Hotjar, or custom JavaScript/CSS) to your Ghost website is easy and doesn’t require editing the theme files directly.

Follow these steps to safely inject custom code into the header of your Ghost site:

Step 1: Log in to Your Ghost Admin

First, log in to your Ghost Admin panel. This is usually accessible at:

Once logged in, click on the Settings icon located in the left sidebar.

Step 2: Go to Code Injection Settings

In the Settings panel, scroll down to the Advanced section. Click on Code Injection.

This area allows you to safely inject custom code into your site’s <head> and <footer> sections without modifying your theme files.

Step 3: Paste Your Script into the Header Field

Under the Header section, paste your Google Analytics code, tracking scripts, meta tags, custom CSS, or any other header-level scripts.

This code will be automatically added to the <head> section of every page on your site.

Example: Google Analytics Script

Here’s a sample script you can paste into the Header field to enable Google Analytics:

<!-- Google Analytics -->
<script
  async
  src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXX-X"
></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    dataLayer.push(arguments);
  }
  gtag("js", new Date());

  gtag("config", "UA-XXXXXXX-X");
</script>

Replace UA-XXXXXXX-X with your actual Google Analytics Tracking ID.

Creating an Authors page in Ghost CMS allows you to showcase all the contributors to your site in one place. If your theme includes a custom authors.hbs template, you can easily use it to automatically generate a list of all authors.

Steps to Create a Authors Page

Follow the steps below to create a dedicated Authors page:

1. Log in to your Ghost Admin Dashboard.
2. Navigate to the Pages section.
3. Click the “New Page” button to create a new page.
4. Name the page something like “Authors” or “Team” - whatever fits your site’s style but make sure page slug/permalink is authors.

How it works

After assigning the authors page:

• The page will automatically display all available authors on your site.
• Each author will typically be linked to its own archive page, allowing users to browse content by author.
• The layout and style of the tags page will depend on how the authors.hbs template is defined in your theme.

By using this method, you can easily create a dynamic Tags page that updates automatically as you add new tags to your content.

Creating a functional and visually appealing Contact page in Ghost is simple. Follow the steps below to get started:

Step 1: Create the Contact Page

• Log in to your Ghost Admin Dashboard.
• Navigate to the Pages section and create a new page titled Contact.
• Add your desired content using the Ghost editor. This can include a short message, contact instructions, or location information.

Step 2: Add a Contact Form

To make your Contact page functional, you can integrate a form. Below are three recommended tools to easily add a contact form to your Ghost site:

Recommended Contact Form Services

1. Google Forms
2. Jotform
3. Formspree.io
4. Formspark.io

Google Forms and Jotform can be embedded directly into your Ghost page using an <iframe>.

Example Embed (Google Forms or Jotform)

<iframe
  src="YOUR_FORM_URL_HERE"
  width="100%"
  height="500"
  frameborder="0"
  marginheight="0"
  marginwidth="0"
  >Loading…</iframe
>

Example Form (Formspree)

To use Formspree, paste the following form code into your page’s HTML section:

<form
  class="themeix-contact-form"
  action="https://formspree.io/your@email.com"
  method="POST"
>
  <input type="text" name="your-name" placeholder="Your Name" required />
  <input type="email" name="_replyto" placeholder="Email" required />
  <textarea name="message" placeholder="Message" required></textarea>
  <button type="submit" class="themeix-contact-btn">Send Message</button>
</form>

Replace your@email.com with your actual email address registered with Formspree.

Example Form (Formspark)

<form
  class="themeix-contact-form"
  action="https://submit-form.com/your-form-id"
>
  <input
    type="hidden"
    name="_redirect"
    value="https://your-website.com/thanks"
  />
  <input type="text" name="name" placeholder="Your Name" required />
  <input type="email" name="email" placeholder="Email" required />
  <textarea name="message" placeholder="Message" required></textarea>
  <button type="submit" class="themeix-contact-btn">Send Message</button>
</form>

Replace your-form-id with your actual form id.

Optional Styling

You can customize the appearance of your form by adding inline styles or editing your theme’s CSS. Here’s a quick example for custom button and element colors:

<style>
  .themeix-contact-form {
    max-width: 600px;
    margin: 2rem auto;
    padding: 2rem;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
  }

  .themeix-contact-form input,
  .themeix-contact-form textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s, box-shadow 0.3s;
  }

  .themeix-contact-form input:focus,
  .themeix-contact-form textarea:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
    outline: none;
  }

  .themeix-contact-form textarea {
    min-height: 120px;
    resize: vertical;
  }

  .themeix-contact-btn {
    background-color: #6366f1;
    color: #ffffff;
    border: none;
    padding: 0.9rem 1.4rem;
    font-size: 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .themeix-contact-btn:hover {
    background-color: #4f46e5;
  }
</style>

With these steps, your Ghost site will have a professional Contact page that includes a working form and styling that matches your brand.