immomentor – Kaufbegleitung für Kapitalanlagen

Die immomentor GmbH aus Stuttgart begleitet den Kauf von Immobilien als Kapitalanlage unabhängig und ohne Verkaufsinteressen, von der Strategie bis zur Schlüsselübergabe; der Einstieg ist ein kostenfreies Erstgespräch. Die Website immomentor.net habe ich 2025 erstmals aufgebaut und 2026 komplett neu gebaut. Meine Rolle umfasste Konzept, Design-Umsetzung und Entwicklung. Das Design lag als fertiger Figma-Entwurf vor; ich habe ihn pixelgenau in WordPress mit Oxygen 6.2 übersetzt.

Die Aufgabe

Die Website sollte die Leistungen von immomentor, das Team, die Roadmap und die Partner abbilden und einen klaren Weg zum Erstgespräch anbieten. Der Figma-Entwurf gab Typografie, Farben, Abstände und Layout exakt vor. Abweichungen im Browser waren nicht gewünscht, deshalb musste die Umsetzung den Entwurf Wert für Wert übernehmen.

Zwei Randbedingungen prägten den Neubau 2026. Die Seite aus dem Erstaufbau 2025 lief weiter und durfte während der Arbeit nicht offline gehen. Außerdem wollte das Team Texte und Kennzahlen anschließend selbst pflegen, ohne dafür im Builder zu arbeiten.

Die Umsetzung

Aufbau in Oxygen 6.2 mit eigenem Design-System

Die Seite läuft auf WordPress mit Oxygen 6.2 und dem Oxygen Zero Theme. Aus dem Figma-Entwurf habe ich ein eigenes Design-System mit dem CSS-Präfix im- abgeleitet: Selektoren und Variablen für Farben, Abstände und Typografie. Jeder Wert aus Figma hat damit genau eine Stelle im CSS, deshalb bleibt die Seite auch nach späteren Änderungen konsistent.

Inhalte in Secure Custom Fields

Texte und Kennzahlen liegen in strukturierten Feldern von Secure Custom Fields. Oxygen liest diese Felder dynamisch aus. Das Team ändert Inhalte im WordPress-Backend, ohne Layout oder Builder anzufassen; das war die Voraussetzung für die eigenständige Pflege.

Eigenes SEO-Must-Use-Plugin mit JSON-LD

Die Datei immomentor-seo.php übernimmt als Must-Use-Plugin Titel, Meta-Angaben, Open Graph und JSON-LD. Die strukturierten Daten bestehen aus einem ProfessionalService-Knoten für das Unternehmen, zwei Person-Knoten für das Team, PostalAddress und Country für den Standort sowie WebPage und WebSite. Ein Must-Use-Plugin lässt sich im Backend nicht versehentlich deaktivieren.

Schriften und Inline-SVGs

Die Schriften Playfair Display und Plus Jakarta Sans sind lokal als woff2 eingebunden, ohne Abruf von externen Font-Servern. Icons und Grafiken liegen als 73 Inline-SVGs direkt im Markup. Dadurch entfallen separate Bildanfragen, und die Grafiken skalieren auf jeder Auflösung verlustfrei.

Seitenstruktur, Kontaktwege und Social-Profile

Die Website besteht aus Startseite, Roadmap, Team, Partner, Kontakt, Datenschutzerklärung und Impressum. Die Bereiche Leistungen, Team unter dem Titel „immomentor in Person“, Roadmap und Partner sind mit einem klaren Weg zum Erstgespräch verbunden. Der Kontakt läuft über eine Calendly-Terminbuchung und einen WhatsApp-Link. Verlinkt sind die Social-Profile auf Instagram, LinkedIn, TikTok, YouTube, Facebook und X.

Staging unter /beta/ und Hosting

Der Neubau entstand in einer WPvivid-Staging-Umgebung unter /beta/, parallel zum laufenden Betrieb der bestehenden Seite. Erst nach der Abnahme ging der neue Stand live. Gehostet wird die Website auf netcup Shared Hosting mit PHP 8.2.

Technik im Detail

• WordPress mit Oxygen 6.2 und Oxygen Zero Theme
• Eigenes Design-System mit CSS-Präfix im-: Selektoren und Variablen für Farben, Abstände und Typografie, abgeleitet aus dem Figma-Entwurf
• Secure Custom Fields für Texte und Kennzahlen in strukturierten Feldern
• Must-Use-Plugin immomentor-seo.php für Titel, Meta, Open Graph und JSON-LD
• JSON-LD-Knoten: ProfessionalService, zwei Person-Knoten (Team), PostalAddress, Country, WebPage, WebSite
• Schriften Playfair Display und Plus Jakarta Sans, lokal als woff2
• 73 Inline-SVGs für Icons und Grafiken
• Seiten: Startseite, Roadmap, Team, Partner, Kontakt, Datenschutzerklärung, Impressum
• Kontakt über Calendly-Terminbuchung und WhatsApp-Link; Social-Profile Instagram, LinkedIn, TikTok, YouTube, Facebook, X
• WPvivid Staging als Beta-Umgebung unter /beta/
• netcup Shared Hosting mit PHP 8.2

Design und Rollen

Das Design lag als fertiger Figma-Entwurf vor. Ich habe Konzept, Design-Umsetzung und Entwicklung übernommen und den Entwurf pixelgenau in Oxygen übersetzt; im Impressum der Website sind technische Umsetzung und Webdesign unter meinem Namen eingetragen. Erstaufbau 2025, kompletter Neubau 2026.

Das Ergebnis

Die Website entspricht dem Entwurf. Das Team pflegt Texte und Kennzahlen selbst über die Felder in Secure Custom Fields, ohne Eingriff in Templates oder CSS. Der Wechsel vom alten auf den neuen Stand lief über die Staging-Umgebung ohne Unterbrechung des Betriebs. Mehr zu dieser Art von Projekt unter Websites sowie SEO und Performance.