Hero image
The Hero image is the lead visual above the text. This guide documents every Hero image setting — the image source, how it is sized, rounded and spaced, and how the image and text are arranged.
Hero image
The featured image up top
The hero is the large featured image at the top of a headline or wheel-picker screen, the picture that sells the screen at a glance. Turn it on, then upload a file or paste an image URL. Pick a high-quality, on-message visual (product, result, or lifestyle shot); on a paid landing page it is often the first thing a visitor sees. Sizing and position are set just below.
The hero image itself
Pick the actual hero image: upload a file from your computer or paste a direct image URL, then check the preview thumbnail. Use a high-resolution JPG or PNG so it stays crisp on large screens — uploads are optimized automatically for fast loading. To change it later, just upload or paste a new source here.
How the image fills its box
Sets how your image fits its box: Aspect Fit shows the whole image with no cropping (you may see empty bars at the sides), Aspect Fill crops the edges so it fully covers the box, Scale to Fill stretches it (can look distorted, avoid for photos), and Tile repeats it as a pattern. Default is Aspect Fit, which never distorts; switch to Aspect Fill when you want it edge-to-edge and don't mind some cropping.
Fixed image width
Optionally pin the hero image to a set width with the slider (0–500) or by typing a number. Leave it empty in most cases — the image then sizes to the screen and stays responsive across devices, which almost always looks best on a landing page. Set a fixed width only when you need the image smaller than full-width or aligned to a specific size.
Fixed image height
Optionally pin the hero image to a set height with the slider (0–500) or by typing a number. Leave it empty to let the image keep its natural proportions from the width — best for most screens. Use a fixed height when you want a consistent banner size; to size by screen proportion instead, use 'Image height relative to container' below, which takes priority over this value.
Size the image by screen
Sizes the hero image as a percentage of the screen height (0 to 100%), so it scales with the device, the more responsive way to size a hero. If set, it overrides any fixed height above. A common starting point is 30 to 50% for a prominent banner that still leaves room for your title and button below; leave it empty to size by proportions instead.
How rounded the image is
Rounds all four corners of the hero image; 0 is sharp and higher values (up to 50) make them softer and more rounded. The default is 0. A small radius around 8 to 16 gives a modern, friendly look; match it to the rounding used elsewhere in your funnel, like buttons and cards, so the page feels consistent.
Space around the image
Adds empty space on each side of the hero image (top, right, bottom, left) so it isn't flush against the screen edges or crammed next to the title. Leave it at the theme default in most cases. Increase a side when the image feels too tight against nearby content, or reduce it for a full-bleed, edge-to-edge look.
Image & text layout
Where the image sits
On headline screens, this sets where the hero image sits relative to your title and subtitle — above the text, below it, or beside it. Lead with your strongest element: image-on-top when the visual is the hook, text-on-top when the headline does the selling. The preview updates instantly, so try a couple and keep whichever reads clearest.
