Square Layout

Overview

Every block is displayed as a square tile, creating a clean, uniform appearance that works well for galleries and mixed content.

Best for:

• Mixed content portfolios
• Social media-style galleries
• Product showcases
• Uniform grid layouts

Column Settings

Column Count

Choose how many blocks per row:

• 2 columns - Large squares
• 3 columns - Balanced layout
• 4 columns - Default setting
• 5+ columns - Compact thumbnail view

The column count applies to all screen sizes - responsive behavior depends on your section's container settings.

Gap Settings

Gap Size

Space between squares in pixels:

• 0 - No gap (seamless grid)
• 8 - Small gap
• 16 - Default gap
• 24 - Large gap
• 32 - Extra large gap

Gaps are uniform in all directions for consistent spacing.

Image Handling

Fit Images

Controls how images fill the square container:

• Fit Images: On - Images cover entire square (may crop, default)
• Fit Images: Off - Images contained within square (may letterbox)

Image Alignment (when Fit Images is Off)

When images don't fill the entire square, control positioning:

Horizontal Alignment:

• Left
• Center (default)
• Right

Vertical Alignment:

• Top
• Center (default)
• Bottom

Supported Block Types

Image Blocks

• Square cropping or contained display
• Caption support with overlay options
• Lightbox viewing (if enabled)
• Double-click to edit in editing mode

Video Blocks

• Thumbnail display in square format
• Play controls overlay
• Click to play

Text Blocks

• Rich text editing support
• Scrollable content within square
• Background colors with opacity support
• Dedicated drag handle for easy repositioning

Page Blocks

• Link to other pages in your site
• Show page cover image and title
• Navigate on click (or edit in editing mode)

Button Blocks

• Call-to-action buttons
• Centered within square container

Heading Blocks

• Title text display
• Centered within square container

Collection Features

Automatic Page Blocks

When collection mode is enabled:

• Automatically creates page blocks for pages matching collection filters
• Collection pages appear after manually added blocks
• No duplicates - manually added page blocks take precedence

Mixed Content

Collection pages integrate seamlessly with manually added blocks of any type.

Editing Mode Features

Drag and Drop

• Reorder blocks by dragging
• 5px movement threshold to allow clicks
• Visual feedback during drag operations

File Upload

• Drag files from computer onto layout
• Creates new image blocks automatically
• Batch upload support with progress indicator

Block-Specific Editing

• Images: Double-click to open editor
• Text: Click to edit with rich text editor
• Pages: Click to edit or navigate
• All blocks: Delete option available

New Block Position

• Configure where new blocks appear (typically bottom of grid)

Configuration Options