Werbeagentur Maas – Exakte Screendesign-Umsetzung

Für die Werbeagentur Maas wurde eine WordPress-Website mit dem Divi-Theme realisiert.
Die Herausforderung lag in der pixelgenauen Umsetzung eines detaillierten Screendesigns – inklusive präziser Typografie-Skalierung, Raster, Abstände und Komponenten-States.

Der Auftritt wurde so aufgebaut, dass sämtliche Module wiederverwendbar sind und Redakteur:innen Inhalte effizient pflegen können, ohne das definierte Designsystem zu durchbrechen.

Ziele

Zentrale Ziele waren die exakte Übertragung des Screendesigns in sauberes Frontend-HTML/CSS sowie die stabile Redaktionserfahrung auf Basis von Divi.
Zusätzlich standen Performance, Barrierefreiheit (A11y) und SEO-Grundlagen im Fokus.

• 1:1 Pixel-Perfect zur Designvorlage
• Saubere Komponentenbibliothek in Divi
• Schnelle Ladezeiten & technisches SEO-Fundament
• Barrierearme Umsetzung für bessere Zugänglichkeit

Lösung

Die Umsetzung erfolgte mit Divi als modularem Baukasten. Komponenten (Hero, Grid-Cards, Testimonials, CTA-Blöcke, Formularsektionen) wurden in globalen Presets angelegt, um Konsistenz bei Farben, Abständen und Typografie sicherzustellen.

Typografie, Spacing und Breakpoints wurden auf Basis des gelieferten Rasters präzise abgebildet; Interaktionszustände (Hover/Focus) entsprechen den Design-Specs.
Für Redakteur:innen wurden Vorlagen und Naming-Konventionen erstellt, damit Inhalte sicher und schnell publiziert werden können.

Technik-Stack

• WordPress (6.x), Divi
• Divi-Presets & globale Styles nach Designsystem
• Formular-Komponenten mit Fehlermeldungen/Labels
• Bildgrößen-Set & responsive Varianten

Ergebnis

Eine präzise, performante Website, die das Markenbild der Werbeagentur exakt transportiert und im Tagesgeschäft pflegeleicht bleibt.
Die modulare Struktur ermöglicht schnelle Inhalte-Updates bei gleichbleibender Qualität.

Live ansehen: werbeagentuurmaas.de