Images, galleries, video, logos, and icons - focal points, lightboxes, masonry layouts, autoplay behavior, and settings-bound branding.
Loading the guide...
Help us make the guides more useful.
0 helpful · 0 not helpful
Five elements put media on the page: Image, Image Gallery, Video, Logo, and Icon. All of them pull files from the tenant's media library, which handles optimization for you.
The workhorse. A responsive image with proper dimensions and lazy loading built in.
| Field | Options | Notes |
|---|---|---|
| Width / Height | pixels | Rendered dimensions; setting them prevents layout shift |
| Focal Point | 9-position grid (Top Left through Bottom Right) | Which part of the photo survives cropping |
| Load image eagerly | checkbox | Images lazy-load by default; turn this on only for the image at the very top of the page |
| Open in lightbox | checkbox | Click opens the full-size image in an overlay |
| Border | None, Rounded, Circle, Pill, Match site (brand radius) | Corner treatment |
| Inline SVG | checkbox | Inlines an SVG file so it inherits colors and can be styled |
| Max Width | None, X-Small through the larger steps | Caps the display width |
A packed grid of images - portfolios, job photos, before/after sets. By default each image is just a photo; a Caption select adds an Overlay mode that shows each image's Title and Meta line in a gradient over a full-cover image, which is the featured-post or portfolio-card look. Overlay always uses equal grid cells.
| Field | Options |
|---|---|
| Layout | Grid (equal cells) or Masonry (packed, keeps each photo's aspect ratio) |
| Columns | Per breakpoint: Phone Portrait, Tablet Landscape, Desktop, Large Screens (1 to 6 columns each) |
| Column Gap / Row Gap | Default, None, Small, Medium, Large |
| Image Radius | None, Small, Medium, Large |
Set fewer columns on Phone Portrait (typically 2) and more on Desktop (typically 4) - the defaults already follow that pattern.
A video file from the media library or a pasted link, with sensible performance defaults. YouTube and Vimeo links play in an embedded player.
| Field | Options | Notes |
|---|---|---|
| Width / Height | pixels | |
| Focal Point | 9-position grid | For cover cropping |
| Loading | Lazy or Eager | Lazy by default |
| Autoplay | None, Autoplay when in viewport, Always autoplay | In-viewport is the background-video pattern |
| Loop | checkbox | |
| Muted | checkbox | Required by most browsers for autoplay |
| Controls | checkbox (on by default) | Turn off for decorative loops |
| Plays Inline | checkbox (on by default) | Prevents fullscreen takeover on phones |
For a decorative autoplay loop: Autoplay when in viewport + Loop + Muted + Controls off.
The Logo element is bound to your site identity: it renders the logo image from Site Settings, or the site name as text in the header's own text color when no logo image is set, so updating the logo in one place updates it everywhere. Made for the Header and Footer builder.
| Field | Notes |
|---|---|
| Link | Where the logo points (usually the home page) |
| Max Height / Max Width | Size constraints in pixels |
| Alignment | Left, Center, Right |
A single icon with optional link.
| Field | Options |
|---|---|
| Icon | Pick from the icon set |
| Link | Optional |
| Icon Width | Size in pixels |
| Color | None, Muted, Emphasis, Primary, Secondary, Success, Warning, Danger |
| Style | None, Link, Button |
| Alignment | Left, Center, Right |
For icon-plus-text feature lists, do not compose Icon + Text by hand - the Grid element does that pattern natively with icon position and background options.
Changes go live on the next manual Deploy, like all content edits.