Understanding Layouts

New Salon offers 8 different layout engines, each designed for specific types of content and presentation styles. Choosing the right layout is key to creating an effective website.

What is a Layout?

A layout determines how content blocks are arranged and behave on your page:

Positioning - How blocks are placed (freeform, grid, rows)
Sizing - How blocks are sized relative to each other
Responsiveness - How the layout adapts to different screen sizes
Interactions - How blocks behave when resized or moved

The 8 Layouts

Canvas

Free-form drag & drop positioning

The most flexible layout. Place blocks anywhere on the canvas with pixel-perfect control.

| Attribute | Value | |-----------|-------| | Best for | Creative portfolios, artistic sites | | Positioning | Freeform, anywhere | | Overlapping | Yes | | Responsive | Manual breakpoints |

When to use Canvas:

You want complete creative freedom
Your design requires overlapping elements
You're creating a unique, artistic layout
Position matters more than automatic arrangement

Slideshow

Sequential content with navigation

Present content one slide at a time with smooth transitions.

| Attribute | Value | |-----------|-------| | Best for | Presentations, featured work | | Navigation | Arrows, dots, keyboard | | Transitions | Fade, slide, zoom | | Autoplay | Optional |

When to use Slideshow:

Presenting work one piece at a time
Creating a presentation-style portfolio
Focusing attention on individual items
Building immersive, full-screen experiences

Justified

Image gallery with justified rows

Images fill rows edge-to-edge with consistent heights.

| Attribute | Value | |-----------|-------| | Best for | Photo galleries | | Row height | Configurable | | Gaps | Consistent spacing | | Last row | Options for handling |

When to use Justified:

Photo galleries with varying image sizes
When you want edge-to-edge rows
Clean, organized image presentation
Professional photography portfolios

Mosaic

Dynamic tile-based grid

A Pinterest-style layout with tiles of varying sizes.

| Attribute | Value | |-----------|-------| | Best for | Mixed content, visual discovery | | Tile sizes | Variable | | Columns | Configurable | | Flow | Masonry-style |

When to use Mosaic:

Mixed content types and sizes
Creating visual interest through variety
Pinterest or Tumblr-style presentation
Encouraging exploration

Column Grid

Flexible column-based structure

A structured grid with configurable columns and snap-to-grid.

| Attribute | Value | |-----------|-------| | Best for | Organized layouts, dashboards | | Columns | 1-12 configurable | | Snap | Grid snapping | | Spanning | Blocks can span columns |

When to use Column Grid:

Clean, organized layouts
When structure is important
Dashboard or card-based designs
Content that needs alignment

Fixed Height

Fixed row height with floating images

Rows maintain consistent height with images floating within.

| Attribute | Value | |-----------|-------| | Best for | Horizontal image rows | | Row height | Fixed, configurable | | Image flow | Horizontal within rows | | Aspect | Width varies, height fixed |

When to use Fixed Height:

Horizontal scrolling galleries
Film strip-style presentations
When consistent row heights matter
Panoramic or wide image display

Variable Size

Column masonry with variable widths

Masonry layout where images can span different column widths.

| Attribute | Value | |-----------|-------| | Best for | Dynamic portfolios | | Columns | Configurable base | | Spanning | 1x, 2x, 3x column width | | Flow | Masonry (fills gaps) |

When to use Variable Size:

Highlighting certain images larger
Dynamic, interesting layouts
When some content deserves more space
Mixed importance hierarchy

Square Grid

Uniform square tiles

Every item displays as a square in a regular grid.

| Attribute | Value | |-----------|-------| | Best for | Instagram-style grids | | Aspect ratio | 1:1 (square) | | Columns | Configurable | | Uniformity | All items same size |

When to use Square Grid:

Social media-style presentation
Thumbnails and previews
When uniformity is desired
Grid-based portfolios

Choosing a Layout

By Content Type

| Content Type | Recommended Layouts | |--------------|---------------------| | Photography portfolio | Justified, Mosaic, Variable Size | | Art/Illustration | Canvas, Mosaic | | Design work | Column Grid, Square Grid | | Mixed media | Mosaic, Variable Size | | Presentations | Slideshow | | Instagram-style | Square Grid |

By Design Goal

| Goal | Recommended Layouts | |------|---------------------| | Creative freedom | Canvas | | Clean organization | Column Grid, Square Grid | | Visual variety | Mosaic, Variable Size | | Focus attention | Slideshow | | Show many items | Justified, Square Grid |

By Skill Level

| Level | Recommended Layouts | |-------|---------------------| | Beginner | Square Grid, Justified | | Intermediate | Column Grid, Mosaic | | Advanced | Canvas, Variable Size |

Changing Layouts

Switch Layout

Click the Layout button in the toolbar
Browse available layouts
Hover to preview
Click to apply

What Happens When You Switch

Blocks are repositioned according to new layout rules
Some positioning may need adjustment
Layout-specific settings are reset
Content (text, images) is preserved

Layout-Specific Settings

Each layout has unique configuration options in the settings panel:

Canvas - Grid size, snap settings
Slideshow - Transition speed, navigation style
Justified - Row height, gap size
Mosaic - Column count, gutter width
Column Grid - Column count, gutter
Fixed Height - Row height
Variable Size - Base columns, gutter
Square Grid - Column count, gap

Responsive Behavior

Automatic Adaptation

Most layouts automatically adjust for mobile:

Columns reduce on smaller screens
Images resize proportionally
Navigation adapts to touch

Manual Breakpoints (Canvas)

Canvas layout allows custom mobile layouts:

Switch to mobile preview
Adjust block positions
Changes save for that breakpoint

Layout Comparison Chart

| Layout | Freeform | Grid | Best For | Complexity | |--------|----------|------|----------|------------| | Canvas | ✓ | - | Creative | High | | Slideshow | - | - | Focus | Low | | Justified | - | Rows | Photos | Low | | Mosaic | - | Tiles | Mixed | Medium | | Column Grid | - | ✓ | Structure | Medium | | Fixed Height | - | Rows | Horizontal | Medium | | Variable Size | - | ✓ | Dynamic | Medium | | Square Grid | - | ✓ | Uniform | Low |

Tips for Layout Success

Start with content - Choose layout based on what you're showing
Test on mobile - Check how layout adapts
Keep it simple - Don't fight the layout's natural behavior
Be consistent - Use the same layout across similar pages
Experiment - Try different layouts to see what works

Next Steps

Learn more about specific layouts: