Was eine großartige Landing Page ausmacht

Bevor du mit dem Bauen beginnst, hilft es, die Schlüsselelemente einer conversion-starken Landing Page zu verstehen:

• Klares Wertversprechen — Besucher sollten innerhalb von Sekunden verstehen, was du anbietest.
• Starker Call-to-Action — Ein primärer CTA, der heraussticht und Besuchern genau sagt, was sie tun sollen.
• Social Proof — Testimonials, Kundenlogos oder Nutzungsstatistiken, die Vertrauen aufbauen.
• Sauberes Design — Minimale Ablenkung. Jedes Element sollte dein Conversion-Ziel unterstützen.
• Schnelle Ladezeit — Geschwindigkeit zählt für die User Experience und fürs SEO-Ranking.

So funktioniert Cmssy

Cmssy ist ein Headless CMS mit visuellem Editor. Du baust die Block-Komponenten der Landing Page in deiner eigenen Next.js-App (App Router) mit den Paketen @cmssy/react und @cmssy/next und deployst diese App selbst (auf Vercel oder anderswo). Die Inhalte leben im Cmssy-Admin, und der visuelle Editor bettet deine deployte Seite ein, sodass du Blöcke ziehen und Inhalte live bearbeiten kannst. Cmssy liefert die Inhalte; deine Next.js-App rendert sie.

Schritt 1: Richte deine Next.js-App ein

Starte mit einem Next.js-App-Router-Projekt und füge das Cmssy SDK hinzu, oder klone die Referenz-App cmssy-web, um sofort ein funktionierendes Setup zu haben. Installiere die Pakete:

npm install @cmssy/react @cmssy/next

Umschließe deine Seite mit CmssyServerLayout und füge eine Catch-all-Route hinzu, die Seiten mit createCmssyPage rendert. Das verbindet deine App mit der Cmssy-Delivery-API, sodass sie alles abrufen und rendern kann, was du im Admin veröffentlichst.

Schritt 2: Definiere deine Blöcke

Eine Landing Page besteht aus Blöcken. Definiere jeden als React-Komponente mit defineBlock und deklariere die editierbaren Inhalte über fields. Für eine Landing Page brauchst du typischerweise einen Hero, einen Features-Block und einen CTA. Zum Beispiel ein Hero-Block:

import { defineBlock, fields } from "@cmssy/react";

export const Hero = defineBlock({
  type: "hero",
  fields: {
    title: fields.text(),
    subtitle: fields.text(),
    ctaLabel: fields.text(),
    ctaUrl: fields.text(),
  },
  render: ({ title, subtitle, ctaLabel, ctaUrl }) => (
    <section>
      <h1>{title}</h1>
      <p>{subtitle}</p>
      <a href={ctaUrl}>{ctaLabel}</a>
    </section>
  ),
});

Registriere deine Blöcke, damit Cmssy sie kennt. Die mit fields deklarierten Felder werden zu editierbaren Steuerelementen im visuellen Editor. Markup und Styling gehören dir, sodass die Blöcke exakt zu deinem Designsystem passen. (Wenn du cmssy-web geklont hast, sind Hero-, Features- und CTA-Blöcke bereits enthalten — nutze sie, statt eigene zu schreiben.)

Schritt 3: Erstelle die Seite in Cmssy

Öffne den Cmssy-Admin und klicke auf „Neue Seite“. Gib ihr einen Namen und einen URL-Slug (z. B. /my-landing-page). Der Slug bestimmt den Pfad, den deine Next.js-App rendert. Die Seite startet leer — als Nächstes füllst du sie mit deinen Blöcken.

Schritt 4: Baue die Seite im visuellen Editor

Öffne die Seite im visuellen Editor. Er bettet deine deployte Next.js-Seite ein, sodass du deine echten Komponenten live rendern siehst. Ziehe deine Blöcke Hero, Features und CTA in der richtigen Reihenfolge auf die Arbeitsfläche. Klicke auf einen beliebigen Block, um seine Inhalte im Seitenpanel zu bearbeiten — die mit fields deklarierten Felder erscheinen als Formularfelder. Schreibe eine überzeugende Headline, füge 3-4 zentrale Vorteile hinzu und konfiguriere deinen CTA-Button.

Schritt 5: Füge Social Proof hinzu

Menschen vertrauen anderen Menschen. Wenn du einen Testimonial- oder Logo-Block definiert hast (oder einer mit cmssy-web mitkommt), ziehe ihn hinein, um Bewertungen, Kundenlogos oder zentrale Statistiken zu zeigen. Platziere ihn früh — direkt nach dem Hero —, um Glaubwürdigkeit aufzubauen, bevor du um eine Conversion bittest.

Schritt 6: Bearbeite Inhalte mit KI (optional)

Cmssy stellt einen MCP-Server bereit, sodass KI-Assistenten deine Seiteninhalte direkt bearbeiten können — Headlines umschreiben, Texte anpassen oder Blockfelder ausfüllen. Die KI bearbeitet Inhalte im Cmssy-Admin, niemals deinen Code. Deine Block-Komponenten bleiben exakt so, wie du sie geschrieben hast.

Schritt 7: Konfiguriere SEO

Gehe zu den Seiteneinstellungen und fülle die SEO-Felder aus:

• SEO-Titel — Nimm dein wichtigstes Keyword auf. Bleib unter 60 Zeichen.
• Meta-Beschreibung — Fasse deine Seite in 155 Zeichen zusammen. Füge einen Call-to-Action hinzu.
• Keywords — Ergänze relevante Keywords, die zur Suchintention deiner Zielgruppe passen.

Cmssy rendert sie automatisch in die Metadaten deiner Next.js-App, und die Landing Page kann auf ihrer eigenen Custom Domain laufen.

Schritt 8: Veröffentlichen

Wenn du mit der Seite zufrieden bist, klicke auf Veröffentlichen. Die Inhalte gehen über die Delivery-API live, und deine deployte Next.js-App rendert sie unter dem konfigurierten Slug — schnell, serverseitig gerendert und auf deiner eigenen Domain. Teile sie in Social Media, binde sie in E-Mail-Kampagnen ein oder verlinke sie von deiner Hauptseite.

Best Practices für Landing Pages

Behalte diese Tipps beim Bauen und Iterieren im Kopf:

• Ein Ziel pro Seite — Verwässere deine Botschaft nicht. Jede Landing Page sollte ein einziges Conversion-Ziel haben.
• Mobile-First-Design — Mehr als die Hälfte des Web-Traffics kommt von Mobilgeräten. Teste auf kleinen Bildschirmen.
• A/B-teste Headlines — Kleine Änderungen an deiner Headline können die Conversion-Rate dramatisch beeinflussen.
• Ladezeit zählt — Ziele auf unter 3 Sekunden. Komprimiere Bilder und vermeide unnötige Skripte.
• Setze Dringlichkeit klug ein — Zeitlich begrenzte Angebote oder Countdown-Timer können Conversions steigern, wenn sie authentisch eingesetzt werden.

Nächste Schritte

Bereit, deine erste Landing Page zu bauen? Diese Ressourcen helfen dir beim Start:

• Installiere das Cmssy SDK in deiner Next.js-App.
• Folge dem Quickstart, um deine erste Seite von Anfang bis Ende zu rendern.
• Lies den Blocks-Guide für alles, was defineBlock und fields können.
• Richte den MCP-Server ein, um Inhalte mit KI zu bearbeiten.