Adding, reordering and changing sections

Sections are the building blocks of every page. How to add one, move it, hide it, and switch it to a different design.

Every page is a stack of sections: a hero, a list of services, a set of questions, a contact block. Instantsite ships 42 section designs, and the generator picks the ones that suit the business you described.

The section controls

Hover a section and its controls appear at its edge:

Move section upSwaps this section with the one above it.
Move section downSwaps it with the one below.
Duplicate sectionAdds a copy directly beneath, with the same content, ready to edit.
Hide sectionRemoves the section from the public website but keeps it in the editor. Use it to take something down temporarily.
Section settingsOpens the section panel in the sidebar.

Adding a section

  1. Open the drawer

    Choose Add a section in the sidebar.

  2. Pick a section

    The drawer groups sections by purpose and marks the ones recommended for the kind of page you are on. Sections already on the page are marked so you do not add a second one by accident.

  3. Fill it in

    A new section arrives with neutral placeholder content: headings and body copy you replace with your own. It does not invent content for you.

Changing a section's design

Most sections come in several designs. Open Section settings and use the Layout control to switch between them: a services list can become a grid, a hero can move its image to the other side.

If a design has fewer fields than the one you are leaving, the editor tells you exactly which content would be dropped and waits for you to confirm before applying it.

Under Style each section can also take a different background (page background, tinted or your primary colour), alignment and width.

Removing a section

Sections are removed from their panel. A few cannot be removed because a page would not work without them; the editor says why instead of showing a delete control that would fail.

What belongs on a page

A page that converts usually follows a shape:

  1. A hero that says what you do and for whom, with one clear action.
  2. Proof that you can do it: services, work, credentials.
  3. The detail a serious visitor wants before contacting you.
  4. Answers to whatever normally stops people getting in touch.
  5. A contact section that makes the next step obvious.

The tutorial Add and reorder sections applies this to a real page.

Adding, reordering and changing sections | Instantsite Docs