Case study · Websites
Datenschutz St.Gallen
A static HTML site rebuilt in WordPress, so the office can update it
HTML site converted to WordPress with Elementor Pro for the Canton of St.Gallen's data protection office: editable templates, news loop and Self-Check game.
- Client
- Datenschutz St.Gallen
- Service
- HTML to WordPress
- Industry
- Government & Public Administration
- Timeline
- Aug 25 – Sep 2, 2026
- Role
- Web Developer · WordPress Developer
Overview
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.
What was built
- 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
Tech review
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.
Key build highlights
- 01
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.
- 02
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.
- 03
Publish once, show in two places
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.
- 04
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.
- 05
No outside fonts or third-party requests
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
- 06
A skip link and the right page language
A skip link lets keyboard users jump straight to the content, and the page language is set to Swiss German for screen readers.
The result
A data protection office whose own website follows the privacy rules it teaches, and which the staff update themselves.
Gallery
Inside the project
