Help Center
Media Elements
Images, galleries, video, logos, and icons - focal points, lightboxes, masonry layouts, autoplay behavior, and settings-bound branding.
Last updated
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 (Settings tab, Link group) - make the image clickable, with a URL or one of the site's pages
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, 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 |
Image Gallery#
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.
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#
A video file from the media library or a pasted link, with sensible performance defaults. YouTube and Vimeo links play in an embedded player.
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 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 |
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.