Custom Templates Guide

Build Website Templates That Launch New Projects Fast

Website templates are imported through the same library format as blocks, but they live in the pageTemplates array and carry a full projectData payload.

How Template Packs Work

The builder expects imported templates inside a functional-websites-library JSON file. Templates live in pageTemplates, and each one contains a full projectData object similar to what the builder stores internally.

Name + Description

This is what users see inside the Custom Library modal.

projectData

This holds the pages, colors, CSS, JS, navbars, and metadata.

Import Once

After import, the template becomes selectable when creating a new website.

Copy And Paste: Minimal Website Template Pack

This example creates one simple starter site with a home page, a hero block, and a CTA block.

custom-template-pack.json
{
  "format": "functional-websites-library",
  "version": 1,
  "title": "Starter Website Templates",
  "exportedAt": "2026-04-19T00:00:00.000Z",
  "pageTemplates": [
    {
      "id": "tpl_starter_consulting",
      "name": "Starter Consulting Site",
      "description": "A clean service-business starter with a hero, intro, and CTA.",
      "author": "Your Name",
      "priceLabel": "Custom Template",
      "source": "manual-json",
      "projectData": {
        "name": "Starter Consulting Site",
        "brandName": "Northline Consulting",
        "globalCSS": "body { margin: 0; font-family: 'Segoe UI', sans-serif; background: #f5f7fb; color: #10233f; } * { box-sizing: border-box; }",
        "globalJS": "// Optional template scripts\\n",
        "meta": {
          "description": "Northline Consulting helps teams simplify operations and grow with confidence.",
          "keywords": "consulting, operations, strategy",
          "author": "Northline Consulting",
          "favicon": "",
          "ogType": "website",
          "ogImage": "",
          "twitterCard": "summary_large_image"
        },
        "brand": {
          "pageBg": "#f5f7fb",
          "sectionBg": "#ffffff",
          "textDark": "#10233f",
          "textMuted": "#607089",
          "textLight": "#ffffff",
          "accent": "#4ade80",
          "accentText": "#08210f",
          "btnPrimary": "#4ade80",
          "btnPrimaryText": "#08210f",
          "btnSecondary": "#eaf3ee",
          "btnSecondaryText": "#10233f",
          "navBg": "#ffffff",
          "footerBg": "#10233f",
          "border": "#dce4ef",
          "dark": "#10233f"
        },
        "images": [],
        "templates": [],
        "navbars": {},
        "pages": [
          {
            "id": "page_home",
            "name": "Home",
            "slug": "index",
            "meta": {
              "titleOverride": "Northline Consulting"
            },
            "blocks": [
              {
                "id": "hero_block",
                "type": "hero",
                "props": {
                  "heading": "Clear strategy for small teams with big goals",
                  "subheading": "Use this starter template as the base for coaching, agency, or consulting websites.",
                  "buttonText": "Book A Call",
                  "buttonHref": "#",
                  "bgColor": "#10233f",
                  "textColor": "#ffffff",
                  "btnBg": "#4ade80",
                  "btnColor": "#08210f",
                  "minHeight": "520px",
                  "contentWidth": "900px",
                  "align": "center",
                  "bgImage": "",
                  "bgSize": "cover",
                  "bgPosition": "center",
                  "overlayColor": "#10233f",
                  "overlayOpacity": "0"
                }
              },
              {
                "id": "intro_section",
                "type": "section",
                "props": {
                  "bgColor": "#ffffff",
                  "padding": "70px 20px",
                  "maxWidth": "980px",
                  "content": "<div style=\"display:grid;gap:18px;max-width:760px;margin:0 auto;text-align:center;\"><h2 style=\"margin:0;font-size:38px;color:#10233f;\">A starter site you can customize in minutes</h2><p style=\"margin:0;color:#607089;font-size:18px;line-height:1.7;\">Swap the copy, colors, and call-to-action to fit your offer. Add more pages, saved blocks, or imported block packs on top of it.</p></div>"
                }
              },
              {
                "id": "cta_block",
                "type": "cta",
                "props": {
                  "bgColor": "#4ade80",
                  "textColor": "#08210f",
                  "padding": "84px 20px",
                  "heading": "Ready to make this template your own?",
                  "subheading": "Duplicate the structure, replace the copy, and launch faster.",
                  "buttonText": "Start Editing",
                  "buttonHref": "#",
                  "btnBg": "#08210f",
                  "btnColor": "#ffffff"
                }
              }
            ]
          }
        ]
      }
    }
  ],
  "blocks": []
}

What Matters Most In projectData

  • name and brandName: used as the template identity.
  • globalCSS: great for reusable styling that should follow the whole template.
  • meta: useful for SEO defaults and social cards.
  • brand: the color system used by blocks and generated sections.
  • pages: at least one page is needed. The first page should usually use slug: "index".
  • blocks: these are standard builder blocks like hero, section, heading, cta, and more.

Fastest Workflow For Making New Templates

  1. Build a site in the builder until the layout feels right.
  2. Save the current page as a website template from the Custom Library tools.
  3. Export your library bundle.
  4. Open the exported JSON and duplicate the template object.
  5. Rename it, tweak projectData, and re-import it as a pack.
Need A Hand?

Want us to create custom templates for your niche?

If you want polished starter sites for a specific industry, campaign type, or reseller setup, email us and we can build custom templates for you.