> ## Documentation Index
> Fetch the complete documentation index at: https://docs.butternut.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Section Management

> Manage, edit, and organize the sections (building blocks) of your website: add, duplicate, move, hide, delete, draft, and publish.

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](#understanding-sections)
2. [Accessing section controls](#accessing-section-controls)
3. [Adding new sections](#adding-new-sections)
4. [Building with AI](#building-with-ai)
5. [Section appearance controls](#section-appearance-controls)
6. [Editing section content](#editing-section-content)
7. [Duplicating sections](#duplicating-sections)
8. [Moving sections](#moving-sections)
9. [Visibility controls](#visibility-controls)
10. [Deleting sections](#deleting-sections)
11. [Draft & publish system](#draft--publish-system)
12. [Multi-page features](#multi-page-features)
13. [Best practices](#best-practices)
14. [Troubleshooting](#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](/inline-element-section-editing/html-element-editor).

### 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

| Action            | Where       | What it does                         |
| ----------------- | ----------- | ------------------------------------ |
| Add section       | Orange line | Inserts a new section above/below    |
| Build with AI     | Orange line | Generates a custom section           |
| Regenerate layout | Top-right   | Changes the section layout           |
| Change colors     | Top-right   | Cycles section color themes          |
| Edit content      | Top-right   | Opens inline editing                 |
| Edit images       | Top-right   | Edits images in the section          |
| Duplicate         | Top-right   | Copies section on the same page      |
| Copy to page      | Top-right   | Copies section to another page       |
| Move up/down      | Top-right   | Reorders section                     |
| Show/hide         | Top-right   | Toggles section visibility           |
| Delete            | Top-right   | Permanently removes section          |
| Publish section   | Draft badge | Makes a section live                 |
| Undo changes      | Draft badge | Reverts section to published version |

**Last updated:** January 2026\
**Version:** 2.0