In the Round
A neighborhood wheel homepage: five photo slices around a serif headline, in ivory and copper.
- Astro
- HubSpot
- WordPress
- Framer soon
Across the Waterline:real estate homepage template for Astro, HubSpot and WordPress
A coastal real estate homepage drawn from signal flags. Diagonal photo ribbons, clipped corners and stepped alignments in ice, marine blue and pool cyan carry visitors from the waterfront to local advice.
- Sections
- 13, 7 with their own script
- Editable fields
- 337 in HubSpot and WordPress
- Typefaces
- Anybody, Figtree, Libre Baskerville
- Image files
- 13
- Downloads
- Astro 3.0 MB, HubSpot 6.2 MB, WordPress 3.7 MB
- Look
- Dark and light sections
- Collections
- Real estate
- Framer
- Coming soon
Screenshots of the live demo at 1440 and 390 pixels. The content is placeholder: Maren & Lowe Real Estate, a fictional brokerage in the fictional city of Port Aldern.
Download Across the Waterline
Free: a short form (first name and work email) once, then every zip downloads straight away. Free to use and adapt for personal and commercial sites. Each zip holds one folder, across-the-waterline, with a README; the install steps below are condensed from it.
An Astro project: one component per section, design tokens in global.css, images in public/assets.
Needs Node 22.12 or newer.
- Unzip across-the-waterline-astro.zip; it holds one folder, across-the-waterline.
- In that folder run npm install (Node 22.12 or newer).
- Run npm run dev and open http://localhost:4321.
- Edit the copy in src/components, the colors and type in src/styles/global.css, and the images in public/assets.
- Run npm run build; the static site is written to dist/.
More from the Astro README
What is where
- src/pages/index.astro: the page head and the sections in order.
- src/components: one file per section (13 in all), each with its markup, styles and script.
- src/styles/global.css: design tokens (colors, type, spacing) and base styles.
- public/assets: the images.
Make it yours
- Repeated items (cards, steps, questions) share the same markup: copy one to add another.
- Remove a section by deleting its tag and its import in src/pages/index.astro.
- Reuse a section elsewhere by copying its component file and global.css; a section depends on nothing else.
- Set the title, meta description and JSON-LD block in src/pages/index.astro before publishing.
- The property search is a real GET form to /homes with the fields status, neighborhood, type, min_price, max_price and beds. To send visitors to your own results page, change the action and remove the submit handler in the search script.
- The valuation and newsletter forms validate and confirm but send nothing: replace each submit handler with a request to your form service.
A HubSpot CMS theme: one module per section, each with its own fields, plus Home and Page templates.
Needs a free HubSpot account and Node.js 20 or newer for the HubSpot CLI.
- Install the HubSpot CLI: npm install -g @hubspot/cli (Node.js 20 or newer).
- Run hs account auth and paste a personal access key with Design Manager ticked.
- Unzip across-the-waterline-hubspot.zip, then from the folder that holds across-the-waterline run hs cms upload across-the-waterline across-the-waterline.
- In HubSpot go to Content > Website Pages > Create > Website page, click the theme name under the search box, find Across the Waterline and click Set as active theme.
- Choose the template Across the Waterline - Home.
More from the HubSpot README
Change the content
- Each of the 13 sections is a module with its own fields, 337 in all. Click a section in the page editor and its fields open on the left, grouped by item.
- A field left empty removes its element; an empty image field shows the template's own image.
- Sections are rows: drag, clone or delete them, and add one back from the theme's modules.
- Header and footer are global content: what you change there changes on every page.
- The template Across the Waterline - Page has the same header and footer and an empty area for other modules.
What the fields do not cover
- More items than the template has (a fourth plan, an extra question) needs an edit in modules/<name>.module/module.html and fields.json.
- Icons and drawings are inline SVG in module.html; colors, fonts and spacing are variables at the top of css/styles.css.
- No blog templates and no 404, password or search pages of its own: HubSpot uses its defaults.
- HubSpot takes no WebP in a theme, so the images are PNG and JPEG. Fonts load from Google Fonts.
How it was checked
- Uploaded with the HubSpot CLI and rendered through HubSpot's theme preview in Chromium: every file uploads without an error and the homepage matches the static version pixel for pixel at 1440px and 390px.
- Not checked: the page editor itself, publishing a page, and browsers other than Chromium.
A WordPress block theme: one block per section with its fields in the editor, plus page, post, blog and 404 templates.
Needs WordPress 6.6 or newer and PHP 7.4 or newer.
- In WordPress go to Appearance > Themes > Add New Theme > Upload Theme.
- Choose across-the-waterline-wordpress.zip, then Install Now and Activate.
- Open the site: the homepage shows the template, whatever Settings > Reading says.
- Edit each section in Appearance > Editor > Templates > Front Page, in the Block tab on the right, then Save.
More from the WordPress README
Change the content
- Each of the 13 sections is a block with its own fields, 337 in all, listed in the Block tab and grouped by item. The page updates as you type.
- Links: signup or /signup is a page of your site, #pricing jumps to a section, and full addresses, mailto: and tel: work as written.
- A field left empty removes its element; clear every field of a card and the card goes.
- Move sections with the arrows in the toolbar, or add one back from the block inserter under "Across the Waterline". The same blocks work on any page.
- The search matches each home on its neighborhood, "Search type", "Search price" (digits only) and "Search beds" fields, so a renamed neighborhood must read the same in the form and in each home.
- Live MLS or IDX listings need a plugin. With JavaScript off, the search form sends visitors to /homes with their choices in the address.
What the fields do not cover
- More items than the template has needs an edit in sections/<name>.php (markup) and inc/sections.php (fields).
- Icons are inline SVG; colors, fonts and spacing are variables at the top of css/styles.css.
- The theme prints the page title; leave the meta description and structured data to an SEO plugin.
- Functions and blocks are prefixed across_the_waterline_ and across-the-waterline/.
How it was checked
- Installed from the zip in WordPress Playground on WordPress 7.1.3 with PHP 8.3 and on WordPress 6.6.10 with PHP 7.4: no PHP warnings, and the homepage matches the static version pixel for pixel at 1440px and 390px.
- Not checked: a real hosting account, browsers other than Chromium, other plugins and multisite.
Framer
Framer version coming soon. It will be listed here next to the other three downloads.
The 13 sections of Across the Waterline
In page order. In HubSpot each one is a module and in WordPress a block, 337 fields in all; in Astro each is one component file. Remove, reorder or reuse any of them on its own.
-
Header
Wordmark, navigation, phone number and the "Get a home valuation" button
19 fields · has its own script -
Hero
Headline on ice with a diagonal harbor photo ribbon, intro and two buttons
13 fields -
Search and listings
Search dock beside two featured homes, four more behind "Show all", and View all 312 homes
117 fields · has its own script -
Neighborhoods
Five neighborhood rows that swap the photo and details
25 fields · has its own script -
Numbers
Four performance numbers
8 fields -
Process
Three buying steps and three selling steps
21 fields -
Valuation
Address form beside a doorway photo
8 fields · has its own script -
Agents
Four agents with role, specialty, experience and phone
39 fields -
Testimonials
Three client stories with arrows
8 fields · has its own script -
Guides
Three guides with reading time or update cadence
17 fields -
FAQ
Five questions, answers shown
11 fields · has its own script -
Newsletter
Signup form with a cyan diagonal
6 fields · has its own script -
Footer
Company line, Homes, Neighborhoods and Company links, office details, hours, legal line and Equal Housing Opportunity
45 fields
Design notes
The designer built it from coastal signal flags. The opening sets the headline on ice white with a diagonal photographic ribbon of the harbor cutting across it; text always stays horizontal.
The search sits as a dock beside the listings in one section, neighborhoods are rows that swap the photo, and every rectangle keeps clean, unrounded edges with 14px chamfers on buttons.
No shadows and no rounded cards. A small serif wordmark in Libre Baskerville is the only serif on the page.
Shape and spacing
Radius 0, 14px chamfered buttons, thin rules, no decorative shadows, about 53px side margins on desktop and 20px on a phone, stacking at 960px.
Images
13 WebP photographs: the harbor panorama, a waterfront scene, six homes that double as neighborhood photos, a doorway and four agent portraits. They are generated for the template, with no text, real logos or recognizable people in them.
Typefaces
- AnybodyDisplay headings (500 to 700)
- FigtreeBody copy and controls (400 to 700)
- Libre BaskervilleThe Maren & Lowe wordmark only
Loaded from Google Fonts.
Colors
- Ice
#EDF7F8Light backgrounds - Marine
#123F63Headings, dark bands and buttons - Pool cyan
#59D7DEDiagonals, accents and selected states - Chalk
#FFFFFFCards and forms - Ink
#163444Body text
What works on the page
- Neighborhood rows select their photo and details, with arrow, Home and End keys.
- "Show all 6 featured homes" reveals four more; the search filters all six, rejects an invalid price range and shows no results for Rent and Sold.
- Arrows cycle three client stories without automatic rotation; all three are readable without JavaScript.
- FAQ answers start open and collapse one by one. Valuation and newsletter forms validate and confirm in place.
Who Across the Waterline fits
Coastal, lake and waterfront markets, where the harbor ribbon fits the place.
Brokerages that want a modern, graphic look with no rounded corners or shadows.
Sites that want search and listings side by side, so a visitor sees results next to the filters.
Waterfront brokerages whose buyers come for the place first: the page moves from the harbor photo to neighborhoods and local guides.
See the whole page as one image (1080 by 5232 pixels, 407 KB)
Questions about Across the Waterline
Does the search really filter?
It filters the six sample homes on the page by neighborhood, home type, a numeric price range and bedrooms, rejects a minimum above the maximum, and shows a clear message for Rent and Sold. For live inventory, point the GET form at your own /homes page.
Why does the search share a section with the listings?
The design docks the search beside the results, so they are one component (search-listings, 117 fields in HubSpot and WordPress). Filtering stays inside that one section.
Can I change the diagonal photos?
Replace hero-v2 and the other photo files in the assets folder, or pick new images in the editor. The diagonal is a clip on the photo frame, so any landscape photo works.
Is Across the Waterline free for commercial use?
Free to use and adapt for personal and commercial sites. The license number in the footer is a placeholder, so put your own brokerage license there.
More real estate templates like Across the Waterline
Same content, different designs. Across the Waterline is listed in Real estate website templates, Homepage templates, HubSpot themes and WordPress block themes. Or browse the full gallery.
Living Atlas
A friendly city-atlas homepage: an illustrated neighborhood map with pins beside the search form.
- Astro
- HubSpot
- WordPress
- Framer soon
Rooms for Living
An architecture-gallery homepage: a vertical aubergine nav rail, a cinematic interior and citron buttons.
- Astro
- HubSpot
- WordPress
- Framer soon
Start with one process.
We learn the business and build your first go-to-market process on us this month.