In the Round
A neighborhood wheel homepage: five photo slices around a serif headline, in ivory and copper.
- Astro
- HubSpot
- WordPress
- Framer soon
Living Atlas:real estate homepage template for Astro, HubSpot and WordPress
A real estate homepage built around an illustrated city map. Pins select neighborhoods, the property search sits under the introduction, and six homes follow in a two-large, four-small gallery.
- Sections
- 12, 7 with their own script
- Editable fields
- 434 in HubSpot and WordPress
- Typefaces
- Plus Jakarta Sans, DM Sans
- Image files
- 23
- Downloads
- Astro 3.9 MB, HubSpot 6.8 MB, WordPress 4.7 MB
- Look
- Light background
- 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 Living Atlas
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, living-atlas, 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 living-atlas-astro.zip; it holds one folder, living-atlas.
- 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 living-atlas-hubspot.zip, then from the folder that holds living-atlas run hs cms upload living-atlas living-atlas.
- In HubSpot go to Content > Website Pages > Create > Website page, click the theme name under the search box, find Living Atlas and click Set as active theme.
- Choose the template Living Atlas - Home.
More from the HubSpot README
Change the content
- Each of the 12 sections is a module with its own fields, 434 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 Living Atlas - 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 living-atlas-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, 434 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 "Living Atlas". 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 living_atlas_ and living-atlas/.
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 Living Atlas
In page order. In HubSpot each one is a module and in WordPress a block, 434 fields in all; in Astro each is one component file. Remove, reorder or reuse any of them on its own.
-
Header
Navigation, phone number and the "Get a home valuation" button
19 fields · has its own script -
Hero and search
Introduction, two buttons, the illustrated map with five pins and the Buy / Rent / Sold search
65 fields · has its own script -
Neighborhoods
Selector for five neighborhoods with photo, description, median price and homes for sale
102 fields · has its own script -
Numbers
Four brokerage numbers
9 fields -
Listings
Six homes: two large, four compact, with tags and saved-home hearts
79 fields · has its own script -
Process
Buying and selling routes, three steps each
21 fields -
Valuation
Address form with a front-door photo
8 fields · has its own script -
Agents
Four agents with role, focus, experience and phone
35 fields -
Testimonials
Three client quotations
7 fields -
Guides and FAQ
Three guides with reading times beside five questions
37 fields · has its own script -
Newsletter
Signup form over a painted harbor
8 fields · has its own script -
Footer
Navigation, company line, address, phone, email, hours and legal line
44 fields
Design notes
The designer described a friendly city atlas and home-finding concierge. The opening pairs a contained introduction with a pale illustrated coastal map; its pins and labels are HTML, so you can rename them. A Buy / Rent / Sold search drawer sits beneath.
Neighborhood pills switch a large profile with a photo, the one-line description, median price and homes for sale. Listings run as two large and four compact cards, and buying and selling appear side by side as route diagrams.
Navy, mist blue and teal with an apricot accent, 20px corners, capsule buttons and soft shadows. Coastal photography, fictional agent portraits and a watercolor harbor.
Shape and spacing
20px panel corners, pill buttons, restrained shadows, 48px side margins on desktop, 22px on a phone.
Images
23 WebP images: the map, a harbor sketch, five neighborhood photos, six listing photos, four agent portraits, guide thumbnails and a painted harbor. They are generated for the template, with no text, real logos or recognizable people in them.
Typefaces
- Plus Jakarta SansHeadings and wordmark (500 to 800)
- DM SansBody, navigation, metadata and forms (400 to 700)
Loaded from Google Fonts.
Colors
- Midnight navy
#142E46Text, header and dark panels - Mist blue
#EAF3F6Section backgrounds - Teal
#167D8DLinks, pins and selected states - Apricot
#FFBA87The valuation button and highlights - White
#FFFFFFCards and forms
What works on the page
- Map pins and neighborhood pills switch the profile for all five neighborhoods, by mouse, touch and keyboard.
- The search filters the six featured homes in place by neighborhood, type, price and bedrooms, says how many match and can be cleared. On a phone it opens as a scrollable sheet.
- Hearts save homes in the browser; photos and addresses open a preview of the listing.
- Valuation and newsletter forms validate and confirm in place, and send nothing until you connect them.
Who Living Atlas fits
A brokerage or agent team that sells a city by its neighborhoods.
Relocation-heavy markets, where a map helps buyers who do not know the streets yet.
Teams that want the search on the first screen, next to the introduction.
A friendly, bright look rather than luxury or editorial.
See the whole page as one image (1080 by 5224 pixels, 478 KB)
Questions about Living Atlas
Can the search show my real listings?
Not by itself. The six homes are written into the template and the search filters them on the page. For live listings, point the form (method GET, action /homes, with the fields status, neighborhood, type, min_price, max_price and beds) at your own results page, or in WordPress add an MLS or IDX plugin.
Is the map a real map?
It is a fictional illustrated map of the made-up city of Port Aldern, with pins and labels in HTML. Replace the image with an illustration of your own area and move the pins.
Where do the valuation and newsletter forms send data?
Nowhere yet. They check the fields and show a confirmation that says nothing was sent. Connect each form to your CRM or form service before you publish.
Why is this the largest download?
It has 23 photos and illustrations, more than any other template here. The HubSpot zip is about 7.1 MB because HubSpot themes take PNG and JPEG, not WebP.
Can I use Living Atlas for my brokerage?
Free to use and adapt for personal and commercial sites. Maren & Lowe, the agents, the homes and the numbers are placeholders.
More real estate templates like Living Atlas
Same content, different designs. Living Atlas is listed in Real estate website templates, Homepage templates, HubSpot themes and WordPress block themes. Or browse the full gallery.
Rooms for Living
An architecture-gallery homepage: a vertical aubergine nav rail, a cinematic interior and citron buttons.
- Astro
- HubSpot
- WordPress
- Framer soon
Across the Waterline
A coastal homepage in marine and cyan: diagonal photo ribbons, chamfered buttons and a search dock.
- 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.