Zum Hauptinhalt springen

Landing Page Builder

Der Landing Page Builder ist ein visueller Drag-and-Drop-Editor, mit dem Sie Ihre Landing Page ohne Programmierkenntnisse anpassen können. Farben, Texte, Bilder, Layouts – alles per Klick.

Watch the Video Tutorial​

Accessing the Builder​

Es gibt zwei Wege, den Builder zu öffnen:

Method 1: From Settings​

  1. Gehen Sie zu SaaS Management → SuperAdmin Settings → Landing Page Settings
  2. Klicken Sie auf "Customize with builder"

Method 2: From Sidebar​

  1. Gehen Sie zu SaaS Management → Landing Page Builder

Builder Interface​

Landing Page Builder interface Der Landing Page Builder – Seiten links, visueller Editor in der Mitte, Eigenschaften rechts

Der Builder hat drei Hauptbereiche:

AreaLocationWhat It Does
Pages & Sections PanelLinke SeiteThemes durchsuchen, Abschnitte hinzufügen, Seiten verwalten
Visual EditorMitteSeite ansehen und Elemente zum Bearbeiten anklicken
Properties PanelRechte SeiteInhalt, Stil und Einstellungen des gewählten Elements bearbeiten

Working with Themes​

Im linken Panel werden verfügbare Themes angezeigt:

  • SaasCandy – Modernes, SaaS-fokussiertes Design
  • Mexant – Sauber und minimalistisch
  • Productly – Produktpräsentations-Stil

Klicken Sie auf ein Theme, um mit dessen vordefinierten Abschnitten zu starten, und passen Sie danach an.

Adding Sections​

  1. Im linken Panel "+ Add section" klicken
  2. Verfügbare Abschnittstypen durchsuchen:
    • Hero – Header mit Überschrift und CTA
    • Features – Features in Karten oder Listen darstellen
    • Pricing – Abo-Pläne anzeigen
    • Testimonials – Kundenstimmen und Bewertungen
    • Contact – Kontaktformular oder Infos
    • Custom – Leerer Abschnitt für eigenen Inhalt
  3. Auf einen Abschnitt klicken, um ihn zur Seite hinzuzufügen
  4. Abschnitte per Drag & Drop neu ordnen

Editing Elements​

  1. Klicken Sie auf ein Element im visuellen Editor (Text, Bild, Button usw.)
  2. Das Properties Panel rechts zeigt dessen Einstellungen
  3. Tabs im Properties Panel:
    • Content – Texte, Bilder, Links bearbeiten
    • Style – Farben, Schriftarten, Abstände, Rahmen ändern
    • Advanced – CSS-Klassen, Animationen, Sichtbarkeit

Managing Pages​

Der Builder unterstützt mehrere Seiten:

  • "New page +" im Seitenbereich (oben links) klicken, um weitere Seiten anzulegen
  • Nützlich für separate Pricing-, Feature- oder About-Seiten

Tips for a Great Landing Page​

Keep It Simple​

  • Nicht zu viele Abschnitte – 5–7 sind ideal
  • Jeder Abschnitt sollte EINEN klaren Zweck haben
  • Viel Weißraum nutzen

Use High-Quality Images​

  • Ersetzen Sie Standardbilder durch eigene Screenshots
  • Zeigen Sie Ihr echtes CRM-Interface – echt wirkt besser als Stock-Fotos
  • Einheitliche Bildgrößen nutzen

Optimize for Speed​

  • Bilder unter 200 KB halten
  • Nicht zu viele Abschnitte (Ladezeit zählt!)
  • Ladegeschwindigkeit mit Google PageSpeed prüfen

Test on Mobile​

  • Mobile-Preview-Button im Builder nutzen
  • Sicherstellen, dass alle Texte auf kleinen Screens lesbar sind
  • Prüfen, dass Buttons gut tappbar sind

Saving Your Changes​

Wenn Sie mit Ihrer Landing Page zufrieden sind:

  1. Auf "Save Page" klicken (oben rechts, grüner Button)
  2. "View page" klicken, um die veröffentlichte Version zu sehen
  3. Die URL mit Kunden teilen!
warnung

Nicht vergessen zu speichern! Änderungen werden NICHT automatisch gespeichert. Klicken Sie immer auf "Save Page", bevor Sie den Builder verlassen.

tipp

Landing Page sieht gut aus? Konfigurieren Sie Custom Domains, wenn Sie Custom Domain für Ihre Premium-Tenants anbieten möchten.