Guide Interactive real estate for WordPress
Build Interactive Floor Plans and Site Plans in WordPress
Turn site plans, building renders and apartment floor plans into a connected property experience. Visitors can select a building, move through floors, open unit details and compare availability without leaving the page or losing context.
In short
- No custom development required
- Managed directly in WordPress
- Built for connected buildings, floors and units
Figure 1. An interactive floor plan and site plan built with WP InSpot for WordPress. Select a residence on the site plan, open a floor, then step into a single apartment and its rooms.
Static property plans make buyers work too hard
A property development is rarely explained by one image. The master plan sits in one PDF, building renders live in a gallery, apartment layouts open in separate files and availability appears in a spreadsheet or price list. Every switch removes context and makes the buyer reconstruct the offer on their own.
WP InSpot brings those materials into one interactive path. The buyer starts with the full development, selects the part that matters and moves deeper only when more detail is useful.
One visual path from the development to the apartment
Create connected views that follow the way buyers actually explore a new property. A clickable site plan can open a building. The building can lead to a floor. The floor can reveal individual apartments. A selected apartment can open its layout, details or another page on the website.
- Site plan → building
- Building render → floor
- Floor plan → apartment
- Apartment → layout, details, gallery or enquiry page
Breadcrumbs and back navigation keep the route understandable, so users can explore several units without restarting from the top-level image. The tutorials walk through connected views with nested workspaces step by step.
Make every building, floor and apartment clickable
Upload the visuals you already use in sales and marketing: architectural renders, master plans, floor plans, apartment layouts or aerial images. Draw rectangular, circular or polygonal zones over the exact areas visitors should be able to select.
Each interactive zone (hotspot) can show a tooltip, popup, modal or side drawer. It can also link to WordPress content, open a related page or lead into another nested workspace. This makes the experience useful for both simple single-building projects and larger developments with several buildings and unit types.
Connect the availability table to the plan
Some buyers prefer to explore visually. Others want to compare unit numbers, floors, areas, rooms, prices and statuses in a list. WP InSpot supports both without turning them into separate experiences.
WP InSpot can generate an optional HTML Table View from the interactive zones that perform actions in a workspace. Every actionable zone can become a row, whether it opens a WordPress entity or post, displays text, follows a link or leads into another nested workspace. When no post or entity sits behind a zone, a table column can use the zone’s own label, number or value.
Hovering a table row highlights the corresponding zone on the plan. Clicking the row triggers the same configured action as clicking the zone itself: it can open a popup, modal or drawer, visit a link, display connected content or move into a nested workspace such as an apartment layout.
The table is server-rendered HTML, so unit information remains readable for visitors who prefer a list and is available to search engines instead of being locked inside an image. Column sets can be assigned at workspace level, inherited by nested workspaces and overridden when a particular floor needs different columns. The same configured workspace data drives the plan and Table View; synchronization with an external CRM or availability system requires a separate integration.
| Name | Status | Floors | Rooms | Bathrooms | |
|---|---|---|---|---|---|
| House 1 | Available | 1 | 4 | 1 | View House |
| House 2 | Reserved | 2 | 5 | 2 | View House |
| House 3 | Sold | 2 | 5 | 2 | View House |
| House 4 | Available | 2 | 6 | 2 | View House |
| House 5 | Available | 1 | 4 | 1 | View House |
Figure 2. A WordPress interactive floor plan connected to an apartment availability table. Hovering a row highlights the matching house on the plan; clicking a row opens the same details the zone opens.
How to create an interactive floor plan in WordPress
- Add your image. Create a workspace and choose a site plan, building render or floor plan from the WordPress Media Library.
- Draw clickable areas. Mark buildings, floors, apartments, rooms or plots with shapes that match the visual.
- Choose what each area does. Open text, WordPress content, a link, a popup, a modal, a drawer or another connected workspace.
- Add Table View (optional). Generate a server-rendered table from actionable zones, select its columns and verify that each row highlights and triggers the corresponding zone.
- Publish it. Add the finished interactive floor plan to a page with the Gutenberg block or shortcode and test the experience on desktop and mobile.
The documentation describes every zone type and setting in detail.
Figure 3. Every step of an interactive floor plan happens in wp-admin: zones are drawn on the plan, and each one is given the action it should run.
Built for real property sales workflows
Residential developments
Present multi-building investments, apartment blocks, housing estates and phased developments. Buyers can understand where a unit sits before opening its detailed layout.
Single-family and plot developments
Make houses or plots selectable on a master plan and show their status, floor count, room count, area and related house type.
Commercial property
Use the same structure for retail units, offices, storage spaces and mixed-use buildings where position, floor and availability matter as much as the listing itself.
WordPress agencies
Add interactive property plans to client websites without rebuilding the same JavaScript interface for every project. Workspaces can be configured around each client’s renders, content structure and visual design.
More interactive image examples from other industries follow the same structure.
Why use WP InSpot instead of building it from scratch?
- The editor for clickable zones is already available inside WordPress.
- Connected views, breadcrumbs and back navigation do not need to be rebuilt for each investment.
- Different presentation modes are available without writing a separate modal, popup or drawer system.
- The experience can use existing WordPress posts and content instead of creating another isolated data source.
- Agencies can reuse the same production workflow across multiple property websites.
Custom development still makes sense when a project requires a fully bespoke sales platform, complex live integrations or advanced 3D visualization. WP InSpot is aimed at the large middle ground where a professional interactive plan is needed, but a separate application would add unnecessary cost and maintenance.
A practical alternative to a full 3D virtual tour
A full virtual tour can be valuable, but it often requires specialist production, new assets and a larger budget. An interactive property map serves a different job: it helps visitors understand the structure of a development and reach the right unit quickly.
With WP InSpot, you can start from the plans and renders already prepared for the investment. The result is easier to update in WordPress and can be launched without commissioning a separate 3D environment.
| Approach | Fits when | What it asks for |
|---|---|---|
| WP InSpot interactive plan | A professional interactive plan is needed on an existing WordPress site | The site plans, renders and floor plans already prepared for the investment |
| Custom development | The project requires a fully bespoke sales platform or complex live integrations | A separate application to build and maintain |
| Full 3D virtual tour | The goal is an immersive walkthrough rather than the structure of the development | Specialist production, new assets and a larger budget |
The three are not exclusive. An interactive plan can carry the structure of a development while a tour covers a single show apartment.
Responsive and accessibility-conscious
Property research often starts on mobile, so the interaction must remain understandable on smaller screens. WP InSpot supports responsive presentation modes for desktop and mobile, including content that can open in popups, modals or drawers depending on the layout.
Interactive visuals should not hide essential information from keyboard users or search engines. Use clear zone labels, text descriptions and a logical content structure. The HTML availability table provides a non-visual way to scan the same unit data. WP InSpot supports accessibility-conscious implementation, but final WCAG conformance still depends on the content, page design and testing of the complete website.
For developers and agencies: keep the project inside WordPress
WP InSpot is managed from the WordPress admin rather than an external hosted platform. Interactive plans stay close to the pages, posts and workflows already used on the property website. Publish with a Gutenberg block or shortcode, connect zones to WordPress content and style the final presentation to match the client’s brand.
For agencies, this turns an often bespoke feature into a repeatable service: prepare the client’s visuals, map the content structure, build the connected workspaces and hand over an experience that can still be maintained in WordPress. Multi-site licences are listed on the WP InSpot pricing page.
Frequently asked questions
How do I create an interactive floor plan in WordPress?
Install WP InSpot, upload your floor plan or building render, draw clickable zones and assign an action to each zone. You can open content, link to WordPress posts or connect the zone to another workspace. Publish the result with the Gutenberg block or shortcode.
Can WP InSpot show apartment availability?
Yes. Actionable apartment zones can be included as rows in a server-rendered HTML Table View. Hovering a row highlights the same unit on the plan, while clicking it triggers the same configured action as clicking the zone. External availability syncing requires a separate integration.
Can I connect a site plan to buildings, floors and apartments?
Yes. Nested workspaces are designed for this exact structure. A zone on one image can open another image while breadcrumbs and back navigation preserve the path.
Do I need to write code?
No code is required for the standard workflow. You create workspaces, draw zones and configure actions in WordPress. Developers can still add custom styling or integrations where a project needs them.
Can I use my existing architectural renders and floor plans?
Yes. WP InSpot works with the images already prepared for the investment, including site plans, building elevations, floor plans, apartment layouts, aerial images and renders.
Does WP InSpot replace a 3D virtual tour?
Not in every case. It is a practical alternative when the goal is to explain the property structure and guide users through existing plans and renders without producing a full 3D environment.
Does the interactive floor plan work on mobile?
WP InSpot is designed for responsive use. The exact mobile experience depends on the workspace, selected presentation mode and the surrounding WordPress theme, so it should be tested on representative devices before launch.
Is WP InSpot suitable for WordPress agencies?
Yes. Agencies can use it as a repeatable way to deliver interactive property maps for different clients without coding a new interface from scratch for every website.
Turn your property plans into a connected sales experience
Use WP InSpot to connect site plans, buildings, floors and apartments directly inside WordPress. Start with the images you already have and build the first interactive workspace without custom development.
Read next: interactive shopping mall maps and store directories, or create your first interactive image with the tutorials.