Help Center
Media Elements
Images, galleries, video, logos, and icons - focal points, lightboxes, masonry layouts, autoplay behavior, and settings-bound branding.
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.
Image#
The workhorse. A responsive image with proper dimensions and lazy loading built in.
Content#
- Image - pick from the media library or upload
- Image Alt - the alt text. Write it for a screen-reader user; it also matters for image SEO
- Link - make the image clickable
Settings#
| 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 | 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 |
Image Gallery#
A packed grid of images with no per-image captions or text - portfolios, job photos, before/after sets.
Adding Images#
- Add an Image Gallery element
- Bulk-add photos from the media library; each becomes a Gallery Image item
- Reorder items in the Inspector list
Settings#
| 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.
Video#
Self-hosted or external video with sensible performance defaults.
Content#
- Video - a file from the media library or an external URL
- Video Alt - accessible description
- Poster Image - the frame shown before playback
- Play Icon - overlay play button
Settings#
| 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.
Logo#
The Logo element is bound to your site identity: it renders the logo image (and site name) from Site Settings, 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 |
Icon#
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.
Media Performance Notes#
- Uploads are converted to an optimized web format automatically, and the renderer picks appropriately sized variants - you rarely need to resize by hand. See Media Library.
- Always fill in alt text. The media library requires it on upload for a reason.
- Only the topmost image on a page should load eagerly; everything else should stay lazy.
Changes go live on the next manual Deploy, like all content edits.