Skip to main content
On this page

HTML Blocks Template Setup & Usage Guide

The custom-html-blocks.hbs template is a specialized layout designed for web designers and marketers.

Unlike the Blank Page template (custom-blank—which completely hides the Header and Footer), the HTML Blocks template retains the default website navigation Header and Footer. However, it removes all default article frames and constraints, allowing you to design borderless (full-width) custom content blocks.

1. When to Use HTML Blocks

You should use this template when you want to build:

  • A Product Landing Page or Sales Page: You want to design large full-width hero banners, price comparison tables, and feature lists while keeping the blog Header menu so readers can navigate your site.
  • A Services or About Page: An organization’s profile page containing custom-designed sections.
  • A Thank-You Page: A page displayed after users complete a purchase or subscribe to a newsletter, where you want to keep them engaged using the main website navigation.

2. Setting Up HTML Blocks in Ghost Admin

  1. In Ghost Admin, create a new Page or Post.
  2. Open page settings (gear icon in the top-right corner):
    • Locate the Template field and select: custom-html-blocks.
  3. Click Publish (or update the page).

3. Editing Content

Since this template does not constrain content width, you should compose content using Ghost’s HTML Cards to freely structure your layouts.

The template comes pre-loaded with Tailwind CSS styles to speed up your design:

Example 1: Creating a Large Full-Width Hero Banner

  1. Click the + icon in the Ghost Editor and select the HTML card.

  2. Paste the following Tailwind code:

    <div class="bg-gradient-to-r from-blue-600 to-indigo-700 text-white py-20 px-4">
      <div class="max-w-6xl mx-auto text-center">
        <h1 class="text-4xl md:text-6xl font-bold mb-4">Enterprise Automation Solutions</h1>
        <p class="text-lg md:text-xl text-blue-100 mb-8 max-w-2xl mx-auto">
          Build smart operating systems that save you 80% of management time.
        </p>
        <a href="#register" class="bg-white text-indigo-700 font-bold px-8 py-3 rounded-lg shadow-lg hover:bg-blue-50 transition">
          GET STARTED NOW
        </a>
      </div>
    </div>

Example 2: Creating a 3-Column Feature Block

  1. Insert another HTML card directly below the previous one.

  2. Paste the following 3-column layout code:

    <div class="py-16 px-4 bg-gray-50 dark:bg-zinc-900 text-gray-800 dark:text-gray-100">
      <div class="max-w-6xl mx-auto">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <!-- Column 1 -->
          <div class="bg-white dark:bg-zinc-800 p-8 rounded-xl shadow-sm border border-gray-100 dark:border-zinc-700">
            <div class="text-3xl mb-4">🚀</div>
            <h3 class="text-xl font-bold mb-2">Unmatched Speed</h3>
            <p class="text-gray-600 dark:text-gray-300">Instant page loads in 0.5 seconds to elevate the user experience.</p>
          </div>
          <!-- Column 2 -->
          <div class="bg-white dark:bg-zinc-800 p-8 rounded-xl shadow-sm border border-gray-100 dark:border-zinc-700">
            <div class="text-3xl mb-4">🛡️</div>
            <h3 class="text-xl font-bold mb-2">Maximum Security</h3>
            <p class="text-gray-600 dark:text-gray-300">Data is securely protected and compliant with global safety standards.</p>
          </div>
          <!-- Column 3 -->
          <div class="bg-white dark:bg-zinc-800 p-8 rounded-xl shadow-sm border border-gray-100 dark:border-zinc-700">
            <div class="text-3xl mb-4">📈</div>
            <h3 class="text-xl font-bold mb-2">Conversion Optimized</h3>
            <p class="text-gray-600 dark:text-gray-300">UX-driven designs to double your newsletter subscription conversion rate.</p>
          </div>
        </div>
      </div>
    </div>

4. Intelligent SEO Blocking (#noindex)

For internal-only pages (such as thank-you pages after a successful checkout, internal documentation, or test landing pages), you likely do not want Google to crawl and index them.

To safely hide these pages from search engine results:

  1. Open the page settings in Ghost Admin.
  2. Locate the Tags field and add the internal tag: #noindex (must start with #).
  3. Click Update (or publish).

How it Works

The theme automatically injects a <meta name="robots" content="noindex,nofollow,nosnippet"> tag into the page header, telling search engine crawlers to skip indexing this page.