Skip to main content
The Content tiles section allows you to create complex, mosaic-style grid layouts with unlimited customizable tiles that can span multiple columns and rows. This advanced layout system enables sophisticated visual compositions for showcasing content, images, videos, or slideshows in creative, magazine-style arrangements. Use this section when standard grid layouts feel too rigid for your creative vision.

​
What this section controls

This section controls advanced grid layouts with the following capabilities:
  • Unlimited customizable tile blocks
  • Flexible column spanning (1-6 columns on desktop, 1-2 on mobile)
  • Flexible row spanning for vertical layouts
  • Mixed content types (images, videos, slideshows, text)
  • Individual tile color schemes and visibility settings
  • Section heading with customizable size and alignment
  • Three width options and vertical spacing controls

​
Section settings

​
General settings

Enable this option to reverse the tile order on mobile devices, useful for optimizing the visual hierarchy on smaller screens.
Add an optional heading above the tile grid. Configure the heading text, size (XS to XL), and alignment (left, center, or right).
Select the default color scheme for the entire section. Individual tiles can override this with their own color schemes.
Choose between three width options:
  • Page width — Standard container width
  • Fluid — Wider, edge-to-edge within padding
  • Full width — Complete edge-to-edge layout
Control the vertical spacing above and below the section with options ranging from None to XL (0, S, M, L, XL).

​
Block types

​
Tile

The primary content block for creating grid items with text, media, and buttons.
Control where the tile appears:
  • Desktop only
  • Mobile only
  • Both (default)
Column factor — Set how many columns the tile spans (1-6, default 1)Row factor — Set how many rows the tile spans (1-6, default 1)These settings enable flexible mosaic layouts by controlling the tile’s grid size. A tile with column factor 3 and row factor 2 will occupy a 3×2 grid space.
Color scheme — Override the section’s color scheme for this specific tile (default: scheme-5)Custom background color — Apply a custom gradient or solid background color, overriding the color schemeAspect ratio — Choose between:
  • Auto — Height determined by content
  • Fixed ratios — Square (1:1), Landscape (4:3, 3:2, 5:4, 16:9, 2:1, 4:1, 8:1), Portrait (3:4, 2:3, 4:5, 9:16, 1:2)
Vertical position — Align content to top, center (default), or bottom of the tileContent alignment — Position content left, center (default), or rightContent alignment (Mobile) — Separate alignment control for mobile devices (default: left)
Media position — Choose where media appears:
  • Top — Above content
  • Bottom — Below content
  • Background (default) — Behind content as background
Image — Upload a static imageVideo — Upload a native video fileExternal video — Add a YouTube or Vimeo URLShow video controls — Display playback controls for videos
Provide alternative media assets optimized for mobile devices:
  • Image (Mobile)
  • Video (Mobile)
  • External video (Mobile)
  • Show video controls (Mobile)
Heading — Add a tile heading with configurable size (XS to XL, default L)Text — Add descriptive text content supporting rich text formattingButton label — Add a call-to-action button with customizable textButton link — Set the button destination URLButton style — Choose filled, outlined, or text button style (default: filled)
Control the padding inside the tile, ranging from None to XL (0, S, M, L, XL, default M).

​
Slideshow

A specialized tile block that displays a carousel of content slides.
Control where the slideshow tile appears (desktop only, mobile only, or both).
Column factor — Set column span (1-6, default 6)Row factor — Set row span (1-6, default 1)
Media aspect ratio — Choose from 11 preset ratios including square (1:1), landscape (4:3, 3:2, 5:4, 16:9, 2:1), and portrait (3:4, 2:3, 4:5, 9:16, 1:2). Default is 2:1.Color scheme — Select the color scheme (default: scheme-5)Custom background color — Override with a custom gradient or solid color
Vertical position — Align content to top, center (default), or bottomContent alignment — Position content left, center (default), or rightContent alignment (Mobile) — Separate alignment for mobile (default: left)
Autoplay — Set automatic slide transition interval (0-10 seconds, 0 = disabled)Actions alignment — Position navigation controls at start, center (default), or endShow arrows — Display previous/next navigation arrows (enabled by default)Show bullets — Display slide indicator bullets (enabled by default)Show progress — Display a progress bar for autoplay (enabled by default)
Choose between two content sources:
  • Manual — Manually configure up to 5 slides within the block settings
  • Metaobject — Dynamically populate slides from a metaobject definition
When using manual mode, configure up to 5 individual slides:
  • Heading — Slide title
  • Text — Slide description
  • Image — Slide image
Each slide includes these three fields for creating rich content presentations.
Control the padding inside the slideshow tile (None to XL, default M).

​
Default configuration

The section comes with a preset of three tiles arranged in a balanced grid layout:
  • First tile: 3 columns × 2 rows (large featured tile)
  • Second tile: 3 columns × 1 row (horizontal tile)
  • Third tile: 3 columns × 1 row (horizontal tile)
This creates an asymmetric layout with one prominent tile and two smaller tiles below, ideal for highlighting key content.

​
Best practices

Grid planning

Plan your grid layout before adding tiles. The section uses a 6-column grid, so ensure column factors add up logically for balanced rows.

Mobile optimization

Use the “Block order (Mobile)” setting and mobile-specific media to optimize the layout and content for smaller screens.

Visual hierarchy

Use larger row and column factors for important content to create focal points. Combine different tile sizes for visual interest.

Aspect ratios

Choose aspect ratios that complement your imagery. Use “auto” for text-heavy tiles and fixed ratios for image-focused tiles.

Color contrast

When using background media, ensure sufficient contrast between the media and text content for readability.

Performance

Optimize images and videos before uploading. Use appropriate media for mobile to reduce data usage and improve loading times.

​
Use cases

  • Homepage grids — Create dynamic homepage layouts with mixed content types
  • Feature showcases — Highlight multiple product features or benefits in an engaging grid
  • Portfolio displays — Showcase projects or work samples with flexible sizing
  • Content hubs — Build navigation hubs linking to different site sections
  • Mixed media galleries — Combine images, videos, and text in a unified layout
  • Story walls — Tell brand stories through a mosaic of visual and textual content