Section Management

Welcome to the Butternut Section Management Guide! This guide explains how to manage, edit, and organize the sections (building blocks) of your website.

​

Table of contents

1. Understanding sections
2. Accessing section controls
3. Adding new sections
4. Building with AI
5. Section appearance controls
6. Editing section content
7. Duplicating sections
8. Moving sections
9. Visibility controls
10. Deleting sections
11. Draft & publish system
12. Multi-page features
13. Best practices
14. Troubleshooting

---

​

Understanding sections

​

What are sections?

Sections are the building blocks of your website. Each section is a distinct part of your page, for example:

• Hero / banner (your main header area with a title and call-to-action)
• About us
• Services
• Testimonials
• Contact form
• Footer
• Custom sections generated with AI

​

How sections work

• Pages are made up of multiple sections stacked vertically.
• Each section has controls that appear when you hover over it.
• Sections can be added, edited, moved, hidden, duplicated, or deleted.
• Changes can be saved as drafts before you publish.

---

​

Accessing section controls

​

Finding the controls

1. Open your website in Edit mode (not Live/Preview).
2. Hover over a section.
3. Section outlines and controls appear.

​

Control locations

Top-right corner (main controls) may include:

• Regenerate layout
• Change colors
• Edit images
• Edit content
• Regenerate with AI
• Duplicate
• Copy to page (multi-page)
• Move up / down
• Show / hide
• Delete

Orange line (between sections) may include:

• Add section
• Build with AI

Left-side badge (draft status) may include:

• Draft indicator
• Publish and undo controls (on hover)

---

​

Adding new sections

​

Method 1: Section gallery (templates)

1. Hover a section.
2. Use the orange line above or below and click Add section.
3. In the gallery modal, browse templates (hero, about, services, portfolio, contact, newsletter, etc.).
4. Click a template to add it immediately.

Best for:

• Fast, professional layouts
• Consistent design across your site
• Standard website blocks

​

Method 2: Build with AI

1. Hover a section.
2. Use the orange line above or below and click Build with AI.
3. Describe what you want in natural language.
4. AI generates a custom section and inserts it where you chose.

Examples:

• “Create a pricing table with 3 tiers”
• “Add a team section with 4 members”
• “Make a FAQ section about shipping”
• “Build a gallery showing my products”

​

Where sections appear

• Top line: inserts a section above the current section.
• Bottom line: inserts a section below the current section.

​

Notes

• The first (hero) section may restrict adding above it.
• The footer stays at the bottom.
• The number of sections you can add may depend on your plan.

---

​

Building with AI

AI section creation lets you describe what you want and have it built automatically.

​

How to use the AI section builder

1. Click Build with AI on an orange add line (or use ChatAI in the sidebar).
2. Write a specific prompt:
   • Content type (“pricing table”, “FAQ”, “testimonials”)
   • Number of items (“3 plans”, “6 FAQs”)
   • Style preferences (“modern”, “minimal”, “colorful”)
   • Any must-have text or features
3. Wait for generation (often 10–30 seconds).
4. Review and refine:
   • Edit details with the inline editor
   • Regenerate with better instructions if needed

​

Prompt examples

Good prompts:

• “Create a 3-column services section with icons, titles, and descriptions”
• “Add a testimonial carousel with 5 customer reviews”
• “Build a hero section with a call-to-action button and background image”
• “Make a contact form with name, email, message, and submit button”

Less effective prompts:

• “Add something nice”
• “Make it better”
• “Section”

​

Credits

• AI generation uses credits.
• Your available credits depend on your plan and refresh cadence.

---

​

Section appearance controls

​

Regenerate section layout

Changes the layout/design while keeping your content.

1. Hover the section.
2. Click Regenerate layout (circular arrow).
3. Wait for regeneration.
4. Click again to cycle to another layout.

Typically changes:

• Element arrangement and spacing
• Overall structure

Typically keeps:

• Your section content (text/images)
• Section type

​

Regenerate color theme

Changes the color palette for the section.

1. Hover the section.
2. Click Change colors (palette icon).
3. Cycle through variants until you like one.

Tips:

• Use contrast to create hierarchy (for example, darker CTA sections).
• Alternate light and dark sections for rhythm.

---

​

Editing section content

​

Edit section (text & elements)

1. Hover the section.
2. Click Edit content (pencil icon).
3. Click any element within the section to edit it.

You can edit:

• Text
• Colors and typography
• Images
• Links and buttons
• Spacing and layout
• Effects and shadows

For detailed element editing, see the Inline Editor User Guide.

​

Edit images

If the section contains images (including background images):

1. Hover the section.
2. Click Edit images (image icon).
3. Select the image to modify and replace/upload/reposition/remove as needed.

​

Regenerate section with AI

Rebuilds the section using AI instructions.

1. Hover the section.
2. Click Regenerate with AI (sparkles/refresh).
3. Optionally add instructions (for example: “Make it more professional”, “Change to 3 columns”).
4. Regenerate and review.

Important:

• This recreates the section and may replace existing content.
• AI usage consumes credits.

---

​

Duplicating sections

​

Duplicate on the same page

Creates an exact copy of the section, usually inserted below the original.

1. Hover the section.
2. Click Duplicate.
3. Wait a few seconds for processing.

Duplicates typically include:

• Content (text/images/buttons)
• Styles (colors/fonts/spacing)
• Links and settings

​

Copy to another page (multi-page)

Copies the section to a different page.

1. Hover the section.
2. Click Copy to page.
3. Choose a target page.
4. Confirm copy and review on the destination page.

---

​

Moving sections

​

Move up

1. Hover the section.
2. Click Move up (up arrow).

Notes:

• The first section may not move up.
• Some hero sections may be fixed at the top.

​

Move down

1. Hover the section.
2. Click Move down (down arrow).

Notes:

• The footer typically can’t move down and stays last.

​

Suggested page flow

Many pages follow a structure like:

1. Hero
2. About
3. Services / products
4. Features / benefits
5. Testimonials / social proof
6. Pricing (optional)
7. Call-to-action
8. Contact info
9. Footer

---

​

Visibility controls

​

Show / hide sections

Hide a section to remove it from the live site without deleting it. To hide:

1. Hover the section.
2. Click Hide (eye icon).

To show:

1. Hover the hidden (faded) section.
2. Click Show (eye-with-slash icon).

Indicators:

• In edit mode, hidden sections often appear faded (reduced opacity).
• On the live site, hidden sections do not render or take up space.

Best practice:

• Prefer hiding over deleting unless you’re certain you won’t need the section again.

---

​

Deleting sections

​

How to delete

1. Hover the section.
2. Click Delete (trash icon).
3. Confirm deletion.

Warnings:

• Deletion is permanent and cannot be undone.
• Some structural sections may be protected (for example: hero/navbar/footer).

Before deleting:

• Hide it first (safer).
• Duplicate it as a backup.
• Copy important text/images elsewhere.

---

​

Draft & publish system

​

Drafts

A draft is a saved change that is not live yet. You may see a Draft badge on the left side of a section when it has unpublished edits.

​

Publish options

Publish an individual section

1. Hover the section’s Draft badge.
2. Click Publish (upload icon).
3. Confirm.

Publish the entire page

1. Use the bottom save/publish bar.
2. Click Publish page (or similar).
3. Confirm publishing all unpublished sections.

​

Undo / revert

Undo a section’s draft

1. Hover the Draft badge.
2. Click Undo (back arrow).
3. Confirm discard to revert to the published version.

Discard all page changes Use the bottom bar to discard all unpublished changes on the page.

---

​

Multi-page features

​

Copy section to another page

Requirements:

• Multi-page enabled
• At least 2 pages

How it works:

1. Hover the section.
2. Click Copy to another page.
3. Choose a target page.
4. The section is added to the end of the target page, and you may be redirected.

Notes:

• Copies are independent: editing the original doesn’t update the copy (and vice versa).

---

​

Best practices

​

Organization

• Keep a strong hero first.
• Use a logical story flow from top to bottom.
• Place calls-to-action where they naturally fit.
• Keep the footer last.

​

Performance

• Use appropriately sized, compressed images.
• Avoid excessive section count and heavy effects.
• Test on mobile for readability, spacing, and tap targets.

​

Workflow

• Add sections first, then fill in content, then refine styling.
• Use drafts while iterating; publish when a section is ready.
• Hide sections for experiments; delete only when you’re sure.

​

Consistency

• Stick to theme colors where possible.
• Keep typography consistent (headings/body hierarchy).
• Use consistent spacing and alignment patterns.

---

​

Troubleshooting

​

Section controls not appearing

• Ensure you’re in Edit mode.
• Hover directly over the section content.
• Close any open modals/panels.
• Refresh the page (Cmd+Shift+R) and try again.

​

Can’t move a section

• The section may be at the top/bottom limit.
• The section may be protected (hero/footer).
• Refresh and try again if controls look stuck.

​

Duplicate not working

• Wait a few seconds (larger sections take longer).
• Check your connection and retry.
• If AI-based duplication/regeneration is involved, confirm you have credits.

​

Draft not publishing

• Retry publishing after a refresh.
• Confirm your session hasn’t expired.
• Check permissions if you’re in a team workspace.

​

AI generation failed

• Check credit balance.
• Simplify the prompt and try again.
• Retry later if it appears to be a temporary error.

---

​

Quick reference

Last updated: January 2026
Version: 2.0