Layouts & Structure

Layouts control how content is organized and displayed in your QR experiences. QRCompose provides flexible layout systems that adapt beautifully across all screen sizes, from phones to desktops.

Overview

Great layouts guide users through your content intuitively, emphasize important elements, and create visual hierarchy. Choose from preset layouts or build custom structures that match your needs.

Layout Types

Single Column

Description:

One column of content
Full width or centered
Vertical stacking of elements

Best For:

Mobile-first experiences (95% of QR scans)
Simple content flows
Reading-focused content
Stories and narratives

Example:

[Header/Logo]
[Hero Image]
[Title]
[Description]
[Button]
[Content Block]
[Content Block]
[Footer]

Recommended

Single column is the safest choice for QR experiences since most are viewed on mobile devices.

Two Column

Description:

Side-by-side content areas
Desktop: 50/50 or 60/40 split
Mobile: Stacks to single column

Best For:

Comparing options
Image + text pairings
Feature lists
Before/after comparisons

Example:

Desktop:                Mobile:
[Image] | [Text]        [Image]
                        [Text]

Column Ratios:

50/50 — Equal emphasis
60/40 — Primary/secondary
70/30 — Main content + sidebar
40/60 — Image focus

Three Column

Description:

Three equal or varied width columns
Desktop: Side-by-side
Tablet: 2 columns
Mobile: Single column

Best For:

Feature showcases
Service listings
Product grids
Icon + description sets

Example:

Desktop:
[Col 1] [Col 2] [Col 3]

Tablet:
[Col 1] [Col 2]
[Col 3]

Mobile:
[Col 1]
[Col 2]
[Col 3]

Grid Layout

Description:

Multiple columns and rows
Flexible item placement
Responsive reflow

Best For:

Product catalogs
Photo galleries
Service menus
Team members
Portfolio items

Grid Options:

2×2 (4 items)
3×3 (9 items)
4×4 (16 items)
Auto (fills available space)

Masonry Layout

Description:

Pinterest-style cascading grid
Items of varying heights
Fills spaces efficiently

Best For:

Mixed content types
Galleries with different aspect ratios
Blog/article cards
Creative portfolios

Behavior:

Items maintain aspect ratio
No forced cropping
Dynamic, organic feel

Card Layout

Description:

Content in contained cards
Visual separation
Consistent item structure

Best For:

Blog posts
Products
Services
Team bios
Testimonials

Card Styles:

Elevated (with shadow)
Outlined (with border)
Flat (background color)

Hero Section

Description:

Large, prominent top section
Full-width or full-screen
Eye-catching entry point

Best For:

First impression
Main message
Call-to-action focus
Brand identity

Hero Variants:

Image Hero:

[Full-width background image]
[Centered text overlay]
[Call-to-action button]

Video Hero:

[Autoplay background video]
[Text overlay]
[CTA]

Split Hero:

[Image] | [Text + CTA]

Minimal Hero:

[Logo]
[Headline]
[Subtitle]
[CTA Button]

Responsive Design

Breakpoint System

Mobile First Approach:

Mobile (Default): 0 - 768px
  → Single column
  → Stacked elements
  → Touch-optimized

Tablet: 768px - 1024px
  → 2 columns possible
  → Larger text
  → Flexible grids

Desktop: 1024px - 1440px
  → Multi-column layouts
  → Standard spacing
  → Mouse interactions

Wide Desktop: 1440px+
  → Maximum container width
  → Extra whitespace
  → Enhanced visuals

Mobile Optimization

Critical Considerations:

Touch Targets:

Minimum 44×44px for buttons
Adequate spacing between tappable elements
No hover-dependent interactions

Content Priority:

Most important content first
Progressive disclosure
Collapsible sections for long content

Performance:

Lightweight images
Minimal animations
Fast loading critical content
Lazy load below-fold content

Readability:

16px+ body text (prevents auto-zoom on iOS)
Adequate line height (1.5+)
Sufficient contrast
Generous margins and padding

Section Layouts

Header Section

Essential Header Elements:

Logo (top-left typically)
Navigation (if multi-page)
Call-to-action button (optional)

Header Styles:

Minimal:

[Logo]              [CTA Button]

With Navigation:

[Logo]  [Nav Link] [Nav Link] [Nav Link]  [CTA]

Centered:

        [Logo]
    [Nav] [Nav] [Nav]

Content Sections

Section Structure:

[Section Title]
[Section Subtitle/Description]
[Content Area - varies by layout]
[Optional CTA]

Section Spacing:

Small: 32px between sections
Medium: 48px between sections (default)
Large: 64px+ between sections

Background Variations:

Alternating backgrounds (white, light gray)
Full-bleed images
Gradient overlays
Solid colors

Common Footer Elements:

Copyright notice
Social media links
Contact information
Privacy policy link
Secondary navigation

Footer Layouts:

Stacked (Mobile-friendly):

[Links]
[Social Icons]
[Copyright]

Multi-Column (Desktop):

[About] | [Links] | [Social] | [Contact]
      [Copyright - centered]

Special Layouts

Split Screen

Description:

Screen divided vertically (usually 50/50)
Each side has distinct content/purpose
Bold, modern aesthetic

Use Cases:

Before/After comparisons
Product vs. Product
Image + Content pairings
Dual call-to-action

Example:

[Image/Visual]  |  [Text Content]
                |  [Bullet Points]
                |  [CTA Button]

Description:

Main content area + fixed sidebar
Sidebar: 25-30% width
Main: 70-75% width

Sidebar Content:

Navigation menu
Quick links
Related content
Author bio
Advertisements
Filters (for catalogs)

Behavior:

Desktop: Side-by-side
Mobile: Sidebar moves to top or bottom

Full-Width Sections

Description:

Edge-to-edge content
No side margins
Immersive experience

Best For:

Hero images/videos
Galleries
Impact statements
Background visuals

Implementation:

[Contained Section - 1200px max]

[Full-Width Section - No limit]

[Contained Section - 1200px max]

Z-Pattern Layout

Description:

Mimics natural eye movement (left-to-right, down)
Guides attention through content
Strategic placement of CTAs

Pattern:

[Logo]  →  →  →  [CTA]
           ↓
    [Image] ← ← [Text]
           ↓
[Text] →  →  → [Image]
           ↓
    [Large CTA Button]

F-Pattern Layout

Description:

Users scan in F-shape
Top and left side get most attention
Common for text-heavy content

Optimization:

Important content top-left
Scannable headings
Bullet points on left
Images as visual breaks

Layout Components

Content Blocks

Block Types:

Text Block:

Headings and paragraphs
Formatted text
Links and lists

Image Block:

Single image
Caption optional
Various sizes

Image + Text Block:

Image with accompanying text
Left/right/top image placement
Flexible ratios

Video Block:

Embedded or uploaded video
Player controls
Autoplay options

Button Block:

Call-to-action button
Link button
Button groups

Spacer Block:

Add vertical space
Visual breathing room
Section separation

Divider Block:

Horizontal line
Section separator
Various styles

Containers

Container Types:

Full-Width Container:

100% screen width
No side margins
Immersive

Standard Container:

1200px max width
Centered on screen
Side margins on larger screens

Narrow Container:

800px max width
Reading-optimized
Generous side margins

Fluid Container:

90% screen width
Proportional sizing
Adaptive to screen

Best Practices

Visual Hierarchy

Establish Clear Priority:

Primary Elements (Most important)
- Main headline
- Primary CTA
- Hero image
- Key value proposition
Secondary Elements
- Subheadings
- Supporting content
- Secondary CTAs
- Feature descriptions
Tertiary Elements
- Footer links
- Legal text
- Metadata
- Captions

Visual Weight:

Size (larger = more important)
Color (contrast = attention)
Position (top/center = priority)
Whitespace (isolation = emphasis)

Whitespace Usage

Benefits:

Improves readability
Creates focus
Reduces cognitive load
Modern, premium feel

Guidelines:

Don't be afraid of empty space
Balance content and whitespace
Use padding generously
Avoid cluttered layouts

Alignment

Types:

Left-Aligned (Most common):

Natural reading flow
Clean, organized
Default for text

Center-Aligned:

Formal, elegant
Good for headlines
Short content only

Right-Aligned:

Uncommon for body text
Useful for numbers, dates
Design accent

Justified:

Formal, newspaper-style
Can create awkward spacing
Avoid on narrow columns

Consistency

Maintain Throughout:

Spacing between similar elements
Button sizes and styles
Heading hierarchy
Card dimensions
Image aspect ratios

Mobile Layout Strategies

Stack Order

Control how multi-column layouts stack on mobile:

Desktop:

[Image] [Text]

Mobile Option 1 (Image First):

[Image]
[Text]

Mobile Option 2 (Text First):

[Text]
[Image]

Choose based on content priority.

Collapsible Sections

For long content on mobile:

Accordion Pattern:

▼ Section 1 (Expanded)
  Content here...

▶ Section 2 (Collapsed)

▶ Section 3 (Collapsed)

Benefits:

Reduce scrolling
User controls depth
Progressive disclosure

Sticky Elements

Sticky Header:

Header stays visible while scrolling
Quick access to navigation
Constant branding

Sticky CTA:

Button fixed at bottom on mobile
Always accessible
High conversion

Implementation:

css

.sticky-header {
  position: sticky;
  top: 0;
  z-index: 100;
}

.sticky-cta {
  position: fixed;
  bottom: 0;
  width: 100%;
}

Advanced Layouts

CSS Grid (Pro Plan)

Create complex, custom layouts:

css

.grid-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto;
  gap: 24px;
}

Benefits:

Precise control
Overlapping elements
Asymmetric designs
Professional results

Flexbox Layouts (Pro Plan)

Flexible, responsive layouts:

css

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

Use For:

Navigation bars
Button groups
Card layouts
Flexible centering

Custom Layouts (Pro Plan)

Build completely custom layouts:

Drag-and-drop builder
Pixel-perfect positioning
Custom breakpoints
Unique designs

Troubleshooting

Layout breaks on mobile

Check:

Content too wide (fixed widths)
Images not responsive
Text too large
Insufficient padding
Test on real devices

Content overlapping

Fix:

Adjust z-index layering
Increase spacing
Check absolute positioning
Review margin/padding values

Inconsistent spacing

Solutions:

Use spacing system consistently
Define spacing variables
Apply margins systematically
Use spacing utilities

Next Steps

Media → — Add background images and visual elements
Themes → — Apply consistent styling
QR Styling → — Customize QR code design
Components → — Apply layouts to content

Layouts & Structure ​

Overview ​

Layout Types ​

Single Column ​

Two Column ​

Three Column ​

Grid Layout ​

Masonry Layout ​

Card Layout ​

Hero Section ​

Responsive Design ​

Breakpoint System ​

Mobile Optimization ​

Section Layouts ​

Header Section ​

Content Sections ​

Footer Section ​

Special Layouts ​

Split Screen ​

Sidebar Layout ​

Full-Width Sections ​

Z-Pattern Layout ​

F-Pattern Layout ​

Layout Components ​

Content Blocks ​

Containers ​

Best Practices ​

Visual Hierarchy ​

Whitespace Usage ​

Alignment ​

Consistency ​

Mobile Layout Strategies ​

Stack Order ​

Collapsible Sections ​

Sticky Elements ​

Advanced Layouts ​

CSS Grid (Pro Plan) ​

Flexbox Layouts (Pro Plan) ​

Custom Layouts (Pro Plan) ​

Troubleshooting ​

Layout breaks on mobile ​

Content overlapping ​

Inconsistent spacing ​

Next Steps ​

next: /customization/media ​

Layouts & Structure

Overview

Layout Types

Single Column

Two Column

Three Column

Grid Layout

Masonry Layout

Card Layout

Hero Section

Responsive Design

Breakpoint System

Mobile Optimization

Section Layouts

Header Section

Content Sections

Footer Section

Special Layouts

Split Screen

Sidebar Layout

Full-Width Sections

Z-Pattern Layout

F-Pattern Layout

Layout Components

Content Blocks

Containers

Best Practices

Visual Hierarchy

Whitespace Usage

Alignment

Consistency

Mobile Layout Strategies

Stack Order

Collapsible Sections

Sticky Elements

Advanced Layouts

CSS Grid (Pro Plan)

Flexbox Layouts (Pro Plan)

Custom Layouts (Pro Plan)

Troubleshooting

Layout breaks on mobile

Content overlapping

Inconsistent spacing

Next Steps

next: /customization/media