Schritt 1: WeWeb-Workspace einrichten

Erstelle einen kostenlosen WeWeb-Account unter weweb.io. Erstelle einen neuen Workspace und eine neue App. Wähle "From scratch" für eine leere Leinwand.

WeWebs Interface: Links die Komponentenleiste, in der Mitte der Canvas, rechts das Styles-Panel. Oben die Seitennavigation und der Publish-Button.

Ein erstes Setup-Tipp: Gehe zu App Settings → Fonts und lade deine Marken-Schriftarten hoch. Für deutsche Unternehmenswebsites sind Inter, Source Sans Pro oder eine eigene Unternehmensschrift üblich. WeWeb unterstützt Google Fonts und benutzerdefinierte Font-Uploads gleichermaßen. Definiere deine Farbpalette unter App Settings → Brand Colors.

Schritt 2: Den Hero-Abschnitt aufbauen

Das Hero ist das erste, was Besucher sehen. Aufbau: 1. Container-Element (volle Breite, min-height: 600px) 2. Innerer Container (max-width: 1200px, zentriert mit Padding) 3. Text-Gruppe: H1-Headline, H2-Unterzeile, CTA-Button 4. Hero-Bild oder Produkt-Screenshot rechts (auf Desktop)

WeWebs Flex- und Grid-Komponenten machen dieses Layout ohne Pixel-Mathe möglich. Setze die H1 auf dein Ergebnis-Statement ("Budgets 2× schneller freigeben"), die Unterzeile auf die Zielgruppe und den Mechanismus ("Für Finanz-Teams — automatisierte Genehmigungs-Workflows").

Für die deutsche Zielgruppe: Verwende "Sie" oder "du" konsistent — "Sie" für B2B/Enterprise-Zielgruppen, "du" für Startup- und Tech-Zielgruppen.

Schritt 3: Social Proof und Logo-Leiste

Direkt unter dem Hero: Eine Logo-Leiste mit 5–8 Kundenlogos (grauskaliert, einheitliche Höhe).

In WeWeb: Füge ein Flex-Container-Element mit justify-content: space-between hinzu. Lade Logos als SVG oder PNG ein. Setze filter: grayscale(100%) im Styles-Panel — das gibt der Leiste ein professionelles, neutrales Aussehen.

Wenn du noch keine Logos hast: Verwende ein Testimonial-Zitat von einem Beta-Nutzer. Platziere es in einer hellen Hintergrundbox mit Zitat-Text, Name, Foto (wenn vorhanden) und Unternehmensname. Selbst ein Zitat von einem deutschen LinkedIn-Kontakt, der dein Produkt getestet hat, konvertiert besser als kein Social Proof.

Schritt 4: Feature-Abschnitt

Ein 3- oder 4-spaltige Feature-Grid: 1. WeWeb Grid-Element (3 Spalten auf Desktop, 1 Spalte auf Mobile) 2. Für jedes Feature: Icon-Container, H3-Titel, Beschreibungstext 3. Icons: Verwende Lucide Icons (eingebaut in WeWeb) oder lade SVG-Icons hoch

Für jeden Feature-Punkt: Schreibe [Ergebnis] als H3-Titel und [Wie es das liefert] als Beschreibungstext. Vermeide generische Feature-Namen wie "Einfach zu bedienen" — sei spezifisch: "Genehmigungsanfragen in unter 30 Sekunden erstellen".

Mobile-Optimierung: WeWeb macht das Grid auf Mobile automatisch zu einer einspaltigen Darstellung, wenn du Responsive-Breakpoints konfigurierst. Teste auf 375px, dass deine Icons und Texte korrekt ausgerichtet sind.

Schritt 5: CTA-Abschnitt und Deployment

Bottom CTA-Abschnitt: Wiederhole deinen Haupt-CTA am Ende der Seite. Format: - H2-Headline (Zusammenfassung des Wertversprechens) - Optionaler Subtext - Primärer CTA-Button - Vertrauens-Mikrokopie: "Keine Kreditkarte erforderlich · DSGVO-konform · Kostenlos kündbar"

Deployment: Klicke auf "Publish" in WeWeb. Wähle "Custom Domain". WeWeb führt dich durch die DNS-Konfiguration (CNAME-Eintrag für deine Domain). SSL wird automatisch provisioniert. Die Seite ist innerhalb von 5 Minuten live.

App Studio hat über 50 Apps und Landing Pages in Produktion geliefert. Wenn du schneller vorankommen möchtest, hilft dir unser Team. Mehr auf /hire/weweb-developer.