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 9 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:
- Fixed Width - 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 9 layouts