Sections
Select, reorder, duplicate, delete, share, and replace section layouts in the Design Editor.
A section is a block of a page, such as a hero, features list, testimonial area, navbar, or footer. Use the section controls to change its structure without restyling the whole site.
At a Glance
| Task | Entry point | Scope |
|---|---|---|
| Edit content or style | Click a section | Selected section |
| Reorder or duplicate | Section context menu | Page structure |
| Replace layout | Layout in the section panel | Selected section layout |
| Share a component | Global control | Matching global sections |
| Edit a whole page | Page three-dot menu | Page and its sections |
Select a Section
Click a section on the canvas to open its content panel. Click an empty canvas area or the panel back control to return to site styles. Clicking text or media can open that element's own editor instead.
| Panel area | What you can do | When it appears |
|---|---|---|
| Logo | Upload/select a logo and adjust its size | Logo-bearing sections such as Navbar and Footer |
| Context | Review the section description and regenerate its copy | Content generation supported by the section |
| Layout | Search and choose another layout, randomize, or undo a layout change | Available layout variants |
| Style | Theme, vertical spacing, and supported overlay controls | Options vary with the section |
| Assets | Open the section's images and icons | When those assets exist |
See Text Editing, Images, Icons, and Logos for element-level editing. Assets are grouped by type and show counts so you can find the right item.
Reorder, Duplicate, and Delete
Open a section's context menu with a right-click. On desktop, you can also drag to reorder sections. Tablet and phone use the menu move actions. Move actions are disabled at the ends of the page.
| Action | What it does |
|---|---|
| Move Section Up | Moves the section earlier on its page |
| Move Section Down | Moves it later on its page |
| Duplicate | Inserts a copy of the selected section |
| Delete | Removes the selected section after the applicable confirmation |
| Cut, Copy, Paste | Move or copy a section through the editor clipboard; Paste requires clipboard content |
| Shuffle Component | Tries another layout for this section |
| Regenerate Text | Regenerates this section's copy when AI is available |
| Add Section Above | Opens the library with an insertion point above this section |
| Add Section Below | Opens the library with an insertion point below this section |
Find the target section
Make a structural change
Review the page
Replace a Layout
Open Layout in the selected section's panel. Use Search to narrow the layouts and the filter menu to reduce the choices. Selecting a layout replaces that section's layout rather than adding a second section.
The randomize control tries another layout from the applicable family. The layout undo control is disabled until there is a previous layout to restore. The undo button's accessible label is Undo layout change.
Changing layout can change which text or media slots are used. Review the resulting copy and assets instead of assuming every old slot has a direct equivalent.
Global Sections
Global sections keep shared page components consistent. Typical examples are navigation and footer sections.
| Entry point | Non-global label | Global label |
|---|---|---|
| Section panel global icon | Make a Global Section | Remove Global Section |
| Section context menu | Create Global Component | Remove Global |
Global sharing follows the component's section identity, not an arbitrary selection of unrelated blocks. Matching global components share changes such as their layout and content. Remove global status when you need that component to stop participating in shared editing.
Section Theme, Overlay, and Vertical Spacing
Theme chooses a light or dark treatment for the selected section. Vertical scales the site's spacing rhythm. See Vertical Spacing for all five stops.
Sections with supported background images can also show Overlay: Default, Off, or Black. Black exposes Strength. Not every section has an overlay control; do not expect one on a plain background or footer. Read Background and Overlay for the full explanation.
Regenerate Section Copy
Use the section's regeneration action when its copy needs a fresh pass. Section regeneration and layout replacement are different tasks: rewriting copy does not mean generating arbitrary new section code.
For a specific request, use the Design agent and identify the page and section. Review the proposed scope before allowing changes.
On the Home page, rewrite only the Features section for a bookkeeping service.
Focus on monthly reports, expense tracking, and tax-ready records.
Keep the current layout and do not change any other section.
Page Actions
The page three-dot menu includes Shuffle Components, Regenerate Text, Move Page Left, Move Page Right, Rename Page, Duplicate Page, Delete Page, and Add Section. Page shuffle affects the page's layouts; page regeneration affects its copy. Use a section action when you only want to change one block.