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:real estate homepage template for Astro, HubSpot and WordPress
A real estate homepage built around a round photo wheel. Five slices show five neighborhoods, the headline sits in the ivory center, and copper outlines, circular photos and a high-contrast serif carry the rest of the page.
- Sections
- 13, 8 with their own script
- Editable fields
- 364 in HubSpot and WordPress
- Typefaces
- Bodoni Moda, DM Sans
- Image files
- 12
- Downloads
- Astro 1.5 MB, HubSpot 2.9 MB, WordPress 1.9 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 In the Round
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, in-the-round, 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 in-the-round-astro.zip; it holds one folder, in-the-round.
- 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 in-the-round-hubspot.zip, then from the folder that holds in-the-round run hs cms upload in-the-round in-the-round.
- In HubSpot go to Content > Website Pages > Create > Website page, click the theme name under the search box, find In the Round and click Set as active theme.
- Choose the template In the Round - Home.
More from the HubSpot README
Change the content
- Each of the 13 sections is a module with its own fields, 364 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 In the Round - 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 in-the-round-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, 364 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 "In the Round". 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 in_the_round_ and in-the-round/.
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 In the Round
In page order. In HubSpot each one is a module and in WordPress a block, 364 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
Five-slice neighborhood photo wheel with rim labels and the headline in its center, intro and two buttons
40 fields · has its own script -
Search
Buy / Rent / Sold tabs with neighborhood, home type, price range and bedrooms
58 fields · has its own script -
Listings
Two featured homes per page with paging through six
72 fields · has its own script -
Neighborhoods
Curved index of five neighborhoods with photo, description, price and inventory
24 fields · has its own script -
Numbers
Four numerical medallions on deep brown
8 fields -
Process and valuation
Buying and selling steps beside the address valuation form
22 fields · has its own script -
Agents
Four agents under a fine copper arc, with phone links
35 fields -
Testimonials
Three client stories beside a round quote medallion, with arrows and dots
6 fields · has its own script -
Guides
Three guides under a copper arc
18 fields -
FAQ
Five questions, the first open
11 fields -
Newsletter
Signup form
8 fields · has its own script -
Footer
Homes, Neighborhoods and Company links, contact details, hours, legal copy and back to top
43 fields
Design notes
The designer described a refined neighborhood browser with the atmosphere of a residential conservatory. A five-part photographic wheel fills the first screen; each slice is a neighborhood, rim labels and dots select it, and the headline sits in the ivory center.
Circles repeat down the page: round photo masks, numerical medallions, a quote medallion, copper arcs over the agents and guides, and a curved neighborhood index. Listings appear two at a time with paging controls.
Warm ivory and pale clay surfaces, deep brown for text, the numbers band and the footer, and burnt copper for actions.
Shape and spacing
Circular masks (50% radius), pill controls, fine copper outlines, about 64px side margins on desktop and 24px on a phone.
Images
12 WebP photographs: five neighborhoods, four agent portraits, a cottage entrance, house keys and harbor rooftops. They are generated for the template, with no text, real logos or recognizable people in them.
Typefaces
- Bodoni ModaDisplay headings, wordmark, property addresses and some action labels
- DM SansBody copy, form fields, navigation and utility text
Loaded from Google Fonts.
Colors
- Warm ivory
#F4EBDDMain canvas and reversed text - Burnt copper
#B94928Primary actions, circular outlines and active dots - Deep brown
#34261FText, numbers band and footer - Muted peach
#E6BC9ATestimonial field and fine details - Pale clay
#EDE0D0Search and FAQ backgrounds
What works on the page
- Rim selectors open a photo and information preview for each of the five neighborhoods, closable by keyboard.
- A curved neighborhood index crossfades its main photo; on phones it becomes a vertical list.
- Two listings per page with paging controls through all six; the search filters all six and reports the match count.
- Testimonial arrows and dots switch between three stories; "Back to top" returns to the wheel.
Who In the Round fits
A brokerage that covers about five distinct neighborhoods, one for each slice of the wheel.
Boutique and higher-end agents who want a warm, refined look with a classic serif.
Sites where browsing by area matters more than a long listings grid.
Brands with copper, terracotta or warm earth colors.
See the whole page as one image (1080 by 5188 pixels, 311 KB)
Questions about In the Round
How many neighborhoods does the wheel hold?
Five, one per slice, each with its own photo, label and preview. A different number means editing the wheel markup and its styles, not only the fields.
What does the wheel look like on a phone?
The same five-part wheel and the full headline stay on the first screen. The rim labels are left out at that size, and the neighborhood names appear in the neighborhood explorer below.
Does the search connect to my listings?
The form is a real GET form to /homes with named fields, and on the page it filters the six sample homes. Point it at your own results page, or add an MLS or IDX plugin in WordPress, to search live inventory.
Are Bodoni Moda and DM Sans free?
Both are free fonts from Google Fonts, loaded with display=swap and local fallbacks.
Can I use In the Round commercially?
Free to use and adapt for personal and commercial sites. Maren & Lowe and all names, homes and numbers are placeholders.
More real estate templates like In the Round
Same content, different designs. In the Round is listed in Real estate website templates, Homepage templates, HubSpot themes and WordPress block themes. Or browse the full gallery.
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
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.