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 + 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.

Typography

The Typography panel applies a font pairing — a style — to your content. Above the list of styles is an Apply to switch:

  • This section — styles only the section you have selected. This is the default,

and it resets to this every time you open the panel.

  • Whole page — styles every section in this field at once.

It resets deliberately. A sticky page-wide setting is destructive by surprise: you would set it once for a global font, come back later to restyle a single section, and silently overwrite every other section's typography. Applying page-wide is a deliberate act each time.

"Whole page" means this field. A Global Header or Global Footer is a separate component with its own typography, so site chrome keeps whatever style it was given. To match them, open each and apply the same style there.

Fonts are not stored in your content. The style is recorded as a type-… class on each section, and the matching stylesheet is loaded at render time from that class — which is why saved content stays clean and portable between environments.

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.