Loading...
Once the layout and placement are set, three things decide how the words on your hero read: the overlay (the tint between photo and text), the text itself (what it says, what shows, how big), and badges (small proof chips under the title).
Where: Property editor → Layout tab → Home → right panel → Hero → expand Text & style. Text sizes, weight, spacing, and All caps live under Home → Brand → Typography → Hero text. On collection sites: multi-unit site editor → Page → Home → Hero → Layout (overlay, placement) and Text wrap & alignment (headline width, alignment, show location / show tagline); All caps and type details are under Home → Brand → Typography → Hero text.
The overlay is why you can read white text over a bright photo. It's also the answer to "my hero photo looks dark" — the overlay is the darkening.
Where (property site): Property editor → Layout tab → Home → right panel → Hero → Text & style (expand) → Hero overlay cards + Overlay strength / Overlay color / Gradient length Where (collection site): Multi-unit site editor → Layout tab → Home → right panel → Hero → Layout → Hero overlay cards + Overlay strength / Overlay color / Gradient length Range: Overlay strength 0–100 (default 70). Overlay color #rrggbb (default black). Gradient length 0–100 (default 70).
| Option | What it does |
|---|---|
| Standard | Tints the edges and leaves the middle open — length is how close the tint reaches the center. |
| Top fade | Darkens just the top, clearing downward — pairs with Centered. |
| Left fade | Darkens just the left, clearing rightward — pairs with Editorial. |
| Bottom fade | Darkens just the base, clearing upward — pairs with Stacked. |
| None | No overlay. Best for already-dark or low-contrast photos. |
Choosing: match the fade to your placement (Top ↔ Centered, Bottom ↔ Stacked, Left ↔ Editorial left) so only the part of the photo under the text is tinted. If the photo looks too dark, lower Overlay strength first; if it's still too dark, choose None and rely on the text shadow. Standard is an edge vignette — the middle of the photo stays open.
Overlay color changes the tint. Leave it on black for the classic darkening, or pick a brand navy / warm brown so the fade matches the photo. A light color washes a dark image.
Gradient length is how far the fade reaches. On Standard, it is how close the tint gets to the center of the photo — turn it down to keep the middle clear, turn it up to cover more of the frame. On Top / Left / Bottom, turn it up if the fade misses the title, or down to keep the fade closer to that edge.
Parallax story sections further down the page have their own wash — Overlay strength and Overlay color on that section's Presentation card. One change applies to every parallax section on the page. See Collection Site Design.
Where (property site): Property editor → Layout tab → Home → right panel → Brand → Typography → Hero text → the Title / Eyebrow / Tagline block, each with its own copy field, Show switch, size, weight, spacing, Color, and All caps (Shadow at the bottom). Show location stays under Hero tab → Text & style Where (collection site): Multi-unit site editor → Layout tab → Home → right panel → Brand → Typography → Hero text → the Title / Eyebrow / Tagline block, each with its own copy field, Show switch, size, weight, spacing, Color, and All caps (Shadow at the bottom). Show location stays under Hero tab → Text wrap & alignment and on Page → Display locations → Show in hero
| Option | What it does |
|---|---|
| Small (size) | Text size step "Small" for the title, eyebrow, or tagline. |
| Medium (size) | Text size step "Medium" for the title, eyebrow, or tagline. |
| Large (size) | Text size step "Large" for the title, eyebrow, or tagline. |
| Extra large (size) | Text size step "Extra large" for the title, eyebrow, or tagline. |
| Huge (size) | Text size step "Huge" for the title, eyebrow, or tagline. |
| Light (weight) | The thinnest cut — airy and editorial at large sizes. |
| Regular (weight) | The everyday weight, same as body copy. |
| Medium (weight) | A touch heavier than regular without reading as bold. |
| Semibold (weight) | Confident but not heavy — good for small uppercase lines. |
| Bold (weight) | The heaviest cut, and the weight heroes have always used. |
| Tight (spacing) | Pulls the letters together — steadies a very large headline. |
| Normal (spacing) | No extra space between letters. |
| Wide (spacing) | Opens the letters a little. Suits short uppercase lines. |
| Wider (spacing) | Clearly spaced out, the classic tracked-caps eyebrow. |
| Widest (spacing) | The most spacing offered. Too much for a headline. |
| None (shadow) | No shadow — cleanest on dark or heavily overlaid photos. |
| Soft (shadow) | A light halo for gently busy photos. |
| Standard (shadow) | The default three-layer shadow that reads on most photos. |
| Strong (shadow) | A wide dark halo for busy or very bright photos where text still gets lost. |
| All caps on (uppercase) | CSS text-transform uppercase for that hero line. Does not rewrite stored copy. |
| All caps off (uppercase) | Leave that hero line in the case it was typed. Title and tagline start here; eyebrow starts on. |
Content placement decides where the copy sits on the photo. These three decide the shape of the copy itself — how wide it runs, which edge it hangs from, and where each line ends.
Where (property site): Property editor → Layout tab → Home → right panel → Hero → Text & style (expand) → Headline width + Text alignment pills Where (collection site): Multi-unit site editor → Layout tab → Home → right panel → Hero → Text wrap & alignment → Headline width + Text alignment pills Applies when: Any placement that puts words on or under the photo. Medallion presets replace the headline with a crest, so the width and alignment pills are hidden there. Range: Headline: up to 160 characters across at most 4 lines.
| Option | What it does |
|---|---|
| Narrow (width) | A tight column — wraps sooner, reads as a compact block. |
| Normal (width) | The hero layout's own measure. |
| Wide (width) | A long measure — fewer wraps, headline runs further. |
| Full page (width) | Edge to edge, spanning the page inside the hero gutters. |
| Match layout (alignment) | Whatever edge the composition preset uses — centered for most, left for Editorial left. |
| Left (alignment) | Copy hangs from the left edge of the booking bar, ragged right. |
| Center (alignment) | Copy is centered on the booking bar, ragged on both sides. |
| Right (alignment) | Copy hangs from the right edge of the booking bar, ragged left. |
Choosing: set the width first (it changes where the automatic wrap falls), then add manual line breaks only if you still want a specific break. A manual break on a narrow width can push the headline taller than the photo on mobile — check the preview at phone size.
Where (property site): Property editor → Layout tab → Home → right panel → Hero → Text & style (expand) → Hero badges → Add badge; reorder with the arrows Where (collection site): Multi-unit site editor → Layout tab → Home → right panel → Hero → Text wrap & alignment → Hero badges
| Option | What it does |
|---|---|
| Rating | Your live star rating and review count. |
| Hosted by | A "Hosted by …" chip with your host photo. |
| Custom | Your own short label with an optional emoji (e.g. "🔥 Hot tub"). |
| Amenity | A chip for one of your amenities (e.g. "Pool", "EV charger"). |
Add badges under Text & style → Hero badges, reorder them with the arrows, and choose Plain or a Laurel frame (default or gold) per badge. The Hosted by badge uses your host photo — set it in the same block if you haven't yet. While the card is collapsed it shows the badges you've added on one row (with a "+N" for any that don't fit), or greyed examples until you add one.
The same badges can sit inside any story section (a photo beside text): open the section and use the Badges card under the photo, then pick whether the row goes under the photo, under the text, or across the bottom of both. See Multi-unit site design for the section-level controls.
Where (property site): Property editor → Layout tab → Home → right panel → Brand → Typography → Hero text → Title / Eyebrow / Tagline (copy, size, weight, spacing, All caps) Where (collection site): Multi-unit site editor → Layout tab → Home → right panel → Brand → Typography → Hero text → Title / Eyebrow / Tagline (copy, size, weight, spacing, Color, All caps; Shadow at the bottom)
Pick a title font (headlines) and a body font (the rest of the page), or upload your own. The eyebrow and the location line each have a Title font / Page font toggle so they can match the headline or stay with the body. Section heading font does the same for the headings further down the page. New sites start on Title font, so section headings such as Amenities, Where you'll sleep, and your story section titles use the same face as the hero title. Switch it to Page font and those headings use the body font instead. Paragraphs, prices, and buttons stay in the page font either way. Sites created before this default stay on Page font until you change them. It is set per site, on listing sites and collection sites alike. Under Hero text, edit the title, eyebrow, and tagline copy, size, weight, spacing, and All caps. On collection sites, each line also has a Color swatch next to Weight and Spacing, and Shadow sits at the bottom of that block.
Custom fonts belong to your account, not to one listing. Upload as many .woff2, .woff, .ttf, or .otf files as you want — they stay in Your fonts so you can reuse them on every listing, collection, email, and business card.
The same library appears in the email editor font menu and on business cards. Some email inboxes show a similar system face when they cannot load a web font.
Where (property site): Property editor → Layout tab → Home → right panel → Brand → Typography → Hero text → Title → press Enter in the title box to add a line → Style each line (expand) → pick a line → Size / Font / Weight / Spacing / All caps Where (collection site): Multi-unit site editor → Layout tab → Home → right panel → Brand → Typography → Hero text → Title → press Enter in the title box to add a line → Style each line (expand) → pick a line → Size / Font / Weight / Spacing / All caps Applies when: The title has at least two lines. A one-line title uses the whole-title controls only. Medallion presets replace the headline with a crest, so line styles do not show there. Range: Up to 4 lines; sizes are a share of the title size.
| Option | What it does |
|---|---|
| 35% (size) | About a third of the title — a quiet kicker like "Welcome to". |
| 50% (size) | Half the title — the usual size for a second line under a name. |
| 70% (size) | A step down from the title while still reading as headline. |
| 100% (size) | The title size itself. Every line starts here. |
| 130% (size) | Larger than the title — lets one word or name dominate. |
| Title (font) | The title font you picked above. Every line starts here. |
| Page (font) | Your page (body) font, for a plain line under a display name. |
Break the title onto lines first: press Enter in the Title box where you want the break. Then open Style each line under the title's controls. Each line is listed in its own style; pick one, then change it:
A dot marks each line you have changed. Match title puts the selected line back. Styles belong to the line's position, so if you move words between lines the style stays with line 1, line 2, and so on. With a one-line title, line styles are ignored.
For example, type The Landings, press Enter, type at Sardis Lake, then set line 2 to 50%, Page font, Wider spacing, and All caps.
New to Haven?
Haven is the direct booking platform these guides are written for — a branded site, secure payments, and guest relationships you own. Build yours free.
Free to build · No credit card · Private until you publish