🚀 Landing Page CRO Skill
Erstelle Landingpages, die Besucher in Kunden verwandeln. Jedes Element basiert auf Konversionspsychologie und bewährten Mustern.
Kurzreferenz
KONVERSIONS-HIERARCHIE (in dieser Reihenfolge prüfen):
1. Wertversprechen in 5 Sekunden klar? → Hero-Headline
2. CTA oberhalb der Falte sichtbar? → Button-Platzierung
3. Sozialer Beweis vorhanden? → Testimonials, Logos, Zahlen
4. Einwände behandelt? → FAQ, Garantien
5. Reibung minimiert? → Formularfelder, Ladegeschwindigkeit
Abschnittsarchitektur (von oben nach unten)
OPTIMALER LANDINGPAGE-ABLAUF:
┌─────────────────────────────────────────┐
│ 1. NAVBAR — Logo + Navigation + CTA-Button │
├─────────────────────────────────────────┤
│ 2. HERO — Headline + Untertitel + CTA + Bild │
│ (oberhalb der Falte, < 3 Sekunden) │
├─────────────────────────────────────────┤
│ 3. SOZIALER BEWEIS-BALKEN — Logos / Zahlen │
├─────────────────────────────────────────┤
│ 4. PROBLEM — Schmerzpunkte (PAS-Format) │
├─────────────────────────────────────────┤
│ 5. LÖSUNG — Dein Produkt als Antwort │
├─────────────────────────────────────────┤
│ 6. FUNKTIONEN — 3-6 Hauptvorteile │
├─────────────────────────────────────────┤
│ 7. SO FUNKTIONIERT ES — 3 Schritte │
├─────────────────────────────────────────┤
│ 8. TESTIMONIALS — Echte Benutzerzitate │
├─────────────────────────────────────────┤
│ 9. PREISE — Pläne + Vergleich │
├─────────────────────────────────────────┤
│ 10. FAQ — Einwandbehandlung │
├─────────────────────────────────────────┤
│ 11. ABSCHLIESSENDER CTA — Letzter Konversionsschub │
├─────────────────────────────────────────┤
│ 12. FUSSBEREICH — Links + Rechtliches + Kontakt │
└─────────────────────────────────────────┘
Hero-Bereich-Muster
Muster 1: Split Hero (Headline links, Visual rechts)
<section class="hero">
<div class="hero-grid">
<!-- Links: Text -->
<div class="hero-content">
<span class="hero-badge">🚀 Neu in 2026</span>
<h1 class="hero-title">
Versende Pakete in
<span class="text-gradient">ganz Ecuador</span>
ab $2.50
</h1>
<p class="hero-subtitle">
Der schnellste und zuverlässigste Kurierdienst.
Lieferung in 24-48h mit Echtzeit-Tracking.
</p>
<div class="hero-actions">
<a href="#cotizar" class="btn btn-primary btn-lg">
Kostenlosen Versand berechnen
<svg><!-- Pfeil-Symbol --></svg>
</a>
<a href="#como-funciona" class="btn btn-secondary btn-lg">
Ansehen, wie es funktioniert
</a>
</div>
<div class="hero-proof">
<div class="hero-avatars"><!-- Gestapelte Avatare --></div>
<p><strong>+2.500</strong> Unternehmer vertrauen uns</p>
</div>
</div>
<!-- Rechts: Visual -->
<div class="hero-visual">
<!-- Produktscreenshot, Illustration oder Video -->
</div>
</div>
</section>
.hero {
padding: var(--space-section) 0;
min-height: calc(100vh - 80px);
display: flex;
align-items: center;
}
.hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-16);
align-items: center;
max-width: 1280px;
margin: 0 auto;
padding: 0 var(--space-6);
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1) var(--space-4);
background: var(--color-primary-light);
color: var(--color-primary);
font-size: var(--text-sm);
font-weight: 600;
border-radius: var(--radius-full);
margin-bottom: var(--space-6);
}
.hero-title {
font-family: var(--font-display);
font-size: var(--text-hero);
font-weight: 800;
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--color-text);
margin-bottom: var(--space-6);
}
.text-gradient {
background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-subtitle {
font-size: var(--text-xl);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
max-width: 540px;
margin-bottom: var(--space-8);
}
.hero-actions {
display: flex;
gap: var(--space-4);
margin-bottom: var(--space-8);
}
.hero-proof {
display: flex;
align-items: center;
gap: var(--space-3);
color: var(--color-text-muted);
font-size: var(--text-sm);
}
.hero-avatars {
display: flex;
}
.hero-avatars img {
width: 32px;
height: 32px;
border-radius: 50%;
border: 2px solid var(--color-surface);
margin-left: -8px;
}
.hero-avatars img:first-child {
margin-left: 0;
}
/* Mobil */
@media (max-width: 768px) {
.hero-grid {
grid-template-columns: 1fr;
text-align: center;
}
.hero-subtitle { max-width: 100%; }
.hero-actions { flex-direction: column; }
.hero-proof { justify-content: center; }
.hero-visual { order: -1; }
}
Muster für sozialen Beweis
Logo-Bar
<section class="social-proof-bar">
<p class="social-proof-label">Vertrauen auf uns</p>
<div class="logo-scroll">
<div class="logo-track">
<!-- Logos 2x wiederholen für Endlos-Scroll -->
<img src="/logos/brand1.svg" alt="Marke 1" />
<img src="/logos/brand2.svg" alt="Marke 2" />
<!-- ... -->
</div>
</div>
</section>
.social-proof-bar {
padding: var(--space-12) 0;
border-top: 1px solid var(--color-border-subtle);
border-bottom: 1px solid var(--color-border-subtle);
text-align: center;
}
.social-proof-label {
font-size: var(--text-sm);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
margin-bottom: var(--space-8);
}
.logo-scroll {
overflow: hidden;
mask-image: linear-gradient(90deg, transparent, white 10%, white 90%, transparent);
}
.logo-track {
display: flex;
gap: var(--space-12);
animation: scroll 30s linear infinite;
}
.logo-track img {
height: 28px;
opacity: 0.4;
filter: grayscale(100%);
transition: all var(--duration-normal) var(--ease-out);
}
.logo-track img:hover {
opacity: 1;
filter: grayscale(0%);
}
@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
Statistiken-Bar
<div class="stats-bar">
<div class="stat">
<span class="stat-value" data-count="15000">15.000+</span>
<span class="stat-label">Versendete Pakete</span>
</div>
<div class="stat">
<span class="stat-value">98,5%</span>
<span class="stat-label">Lieferquote</span>
</div>
<div class="stat">
<span class="stat-value">24h</span>
<span class="stat-label">Durchschnittliche Zeit</span>
</div>
<div class="stat">
<span class="stat-value">4.9★</span>
<span class="stat-label">Bewertung</span>
</div>
</div>
Preissektion
3-Plan-Layout mit Umschalter
<section class="pricing" id="pricing">
<div class="container">
<div class="section-header">
<h2>Einfache und transparente Pläne</h2>
<p>Keine versteckten Kosten. Jederzeit kündbar.</p>
</div>
<!-- Umschalter -->
<div class="pricing-toggle">
<span class="toggle-label" data-active="monthly">Monatlich</span>
<button class="toggle-switch" role="switch" aria-checked="false">
<span class="toggle-thumb"></span>
</button>
<span class="toggle-label" data-active="yearly">
Jährlich <span class="toggle-badge">-20%</span>
</span>
</div>
<!-- Plan-Raster -->
<div class="plans-grid">
<!-- Basis -->
<div class="plan-card">
<div class="plan-header">
<h3>Basis</h3>
<p class="plan-desc">Für Einsteiger-Unternehmer</p>
</div>
<div class="plan-price">
<span class="price-amount" data-monthly="$19" data-yearly="$15">$19</span>
<span class="price-period">/Monat</span>
</div>
<ul class="plan-features">
<li class="feature-included">✓ 100 Sendungen/Monat</li>
<li class="feature-included">✓ Basis-Tracking</li>
<li class="feature-included">✓ Support per E-Mail</li>
<li class="feature-excluded">✗ API-Zugriff</li>
<li class="feature-excluded">✗ Priorität</li>
</ul>
<button class="btn btn-secondary btn-lg btn-full">Kostenlos starten</button>
</div>
<!-- Pro (Hervorgehoben) -->
<div class="plan-card plan-featured">
<div class="plan-badge">Am beliebtesten</div>
<div class="plan-header">
<h3>Profi</h3>
<p class="plan-desc">Für wachsende Unternehmen</p>
</div>
<div class="plan-price">
<span class="price-amount" data-monthly="$49" data-yearly="$39">$49</span>
<span class="price-period">/Monat</span>
</div>
<ul class="plan-features">
<li class="feature-included">✓ 500 Sendungen/Monat</li>
<li class="feature-included">✓ Echtzeit-Tracking</li>
<li class="feature-included">✓ Prioritärer Support</li>
<li class="feature-included">✓ API-Zugriff</li>
<li class="feature-included">✓ Dashboard-Analysen</li>
</ul>
<button class="btn btn-primary btn-lg btn-full">Jetzt starten</button>
</div>
<!-- Enterprise -->
<div class="plan-card">
<div class="plan-header">
<h3>Unternehmen</h3>
<p class="plan-desc">Individuelle Lösung</p>
</div>
<div class="plan-price">
<span class="price-amount">Individuell</span>
</div>
<ul class="plan-features">
<li class="feature-included">✓ Unbegrenzte Sendungen</li>
<li class="feature-included">✓ Dedizierter Account Manager</li>
<li class="feature-included">✓ Garantierte SLA</li>
<li class="feature-included">✓ Individuelle Integration</li>
<li class="feature-included">✓ Firmenabrechnung</li>
</ul>
<button class="btn btn-secondary btn-lg btn-full">Vertrieb kontaktieren</button>
</div>
</div>
<!-- Garantie -->
<div class="guarantee">
<span class="guarantee-icon">🛡️</span>
<p>30-tägige Zufriedenheitsgarantie. Wenn du nicht zufrieden bist, bekommst du dein Geld zurück.</p>
</div>
</div>
</section>
.plans-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
max-width: 1100px;
margin: var(--space-12) auto;
}
.plan-card {
background: var(--color-surface);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-xl);
padding: var(--space-8);
position: relative;
transition: all var(--duration-normal) var(--ease-out);
}
.plan-featured {
border-color: var(--color-primary);
box-shadow: 0 0 0 1px var(--color-primary), var(--shadow-xl);
transform: scale(1.05);
}
.plan-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--color-primary);
color: white;
padding: var(--space-1) var(--space-4);
border-radius: var(--radius-full);
font-size: var(--text-sm);
font-weight: 600;
}
.price-amount {
font-family: var(--font-display);
font-size: var(--text-5xl);
font-weight: 800;
color: var(--color-text);
}
.plan-features {
list-style: none;
padding: 0;
margin: var(--space-8) 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.feature-included {
color: var(--color-text);
}
.feature-excluded {
color: var(--color-text-muted);
text-decoration: line-through;
}
.btn-full {
width: 100%;
}
@media (max-width: 768px) {
.plans-grid {
grid-template-columns: 1fr;
}
.plan-featured {
transform: none;
order: -1;
}
}
FAQ-Bereich
<section class="faq">
<div class="container">
<h2>Häufig gestellte Fragen</h2>
<div class="faq-grid">
<details class="faq-item">
<summary class="faq-question">
Wie lange dauert die Lieferung?
<svg class="faq-arrow"><!-- Chevron --></svg>
</summary>
<div class="faq-answer">
<p>Unsere durchschnittliche Lieferzeit beträgt 24-48 Stunden
für Hauptstädte und 48-72 Stunden für ländliche Gebiete.</p>
</div>
</details>
<!-- Weitere Einträge... -->
</div>
</div>
</section>
.faq-item {
border-bottom: 1px solid var(--color-border-subtle);
}
.faq-question {
padding: var(--space-5) 0;
cursor: pointer;
font-size: var(--text-lg);
font-weight: 600;
display: flex;
justify-content: space-between;
align-items: center;
list-style: none;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-arrow {
transition: transform var(--duration-normal) var(--ease-out);
}
details[open] .faq-arrow {
transform: rotate(180deg);
}
.faq-answer {
padding-bottom: var(--space-5);
color: var(--color-text-secondary);
line-height: var(--leading-relaxed);
animation: slideDown 0.3s var(--ease-out);
}
@keyframes slideDown {
from { opacity: 0; max-height: 0; }
to { opacity: 1; max-height: 200px; }
}
Copywriting-Formeln
Hero-Headline (PAS: Problem → Agitieren → Lösung)
FORMEL: [Gewünschtes Ergebnis] + [in bestimmter Zeit] + [ohne Haupteinwand]
BEISPIELE:
✅ "Versende Pakete in ganz Ecuador ab $2.50 — Lieferung in 24h"
✅ "Starte deinen Online-Shop in 48 Stunden ohne Programmierkenntnisse"
✅ "Verdopple deine Verkäufe in 30 Tagen mit automatischem E-Mail-Marketing"
❌ "Die beste Versandplattform" (allgemein, ohne Nutzen)
❌ "Innovative Logistiklösungen" (leeres Unternehmensdeutsch)
Feature-Bulletpoints (FAB: Feature → Advantage → Benefit)
FORMEL: [Aktionsverb] + [was es tut] + [warum es wichtig ist]
BEISPIELE:
✅ "Verfolge jedes Paket in Echtzeit — verliere nie eine Sendung"
✅ "Zahlung bei Lieferung — deine Kunden zahlen beim Erhalt"
✅ "Integriere deinen Shop in 5 Minuten — ohne Code, ohne Komplikationen"
CTA-Buttons
FORMEL: [Verb] + [Nutzen] + [kein Risiko/Bedingung]
BEISPIELE:
✅ "Kostenlosen Versand berechnen — keine Kreditkarte nötig"
✅ "Kostenloses Konto erstellen — 30 Tage testen"
✅ "Demo anfordern — in unter 2 Minuten"
Best Practices
- Teste eins nach dem anderen: Ändere immer nur ein Element pro A/B-Test, um zu wissen, was funktioniert hat.
- Mobil zuerst: Über 60 % des Traffics kommt von mobilen Geräten. Optimiere für kleine Bildschirme.
- Ladegeschwindigkeit: Jede Sekunde Verzögerung reduziert die Konversion um 7 %. Verwende Bildoptimierung und Lazy Loading.
- Klarheit schlägt Überzeugung: Die Leute kaufen nicht das beste Produkt, sondern das, das sie am schnellsten verstehen.
- Erwartungen übertreffen: Verspreche nicht zu viel. Besser weniger versprechen und mehr liefern.
Nützliche Tools
| Tool | Verwendung |
|---|---|
| Hotjar | Heatmaps & Benutzersitzungen ansehen |
| Google Optimize | A/B-Tests ohne Code |
| Copy.ai | KI-Copywriting für Landingpages |
| Unbounce | Landingpage-Builder mit Drag & Drop |
| GTmetrix | Geschwindigkeitsanalyse & Optimierung |