Understanding Layouts

The Simple Concept: Site → Pages → Sections → Blocks

Understanding this hierarchy is key to working effectively in New Salon:

Site

Your entire website - the container for everything.

Pages

Individual web pages (Home, About, Portfolio, Contact, etc.)

Sections

Containers within pages that hold your content. Each section can have its own layout.

Blocks

Your actual content - images, text, videos, buttons, etc.

The power of this system: Each section can use a different layout, letting you mix and match presentation styles on the same page. For example:

• Hero section using Canvas layout for creative freedom
• Portfolio section using Justified layout for clean image rows
• Contact section using Square Grid for organized information

This modular approach lets you build complex, professional pages fast - simply choose the right layout for each section's content and purpose.

What is a Layout?

A layout is the engine that determines how content blocks are arranged within a section. Think of it as the "rules" that control:

• Positioning - How blocks are placed (freeform, grid, rows)
• Sizing - How blocks are sized relative to each other and the container
• Responsiveness - How the layout automatically adapts to different screen sizes
• Interactions - How blocks behave when resized, moved, or interacted with
• Visual Flow - How the eye moves through your content

Why Layouts Matter

The right layout can:

• Save time - Automatic arrangement means less manual positioning
• Ensure consistency - Built-in rules keep your design organized
• Improve user experience - Layouts are optimized for readability and navigation
• Maintain responsiveness - Automatic mobile adaptation
• Create visual hierarchy - Guide attention to important content

Layout vs. Manual Positioning

Traditional website builders require you to position every element manually. New Salon's layouts do the heavy lifting:

• Traditional way: Position each image at x:100, y:200, adjust for mobile, repeat for every element
• New Salon way: Choose Justified layout, drop in images, get perfectly aligned rows automatically

The 9 Layouts (7 Production, 2 Development)

Each layout is designed for specific content types and presentation goals. Here's how to choose:

Canvas

Free-form drag & drop positioning

The most flexible layout where you control exactly where everything goes.

When to use Canvas:

• You want complete creative freedom and control
• Your design requires overlapping or layered elements
• You're creating a unique, artistic layout that breaks conventional grids
• Position and spacing are more important than automatic arrangement
• You have strong design skills and want to craft custom layouts

Pro tips for Canvas:

• Use the grid and snap features to maintain alignment
• Design for desktop first, then adjust mobile breakpoint
• Test thoroughly on different screen sizes
• Consider using guides to maintain consistent spacing

Slideshow

Sequential content with navigation

Present content one slide at a time with smooth transitions and navigation controls.

When to use Slideshow:

• Presenting work one piece at a time for maximum impact
• Creating a presentation-style portfolio or case study
• Focusing attention on individual items without distractions
• Building immersive, full-screen experiences
• Telling a story in sequence (process, timeline, etc.)

Pro tips for Slideshow:

• Keep slides consistent in style for smooth flow
• Add captions to provide context for each slide
• Consider autoplay timing - 5-8 seconds works well for images
• Test navigation on mobile devices (swipe gestures)
• Don't put too much content on each slide

Justified

Image gallery with justified rows

Images automatically arrange in rows with consistent heights and edge-to-edge alignment.

When to use Justified:

• Photo galleries with varying image sizes and aspect ratios
• When you want clean, organized rows that fill the full width
• Professional photography portfolios
• Any time you have many images to display efficiently
• When consistency in row heights is important

Pro tips for Justified:

• Upload high-resolution images for best results
• Mix of landscape and portrait orientations works well
• Adjust row height based on your image content
• Consider image loading - use optimization for large galleries
• Works great with lightbox overlays for full-size viewing

Fixed Width

Dynamic tile-based grid

A Pinterest-style layout where content flows naturally with tiles of varying sizes.

When to use Fixed Width:

• Mixed content types and sizes (images, quotes, videos, text blocks)
• Creating visual interest through variety and organic flow
• Pinterest or Tumblr-style presentation
• Encouraging exploration and discovery
• When you want content to feel dynamic and varied

Pro tips for Fixed Width:

• Mix different content heights for visual interest
• Use consistent styling within blocks for cohesion
• Great for blogs, inspiration galleries, or mixed portfolios
• Consider loading performance with many blocks
• Test column count on different devices

Fixed Height

Fixed row height with flowing content

Maintains consistent row heights while allowing content to flow horizontally within each row.

When to use Fixed Height:

• Horizontal scrolling galleries or carousels
• Film strip or timeline-style presentations
• When consistent row heights are important for visual rhythm
• Panoramic or wide image display
• Creating horizontal browsing experiences

Pro tips for Fixed Height:

• Choose row height based on your content (200-400px typical)
• Works great for landscape photos or wide content
• Consider touch/swipe navigation for mobile
• Good for showing many items in compact vertical space
• Test horizontal scrolling on different devices

Variable Size

Column masonry with flexible widths

Masonry layout where blocks can span different column widths, creating dynamic size hierarchy.

When to use Variable Size:

• Highlighting certain pieces with larger sizes
• Creating dynamic, visually interesting layouts
• When some content deserves more prominent placement
• Mixed importance hierarchy (featured vs. regular items)
• Portfolios where you want to emphasize key pieces

Pro tips for Variable Size:

• Use larger sizes (2x, 3x) sparingly for impact
• Create visual rhythm with size variation
• Great for highlighting featured work or important content
• Consider content hierarchy when sizing blocks
• Test on mobile - sizes adapt automatically

Square Grid

Uniform square tiles

Every item displays as a perfect square in a regular, organized grid.

When to use Square Grid:

• Social media-style presentation (Instagram aesthetic)
• Thumbnails and preview galleries
• When visual uniformity and consistency is desired
• Grid-based portfolios where equality is important
• Clean, minimal designs with organized appearance

Pro tips for Square Grid:

• Ensure images work well when cropped to squares
• Great for logos, icons, or square-format content
• Creates very clean, organized appearance
• Perfect for social media content or consistent branding
• Consider how text content will fit in square format

Choosing the Right Layout

Quick Decision Tree

Start here: What's your primary content type?

Images Only

• Many photos, different sizes → Justified
• Want to emphasize some images → Variable Size
• Clean, uniform look → Square Grid
• Mixed sizes for visual interest → Fixed Width

Mixed Content (Images + Text)

• Organized, structured → Square Grid
• Dynamic, Pinterest-style → Fixed Width
• Feature some content larger → Variable Size

Single Focus Content

• One thing at a time → Slideshow
• Horizontal browsing → Fixed Height

Creative/Custom Design

• Complete control needed → Canvas

By Content Type

By Design Goal

By Audience & Purpose

By Technical Skill Level

Beginner tip: Start with Square Grid or Justified - they're the most forgiving and automatically look good.

Advanced tip: Use different layouts for different sections on the same page to create variety and purpose-driven presentation.

Changing Layouts

How to Switch

Changing layouts is designed to be fast and non-destructive:

1. Select the section you want to change
2. Click the Layout button in the section toolbar
3. Browse available layouts with live previews
4. Hover to preview how your content will look
5. Click to apply the new layout instantly

What Happens When You Switch

Your content is safe:

• All blocks (images, text, videos) are preserved
• Content within blocks remains unchanged
• Block styling and settings are maintained

Positioning changes:

• Blocks are repositioned according to new layout rules
• Previous positioning may need minor adjustments
• Layout flows and organizes your content automatically

Settings reset:

• Layout-specific settings return to defaults
• You can immediately customize the new layout's options
• Previous layout settings are remembered if you switch back

Smart Layout Transitions

New Salon intelligently handles layout switches:

From Canvas to Grid Layouts:

• Blocks snap to the nearest grid positions
• Overlapping elements are separated automatically
• Maintains relative positioning where possible

From Grid to Canvas:

• Current grid positions become freeform positions
• All blocks remain editable and moveable
• Gives you full control to customize further

Between Grid Layouts:

• Content reflows according to new layout rules
• Maintains content order and relationships
• Automatically optimizes for the new layout type

Layout-Specific Settings

Each layout has unique configuration options accessible in the settings panel:

Canvas Settings

• Grid size - Snap-to-grid spacing (8px, 16px, 24px)
• Snap settings - Enable/disable snapping to grid and other blocks
• Breakpoint management - Separate mobile layouts

Slideshow Settings

• Transition style - Fade, slide, zoom effects
• Transition speed - Duration (0.3s to 2.0s)
• Navigation style - Arrows, dots, both, or none
• Autoplay - Enable/disable with timing controls
• Loop - Return to first slide after last

Justified Settings

• Row height - Target height for rows (150-400px)
• Gap size - Space between images (0-40px)
• Last row handling - Justify, left-align, or center
• Image quality - Optimization settings

Fixed Width Settings

• Column count - Number of columns (2-6)
• Gutter width - Space between blocks (8-32px)
• Minimum block height - Prevents very short blocks
• Loading behavior - Lazy loading options

Fixed Height Settings

• Row height - Fixed height for all rows (200-500px)
• Gap size - Vertical space between rows
• Overflow behavior - How content flows within rows
• Navigation - Scroll indicators and controls

Variable Size Settings

• Base columns - Foundation column count (3-6)
• Gutter width - Space between blocks
• Size options - Available span sizes (1x, 2x, 3x)
• Size distribution - How often large sizes appear

Square Grid Settings

• Column count - Responsive column counts
• Gap size - Space between squares (4-32px)
• Crop behavior - How images are cropped to squares
• Aspect ratio - Lock to perfect squares or allow slight variation

Responsive Behavior

Automatic Mobile Adaptation

Most layouts are mobile-first responsive - they automatically adapt without any additional work:

How Layouts Adapt

Column-based layouts (Square Grid, Fixed Width, Variable Size):

• Columns reduce on smaller screens (desktop: 4 cols → mobile: 2 cols)
• Content reflows naturally to fit
• Touch-friendly spacing increases automatically

Row-based layouts (Justified, Fixed Height):

• Maintain row structure but adjust heights
• Images scale proportionally
• Horizontal scrolling becomes touch-friendly

Content-focused layouts (Slideshow):

• Navigation adapts to touch (larger touch targets)
• Swipe gestures are enabled automatically
• Controls resize for better mobile usability

Responsive Breakpoints

New Salon uses three main breakpoints:

Manual Mobile Control (Canvas Only)

Canvas layout gives you complete control over mobile presentation:

Setting Up Mobile Layout

1. Switch to mobile preview using the device toggle
2. Adjust block positions specifically for mobile
3. Changes save automatically for mobile breakpoint
4. Desktop layout remains unchanged

Mobile Design Tips for Canvas

• Stack vertically - Mobile users expect vertical scrolling
• Increase touch targets - Buttons should be 44px minimum
• Reduce text sizes - Less text per screen works better
• Simplify navigation - Fewer options, clearer hierarchy
• Test thoroughly - Use real devices when possible

Managing Multiple Breakpoints

• Desktop changes don't affect mobile (and vice versa)
• You can create completely different layouts for each breakpoint
• Copy elements between breakpoints using copy/paste
• Preview each breakpoint before publishing

Responsive Best Practices

For All Layouts

• Test on real devices - Previews are good, but real testing is better
• Consider thumb navigation - Mobile users navigate with thumbs
• Optimize images - Large images slow mobile loading
• Check text readability - Ensure sufficient contrast and size

Layout-Specific Mobile Tips

Fixed Width & Variable Size:

• Reduce to 2 columns on mobile max
• Larger blocks become full-width on small screens
• Ensure important content isn't buried

Justified & Square Grid:

• May become single column on very small screens
• Image loading performance is crucial
• Consider lazy loading for long galleries

Slideshow:

• Swipe gestures are essential
• Autoplay may be disabled on mobile to save battery
• Navigation dots work better than arrows on touch

Performance Considerations

Loading Speed by Layout

Different layouts have different performance characteristics:

Optimization Tips

For Image-Heavy Layouts

• Use WebP format when possible for 25-35% smaller files
• Implement lazy loading - images load as user scrolls
• Optimize image dimensions - don't upload unnecessarily large images
• Consider progressive JPEG for large photos

For Complex Layouts (Fixed Width, Variable Size)

• Limit initial load - Show 20-30 blocks initially, load more on scroll
• Monitor JavaScript performance - Complex layouts use more processing
• Test on slower devices - Ensure smooth scrolling and interaction