Layout Mapping

When you migrate from salon.io, your layouts are automatically converted to New Salon equivalents. This guide explains how each layout maps and what to expect.

Layout Conversion Overview

New Salon's 8 layout engines are designed to match or improve upon salon.io's layouts:

| salon.io Layout | Config Name | New Salon Layout | Match Quality | |-----------------|-------------|------------------|---------------| | Drag & Drop | dndconfig | Canvas | Excellent | | Fixed Width | fixedwidthconfig | Column Grid | Good | | Fixed Height | fixedheightconfig | Fixed Height | Excellent | | Masonry | masonryconfig | Variable Size | Good | | Square | squareconfig | Square Grid | Excellent | | Slideshow | slideshowconfig | Slideshow | Excellent | | Justified | justifiedconfig | Justified | Excellent |

Detailed Mapping

Drag & Drop → Canvas

Match: Excellent

The DND layout maps directly to Canvas:

| Property | salon.io | New Salon | |----------|----------|-----------| | Positioning | Free-form | Free-form | | Coordinates | X, Y pixels | X, Y pixels | | Overlapping | Supported | Supported | | Z-index | Supported | Supported |

What transfers perfectly:

Exact block positions
Layering order
Block sizes
Rotation (if used)

What may need adjustment:

Very wide layouts (New Salon has responsive options)
Custom breakpoints

Fixed Width → Column Grid

Match: Good

Fixed Width converts to Column Grid:

| Property | salon.io | New Salon | |----------|----------|-----------| | Columns | Fixed number | Configurable | | Gutters | Fixed | Adjustable | | Snapping | To columns | To grid |

What transfers well:

Column spans
Vertical positioning
General layout structure

What may need adjustment:

Gutter spacing (review and adjust)
Column count (may need tuning)
Edge alignment

Fixed Height → Fixed Height

Match: Excellent

Direct mapping with same behavior:

| Property | salon.io | New Salon | |----------|----------|-----------| | Row height | Fixed pixels | Fixed pixels | | Image flow | Horizontal | Horizontal | | Wrapping | To new rows | To new rows |

What transfers perfectly:

Row heights
Image order
Spacing

What may need adjustment:

Minor responsive behavior differences

Masonry → Variable Size

Match: Good

Masonry converts to Variable Size:

| Property | salon.io | New Salon | |----------|----------|-----------| | Columns | Auto-fill | Configurable | | Sizing | Variable | Variable spans | | Flow | Top-to-bottom | Masonry fill |

What transfers well:

General masonry appearance
Image proportions
Overall layout feel

What may need adjustment:

Column count preferences
Specific image sizing
Gap/gutter spacing

Square → Square Grid

Match: Excellent

Perfect mapping:

| Property | salon.io | New Salon | |----------|----------|-----------| | Aspect ratio | 1:1 | 1:1 | | Grid | Square tiles | Square tiles | | Cropping | Center | Configurable |

What transfers perfectly:

Grid structure
Image order
Uniform sizing

What may need adjustment:

Crop position (if not center)
Column count preferences

Slideshow → Slideshow

Match: Excellent

Direct feature mapping:

| Property | salon.io | New Salon | |----------|----------|-----------| | Transitions | Fade, Slide | Fade, Slide, Zoom | | Navigation | Arrows, Dots | Arrows, Dots, Keyboard | | Autoplay | Supported | Supported |

What transfers perfectly:

Slide order
Basic transition type
Autoplay settings

What may need adjustment:

New transition options available
Navigation styling

Justified → Justified

Match: Excellent

Identical behavior:

| Property | salon.io | New Salon | |----------|----------|-----------| | Row height | Target height | Target height | | Justification | Full width | Full width | | Last row | Various options | Various options |

What transfers perfectly:

Image order
Row height settings
Overall layout

What may need adjustment:

Last row behavior preferences
Gap spacing

Configuration Transfer

Settings That Transfer

Most layout settings are preserved:

Spacing/Gaps - Gutter sizes
Alignment - Left, center, right
Sizing - Relative sizes
Order - Asset sequence

Settings That Reset

Some settings use new defaults:

Responsive breakpoints - New system
Animation - Enhanced options available
Mobile behavior - Improved handling

After Layout Conversion

Review Checklist

After migration, check each page:

Overall appearance - Does it look similar?
Image positions - Are they where expected?
Spacing - Is the spacing appropriate?
Responsive - Check mobile view

Common Adjustments

Canvas layouts:

Fine-tune positions
Adjust for new canvas size
Review overlapping elements

Grid layouts:

Verify column count
Adjust gutter spacing
Check alignment

Gallery layouts:

Confirm image order
Adjust row/column settings
Review mobile behavior

Layout Improvements

New Capabilities

After migration, explore new features:

| Layout | New Features | |--------|--------------| | Canvas | Improved snap-to-grid | | Column Grid | Dynamic columns | | Slideshow | More transitions | | All layouts | Better mobile handling |

Upgrade Opportunities

Consider using new layouts for better results:

Mosaic - New layout type, great for mixed content
Variable Size - Enhanced masonry with span control

Troubleshooting Layout Issues

Layout looks different

Check layout settings panel
Compare with salon.io original
Adjust spacing and columns
Fine-tune positions if Canvas

Images in wrong positions

Verify layout type is correct
Check if page was DND (Canvas)
Manually reposition if needed

Missing layout features

Some legacy features may work differently:

Check layout settings for alternatives
New features may offer better options
Contact support for specific issues

Getting Help

If layout conversion issues persist:

Take screenshots of original and imported
Note the specific layout type
Post in the Forum for community help
Submit an Issue for technical support

Next Steps

After Migration - Complete post-import tasks
Understanding Layouts - Learn about all 8 layouts