Layout and Spacing

Control your store's overall width, margins, and spacing rhythm.

Accessing Layout Settings

1. Open the theme editor
2. Click Theme settings (gear icon)
3. Click Layout

Page Width

Control the maximum width of your content:

| Option | Width | Best For | |--------|-------|----------| | Narrow | 1280px | Text-heavy sites, blogs | | Standard | 1440px | Most stores (default) | | Wide | 1600px | Image-heavy, editorial | | Full | 1760px | Large product grids |

Content centers automatically on wider screens.

Page Margins

Horizontal padding on the sides of your content:

1. Find the Page margins slider
2. Adjust between 16-80 pixels
3. Default is 24px
4. Smaller margins = more content width
5. Larger margins = more breathing room

Section Spacing

Control vertical space between sections:

| Option | Effect | |--------|--------| | Compact | Tighter spacing, more content visible | | Standard | Balanced spacing (default) | | Generous | More breathing room between sections |

Responsive Behavior

Elle automatically adjusts layout for different screens:

• Desktop: Full width settings apply
• Tablet: Slightly reduced margins
• Mobile: Compact margins and single columns

Best Practices

Content Types

• Product-heavy pages: Use wider layouts and compact spacing
• Editorial/blog: Use narrower layouts and generous spacing
• Mixed content: Standard settings work well

Visual Rhythm

Consistent spacing creates a professional feel:

• Use the same section spacing throughout
• Let images and content breathe
• Avoid cramming too many sections together

Mobile First

Always preview on mobile:

• Check that text doesn't touch screen edges
• Ensure buttons are easy to tap
• Verify images scale properly