Hero banner: how to use
Each banner on this page is a full-bleed Row with one variant class in Advanced › CSS Classes. The class is the Figma style plus alignment: banner-dark-blue-left, banner-dark-blue-center, banner-light-blue-left, banner-light-blue-center, banner-slate-left, banner-slate-center. Copy the whole row onto your page, then change the text, links and images. Layout, spacing and colours come from the theme; anything you change in the Row or element settings takes priority.
What to ask your designer for
- Desktop: one JPG, exactly 1920 × 1080 px (landscape, 16:9), sRGB, under 300 KB. Name it
<name>-desktop-1920x1080.jpg. - Mobile: one JPG, exactly 900 × 1200 px (portrait, 3:4), sRGB, under 150 KB. Name it
<name>-mobile-900x1200.jpg. - Plain photograph only: no text, logos or gradients baked in. The theme adds the blue gradient.
When the banner is the first row on a page: in the Row's Melios settings, turn on preload for both the desktop and the mobile background image. The photo then shows as soon as the page does, instead of the blue gradient showing first and the photo popping in a moment later.