Skip to content
pagecraft

Getting Started

Audience: Editor and Site Builder.

Adding the fieldtype to a channel

  1. Develop → Channels → Fields, click New Field.
  2. Choose PageCraft Builder as the field type. Give it a short name like body or page_content.
  3. Save. Add the field to a channel via that channel's Fields tab.

You can have more than one PageCraft field on a channel, but in practice one is usually enough — a single PageCraft field can build an entire page.

Per-field settings

Every PageCraft field exposes a settings group on the field-edit screen. The most common knobs:

  • Upload directory — overrides the global default for image uploads inside this field. Leave blank to inherit the addon-wide setting (Add-Ons → PageCraft → Global Settings → Upload Directory).
  • Allowed block packs — restrict which block packs (Simple, Quick, Animated, PageCraft, etc.) appear in the picker for this field.
  • Allowed categories — narrow the section picker to specific categories (e.g. "Hero" + "Photos" only).
  • Custom CSS / Custom JS — per-field stylesheet and script that load alongside the editor canvas. See Template Tags Reference for the runtime story.

Anything not overridden falls back to the addon's Global Settings.

Saving the first entry

Open an entry that uses your new field. The PageCraft canvas mounts in place of a normal text area. Click anywhere to start: the section picker opens on first interaction, and you can drag any section in.

When you save the entry, PageCraft serializes three things into the field as JSON:

  • html — the full canvas markup, before dynamic resolution
  • mainCss — global stylesheet for the page (set in the editor's style panel)
  • sectionCss — per-section CSS that the editor accumulates as you tweak section styles

The JSON lands in exp_channel_data_field_N like any other custom field value.

Front-end output

In the template that renders the entry, output the field with one or more of:

{exp:channel:entries channel="pages"}
    <style>{my_field type="css"}</style>
    {my_field type="html"}
    <style>{my_field type="sectioncss"}</style>
{/exp:channel:entries}

Or, if you want a single tag that returns the full rendered page (HTML + CSS combined with sensible defaults):

{exp:page_craft:html}

The {exp:page_craft:html} tag also resolves dynamic content — embedded EE templates render in place, and the structure-driven nav menu (if enabled) injects the live menu data. See Template Tags Reference for parameter detail.

Where to next

  • Editing Sections — how the canvas picker works
  • Nav Builder — the most complex stock section
  • Dynamic Content — embedding EE templates