Skip to main content
Home / Blog / SCHWEIZER TAGE: From a PDF Design to an Editable One-Pager for FUTUN
September 28, 2026 — Tobias Graupner

SCHWEIZER TAGE: From a PDF Design to an Editable One-Pager for FUTUN

SCHWEIZER TAGE: From a PDF Design to an Editable One-Pager for FUTUN

Project Status

The site has been live since September 2026 at schweizertage.ch (German only). Design: Sanna Schiffler, development: WebPX.

The Starting Point: A New Format Needs Its Own Site

FUTUN from Zurich supports business-owning families through succession and transformation - we already built futun.ch for them. With the SCHWEIZER TAGE, FUTUN is launching a new format in 2027: a “Kompetenzresort” with four modules of 33 hours each at the Guarda Val above Lenzerheide. Juniors, seniors and whole families work together on performance, visionary, technology and societal competence, guided by experts from across the German-speaking world.

That called for a site that explains the format, makes people want to visit the venue and takes booking requests. Designer Sanna Schiffler had delivered a clear, typographic design: a red surface with a circle into which a mountain peak rises as you scroll, followed by calm rows of text that open with [+]. Our job: bring exactly that to the web - in a way that lets FUTUN maintain everything on its own.

Step 1: A Prototype in a Few Days

For a design that lives so much from motion, a static mockup isn’t enough. So we first built an Astro prototype and published it on a preview address. Designer and client could try the scroll choreography on their own laptop and phone instead of having to imagine it from descriptions.

The choreography itself is lean: a small script measures two values while scrolling and writes them into the document as CSS variables. CSS does everything visible from there - the hero stays pinned, the mountain photo rises behind the circle, then the red surface fades out and reveals the panorama. Without JavaScript the surface simply stays in place, and anyone with “reduce motion” enabled gets no animations.

Step 2: WordPress With Custom Elementor Widgets

For everyday work, FUTUN was to use a familiar system. So we moved the site to WordPress - not with off-the-shelf page builder elements, but with a plugin of our own.

15 Widgets Instead of a Kit

Hero, header, accordion, modules, speakers, prices, gallery, map, booking, footer and more: every element of the design is its own Elementor widget. Styles, scripts and scroll choreography come straight from the prototype. We measured the layout automatically against the PDF design.

Underneath sits a Hello Elementor child theme with design tokens, fluid typography and the self-hosted typefaces Univers and Ortica. Elementor Pro isn’t needed.

Stack: WordPress, Elementor, Hello Elementor, PHP, JavaScript, CSS custom properties

Freedom With Guard Rails

FUTUN edits texts, modules, speakers and prices right in the Elementor editor. Colours run through a few global colours; date bar, opened rows, form fields and bars derive their tints from them. One value turns red into magenta, and every module has its own pastel colour from the FUTUN identity.

Each widget has controls for its spacing, per device, with the design value as the default. Section templates allow new sections in the house style, and phones can get their own image crops. The grid stays intact even when content changes.

Editing: global colours, spacing per device, section templates, phone image crops, scroll presets

Bookings Straight Into Salesforce

The booking form isn’t a form plugin but a custom handler. A contact person registers up to three participants, picks a module or the whole cycle per person, and adds a room preference and, if needed, a separate billing address. Ticking “I’m attending myself” fills in their own details automatically.

Fields in the Editor

FUTUN sets labels, required fields, widths and consent texts in the widget. Validation happens on the server when the form is sent.

On to Salesforce

Every request arrives in Salesforce automatically, where confirmation and follow-up happen.

Nothing Gets Lost

FUTUN also receives every request by email, so no booking gets lost even if something goes wrong.

Spam Protection Without Captchas

Several invisible checks keep bots out - without making people click on traffic lights or crosswalks.

Privacy and Performance

  • âś“ No cookies, so no cookie banner
  • âś“ Cookie-free visitor analytics with Plausible
  • âś“ Google Maps only after a click; before that, a static tinted map with no request to Google
  • âś“ Self-hosted fonts, no external font requests
  • âś“ Images as AVIF or WebP in the right sizes for every device

Designed for Mobile

On a phone, a wide mountain panorama doesn’t work just scaled down. The hero loads its own portrait crop there, and its scroll distance follows the photo height so there’s no red gap between surface and image. The navigation becomes a fold-out dot menu, the gallery gets its own crops, and the map turns square.

Conclusion: Good Design Deserves a Precise Build

SCHWEIZER TAGE shows that you don’t have to choose between an ambitious design and easy maintenance. The quick prototype made alignment with designer and client easy, and the custom widgets make WordPress the right tool rather than a compromise. Three weeks after we were commissioned the site was finished - and FUTUN has been able to maintain it on its own ever since.

You’ll find all the details in our project overview.

Have a design that should reach the web exactly as drawn? Get in touch - we’ll build it and make it editable for your team.