Manchmal beginnt ein Projekt mit einem Dokument. In diesem Fall war es eine sorgfältig ausgearbeitete HTML-Vorlage — ein Design-System, das Dr. Markus Husemann-Kopetzky vom Price Management Institute bereits konzipiert hatte. Meine Aufgabe: dieses System in eine vollständige WordPress-Website übersetzen, die sein Team eigenständig befüllen kann.

Was folgte, war eines der technisch vielseitigsten Projekte, an denen ich bisher gearbeitet habe.

Der Kunde: Price Management Institute

Das Price Management Institute unter der Leitung von Dr. Markus Husemann-Kopetzky ist auf strategisches Pricing spezialisiert — für Unternehmen im Handel, Großhandel und E-Commerce. Die Website sollte das widerspiegeln: fundiert, klar strukturiert, mit einem Hauch redaktioneller Eleganz.

Markus ist ein angenehmer Auftraggeber. Strukturiert, gut vorbereitet, entscheidungsfreudig. Wir haben das Projekt in regelmäßigen Video-Sprints abgestimmt — kein langes Hin-und-Her, sondern direkte Abstimmung mit klarem Ziel. Das macht einen echten Unterschied.

Die Herausforderung: Ein Design-System in Elementor übersetzen

Die Vorlage war detailliert. Eigene Typografie (Instrument Serif für Headlines, DM Sans für Fließtext), ein durchdachtes Farb-System, und eine ganze Reihe von Inhaltselementen: Executive Summary Boxen, zweisprachige Blockquotes, Q&A-Blöcke, gestylte Tabellen, Drop Caps.

All das sollte im Classic Editor — also ohne Elementor-Widgets — von Redakteuren befüllbar sein. Das bedeutete: alles über Custom CSS und Custom HTML Blöcke lösen, nicht über komplexe Elementor-Konfigurationen.

Was konkret umgesetzt wurde

Theme Builder Templates Mit Elementor Pro habe ich alle globalen Templates gebaut: Header, Footer, das Single Post Template für Blogartikel, die Archivseite „Insights & Media“ und ein Loop Card Template, das auf der gesamten Website einheitlich verwendet wird.

Blog-Artikel Design System Das war der aufwändigste Teil. Über globalen Custom CSS und strukturierten HTML-Code entstanden:

  • Drop Cap — Der erste Buchstabe des Lead-Absatzes wird groß, kursiv und in der Markenfarbe dargestellt
  • Executive Summary Box — Ein grauer Block mit blauer Kante, der den Kerninhalt zusammenfasst
  • Callout-Boxen — Drei Varianten: Standard (blau), Disclaimer (orange), Beispiel (blau)
  • Zweisprachige Blockquotes — Für wissenschaftliche Zitate mit deutscher Übersetzung und englischem Original
  • Q&A-Blöcke — Rhetorische Fragen mit Antworten, visuell vom Fließtext abgesetzt
  • Tabellen — Gutenberg-Standardstyles komplett überschrieben für ein sauberes, markentreues Design

Inhaltsverzeichnis Das Elementor Pro TOC-Widget wurde in ein zweispaltiges Layout gebracht und auf den Artikelinhalt beschränkt — damit keine Überschriften aus anderen Seitenbereichen darin auftauchen.

Die technischen Kniffe

em-Tags in Beitragstiteln

Eine der kniffligsten Anforderungen: Beitragstitel sollten einen kursiven, blauen Akzent-Teil enthalten — zum Beispiel Preisstrategie: Haben Sie eine bewusst gewählte Preisstrategie?

WordPress escaped HTML in Titeln standardmäßig. Elementor escaped es erneut. Yoast SEO escaped es in Breadcrumbs und Browser-Tab nochmals. Jede Ebene brauchte einen eigenen PHP-Filter in der functions.php:

  • the_title — für WordPress-Titel
  • elementor/widget/render_content — für das Elementor-Widget
  • wpseo_breadcrumb_links — für Yoast-Breadcrumbs
  • wpseo_title — für den Browser-Tab

Das Ergebnis: Der kursiv-blaue Titelakzent funktioniert überall korrekt — im Hero-Bereich, in den Loop Cards, in den Breadcrumbs und im Tab-Titel.

Kategorie-Steuerung ohne SEO-Nachteile

Für kurze Beiträge ohne Unterkapitel sollte das Inhaltsverzeichnis ausgeblendet werden. Die Lösung: eine interne Kategorie „Kurzbeitrag“, die in Yoast auf Noindex gesetzt ist. Über Elementor Anzeigebedingungen wird das TOC-Widget bei dieser Kategorie automatisch ausgeblendet — ohne sichtbaren Einfluss auf das Frontend.

WPML-Integration

Die gesamte Website ist zweisprachig (DE/EN). Theme Builder Templates, Loop Grids, Breadcrumbs und Beitragstitel mussten in beiden Sprachen korrekt funktionieren. Besonders der em-Akzent in übersetzten Titeln war anfangs eine Fehlerquelle — bis die Reihenfolge der Filter und das Encoding-Verhalten von WPML vollständig verstanden war.

Migration auf SiteGround

Die Entwicklung lief lokal (Local by Flywheel). Nach Abschluss wurde die Website via Duplicator auf eine SiteGround Staging-Umgebung migriert, geprüft und anschließend live gestellt.

Nach dem Live-Push: alle Plugin-Lizenzen neu aktivieren, URLs in der Datenbank ersetzen, CSS regenerieren, Cache leeren. Eine kurze, aber wichtige Checkliste.

Projektende

Das Price Management Institute Projekt hat gezeigt, wie viel möglich ist, wenn ein Auftraggeber weiß, was er will — und ein Entwickler die Werkzeuge kennt, um es umzusetzen.

Elementor Pro, Custom CSS, PHP-Filter, WPML und ein durchdachtes Redaktionssystem: alles greift ineinander. Die Redakteure können Beiträge eigenständig erstellen, das Design bleibt konsistent, und die Website ist wartbar.

Wenn du ein ähnliches Projekt planst — schreib mir.