Across the Waterline
A coastal homepage in marine and cyan: diagonal photo ribbons, chamfered buttons and a search dock.
- Astro
- HubSpot
- WordPress
- Framer soon
Rooms for Living:real estate homepage template for Astro, HubSpot and WordPress
A photographic real estate homepage with a studio feel. A vertical aubergine navigation rail opens onto a full interior photo, condensed headlines set the tone, and neighborhoods open as an expanding photo gallery.
- Sections
- 12, 7 with their own script
- Editable fields
- 342 in HubSpot and WordPress
- Typefaces
- Barlow Condensed, Manrope
- Image files
- 16
- Downloads
- Astro 2.5 MB, HubSpot 3.7 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 Rooms for Living
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, rooms-for-living, 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 rooms-for-living-astro.zip; it holds one folder, rooms-for-living.
- 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 (12 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 rooms-for-living-hubspot.zip, then from the folder that holds rooms-for-living run hs cms upload rooms-for-living rooms-for-living.
- In HubSpot go to Content > Website Pages > Create > Website page, click the theme name under the search box, find Rooms for Living and click Set as active theme.
- Choose the template Rooms for Living - Home.
More from the HubSpot README
Change the content
- Each of the 12 sections is a module with its own fields, 342 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 Rooms for Living - 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 rooms-for-living-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 12 sections is a block with its own fields, 342 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 "Rooms for Living". 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 rooms_for_living_ and rooms-for-living/.
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 12 sections of Rooms for Living
In page order. In HubSpot each one is a module and in WordPress a block, 342 fields in all; in Astro each is one component file. Remove, reorder or reuse any of them on its own.
-
Header and hero
Vertical navigation rail with phone and valuation button, interior photo, headline, intro and both buttons
32 fields · has its own script -
Search
Buy / Rent / Sold tabs with neighborhood, home type, price range and bedrooms
36 fields · has its own script -
Listings
Two large featured homes, the other four behind "Show all", and the inventory link
77 fields · has its own script -
Neighborhoods
Five-panel photo accordion with description, median price and homes for sale
33 fields · has its own script -
Numbers
Four brokerage numbers
8 fields -
Process
Buying and selling sequences, three steps each
22 fields -
Valuation
Address form on a citron background
6 fields · has its own script -
Agents and testimonials
Four agents beside an aubergine quote panel with arrows
37 fields · has its own script -
Guides
Three guides with photos
24 fields -
FAQ
Five questions, the first answer open
12 fields -
Newsletter
Signup form
6 fields · has its own script -
Footer
Company line, link groups, contact details, opening hours and legal copy
49 fields
Design notes
The designer called it an architecture-gallery homepage. On desktop a 210px vertical rail in aubergine holds the navigation, phone and valuation button beside a cinematic interior photograph; the rail belongs to the opening and scrolls away.
Large photographic surfaces and unequal property images follow. Neighborhoods open as a horizontal expanding photo gallery on desktop and a vertical accordion on phones, with Old Harbor open first.
Barlow Condensed headlines and citron actions give it a confident studio character. Corners are square throughout.
Shape and spacing
Square corners, a 900px-tall desktop opening with a 210px rail, gutters of 4.65vw on desktop and 22px on a phone.
Images
16 JPEG photographs: desktop and phone interiors, six homes, the harbor, four agent portraits and three guide images. They are generated for the template, with no text, real logos or recognizable people in them.
Typefaces
- Barlow CondensedWordmark, display headings, listing titles, the quotation and numbers (500 to 700)
- ManropeBody copy, navigation, controls, captions and contact details (400 to 700)
Loaded from Google Fonts.
Colors
- Aubergine
#291F2DNavigation rail, footer, quote panel and dark actions - Lavender
#EEEAF1Search, neighborhoods, team and FAQ surfaces - Citron
#E5F49BPrimary actions, selected details and the valuation background - Warm white
#FBFAF7Light surfaces and reversed type
What works on the page
- Neighborhood panels expand by click or keyboard and show each description, median price and homes for sale.
- Two featured homes show first; "Show all featured homes" reveals the other four, and the search filters all six.
- Arrows cycle the three client quotations; nothing rotates on its own.
- FAQ rows are native disclosures with the first answer open. Forms confirm in place and send nothing.
Who Rooms for Living fits
Agents and brokerages that sell on design: lofts, renovations, new builds and architect-led homes.
Teams with strong interior photography to fill the opening.
A layout that leads with two hero listings instead of a long grid.
Brands that want a bold, modern feel with condensed type.
See the whole page as one image (1080 by 5095 pixels, 360 KB)
Questions about Rooms for Living
What happens to the side navigation on a phone?
The rail becomes a compact header with a Menu button. The phone number, the valuation button, the introduction and both hero buttons stay visible on the first screen.
Why are only two listings visible at first?
The design picks two featured homes. "Show all featured homes" reveals the other four, a search filters all six, and with JavaScript off all six are visible.
Can I use my own interior photos?
The opening uses two files, one for desktop and a portrait one for phones, so the sofa and table composition holds at both sizes. Replace both with your own, keeping the same names or picking new images in the editor.
Is Rooms for Living free for a brokerage site?
Free to use and adapt for personal and commercial sites. Every company, agent, home and number on the page is a placeholder.
More real estate templates like Rooms for Living
Same content, different designs. Rooms for Living 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
In the Round
A neighborhood wheel homepage: five photo slices around a serif headline, in ivory and copper.
- 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.