Projekt-Status
Die Seite ist seit September 2026 live unter schweizertage.ch. Gestaltung: Sanna Schiffler, Umsetzung: WebPX.
Die Ausgangslage: Ein neues Format braucht eine eigene Seite
FUTUN aus Zürich begleitet unternehmerische Familien bei Nachfolge und Transformation - für sie haben wir bereits futun.ch entwickelt. Mit den SCHWEIZER TAGEN startet FUTUN 2027 ein neues Format: ein „Kompetenzresort“ mit vier Modulen à 33 Stunden im Guarda Val oberhalb der Lenzerheide. Junioren, Senioren und ganze Familien arbeiten dort gemeinsam an Leistungs-, Visionärs-, Technologie- und Gesellschaftskompetenz, angeleitet von Expert:innen aus dem deutschsprachigen Raum.
Dafür brauchte es eine Seite, die das Format erklärt, Lust auf den Ort macht und Buchungsanfragen annimmt. Die Gestalterin Sanna Schiffler hatte dafür einen klaren, typografischen Entwurf geliefert: eine rote Fläche mit einem Kreis, in den beim Scrollen ein Berggipfel hineinwächst, darunter ruhige Textzeilen, die sich mit [+] aufklappen. Unsere Aufgabe: genau das ins Web bringen - und so, dass FUTUN alles selbst pflegen kann.
Schritt 1: Ein Prototyp in wenigen Tagen
Bei einem Entwurf, der so stark von Bewegung lebt, reicht ein statisches Mockup nicht. Deshalb haben wir zuerst einen Astro-Prototyp gebaut und auf einer Vorschau-Adresse veröffentlicht. Darauf konnten Gestalterin und Kunde die Scroll-Choreografie auf dem eigenen Laptop und Handy ausprobieren, statt sie sich anhand von Beschreibungen vorstellen zu müssen.
Die Choreografie selbst ist schlank gebaut: Ein kleines Skript misst beim Scrollen zwei Werte und schreibt sie als CSS-Variablen ins Dokument. Alles Sichtbare rechnet danach CSS - der Hero bleibt stehen, das Bergfoto steigt hinter dem Kreis auf, dann blendet die rote Fläche aus und gibt das Panorama frei. Ohne JavaScript bleibt die Fläche einfach stehen, und wer im System „Bewegung reduzieren“ eingestellt hat, bekommt keine Animationen.
Schritt 2: WordPress mit eigenen Elementor-Widgets
Für den Alltag sollte FUTUN in einem vertrauten System arbeiten. Wir haben die Seite deshalb nach WordPress überführt - aber nicht mit fertigen Baukasten-Elementen, sondern mit einem eigenen Plugin.
15 Widgets statt Baukasten
Hero, Kopfzeile, Akkordeon, Module, Referent:innen, Preise, Galerie, Karte, Buchung, Fußzeile und mehr: Jedes Element des Entwurfs ist ein eigenes Elementor-Widget. Styles, Skripte und Scroll-Choreografie kommen direkt aus dem Prototyp. Das Layout haben wir automatisiert gegen den PDF-Entwurf nachgemessen.
Darunter liegt ein Child-Theme von Hello Elementor mit Design-Tokens, fluider Typografie und den selbst gehosteten Schriften Univers und Ortica. Elementor Pro wird nicht gebraucht.
Stack: WordPress, Elementor, Hello Elementor, PHP, JavaScript, CSS Custom Properties
Freiheit mit Leitplanken
FUTUN ändert Texte, Module, Referent:innen und Preise direkt im Elementor-Editor. Die Farben laufen über wenige Globalfarben; Datumsleiste, geöffnete Zeilen, Formularfelder und Balken leiten ihre Tönungen daraus ab. Aus Rot wird mit einem Wert Magenta, und jedes Modul hat seine eigene Pastellfarbe aus dem FUTUN-CI.
Jedes Widget hat Regler für seine Abstände, je Gerät, mit dem Entwurfswert als Vorgabe. Sektionsvorlagen erlauben neue Abschnitte im Haus-Stil, und für Handys lassen sich eigene Bildausschnitte hinterlegen. So bleibt das Raster stabil, auch wenn sich Inhalte ändern.
Pflege: Globalfarben, Abstände pro Gerät, Sektionsvorlagen, Handy-Bildausschnitte, Scroll-Presets
Buchung direkt in Salesforce
Das Buchungsformular ist kein Formular-Plugin, sondern ein eigener Handler. Eine Ansprechperson meldet bis zu drei Teilnehmer:innen an, wählt pro Person ein Modul oder den ganzen Zyklus, gibt Zimmerwunsch und bei Bedarf eine abweichende Rechnungsadresse an. Ein Häkchen bei „Ich nehme selbst teil“ übernimmt die eigenen Daten automatisch.
Felder im Editor
Beschriftungen, Pflichtfelder, Breiten und Zustimmungstexte stellt FUTUN im Widget ein. Geprüft wird beim Absenden auf dem Server.
Weiter an Salesforce
Jede Anfrage landet automatisch in Salesforce, wo Bestätigung und Folgekommunikation laufen.
Nichts geht verloren
Zusätzlich bekommt FUTUN jede Anfrage per Mail, damit auch bei einer Störung keine Buchung verloren geht.
Spamschutz ohne Captcha
Mehrere unsichtbare Prüfungen halten Bots fern - ohne dass Interessierte Ampeln oder Zebrastreifen anklicken müssen.
Datenschutz und Performance
- ✓ Keine Cookies, deshalb kein Cookie-Banner
- ✓ Cookiefreie Besucherstatistik mit Plausible
- ✓ Google Maps erst nach Klick; vorher eine statische, eingefärbte Karte ohne Anfrage an Google
- ✓ Schriften selbst gehostet, keine externen Font-Anfragen
- ✓ Bilder als AVIF bzw. WebP mit passenden Größen für jedes Gerät
Mobil eigens gedacht
Am Handy funktioniert ein breites Bergpanorama nicht einfach verkleinert. Der Hero lädt dort einen eigenen Hochkant-Ausschnitt, und sein Scrollweg richtet sich nach der Fotohöhe, damit zwischen Fläche und Bild keine rote Lücke entsteht. Die Navigation wird zu einem aufklappenden Punktmenü, die Galerie bekommt eigene Bildausschnitte, und die Karte wird quadratisch.
Fazit: Gute Gestaltung verdient eine genaue Umsetzung
Die SCHWEIZER TAGE zeigen, dass man sich nicht zwischen anspruchsvollem Design und einfacher Pflege entscheiden muss. Der schnelle Prototyp hat die Abstimmung mit Gestaltung und Kunde leicht gemacht, die eigenen Widgets machen WordPress zum passenden Werkzeug statt zum Kompromiss. Drei Wochen nach der Beauftragung war die Seite fertig - und FUTUN kann sie seitdem selbst pflegen.
Alle Details zum Projekt finden Sie in unserer Projektübersicht.
Sie haben einen Entwurf, der genau so ins Web soll? Sprechen Sie uns an - wir setzen ihn um und machen ihn für Ihr Team pflegbar.