Stöbe
Schäferei Heidesee: One-Pager für ein Wohnquartier
Design-getriebener WordPress-One-Pager für das Neubauquartier „Schäferei Heidesee“ in Friedersdorf (Brandenburg). Zwölf maßgeschneiderte Elementor-Widgets setzen ein Figma-Design design-getreu um, mit scroll-gesteuerten Bild-„Vorhängen“, organischen Blob-Masken, einer Bauphasen-Timeline und einem barrierearmen Kontaktformular.
Die Herausforderung
Ein anspruchsvolles Figma-Design sollte design-getreu und wartbar in WordPress entstehen, inklusive Effekten, die kein Standard-Widget liefert (scroll-getriebene Bildvorhänge, organische Blob-Formen, animierte Timeline). Gleichzeitig muss die Kundin alle Inhalte selbst pflegen können. Ich habe das Projekt als alleiniger Entwickler umgesetzt: Child-Theme, alle zwölf Custom-Widgets, das WordPress-Setup und die Umsetzung des Designs in Code.
Die Lösung
Ein eigenes Child-Theme mit zwölf selbst entwickelten Elementor-Widgets (PHP), statt das Design aus Standardbausteinen nachzubauen: Header, Hero-Slider, Intro-Statement, Kennzahlen-Kreise, Themen-Panels, Bauphasen-Timeline, FAQ-Accordion, CTA-Vorhang und mehr.
– Scroll-Choreografie in Vanilla-JS: Hero-Slider, aufsteigender CTA-„Vorhang“ und einblendende Timeline, jeweils mit prefers-reduced-motion-Fallback.
– Organische Blob-Masken über CSS-Masken und SVG, responsiv umschaltbar (Desktop-/Mobil-Form).
– Design-Tokens (Farben, Typoskala) zentral in CSS-Custom-Properties; DM Sans selbst gehostet, ohne Google-CDN.
– Barrierearmes Kontaktformular mit sichtbarem Fokus und Screenreader-Labels.
– Alle Inhalte als Elementor-Controls editierbar (Repeater für Slides, Kennzahlen, Meilensteine). Aus eigenem Qualitätsanspruch sind die Widgets zudem übersetzbar angelegt (WPML-kompatibel), auch wenn die Seite einsprachig bleibt.
Das Ergebnis
Das Neubauquartier hat jetzt einen eigenständigen Web-Auftritt, der sich bewusst vom üblichen Immobilien-Baukasten abhebt und den die Kundin vollständig selbst pflegt.
– Unverwechselbar statt Baukasten: Das Design wurde als eigene Widgets umgesetzt, nicht aus Standardbausteinen zusammengeklickt. Die Seite sieht aus wie das Projekt, nicht wie ein Theme.
– Redaktionell autark: Texte, Bilder, Kennzahlen und Bauphasen ändert die Kundin selbst über klar aufgebaute Felder, ohne Entwickler.
– Datenschutzfreundlich: Schriften lokal gehostet, nur essenzielle Cookies, kein Tracking im Standard.
– Sauber gebaut: übersetzbar angelegte Widgets (WPML-kompatibel) und für KI-Suche vorbereitet, erweiterbar ohne die Seite neu zu bauen.
