← Back to Documentation

Creating Your First Website

This guide walks you through creating a complete website with multiple pages. We'll cover planning your site structure, creating pages, and organizing your content.

Planning Your Website

Before diving into the editor, consider what pages you'll need:

  • Home/Portfolio - Your main showcase page
  • About - Information about you or your work
  • Contact - How visitors can reach you
  • Project pages - Individual pages for your work

Creating Your First Page

Step 1: Access the Dashboard

  1. Go to new.salon.io
  2. Sign in to your account
  3. You'll see your dashboard with any existing websites

Step 2: Create a New Website

  1. Click Create Website
  2. Enter a descriptive name (this becomes part of your URL)
  3. Click Create

The editor opens with a blank canvas ready for your content.

Step 3: Choose a Layout

New Salon offers 8 different layouts. For a portfolio, we recommend:

  • Canvas - For creative, freeform designs
  • Column Grid - For structured, organized layouts
  • Mosaic - For image-heavy portfolios

To change the layout:

  1. Click the Layout button in the toolbar
  2. Browse the available options
  3. Click to select your preferred layout

Adding Content

Text Content

  1. Press B or click the + button
  2. Select Text or Heading
  3. Click to place the block
  4. Type your content

Use the text toolbar to:

  • Change font size and weight
  • Add bold, italic, or underline formatting
  • Create links
  • Adjust alignment

Images

  1. Press B or click the + button
  2. Select Image
  3. Click to place the block
  4. Upload your image or drag and drop

Image options include:

  • Lightbox - Click to view full-size
  • Captions - Add descriptive text
  • Links - Make images clickable

Other Blocks

Explore additional block types:

  • Gallery - Multiple images in a grid
  • Video - Embed YouTube, Vimeo, or upload directly
  • Button - Call-to-action buttons with links
  • Spacer - Add vertical space between elements
  • Divider - Visual line separators

Organizing Content

Moving Blocks

  • Click and drag blocks to reposition them
  • Hold Shift while dragging for constrained movement
  • Use arrow keys for precise positioning

Aligning Blocks

Most layouts offer alignment guides:

  • Snap to grid lines
  • Align with other blocks
  • Center on the page

Layering (Canvas Layout)

In Canvas layout, blocks can overlap:

  • Right-click a block and select Bring to Front or Send to Back
  • Use keyboard shortcuts: Ctrl/Cmd + ] (forward) or Ctrl/Cmd + [ (backward)

Adding More Pages

Create Additional Pages

  1. Click the Pages panel on the left
  2. Click + New Page
  3. Enter the page name and URL slug
  4. Choose a layout for the new page

Organize Your Pages

  • Drag pages to reorder them in the navigation
  • Right-click for options: Duplicate, Hide, Delete
  • Set a page as your homepage in Settings

Saving Your Work

New Salon automatically saves your changes as you work. You'll see:

  • Saving... when changes are being saved
  • Saved when all changes are stored
  • Offline if you lose connection (changes save when reconnected)

Next Steps

Your website is taking shape! Continue learning:

Creating Your First Website - Salon Docs