SCHWEIZER TAGE - One-Page für das FUTUN Kompetenzresort

rocket_launchStatus: Live seit September 2026 unter schweizertage.ch. Gestaltung: Sanna Schiffler, Umsetzung: WebPX.

Projektübersicht

Mit FUTUN aus Zürich arbeiten wir seit der futun.ch-Website zusammen. Für ihr neues Format, die SCHWEIZER TAGE, brauchte FUTUN eine eigene Seite: ein „Kompetenzresort“ für unternehmerische Familien, vier Module à 33 Stunden im Guarda Val oberhalb der Lenzerheide, in kleiner Runde mit gut zehn Familien und mehreren Generationen gemeinsam.

Grundlage war ein typografischer PDF-Entwurf von Sanna Schiffler: eine rote Fläche mit einem Kreis, in den beim Scrollen ein Berggipfel hineinwächst, darunter ruhige Textzeilen mit [+]-Klammern zum Aufklappen. Unsere Aufgabe war, diesen Entwurf genau umzusetzen und so zu bauen, dass FUTUN alle Inhalte selbst pflegen kann.

Den ersten Stand haben wir in wenigen Tagen als Astro-Prototyp gebaut, um Layout und Scroll-Choreografie früh mit Gestalterin und Kunde abzustimmen. Für die Pflege durch FUTUN haben wir die Seite danach in WordPress überführt - mit 15 eigenen Elementor-Widgets, die Design und Animation eins zu eins übernehmen. Drei Wochen nach der Beauftragung war die Seite fertig; die Korrekturrunden mit Gestaltung und Kunde liefen dabei direkt im System.

Herausforderungen

Ein Entwurf ohne Kompromisse

Schriftgrößen, Zeilenraster und Abstände kamen aus dem PDF und sollten im Browser auf den Pixel stimmen - auf jeder Bildschirmbreite.

Bewegung als Teil der Gestaltung

Der Gipfel steigt beim Scrollen in den Kreis, die rote Fläche blendet aus, Kopfzeile und Bergfoto bleiben stehen. Das muss auch auf dem iPhone ruckelfrei laufen.

Pflegbar ohne Entwickler

FUTUN wollte Texte, Module, Referent:innen, Preise und Farben selbst ändern - ohne dabei das Layout kaputt zu machen.

Buchung direkt ins CRM

Anfragen mit mehreren Teilnehmer:innen, Modulwahl und Zimmerwunsch sollten ohne Umweg in Salesforce landen.

Datenschutz in der Schweiz und der EU

Keine Cookies, keine Tracking-Banner, Google Maps erst nach Zustimmung.

Lösungen

Technische Lösungen

Innovative Ansätze für Ihren Erfolg

widgets

Eigene Elementor-Widgets

WordPress-Plugin statt Baukasten

15 Widgets: Hero, Module, Preise, Buchung, Karte u. a.

Hello-Elementor-Child-Theme mit Design-Tokens

Globale Farben, alle Tönungen daraus abgeleitet

Abstände pro Gerät, Sektionsvorlagen

animation

Scroll-Choreografie

Bewegung über CSS-Variablen

Gepinnter Hero, Gipfel steigt in den Kreis

Sticky Kopfzeile mit Scroll-Spy

Presets: Standard, Ruhig, Kräftig, Statisch

Respektiert „Bewegung reduzieren“

edit_note

Buchungsformular

Eigener Handler statt Formular-Plugin

Bis zu drei Teilnehmer:innen mit Modulwahl

Übergabe direkt an Salesforce

Unsichtbarer Spamschutz ohne Captcha

Zusätzliche Benachrichtigung per Mail

shield_lock

Performance & Datenschutz

Schnell und ohne Cookies

Bilder als AVIF/WebP mit srcset

Univers und Ortica selbst gehostet

Google Maps erst nach Klick

Cookiefreie Statistik mit Plausible

Projekt in Zahlen

Von der Beauftragung bis zur fertigen Seite

Wochen

Eigene Elementor-Widgets

pflegbar im Editor

Cookies und Tracking-Banner

datensparsam

Technologie-Highlights

Erst Prototyp, dann WordPress

Der Astro-Prototyp hat Design und Bewegung in Tagen greifbar gemacht. Die WordPress-Widgets übernehmen Styles, Skripte und Choreografie direkt daraus, das Layout wurde automatisiert gegen den PDF-Entwurf nachgemessen.

Eine Farbe steuert alles

Datumsleiste, geöffnete Zeilen, Formularfelder und Balken leiten ihre Tönungen aus wenigen Globalfarben ab. Aus Rot wird mit einem Wert Magenta, und jedes Modul bekommt seine eigene CI-Pastellfarbe.

Direkt in Salesforce

Jede Anfrage wird auf dem Server geprüft und landet automatisch in Salesforce, wo Bestätigung und Folgekommunikation laufen.

Mobil eigens gedacht

Eigene Hochkant-Ausschnitte für Hero und Galerie, ein aufklappendes Punktmenü und ein Hero, dessen Scrollweg sich aus der Fotohöhe ergibt - damit am Handy keine rote Lücke entsteht.

Projektgalerie

SCHWEIZER TAGE: Scroll-Choreografie des Heros in vier Schritten

Scroll-Choreografie: Der Gipfel steigt in den Kreis, die Fläche blendet aus

SCHWEIZER TAGE: aufgeklapptes Modul mit Referent

Module als aufklappbare Zeilen, jedes in seiner eigenen CI-Farbe

SCHWEIZER TAGE: Abschnitt Ort mit Galerie des Guarda Val

Der Ort: Galerie des Guarda Val mit Pfeil-Navigation

Buchungsformular mit Salesforce-Anbindung

Mobile Ansichten: Hero, Überblick, Module und Ort

Was das Projekt ausmacht

Die SCHWEIZER TAGE zeigen, dass WordPress nicht nach Baukasten aussehen muss. Entscheidend war die Zusammenarbeit:

• Gestaltung und Code Hand in Hand: Korrekturrunden mit Sanna Schiffler und FUTUN liefen in kurzen Schleifen über eine Vorschau-Umgebung
• Das Beste aus zwei Welten: ein schneller Prototyp für die Abstimmung, ein vertrautes CMS für den Alltag
• Freiheit mit Leitplanken: FUTUN ändert Inhalte, Farben und Abstände selbst, das Raster bleibt stabil
• Wiederkehrender Kunde: Schriften und Rechtstexte knüpfen an futun.ch an

Mehr zur Umsetzung lesen Sie in unserem Blogbeitrag.

Nächster Schritt

Ein Entwurf, der genau so ins Web soll?

Sie haben ein Design und brauchen eine Umsetzung, die es ernst nimmt - und die Ihr Team trotzdem selbst pflegen kann? Sprechen Sie uns an.

Projekt besprechen