Skip to content
pagecraft

Editing Sections

Audience: Editor.

Canvas anatomy

A PageCraft page is a stack of sections. Each section is a <div class="is-section"> wrapper containing one or more rows, each row containing one or more columns, and each column containing blocks (heading, paragraph, image, button, plugin, etc.).

You don't have to memorise that. The canvas surfaces it visually:

  • Hover any section → green toolbar at the top-left ("section toolbar")
  • Hover any row → blue handle on the left ("row toolbar")
  • Click into any text → ContentBox's text-editing toolbar floats above
  • Click any image → upload / replace handles appear

The section toolbar

Each section's toolbar (the green strip with icons) gives you:

    • Add a new section above this one
  • … Section settings (margins, background, padding, alignment)
  • 🗑 Delete this section
  • 💾 Save as Section — clones the current section into your PageCraft → Sections library so you can reuse it on other pages
  • 🔒 Lock (super admins only) — promotes the section to a sitewide global header or footer. See Global Header & Footer.

The block picker

Click the + button on any section to open the section picker (full-screen drawer). Sections are grouped into packs with their own categories:

  • Simple Start — minimalist hero, slider, video, navigation, plugins, legacy
  • Quick Start — hero, article, photos, list, quotes, FAQ, call-to-action, logo list, pricing, shop, profile, contact, footer
  • Animated Sections — pre-animated hero / list variants
  • PageCraft Sections — your bundled custom sections, including:
    • Grid Builder — 1–5 column rows plus Wide + Narrow / Narrow + Wide pairs (see Grid Builder)
    • PageCraft — Dynamic Content — an EE-template embed (see Dynamic Content)

Drag the chosen section's thumbnail onto the canvas, or click it to insert at the bottom.

Saving an arbitrary canvas section

Building a custom layout that you want to reuse? Click the 💾 Save as Section button on its toolbar. PageCraft asks for a name and category, strips ContentBox's editor-only UI (the toolbars, draggable hooks, click handlers), and inserts the cleaned HTML into your Sections library. From then on the saved section appears in the picker for any PageCraft field that has access to its category.

If a section ever stops appearing in the picker even though it's listed under PageCraft → Sections, click Regenerate File on that page. See Editing Existing Templates.