Skip to main content
On this page

Blank Page Template Setup & Usage Guide

The custom-blank.hbs template is a fully blank canvas page template integrated into the TanaFlows theme.

When you use this template, your page will completely omit the default navigation components of the website, such as the Header menu, Footer, and default layout containers/margins.

1. When to Use a Blank Page

The blank page template is a powerful utility when you want to:

  • Design a Special Landing Page: You have custom HTML/CSS/JS code or designs exported from external builders (like Webflow, Canva, Carrd, LadiPage, etc.) that you want to host directly on your site.
  • Create a Custom Biolink / Portfolio: You want to design a unique personal business card or biolink page styled entirely from scratch.
  • Display an Announcement / Maintenance Page: Show a clean announcement message without any distracting header or footer menus.
  • Embed Full-Screen Forms: Display a full-page signup form or questionnaire.

2. Setting Up a Blank Page in Ghost Admin

To apply the blank page template to a specific page:

  1. Go to Ghost Admin > Pages > click New Page (or create a new Post).
  2. Open page settings (gear icon in the top-right corner):
    • Locate the Template field and select: custom-blank.
  3. Click Publish (or update the page).

3. Editing Content on a Blank Page

Since this page is completely blank, there are two ways to add and display content:

Method 1: Using an HTML Card (Recommended for Custom Designs)

If you have ready-made HTML/CSS code for your page:

  1. Inside the Ghost Editor, click the + icon and select the HTML card.

  2. Paste your entire HTML markup along with <style> tags into the block:

    <style>
      .my-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        text-align: center;
      }
      .my-title {
        font-size: 3rem;
        margin-bottom: 1rem;
      }
      .my-btn {
        background-color: white;
        color: #764ba2;
        padding: 0.75rem 1.5rem;
        border-radius: 50px;
        text-decoration: none;
        font-weight: bold;
      }
    </style>
    

    <div class="my-container">
      <h1 class="my-title">New Product Launching Soon!</h1>
      <p>Subscribe to be the first to know when we go live.</p>
      <a href="https://tanaflows.com" class="my-btn">Visit TanaFlows</a>
    </div>

  3. Update the page to view your full-screen design.

Method 2: Using the Default Ghost Editor

You can still write text, insert images, or embed videos using standard Ghost Editor cards. However:

  • The content will stretch to the absolute edges of the screen since the theme container is disabled.
  • Tip: You can insert a small HTML Card at the top of the editor to add custom padding and limits via CSS for better readability:
    <style>
      body {
        max-width: 800px;
        margin: 0 auto;
        padding: 2rem 1rem;
      }
    </style>

4. Important Considerations

SEO Functionality

Although the page looks blank, the theme still automatically loads the required Ghost SEO Meta tags ({{ghost_head}} and {{ghost_foot}}). Thus, your Meta Title, Meta Description, Facebook OpenGraph, and Twitter Cards set in Ghost Admin will work perfectly.

Tracking Scripts

Tracking scripts (Google Analytics, Pixels) configured under Code Injection in Ghost Admin will still execute normally on pages using the custom-blank template.