Creating Your First Website

A fuller walkthrough than the quick start — how a site is structured and how to build it out.

How a site is organized

Everything follows one hierarchy:

Site → Pages → Sections → Blocks

• A site is your whole project, at new.salon.io/your-name/your-site.
• Pages are the individual URLs (Home, About, Work…). One page is your startpage — the home page your site opens to, which can't be deleted.
• Sections are horizontal bands stacked down a page. Each section has its own layout and background.
• Blocks are the content inside a section — images, text, video, and page links.

1. Create the site

From your dashboard, click + Create New Site and name it. It opens straight into the editor.

2. Build your first section

A new page starts with one section. Add content with the toolbar:

• Upload Images to place photos.
• Add Text Block for a title, intro, or caption.
• Add Video Block for a YouTube/Vimeo embed.

Drag blocks to arrange them, and drag their edges to resize.

3. Choose the section's layout

Each section is arranged by SalonEngine, with one layout chosen per section. The default is Canvas (free-form). Open the section's Layout panel to switch — for example Justified for a clean gallery row, or Slideshow for a sequential presentation. See Understanding layouts for the full set.

4. Add more sections and pages

• Add Section stacks another band below — give each its own layout and background.
• Add Page creates another URL. Use Browse Pages to move between them.

5. Style it

Open the site's appearance settings to pick a theme (colors and fonts), which cascades across pages and sections. You can override colors per section.

6. Preview your work

Click Stop Editing at any time to drop out of edit mode and see your site exactly as a visitor will — this is your preview. Leaving edit mode also pushes your latest changes live, so what you preview is what visitors get. To keep working, click Edit in the floating corner toolbar. See Stop Editing for the full rundown.

7. Publish

Publishing works at two levels — both must be on for a page to be visible to the public:

• Site level — the whole site is either live or not. Use Publish to make new.salon.io/your-name/your-site accessible. If the site is unpublished, nothing is visible to visitors, no matter the page settings.
• Page level — each page has its own published toggle in the Page panel. An unpublished page stays hidden from navigation and the public even while the site is live, so you can work on a draft page without exposing it. (Your startpage is always published.)

So a page is only reachable by visitors when both the site and that page are published. Changes go live the moment you republish.

Next

• Understanding the editor
• Understanding layouts
• Stop Editing — previewing and pushing changes live