The Real Estate Builder’s Challenge: How I Built a CMS‑Powered Site in Wix Studio
- Sonia Fernandez Ponce
- Aug 31
- 5 min read
Updated: Sep 3
🥈 Second Place Winner
August Builder Challenge: Real Estate Edition (Creative Crew x Wix Studio)
This project was created for the Creative Crew Builder’s Challenge: Real Estate Edition, a real‑world brief focused on a CMS‑powered property showcase that’s responsive, visual, and easy to update. Requirements included a listings grid, dynamic detail pages, an embedded or dynamic Google Map, and an inquiry form on each listing, with bonus points for filters, featured logic, and animations.
"Sonia's entry reads and feels like a professional portfolio case study: thoughtful research, paper wireframes, strong CMS/design architecture, accessible choices, and beautiful on-brand visuals" – Brad Hussey, Founder & Creative Director, Brightside Studios Inc.
Project goals
The build aimed to offer a sleek, aspirational experience that loads quickly, scales with new listings via a CMS, and guides visitors to take action with clear calls to book a showing. A mobile‑first approach ensures fast browsing on phones and tablets, from featured listings on the homepage to filters and property details deeper in the journey.
Design approach
I took the opportunity to analyse a real estate agency that could benefit from Wix Studio. Beyond meeting the challenge brief, my goal was to elevate brand perception through refined typography, a cohesive colour palette, and design best practices. When targeting the luxury real estate market, the visual language must signal that standard. I chose elegant typography, generous spacing, and hero sections featuring beautiful imagery and video of standout properties. Hover and scroll effects are purposeful and aim to never get in the way of the user experience.
The CMS setup
Designed to work for a real client, the CMS can be easily updated with new properties and power the information on the site: list of properties (and details), agents (partners), and key content blocks, so updates happen once and display everywhere they should like cards, sliders, and detail pages without manual duplication. This structure supports badges like “For Sale” or “Sold,” that were triggered from the CMS, and a media gallery for each property to keep the catalog consistent and current.
Homepage experience
The homepage opens with a curated Featured section connected to the CMS, so highlighted homes are controlled with a simple “featured” checkbox rather than hand‑editing the layout. Each card surfaces what users would want know first: A photo of the outside of the property, property/development name, number beds, number of baths, and price for fast scanning and a clear CTA taking users to the property details page.
Featured properties are CMS‑driven, so content stays in sync across the slider and grids as the catalog changes.
Subtle hover cues and micro‑interactions improve “affordance,” encouraging exploration without visual clutter. For example, I included a subtle animated arrow to signal scrolling while keeping attention on properties and conversion.
Smart filters
A listings page lets visitors browse all properties, then narrow results by essentials characteristics such as the number of bedrooms, the number of bathrooms, the location, a price price bracket (from price and to price), and sort results by recency or price Low-High and High-Low. Filters connect to the dataset, so results feel immediate and accurate, allowing users to discovery property based on their preference, instead of page‑hopping.
Filter by property characteristics
Filter by property price
Sort by latest and price (low to high & high to low)
Property detail pages
Properties are Each property has a dynamic page generated from the CMS, ensuring consistent layouts, clean URLs, and faster content publishing at scale. Pages include a full gallery with a lightbox viewing, an expandable description for readability, as well as key facts like beds, baths, area, and price in a quick‑scan summary.
Maps and location
Location is embedded directly on property pages using Google Maps so visitors can understand context, access directions without leaving the site. A CMS‑connected approach also enables flexible map overviews for multiple properties if a broader view is needed. A feature that I'd like to add as well.
Forms and follow‑ups
Each listing page includes a booking forms, allowing visitors to request a viewing or ask questions at the moment they’re most engaged. A unique listing ID, invisible to users, is added dynamically and embedded in each form. Upon submission, this ID is automatically captured in the CMS entry, enabling agents to easily filter submissions by property and connect with the right clients. To streamline communication and reduce manual admin, I’ve also implemented automations that send confirmation emails immediately after form submissions, keeping the conversation active and professional.
In addition, the agent (luxury partner) in charged of the property is listed dynamically via the CMS Also. Seeing the details of the professional they will work with builds trust before the user submits their details.
Accessibility and mobile
Accessibility checks and guidance help catch issues early, from contrast to focus order, improving usability for everyone and aligning with best practices. Responsive layouts and embeds are tuned for smaller screens, so galleries, maps, and filters remain easy to use on mobile.
Brand and visuals
A cohesive brand system (logo application, color, and UI details) keeps the experience polished and trustworthy across pages and devices. I used Wix Studio AI Image Generator to help me speed production of on‑brand visuals (for example, temporary headshots), keeping momentum during content gathering.
What clients gain
Faster browsing: Clear featured content, structured cards, and intuitive filters help visitors find the right homes quickly.
Fewer edits: A connected CMS reduces manual work and keeps layouts consistent as listings change.
More leads: On‑page forms and email automations capture interest and respond immediately to keep momentum high.
Built to scale: Dynamic content tools make future growth straightforward without re‑engineering the site.
Inclusive by design: Accessibility guidance and tools reduce barriers and improve real‑world usability.
This real estate build shows how Wix Studio can deliver a real estate website that is easy to manage and ready to convert across devices.
Future improvements
Loved building this site, and there are several enhancements planned to make:
Standardise price formatting (decimals and increments) across cards and filters for clear, consistent comparison.
Add a downloadable property brochure to each listing page for easy offline sharing.
Include a scannable property details table with expanded specs on each listing page.
Add social sharing options on listings to encourage quick sharing with buyers and partners.
Provide live chat for real‑time questions and faster lead capture.
Enable double opt‑in for custom forms when available, and refine email automations for clarity and compliance.
Extend dynamic pages and explore targeted custom code to unlock advanced filtering and interactions.
A map overviews for multiple properties if a broader view is needed.
Comments