Datenschutz St.Gallen: HTML to WordPress Website

Datenschutz St.Gallen: data protection made approachable, on a website the office can run itself.

The Fachstelle für Datenschutz is the data protection office of the Canton of St.Gallen in Switzerland. Its website gives municipalities, schools and public departments practical tools: a Self-Check, short films and information sheets. The site started as a static HTML build, which I converted into WordPress with Elementor Pro. The office can now publish news and update pages without touching code, and the clean, privacy-first design stays intact.

Homepage with a hero, three key promises, four offer cards, a Self-Check feature section, the latest news and a contact call to action

Self-Check page with the interactive Self-Check game embedded

Videos page with five short films

News section with individual articles, powered by WordPress posts

About, Team and Contact pages

Global header with a "Datenpanne melden" (report a data breach) button, and a footer linking to the canton's portal

I converted the static HTML into WordPress with Elementor Pro on the lightweight Hello Elementor theme. The layout was rebuilt from Elementor's own sections and widgets, so the office's team can edit it visually.

From static HTML to editable pages. Headings, text, buttons, icon lists and images are standard Elementor widgets rather than blocks of pasted code. Changing a sentence, a link or a photo happens in the visual editor, not in an HTML file.

Theme Builder header and footer. Both are built once as Elementor Pro Theme Builder templates and shared by every page. The header stays in view while visitors scroll, so the navigation and the data breach button are always within reach.

News that updates itself. The homepage news section and the News page both use an Elementor Pro Loop Grid with a single card template, pulling from WordPress posts. Publishing a post adds it to both places automatically.

The Self-Check, integrated. The office's Self-Check, playable as a jump-and-run game or as a classic questionnaire, is embedded on its own page and hosted on the site's own domain.

Privacy-first by design. A data protection office's website has to practise what it teaches:

a system font stack, so no fonts load from Google or any other outside service

the homepage loads every file from the site's own domain, with no third-party requests

Wordfence protecting the site and its login

Built with accessibility in mind. A skip link lets keyboard users jump straight to the content, and the page language is set to Swiss German for screen readers.

Stack: WordPress · Hello Elementor · Elementor Pro (Theme Builder, Loop Grid) · Wordfence