← Back to Documentation

Understanding the Editor

The New Salon editor is where you create and design your pages. This guide explains each part of the interface and how to use the available tools effectively.

Editor Overview

The editor consists of several key areas:

  • Top Toolbar - Primary actions and settings
  • Left Panel - Pages, layers, and navigation
  • Canvas - Your page content and workspace
  • Right Panel - Block properties and settings
  • Bottom Bar - Zoom, view options, and status

Top Toolbar

Left Section

  • Logo - Return to dashboard
  • Website Name - Click to rename
  • Page Selector - Switch between pages

Center Section

  • Block Button (+) - Open the block palette
  • Layout Selector - Change page layout
  • Undo/Redo - Revert or restore changes

Right Section

  • Preview - See your page as visitors will
  • Settings - Site-wide configuration
  • Publish - Make changes live

Block Palette

Press B or click the + button to open the block palette. Available blocks:

| Block | Description | Shortcut | |-------|-------------|----------| | Text | Rich text content | T | | Heading | Page titles and sections | H | | Image | Single images | I | | Gallery | Multiple images | G | | Video | Embedded or uploaded video | V | | Button | Clickable buttons | - | | Spacer | Vertical spacing | - | | Divider | Horizontal lines | - |

Working with Blocks

Selecting Blocks

  • Single click - Select a block
  • Double click - Enter edit mode (for text blocks)
  • Click + drag - Select multiple blocks
  • Shift + click - Add to selection

Block Actions

When a block is selected, you can:

  • Move - Drag to reposition
  • Resize - Drag corner or edge handles
  • Duplicate - Ctrl/Cmd + D
  • Delete - Delete or Backspace
  • Copy/Paste - Ctrl/Cmd + C / Ctrl/Cmd + V

Block Properties Panel

The right panel shows properties for the selected block:

Common Properties:

  • Position (X, Y coordinates)
  • Size (Width, Height)
  • Opacity
  • Link settings

Text Properties:

  • Font family and size
  • Color and alignment
  • Line height and spacing

Image Properties:

  • Alt text
  • Lightbox settings
  • Caption text
  • Fit mode (cover, contain, etc.)

Canvas Navigation

Zooming

  • Scroll wheel - Zoom in/out
  • Pinch gesture - Zoom on trackpad
  • Zoom controls - Bottom bar buttons
  • Fit to view - Ctrl/Cmd + 0

Panning

  • Space + drag - Pan the canvas
  • Middle mouse button - Pan while held
  • Two-finger scroll - Pan on trackpad

Keyboard Shortcuts

General

| Action | Windows/Linux | Mac | |--------|---------------|-----| | Save | Ctrl + S | Cmd + S | | Undo | Ctrl + Z | Cmd + Z | | Redo | Ctrl + Shift + Z | Cmd + Shift + Z | | Preview | Ctrl + P | Cmd + P | | Publish | Ctrl + Shift + P | Cmd + Shift + P |

Blocks

| Action | Windows/Linux | Mac | |--------|---------------|-----| | Block palette | B | B | | Delete block | Delete | Delete | | Duplicate | Ctrl + D | Cmd + D | | Copy | Ctrl + C | Cmd + C | | Paste | Ctrl + V | Cmd + V | | Select all | Ctrl + A | Cmd + A |

Navigation

| Action | Windows/Linux | Mac | |--------|---------------|-----| | Zoom in | Ctrl + = | Cmd + = | | Zoom out | Ctrl + - | Cmd + - | | Fit to view | Ctrl + 0 | Cmd + 0 | | Toggle panels | Tab | Tab |

Preview Mode

Click Preview to see your page exactly as visitors will. In preview mode:

  • Blocks are not editable
  • Navigation works as on the live site
  • Mobile/tablet views available
  • Press Escape to exit

Auto-Save

New Salon automatically saves your work:

  • Changes save within seconds of editing
  • No manual save required
  • Work offline and sync when reconnected
  • Version history available in Settings

Tips for Efficiency

  1. Learn shortcuts - Speed up your workflow significantly
  2. Use the grid - Enable grid snapping for alignment
  3. Duplicate blocks - Faster than creating new ones
  4. Preview often - Check how your page looks to visitors
  5. Use layers - Organize complex pages with the layers panel

Next Steps

Now that you understand the editor:

Understanding the Editor - Salon Docs