The Zora 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, hero sections, post layouts, course headers, and additional theme features—without editing any code.

You can find these options inside: Ghost Admin → Settings → Design → Theme Settings

Color & Appearance Settings

These settings let you align the theme with your brand identity.

• Color Combinations Default: Default Choose from 8 preset color schemes: Default, Onyx, Rust, Fossil, Mint, Ember, Ice, and Pure. Tip: Each combination is professionally designed for optimal visual harmony.

• Appearance Mode Default: System Controls light/dark mode. Options: Light, Dark, System (follows device preference), or User (shows toggle button). Tip: Use “System” for the best user experience as it respects each visitor’s device preference.

• Body Text Color Default: #585F63 Custom color for main text content. Tip: Use this to fine-tune text readability or match your brand colors.

Hero Section Settings

Control the prominent area at the top of your homepage.

• Hero Style Default: Style 1 Three layout options:
  • Style 1: Centered hero with subscription form
  • Style 2: Subscriber count badge with horizontal form
  • Style 3: Split layout with cover image Tip: Style 1 is great for newsletters, Style 3 for brand-focused sites.

• Hero Headline Default: “Explore stories, build skills, discover new perspectives” Main headline text for the hero section. Tip: Keep it short and impactful (under 15 words recommended).

• Hero Subheading Default: “Explore insightful stories, practical courses, and creative ideas designed to inspire learning and growth.” Supporting text below the main headline. Tip: Provide additional context or call-to-action text.

Post Display Settings

Define how your posts appear throughout the site.

• Featured Post Feed Style Default: Style 1 Card design for featured posts on the homepage. Tip: Preview different styles to see which best suits your content type.

• Post Feed Layout Default: Style 7 Default card style for your main post feed.

• Post Feed Column Style Default: 4 Columns Grid arrangement options:
  • 2 Columns, 3 Columns, 4 Columns
  • Masonry grid layout
  • First Post Big with 3 Columns Tip: Masonry layout may affect performance with many posts. Consider 3 or 4 columns for better performance.
• Enable Post Card Excerpt Default: true Toggle to show or hide post summaries on cards. Tip: Disable for a cleaner, more minimal card design.

Homepage Content Settings

Organize your homepage content automatically using tags.

• Homepage Tags Default: books,course Comma-separated tag slugs for categorized sections. Example: If you enter “podcast,tutorials”, posts with these tags appear in dedicated sections.

• Homepage Tags Extended Default: scale-paths,tutorials,guest-posts Additional comma-separated tag slugs for a second set of sections. Tip: Use this for organizing different types of content separately.

• Homepage Tags Posts Per Section Default: 6 Number of posts to show per tag section (2-11 posts). Tip: 3-4 posts for focused sections, 6-8 for balanced sections.

• Disable Top Author Section Default: false Toggle to show or hide the authors section on the homepage. Tip: Disable for single-author sites or a cleaner homepage.

Course & Lesson Settings

Configure how course and lesson pages appear.

• Course Header Style Default: Image on Right Options: Image on Right, Image on Left Tip: “Image on Right” for text-heavy courses, “Image on Left” for visual courses.

• Content API Key Default: Pre-configured key Required for the lesson system to fetch and track lesson progress. Tip: Get your API key from Settings > Integrations > Add Integration > Custom Integration.

Footer Settings

Customize the footer area of your site.

• Footer Newsletter Title Default: “Subscribe to newsletter” Heading text for the newsletter subscription section. Tip: Make it action-oriented like “Get Weekly Updates”.

• Footer Newsletter Description Default: “Stay updated with our latest news, articles, and exclusive updates delivered straight to your inbox.” Description text to encourage signups. Tip: Highlight benefits and keep it under 2 sentences.

• Footer Note Default: “- All rights reserved” Copyright notice in the footer. Tip: Customize with your brand, e.g., “© 2026 Your Brand - All rights reserved”.

✅ Summary

With these customization options, you can:

• Choose from 8 professional color schemes
• Control light/dark mode appearance
• Customize hero section with 3 different styles
• Select from 7 post card styles and 5 feed layouts
• Organize homepage content using tags
• Configure course and lesson headers
• Customize footer branding and newsletter

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

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.

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.
• Featured Image: Upload a course cover image (recommended size: 1200x630px).
• 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 linking lessons to their parent course.

Required Internal Hashtags

Each course must include two internal hashtags:

• #course — this tag is required for all courses
• A unique course tag (e.g., javascript-basics, web-design, python-fundamentals)

Example: #course javascript-basics

Adding Public Tags and Categories

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

Example: programming, web-development, beginner

Important Tagging Rules

• The #course tag is mandatory for the course to be recognized by the theme.
• Use a unique, descriptive course tag (e.g., javascript-basics instead of just javascript).
• Public tags are allowed and should be placed after the internal #course tag.
• The same course tag must be used on all lessons that belong to this course.

03) Course Access Settings

Ghost CMS supports multiple access levels to control who can view your course content:

1. Public Access: Use this setting for free courses that everyone can view and access.

2. Members Only Access: This restricts access to users who have subscribed to any membership tier. Recommended for some premium courses.

3. Paid Members Only Access: This grants access only to paid subscribers. Recommended for premium, all-access courses.

Tip: For premium courses, always assign the correct membership tier to control who can access your content effectively. We recommend using “Members Only” for selected premium courses and “Paid Members Only” for all-access passes.

04) Course Header Style

Choose how the course featured image is positioned on the course page.

Go to Settings > Design > Theme Settings and find “Course Header Style”:

• Image on Right (default): Course content on left, featured image on right. Best for text-heavy courses.
• Image on Left: Featured image on left, course content on right. Best for visual courses.

Tip: Keep consistency across all courses for a professional look.

05) Add Author Information

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

Summary

1. Create a Post, not a Page, to add course content.
2. Add course title, description, and featured image (enable Ghost Public Preview for visibility).
3. Include the mandatory internal tag #course and a unique course tag.
4. Add public tags/categories if desired, placing them after the internal tags.
5. Set course access based on membership tiers (Public, Members Only, Paid Members Only).
6. Choose course header style in Theme Settings.
7. Assign an author name to every course.

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

The course will automatically display:

• A lesson sidebar showing all lessons linked to this course
• Lesson count badge
• Progress tracking for students
• Breadcrumb navigation

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

How to Create a Ghost Content API Key

To use this theme and connect your site to Ghost’s Content API, you need to generate a Content API Key from your Ghost admin panel. This key allows your website or theme to securely fetch content from your Ghost blog.

Follow these steps to create your Content API Key:

1. Open the Integrations Section

• Log in to your Ghost Admin Dashboard.
• In the left sidebar, click on Integrations. This is where you manage connections between Ghost and external services or custom themes.

2. Add a Custom Integration

• Click the Add custom integration button.
• 

3. Name Your Integration

• Enter a name for your new integration. You can use any name that helps you remember what it’s for (e.g., “My Theme Content Key”).
• Click Create to proceed.

4. Copy Your Content API Key

• After creating the integration, Ghost will display several keys. Look for the Content API Key.
• Hover over the key and click the copy icon to copy it to your clipboard.

Tip: Keep this key safe. You’ll need it to connect your theme or site to your Ghost content.

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:

• Lesson Title: The main name of your lesson.
• Lesson Description: Provide a clear, concise overview of what the lesson covers.
• Featured Image: Upload a lesson-specific image (optional but recommended).
• 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 lesson 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 linking lessons to their parent course.

Required Internal Hashtags

Each lesson must include two internal hashtags:

• #lesson — this tag is required for all lessons
• The same course tag as your parent course (e.g., javascript-basics)

Example: #lesson javascript-basics

Adding Public Tags and Categories

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

Example: variables, beginner, programming

Important Tagging Rules

• The #lesson tag is mandatory for the lesson to be recognized by the theme.
• You must use the exact same course tag as the parent course to link the lesson.
• Public tags are allowed and should be placed after the internal tags.
• Lessons will appear in the course sidebar automatically based on the shared course tag.

Optional Internal Tag

Hide Featured Image: Add the internal tag #hide-feature-image if you don’t want the featured image to display in the lesson content area. The image will still appear in cards and listings.

03) Lesson Access Settings

Ghost CMS supports multiple access levels to control who can view your lesson content:

1. Public Access: Use this setting for free lessons that everyone can view and access.

2. Members Only Access: This restricts access to users who have subscribed to any membership tier. Recommended for some premium lessons.

3. Paid Members Only Access: This grants access only to paid subscribers. Recommended for premium, all-access lessons.

Tip: For premium lessons, always assign the correct membership tier to control who can access your content effectively. We recommend using “Members Only” for selected premium lessons and “Paid Members Only” for all-access passes. Important: Set the lesson access level to match the parent course’s access level for consistency.

04) Lesson Ordering

Lessons appear in the course sidebar based on their publish date. To control the order:

• Publish lessons in the desired sequence
• Earlier publish dates appear first
• You can adjust publish dates in Post Settings if needed

Tip: Plan your lesson order before publishing to ensure a logical learning progression.

05) Add Author Information

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

06) Lesson Content Best Practices

For optimal lesson structure, organize your content with:

• Clear learning objectives at the top
• Main lesson content (text, images, videos)
• Examples and code snippets (for programming lessons)
• Practice exercises or quizzes
• Summary or key takeaways
• Link to next lesson

Tip: Keep lessons focused and scannable. Use headings, lists, and images to break up text.

Summary

1. Create a Post, not a Page, to add lesson content.
2. Add lesson title, description, and featured image (enable Ghost Public Preview for visibility).
3. Include two mandatory internal tags: #lesson and the parent course tag.
4. Add public tags/categories if desired, placing them after the internal tags.
5. Set lesson access based on membership tiers (match parent course access).
6. Publish lessons in the desired sequence to control order.
7. Assign an author name to every lesson.
8. Organize content with clear structure and learning objectives.

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

The lesson will automatically include:

• Breadcrumb navigation back to the course
• Lesson header with title and excerpt
• Featured image (optional)
• Completion button for progress tracking
• Sidebar showing all lessons with completion status
• Progress bar showing course completion percentage

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

In the Zora Ghost theme, navigation menus are configured directly from the Ghost Admin panel. The theme supports both primary and secondary navigation, with dropdown support for the primary menu.

How to Set Up 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
Courses
  - Web Development
  - Design
  - Marketing
Resources
  - Blog
  - Podcast
About
Contact

Creating Dropdown Menus

To create dropdown (nested) menus:

1. Add your main menu item (parent item)
2. Add child items below it
3. Indent child items to create the dropdown structure
4. Save

Example:

Resources          (parent)
  Blog            (child)
  Podcast         (child)
  Tools           (child)

The theme automatically creates a dropdown for items with children. Users can hover or click on the parent item to see the dropdown menu.

Secondary Navigation

Ghost also supports a Secondary Navigation option, which you can set up similarly in the admin panel. The secondary navigation is typically displayed in the footer area.

Note: Secondary navigation does not support dropdowns and is meant for links that should be accessible from every page but don’t need primary visibility.

Navigation Best Practices

• Keep it simple: Limit to 5-7 main items for better usability
• Clear labels: Use descriptive, short labels (1-2 words)
• Logical grouping: Group related items in dropdowns
• Consistent order: Place important items first
• Mobile-friendly: Consider how menus will appear on mobile devices

Adding Pages to Navigation

1. Create or find the page you want to add
2. Note the URL slug (e.g., /about, /contact)
3. Go to Settings > Navigation
4. Add item with:
   • Label: The text to display (e.g., “About”)
   • URL: The page URL (e.g., /about)
5. Save

Adding External Links

You can also add external links to your navigation:

1. Go to Settings > Navigation
2. Add item with:
   • Label: The text to display (e.g., “Twitter”)
   • URL: The full external URL (e.g., https://twitter.com/yourhandle)
3. Save

Navigation Icons

The Zora theme uses clean, minimal navigation without icons by default. For the best user experience and consistent design, we recommend using text labels only.

Troubleshooting

Dropdown not appearing?

• Ensure child items are properly indented under the parent
• Check that you’ve saved the navigation settings
• Clear browser cache and reload

Navigation not updating?

• Save changes in Settings > Navigation
• Clear browser cache (Ctrl+Shift+R or Cmd+Shift+R)
• Check that URLs are correct

Mobile menu not working?

• Ensure you’re using the latest version of Zora
• Check for JavaScript errors in browser console
• Test on different mobile browsers

Summary

• Primary navigation appears in the top navbar
• Create dropdowns by indenting child items
• Secondary navigation appears in the footer (no dropdowns)
• Keep navigation simple and organized
• Use clear, descriptive labels
• Test on both desktop and mobile devices

The navigation system in Zora is fully configurable through Ghost Admin without any coding required.

In the Zora Ghost theme, you can easily hide the featured image from displaying on the frontend while keeping it for cards, listings, and social media previews. This is useful when you want to display a video or custom header instead of the featured image.

When to Hide Featured Image

Hide the featured image when:

• You want to embed a video at the top of your post/lesson
• You’re using custom header layouts
• The featured image is only needed for card previews and social sharing
• You want a cleaner, text-focused design

How to Hide Featured Image

Step 1: Open Your Post or Lesson

Navigate to the post or lesson you want to edit in the Ghost Admin panel.

Step 2: Add the Internal Tag

In the Tags section, add the internal hashtag:

#hide-feature-image

This is an internal tag that the Zora theme recognizes to hide the featured image from the content area.

Step 3: Save and Publish

Save your changes and publish the post or lesson.

What Happens

When you add the #hide-feature-image tag:

• Frontend Display: The featured image will NOT appear at the top of your post/lesson content
• Card Previews: The featured image WILL still appear in post cards and listings
• Social Sharing: The featured image WILL still be used for Open Graph tags and Twitter cards
• Search Results: The featured image WILL still appear in search result previews

This gives you flexibility to:

• Show a video at the top (featured image hidden, video shown below)
• Use custom layouts without the featured image interfering
• Keep the image for branding and social media while having a clean content area

Example Use Case

Video Posts:

1. Upload a featured image for cards and social sharing
2. Add #hide-feature-image tag to hide it from the post
3. Embed your video at the top of the content
4. Result: Cards show the image, but the post shows the video directly

Clean Typography Posts:

1. Upload a branded featured image
2. Add #hide-feature-image tag
3. Write your content without visual distractions
4. Result: Professional, text-focused post with branded cards

Important Notes

• The #hide-feature-image tag is internal and will not appear as a public tag on your site
• This works for both posts and lessons
• The featured image file remains in Ghost and is still accessible
• You can remove the tag anytime to show the featured image again

Troubleshooting

Featured image still showing?

• Ensure you added the exact tag: #hide-feature-image
• Check for typos (no extra spaces or characters)
• Clear browser cache and reload the page
• Make sure you’re using the latest version of Zora theme

Featured image not showing in cards?

• The #hide-feature-image tag only affects the content area, not cards
• If the image isn’t showing in cards, check that the featured image is properly uploaded
• Verify the image format is supported (JPG, PNG, WEBP)

Summary

1. Open your post or lesson in Ghost Admin
2. Add the internal tag #hide-feature-image
3. Save and publish

The featured image will be hidden from the content area but will still appear in cards, listings, and social media previews. This gives you maximum flexibility in designing your content while maintaining visual consistency across your site.

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.

The Zora Ghost theme allows you to easily customize footer links using Ghost’s Code Injection feature. You can add custom links for sections like “Explore” and “Legal” to provide better navigation for your visitors.

What Are Footer Links?

Footer links appear at the bottom of every page and typically include:

• Explore Links: Important pages like About, Contact, Blog
• Legal Links: Terms, Privacy Policy, etc.
• Social Links: Your social media profiles

These links help visitors find important information and improve site navigation.

How to Add Footer Links

Step 1: Go to Code Injection

1. Log in to your Ghost Admin panel
2. Navigate to Settings
3. Click on Code Injection in the left sidebar

Step 2: Add the JavaScript Code

In the Site Footer section (bottom of the page), add the following JavaScript code with your own links:

<script>
window.zoraFooterExploreLinks = {
   title: "Explore",
   links: [
      { text: "About Us", href: "/about/" },
      { text: "Contact", href: "/contact/" },
      { text: "Blog", href: "/blog/" }
   ]
};

window.zoraFooterLegalLinks = {
   title: "Legal",
   links: [
      { text: "Terms", href: "/terms/" },
      { text: "Privacy", href: "/privacy/" }
   ]
};
</script>

Step 3: Customize Your Links

Replace the example links with your own:

For Explore Links:

• Change the title to your preferred section name
• Update each text to the link label (what users see)
• Update each href to the actual URL path

For Legal Links:

• Change the title to your preferred section name
• Update each text to the link label
• Update each href to the actual URL path

Step 4: Save Changes

Click Save at the bottom of the page to apply your changes.

Example Configurations

Basic Blog Footer

<script>
window.zoraFooterExploreLinks = {
   title: "Explore",
   links: [
      { text: "Home", href: "/" },
      { text: "About", href: "/about/" },
      { text: "Contact", href: "/contact/" }
   ]
};

window.zoraFooterLegalLinks = {
   title: "Legal",
   links: [
      { text: "Privacy Policy", href: "/privacy/" },
      { text: "Terms of Service", href: "/terms/" },
      { text: "Cookie Policy", href: "/cookies/" }
   ]
};
</script>

Course Platform Footer

<script>
window.zoraFooterExploreLinks = {
   title: "Explore",
   links: [
      { text: "All Courses", href: "/courses/" },
      { text: "Free Resources", href: "/resources/" },
      { text: "Our Blog", href: "/blog/" },
      { text: "About Us", href: "/about/" }
   ]
};

window.zoraFooterLegalLinks = {
   title: "Legal",
   links: [
      { text: "Terms of Use", href: "/terms/" },
      { text: "Privacy Policy", href: "/privacy/" },
      { text: "Refund Policy", href: "/refund/" }
   ]
};
</script>

Minimal Footer

<script>
window.zoraFooterExploreLinks = {
   title: "Quick Links",
   links: [
      { text: "About", href: "/about/" },
      { text: "Contact", href: "/contact/" }
   ]
};

window.zoraFooterLegalLinks = {
   title: "",
   links: [
      { text: "Privacy", href: "/privacy/" },
      { text: "Terms", href: "/terms/" }
   ]
};
</script>

Important Notes

• URL Format: Use relative URLs (starting with /) for internal links
• External Links: For external links, use full URLs like https://example.com
• Multiple Links: You can add as many links as needed by adding more objects to the links array
• Section Titles: You can leave title empty ("") if you don’t want a section title
• Case Sensitive: The variable names (zoraFooterExploreLinks, zoraFooterLegalLinks) must be exact

Adding More Link Sections

The theme supports these two main sections. If you need more sections, you can add similar code with different variable names, but ensure the theme recognizes them.

Removing Footer Links

To remove footer links:

1. Go to Settings > Code Injection
2. Find the Site Footer section
3. Delete or comment out the JavaScript code
4. Save

Testing Your Links

After adding footer links:

1. Visit any page on your site
2. Scroll to the footer
3. Verify all links appear correctly
4. Click each link to ensure they work
5. Test on mobile devices for responsive layout

Best Practices

• Keep it Simple: 3-5 links per section is ideal
• Clear Labels: Use descriptive, short text for links
• Logical Order: Place important links first
• Consistent URLs: Ensure all link URLs exist and work
• Mobile Friendly: Test on mobile to ensure links are tappable

Troubleshooting

Links not appearing in footer?

• Verify the code is in Site Footer section, not Site Header
• Check for JavaScript syntax errors (missing commas, brackets)
• Ensure variable names are exactly zoraFooterExploreLinks and zoraFooterLegalLinks
• Clear browser cache and reload

Links showing but not working?

• Check that href values are correct
• Ensure pages actually exist at those URLs
• For internal links, use relative URLs starting with /
• Test links in a new browser tab to isolate issues

Code not saving?

• Ensure you have admin permissions
• Check if there are any JavaScript errors in the code
• Try removing and re-adding the code

Summary

1. Go to Settings > Code Injection
2. Add the JavaScript code to Site Footer section
3. Customize text and href values with your own links
4. Save changes

Your custom footer links will now appear on every page of your site, providing easy navigation to important pages and legal information.

The Zora Ghost theme includes a customizable call-to-action (CTA) section that appears on your homepage. This section is created and managed entirely through the Ghost admin panel, allowing you to add promotional content, special offers, or important announcements.

What is the Homepage CTA Section?

The CTA section is a prominent box that appears on your homepage and can include:

• A badge label (e.g., “New”, “Limited Time”, “Special Offer”)
• An icon or image
• A headline
• Custom content with buttons and links

This section is perfect for:

• Promoting new courses or products
• Highlighting special offers or discounts
• Announcing new features or updates
• Encouraging newsletter signups
• Showcasing testimonials or success stories

How to Create the CTA Section

Step 1: Create a New Page

1. Log in to your Ghost Admin panel
2. Navigate to Pages
3. Click New page

Step 2: Add Page Content

Add your CTA content using the Ghost editor:

Page Title:

• Enter your headline (e.g., “Start Learning Today”, “Join Our Community”, “Limited Time Offer”)

Page Content:

• Add your main CTA text
• Include buttons using Ghost’s button card
• Add links, testimonials, or any other content
• Format as needed using the editor

Featured Image (Optional):

• Upload a small icon or image
• Recommended size: 100x100px (square)
• This will appear next to your headline as an icon

Step 3: Configure Metadata

Meta Title:

• In Page Settings (right sidebar), find “Meta title”
• Enter your badge text (e.g., “New”, “Limited”, “Special”)
• This appears as a small badge above the headline
• Keep it short (1-2 words recommended)

Excerpt (Optional):

• Add a brief description for SEO
• This doesn’t appear in the CTA section itself

Step 4: Add the Internal Tag

In the Tags section, add the internal hashtag:

#section-home-cta

This tag tells the Zora theme to display this page as the homepage CTA section.

Step 5: Publish the Page

Click Publish to make your CTA section live.

Example Configurations

Simple Newsletter CTA

Page Title: “Get Weekly Tips” Meta Title: “Free” Featured Image: Upload an email icon Content:

Subscribe to our newsletter and receive the latest tips, tutorials, and resources directly in your inbox every week.

[Subscribe Now →](/subscribe/)

Tags: #section-home-cta

Course Promotion CTA

Page Title: “Master Web Development in 30 Days” Meta Title: “New Course” Featured Image: Upload a code icon Content:

Our comprehensive web development course is now available! Learn HTML, CSS, JavaScript, and more with hands-on projects and expert guidance.

[Enroll Now →](/course/web-development-101)]
[Limited Seats Available]

Tags: #section-home-cta

Special Offer CTA

Page Title: “50% Off All Courses - This Week Only” Meta Title: “Limited Time” Featured Image: Upload a discount icon Content:

Don't miss our biggest sale of the year! Get 50% off on all premium courses and start your learning journey today.

[Shop Now →](/courses/)
[View All Courses]

Tags: #section-home-cta

Community Invitation CTA

Page Title: “Join 10,000+ Learners Worldwide” Meta Title: “Community” Featured Image: Upload a community icon Content:

Connect with fellow learners, share your progress, and get help from experts in our supportive community.

[Join Free →](/community/)

Tags: #section-home-cta

Customizing the CTA Section

Badge Text

The badge appears as a small, rounded label above your headline. To customize:

1. Go to Page Settings
2. Find “Meta title” field
3. Enter your badge text (1-2 words)
4. Save

Popular badge texts: New, Limited, Free, Popular, Exclusive, Special, Hot

Icon/Image

To add an icon next to your headline:

1. Upload a square image (100x100px recommended)
2. Use as the page’s featured image
3. The image will appear as a rounded icon

Icon tips:

• Use simple, recognizable icons
• Keep the background clean or transparent
• Ensure good contrast with your page design

Content and Buttons

Use Ghost’s editor to add any content:

Buttons:

• Use Ghost’s button card
• Set button text and link URL
• Can add multiple buttons

Text:

• Use paragraphs, headings, lists
• Format with bold, italic, etc.
• Add links inline

Other Elements:

• Testimonials (as blockquotes)
• Trust signals (logos, badges)
• Countdown text
• Social proof elements

Important Notes

• Only one page with the #section-home-cta tag will be displayed
• If multiple pages have this tag, the most recently published one will be shown
• The CTA section appears automatically on the homepage
• The page itself won’t be accessible as a separate page
• All content is managed through the Ghost editor - no coding required

Position on Homepage

The CTA section appears in the homepage layout, typically after the hero section and before or after featured posts, depending on your theme configuration.

Removing the CTA Section

To remove the CTA section from your homepage:

1. Go to Pages
2. Find the page with the #section-home-cta tag
3. Either:
   • Delete the #section-home-cta tag (keeps page, hides CTA)
   • Delete the entire page (removes CTA and page)
4. Save

Best Practices

• Keep it Focused: One clear message per CTA
• Strong Headline: Make it compelling and action-oriented
• Clear CTA: Use descriptive button text (e.g., “Get Started” not “Click Here”)
• Visual Hierarchy: Use badge and icon to draw attention
• Mobile-Friendly: Test on mobile to ensure buttons are tappable
• Update Regularly: Keep CTAs fresh and relevant
• A/B Test: Try different messages to see what works best

Troubleshooting

CTA section not appearing on homepage?

• Verify the page has the exact tag: #section-home-cta
• Ensure the page is published (not draft)
• Check if you have multiple pages with this tag (use only one)
• Clear browser cache and reload

Badge not showing?

• Check that “Meta title” is filled in Page Settings
• Ensure the text isn’t too long
• Try refreshing the page

Icon not appearing?

• Verify a featured image is uploaded
• Check image format (JPG, PNG, WEBP supported)
• Ensure image isn’t too large (under 1MB recommended)

Content not displaying correctly?

• Check Ghost editor formatting
• Ensure buttons are using Ghost’s button card
• Try removing and re-adding problematic elements

Summary

1. Create a new page in Ghost Admin
2. Add headline, content, and featured image
3. Set meta title for badge text
4. Add the internal tag #section-home-cta
5. Publish the page

The CTA section will automatically appear on your homepage, fully customizable through the Ghost editor with no coding required.

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.

In the Zora Ghost theme, certain pages like the courses listing and archive page are generated from routes defined in routes.yaml. To customize the meta tags (title, description, etc.) for these pages, you need to create a corresponding page that overrides the default metadata.

What Are Route Pages?

Route pages are pages that are automatically generated by Ghost based on route configurations. In Zora, these include:

• Courses Page (/courses/) - Lists all courses
• Archive Page (/archive/) - Shows all posts organized by date

These pages don’t have a traditional page in Ghost admin by default, which means their meta tags use default values.

Why Customize Meta Tags?

Customizing meta tags is important for:

• SEO: Better search engine rankings with descriptive titles and descriptions
• Social Sharing: Control how your pages appear when shared on social media
• User Experience: Clear, descriptive titles help users understand the page content
• Branding: Consistent messaging across your site

How to Customize Meta Tags

Method Overview

To customize meta tags for route pages, you create a regular Ghost page with the same URL slug. Ghost will then use that page’s title, excerpt, and metadata for the route page.

Customizing the Courses Page Meta Tags

The courses page appears at /courses/ and lists all posts tagged with #course.

Step 1: Create a New Page

1. Go to Pages in Ghost Admin
2. Click New page
3. Set the page title (this will be used for the page title)
   • Example: “All Courses - Learn with [Your Brand]”

Step 2: Add Page Content

You can leave the content empty or add a brief introduction. The main purpose is to provide metadata.

Step 3: Set the URL Slug

In Page Settings (right sidebar):

1. Find the URL field
2. Set the slug to: courses
3. This will make the page URL /courses/

Step 4: Add Meta Title

In Page Settings, find the SEO section:

1. Add a custom meta title (optional - defaults to page title)

   • Example: “Browse All Courses

     [Your Brand] - Online Learning Platform”

2. Keep it under 60 characters for optimal SEO

Step 5: Add Meta Description

In the SEO section:

1. Add a meta description
   • Example: “Explore our complete collection of online courses. Learn web development, design, marketing, and more with expert-led courses.”
2. Keep it under 160 characters
3. Include relevant keywords

Step 6: Add Featured Image (Optional)

In Page Settings:

1. Upload a featured image
2. This image will be used for:
   • Open Graph tags (Facebook, LinkedIn)
   • Twitter cards
   • Search result previews

Step 7: Publish the Page

Click Publish. Now when visitors go to /courses/, they will see:

• Your custom page title in the browser tab
• Your meta description in search results
• Your featured image when shared on social media
• The actual courses list (from the route, not this page’s content)

Customizing the Archive Page Meta Tags

The archive page appears at /archive/ and shows all posts organized by date.

Step 1: Create a New Page

1. Go to Pages in Ghost Admin
2. Click New page
3. Set the page title
   • Example: “Blog Archive - All Posts”

Step 2: Set URL Slug

In Page Settings:

1. Find the URL field
2. Set the slug to: archive

Step 3: Add Meta Title and Description

In the SEO section:

Meta Title:

• Example: “Blog Archive

  [Your Brand] - All Posts by Date”

• Keep under 60 characters

Meta Description:

• Example: “Browse our complete blog archive. Find all articles, tutorials, and guides organized by date. Stay updated with our latest content.”
• Keep under 160 characters

Step 4: Add Featured Image (Optional)

Upload a featured image for social sharing.

Step 5: Publish

Click Publish. The archive page at /archive/ will now use your custom metadata.

Example Configurations

Courses Page Example

Page Title: “All Courses - [Your Brand]”

Meta Description: “Discover expert-led online courses in web development, UX design, digital marketing, and more. Start learning today with practical, project-based courses.”

Featured Image: Upload a course-related image (1200x630px recommended)

URL Slug: courses

Archive Page Example

Page Title: “Blog Archive”

Meta Description: “Browse our complete collection of blog posts, tutorials, and guides. Find the latest insights on web development, design, and technology.”

Featured Image: Upload a blog-related image (1200x630px recommended)

URL Slug: archive

Important Notes

• Content Doesn’t Matter: The actual content of these pages doesn’t affect the route page display. The route page shows the courses/archive/ , not this page’s content.
• URL Slug Must Match: The URL slug must exactly match the route (e.g., courses, archive)
• One Page Per Route: Create only one page per route for consistent metadata
• Page Visibility: These pages won’t appear in navigation or be indexed as separate pages - they’re just metadata overrides
• Updates: To change meta tags, simply edit the corresponding page and save

What Gets Overridden

When you create these override pages, the following is customized:

• Page Title - Appears in browser tab
• Meta Title - Used for SEO and social sharing
• Meta Description - Used for search results and social media
• Featured Image - Used for Open Graph and Twitter cards
• Excerpt - Can be used for descriptions

What Doesn’t Change:

• The actual page content (courses list, archive, etc.)
• The page layout
• The page template
• The route functionality

Best Practices

SEO Optimization

1. Include Keywords: Add relevant keywords to titles and descriptions
2. Brand Name: Include your brand name in meta titles
3. Length Limits:
   • Meta titles: Under 60 characters
   • Meta descriptions: Under 160 characters
4. Compelling Copy: Write descriptions that encourage clicks

Social Sharing

1. Featured Images: Use high-quality images (1200x630px)
2. Consistent Branding: Use brand colors and styles in images
3. Engaging Descriptions: Make social media users want to click

Consistency

1. Naming Convention: Use consistent naming across all pages
2. Tone: Maintain your brand voice in all metadata
3. Updates: Review and update metadata regularly

Testing Your Meta Tags

After creating your override pages:

1. Test the Page: Visit the route page (e.g., /courses/)
2. Check Browser Tab: Verify the title appears correctly
3. Test Social Sharing:
   • Use Facebook’s Sharing Debugger
   • Use Twitter Card Validator
   • Test by sharing the URL
4. Check Search Results: Search for your site to see how it appears
5. Use SEO Tools: Use tools like Screaming Frog or Google’s Rich Results Test

Troubleshooting

Meta tags not updating?

• Ensure the URL slug exactly matches the route
• Check that the page is published (not draft)
• Clear browser cache and reload
• Wait a few minutes for Ghost to process changes

Featured image not showing?

• Verify image is uploaded and published with the page
• Check image format (JPG, PNG, WEBP supported)
• Ensure image size is appropriate (under 5MB)
• Test with social media validators

Page content showing instead of route content?

• This shouldn’t happen if configured correctly
• The route takes precedence for content display
• The override page only affects metadata

Multiple pages with same URL slug?

• Ghost will use the most recently published page
• Delete or unpublish duplicate pages
• Keep only one page per route

Removing Custom Meta Tags

To revert to default meta tags:

1. Go to Pages
2. Find the override page (e.g., the page with URL slug “courses”)
3. Either:
   • Delete the page entirely
   • Or change the URL slug to something else
4. Save

The route page will then use default meta tags again.

Summary

To customize meta tags for route-based pages:

1. Create a new page in Ghost Admin
2. Set the URL slug to match the route (courses, archive )
3. Add custom title, meta title, and meta description
4. Optionally add a featured image
5. Publish the page

The route page will now use your custom metadata for SEO and social sharing, while still displaying the actual courses, archive. All customization is done through the Ghost admin with no coding required.

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.