Brand Icon ScaffolderJS

← Back to Documentation

Managing Sections

Audience: Site owners (end users)

A "Section" in ScaffolderJS is a horizontal block of content. Examples of sections include a Hero header, a Testimonials carousel, a Features grid, or a Contact Form. You build your pages by stacking these sections on top of one another.

Adding a Section

  1. Inside the Floating Builder Panel, below the page selector, click + Add Section.
  2. A categorized library of highly-designed components will open.
  3. Browse the categories (e.g., Headers, Features, Pricing, Content, Footers).
  4. Click Add on any variant to insert it at the bottom of the current page.

The Two Ways to Edit Content

1. Visual Editing

You can adjust text directly within the Live Preview:

  • Click any headline, paragraph, or button text.
  • Change the wording simply by typing. The update saves immediately when you click away.
  • Click any image inside the preview to launch the Media Library for quick replacement.

2. Form Editing

For structured data (like rearranging cards in a grid, changing button links, or modifying a background color mapping), use the Form Editor:

  • In the Floating Builder Panel, locate the specific section in the list.
  • Click the Edit (Pencil) icon.
  • A comprehensive form will slide open revealing every customizable property of that section.
  • You can add or re-order complex array items (like multiple testimonials or gallery pictures) directly from this form.

Section Actions

Whether you locate a section in the Floating Builder Panel or click on it inside the live preview (which summons the Floating Contextual Controls), you have access to powerful manipulation actions:

Move & Reorder

  • Drag and Drop: In the Floating Builder Panel's list, grab the grip icon to drag sections up or down the page.
  • Move to Another Page: In the Form Editor or floating controls, look for a "Move to Page" dropdown to instantly migrate a section to a completely different URL on your site.

Duplicate

Click the Duplicate icon to instantly clone the section exactly as it is (including all your custom text and images). This is great for repeating complex layouts.

Transform Variant (AI Migration)

Click the Change Variant icon (two crossing arrows) to safely transform the section into a different layout style.

  • Example: Convert a 3-column feature grid into an alternating image-and-text layout.
  • The AI will automatically migrate your existing text and imagery into the new structure!

Lock

Click the Lock icon to definitively protect a section. When locked, ScaffolderJS's bulk AI generation tools will completely ignore this section, ensuring your finely-polished hand-written text is never accidentally overwritten.

Delete

Click the Trash icon to permanently delete the section from the page.