Importing Custom Templates

Audience: Site Builder.

PageCraft offers three import paths, each suited to a different source format. They live side-by-side as buttons on Add-Ons → PageCraft → Sections. This page covers when to use which.

At a glance#

Sections Import#

For moving sections between PageCraft installs. Use Export Sections on the source install to download pagecraft-sections-export.json, then Import Sections on the destination to replace or append.

The JSON shape (excerpt):

{
  "categories": [
    { "id": 28, "name": "Grid Builder", "sort_order": 0 }
  ],
  "sections": [
    {
      "id": 14,
      "name": "1 Column",
      "description": "",
      "thumbnail": "gb-1col.svg",
      "html": "<div class=\"is-section…",
      "category_id": 28,
      "sort_order": 0
    }
  ]
}

Categories are matched by name on import — if a target site already has a "Grid Builder" category, the imported sections attach to it instead of creating a duplicate.

Pack Import#

For distributing self-contained section packs (your own or third-party). Input is a .zip file containing:

mypack/
├── pagecraft.json     # manifest
├── content.js         # optional: ContentBox content snippets
├── content.css        # optional: pack-wide styles
├── preview/           # thumbnail images
└── images/            # any image assets the sections reference

The manifest format:

{
  "name": "My Template Pack",
  "slug": "my-template-pack",
  "version": "1.0.0",
  "description": "Custom hero + feature sections.",
  "author": "Your Name",
  "categories": [
    { "name": "Heroes" },
    { "name": "Features" }
  ],
  "sections": [
    {
      "name": "Hero - Centered",
      "category": "Heroes",
      "thumbnail": "preview/hero-centered.png",
      "html": "<div class=\"is-section\">…</div>",
      "description": "Centered hero with CTA pair."
    }
  ]
}

PackImport extracts to themes/user/pagecraft/imported/<slug>/, registers the pack with PageCraft's pack indexer, and inserts category + section rows into the DB. Thumbnails are stored as absolute URLs (resolved against the imported pack's location) so they survive future regenerations of pagecraft-sections.js.

A starter manifest ships at themes/user/pagecraft/pagecraft-pack-manifest-example.json — copy it and adapt.

Template Ingest#

For converting a raw HTML template marketplace download — a zip of standalone HTML pages (index.html, about.html, services.html) plus the usual css/, js/, and images/ asset folders — into PageCraft sections automatically.

Workflow:

1. Click Ingest Template (.zip), upload your archive.
2. PageCraft extracts to themes/user/pagecraft/imported/<slug>/.
3. Each .html page becomes a category named after the file (about.html → "About"). Sections are derived from the page's headings — <h1> / <h2> / <h3> boundaries split the page into individually reusable section rows.
4. Asset URLs (<link href>, <script src>, <img src>) are rewritten to point at the extracted location.
5. SVG placeholder thumbnails are generated for every section (real screenshots can be added later via the Sections editor).
6. CSS / JS files are registered with the canvas so the imported sections render correctly inside the editor as well as on the front-end.

Compared to PackImport, this is a "best-effort" ingest — you'll usually want to do a follow-up pass through Sections to clean up names, replace placeholder thumbnails, and trim any sections you don't actually need.

Choosing the right path#

• Moving content between PageCraft installs → Sections Import
• Distributing a polished pack with categories + thumbnails already curated → Pack Import
• Bringing in a raw HTML template you bought on a marketplace → Template Ingest

Set the CSS Framework to match your import#

Imported templates are built on a specific CSS framework — most ThemeForest / marketplace templates use Bootstrap; some use Tailwind. Set Add-Ons → PageCraft → Global Settings → CSS Framework (or the per-field override) to match.

That setting no longer hands ContentBox permission to manage your grid — it tells PageCraft which vocabulary your content is written in. Choosing Bootstrap or Tailwind switches the field to a framework profile: ContentBox stops touching layout entirely, the structural tools are hidden because grid changes belong in code, and a tailored stylesheet stops ContentBox's own utility classes competing with your framework's. Text, images, links and buttons stay fully editable.

If you are reading older notes that say imported templates must stay on Native — that was correct for the previous behaviour, where selecting a framework let ContentBox rewrite every .row it found. It no longer does. See CSS Framework.

Reference#

• Actions/SectionsImport.php — JSON ingest
• Actions/PackImport.php — manifest-driven .zip ingest
• Actions/TemplateIngest.php — raw-HTML .zip ingest
• Services/PackIndexer.php — pack registry/discovery used by all three paths