The Project Overview
Moddie is a premium modular home builder focused on modern families. The goal was to build a high-conversion, visually stunning landing page that mirrors the “factory-built, installed in one day” precision of the product. The project required a blend of architectural minimalism and advanced front-end functionality.
Core Features & Solutions
- Custom Modular Range Selector: Built a bespoke, tabbed “House Selector” using HTML, CSS, and Vanilla JS. It features a standardized aspect-ratio carousel to prevent layout shifting and includes a custom lightbox gallery for high-resolution floorplan and interior viewing.
- Performance-Optimized Hero Section: Developed a full-screen video hero with great proportions. I engineered a custom mobile override that anchors content to the bottom of the viewport, ensuring the background video remains the focal point without being obscured by UI elements.
- Smart Branding Logic: Implemented a “Smart Header” that detects scroll depth to toggle between transparent and solid states, including a dynamic logo-swap system (white-to-black) to maintain perfect contrast at all times.
- Interactive Location Badge: Designed a compact, responsive Google Maps integration with a custom “Moddie” aesthetic. It features a grayscale-to-color hover transition to maintain the site’s monochrome palette while remaining functional.
- Lead Retention Strategy: Designed and coded a custom “Thank You” page with automated redirect logic. The page uses lead-retention links (Pricing/Range) to keep users engaged in the sales funnel even after form submission.
Technical Toolkit
- Framework: Elementor (WordPress) with heavy Custom HTML/CSS/JS overrides.
- Languages: CSS3 (Flexbox/Grid), JavaScript (DOM Manipulation, Preloading), SVG.
- UX Focus: Mobile-first responsiveness, Layout Stability (CLS optimization), and fast-loading image preloading scripts.
The Result
A seamless, fast-loading digital experience that translates the luxury and efficiency of modular building into a mobile-responsive interface. The site effectively guides users from high-level inspiration to technical site assessments with zero friction.

Project URL: https://moddie.com.au/
Technologies Used: Elementor, CSS3, HTML5, JS
Client: Moddie Australia
Budget: AUD$800
Location: Victoria Australia
Timeline: 2 Weeks
Related
Discover more from Petruth Web Solutions
Subscribe to get the latest posts sent to your email.


