HubSpot CMS: Landing Pages erstellen, die konvertieren

Einleitung: Warum Landing Pages im Inbound Marketing entscheidend sind

Du investierst Zeit, Geld und Energie in Content Marketing, SEO und bezahlte Anzeigen. Du bringst Besucher auf deine Website. Aber was passiert dann? Wenn du keinen klaren Conversion-Pfad hast, verpufft dein gesamter Traffic wirkungslos. Genau hier kommen Landing Pages ins Spiel – und genau hier trennt sich die Spreu vom Weizen im Inbound Marketing.

Eine Landing Page ist keine normale Unterseite deiner Website. Sie hat genau ein Ziel: den Besucher zu einer bestimmten Aktion zu bewegen. Das kann ein Formular-Download sein, eine Newsletter-Anmeldung, eine Demo-Anfrage oder die Registrierung für ein Webinar. Alles auf der Seite – vom Headline-Text über die Bilder bis zum Button – ist auf dieses eine Ziel ausgerichtet. Keine Navigation, die ablenkt. Kein Footer mit zwanzig Links. Fokus pur.

Die Zahlen sprechen eine klare Sprache: Unternehmen mit 30 oder mehr Landing Pages generieren laut HubSpot sieben Mal mehr Leads als Unternehmen mit weniger als zehn. Trotzdem sehe ich in der Praxis immer wieder, dass Unternehmen entweder gar keine dedizierten Landing Pages haben oder sie so schlecht umsetzen, dass die Conversion Rate im Keller ist. Eine Landing Page mit 2 Prozent Conversion Rate bei 1.000 Besuchern bringt dir 20 Leads. Optimierst du sie auf 5 Prozent, sind es 50 Leads – bei exakt gleichem Traffic. Das ist der Unterschied zwischen "läuft ganz okay" und "läuft richtig gut".

HubSpot CMS bietet dir alles, was du brauchst, um Landing Pages zu erstellen, zu testen und zu optimieren – direkt integriert in dein CRM, dein E-Mail-Marketing und deine Automatisierungen. In diesem Guide zeige ich dir, wie du das volle Potenzial ausschöpfst.

HubSpot CMS vs. externe CMS-Lösungen

Bevor wir in die praktische Umsetzung einsteigen, lass uns kurz klären, warum HubSpot CMS für Landing Pages so gut geeignet ist – und wo es möglicherweise an seine Grenzen stößt.

Die Vorteile von HubSpot CMS für Landing Pages

Der größte Vorteil liegt in der Integration. Wenn du HubSpot als CRM und Marketing-Plattform nutzt, ist das CMS nahtlos eingebunden. Das bedeutet konkret:

• Formulare sind direkt verknüpft: Jeder Lead, der ein Formular auf deiner Landing Page ausfüllt, landet automatisch als Kontakt in deinem HubSpot CRM. Keine Zapier-Anbindung, keine CSV-Importe, keine Datenverluste. Der Kontakt ist sofort da – mit allen Informationen, die er im Formular angegeben hat.
• Automatisierungen starten sofort: Du kannst direkt nach der Formular-Einreichung einen Workflow triggern. Follow-up-E-Mail nach 5 Minuten? Automatisch. Lead-Scoring aktualisieren? Automatisch. Vertriebs-Notification an den zuständigen Sales Rep? Automatisch.
• Analytics ohne Zusatz-Tools: Du siehst direkt in HubSpot, wie viele Besucher deine Landing Page hatte, wie viele das Formular ausgefüllt haben, woher der Traffic kam und wie die Conversion Rate im Zeitverlauf aussieht. Kein Google Analytics nötig (obwohl du es natürlich zusätzlich nutzen kannst).
• Smart Content: Mit HubSpot kannst du den Inhalt deiner Landing Page personalisieren – basierend auf dem Lifecycle Stage, dem Land, der Gerätetyp oder der Liste, in der sich der Kontakt befindet. Dazu gleich mehr.

Wo HubSpot CMS an Grenzen stößt

HubSpot CMS ist kein WordPress. Wenn du extrem individuelle Designs brauchst, die über die Template-Möglichkeiten hinausgehen, wirst du an Grenzen stoßen – oder einen HubSpot-Entwickler brauchen, der mit HubL (der Template-Sprache von HubSpot) arbeitet. Auch bei sehr komplexen Multi-Step-Formularen oder interaktiven Elementen wie Kalkulatoren brauchst du eventuell Custom-Module oder externe Tools.

Für die meisten B2B-Unternehmen und KMU sind die Bordmittel von HubSpot aber mehr als ausreichend. Und die Zeitersparnis durch die Integration wiegt die Design-Einschränkungen in aller Regel mehr als auf.

Landing Page im Drag-and-Drop-Editor erstellen

Jetzt wird es praktisch. So erstellst du deine erste Landing Page in HubSpot – Schritt für Schritt.

Neue Landing Page anlegen

Gehe in deinem HubSpot-Account zu Marketing > Landing Pages und klicke auf "Erstellen" oben rechts. HubSpot fragt dich, ob du eine Landing Page oder eine Website-Seite erstellen willst. Wähle "Landing Page". Der Unterschied: Landing Pages haben standardmäßig keine Navigation und keinen Footer – genau so, wie es sein soll.

Der Drag-and-Drop-Editor im Detail

Nach der Template-Auswahl (dazu gleich mehr) landest du im Drag-and-Drop-Editor. Hier baust du deine Seite zusammen, ohne eine Zeile Code schreiben zu müssen. Der Editor funktioniert nach einem einfachen Prinzip: Links siehst du die verfügbaren Module, in der Mitte die Vorschau deiner Seite, und rechts die Einstellungen des aktuell ausgewählten Moduls.

Die wichtigsten Module, die du kennen solltest:

• Rich-Text-Modul: Für Texte, Überschriften, Listen und einfache Formatierungen. Das ist dein Arbeitspferd für den Content-Bereich.
• Bild-Modul: Für Hero-Bilder, Produktbilder oder Icons. Du kannst Bilder direkt aus dem HubSpot File Manager einfügen oder neue hochladen.
• Formular-Modul: Das Herzstück jeder Landing Page. Hier bindest du dein HubSpot-Formular ein. Mehr dazu im Abschnitt über Formulare.
• Video-Modul: Für eingebettete Videos von YouTube, Vimeo oder aus dem HubSpot Video-Hosting.
• Button-Modul (CTA): Für Buttons mit direkter Verlinkung oder CTA-Einbettung.
• Abschnitt (Section): Sections sind die Grundbausteine deines Layouts. Jede Section kann ein eigenes Hintergrundbild, eine Hintergrundfarbe und ein individuelles Padding haben. Du strukturierst deine Seite, indem du Sections übereinander stapelst und Module darin platzierst.

Der Editor unterstützt Spalten-Layouts. Du kannst eine Section in bis zu vier Spalten aufteilen – perfekt für Layouts wie "Text links, Formular rechts" oder "Drei Vorteile nebeneinander". Die Spaltenbreiten lassen sich per Drag stufenlos anpassen.

Templates auswählen und anpassen

Bevor du im Editor landest, musst du ein Template auswählen. HubSpot bietet dir drei Optionen:

Marketplace-Templates

Im HubSpot Asset Marketplace findest du hunderte vorgefertigte Landing-Page-Templates – kostenlos und kostenpflichtig. Die kostenlosen Templates sind ein guter Startpunkt, haben aber oft ein generisches Design. Kostenpflichtige Templates von Drittanbietern sind in der Regel professioneller und bieten mehr Anpassungsmöglichkeiten. Preislich liegst du zwischen 20 und 200 Euro pro Template.

Starter-Templates von HubSpot

HubSpot liefert eigene Starter-Templates mit, die direkt einsatzbereit sind. Sie sind sauber gebaut, responsive und decken die gängigsten Use Cases ab: Lead-Generierung, Event-Registrierung, Webinar-Anmeldung, Produkt-Launch. Für den Anfang sind diese Templates absolut ausreichend.

Custom Templates

Wenn du ein bestehendes Corporate Design hast und deine Landing Pages exakt daran anpassen willst, brauchst du Custom Templates. Diese werden im Design Manager von HubSpot erstellt – entweder visuell mit dem Layout Editor oder per Code mit HubL und CSS. Custom Templates erfordern entweder HubSpot-Entwicklerkenntnisse oder einen spezialisierten Dienstleister.

Mein Rat: Starte mit einem Starter-Template oder einem guten Marketplace-Template. Passe Farben, Schriften und Logo an dein Branding an. Das geht direkt im Editor über die Theme-Einstellungen und dauert keine 15 Minuten. Ein perfektes Custom Template kannst du später immer noch erstellen lassen – wenn du weißt, was funktioniert und was nicht.

Formulare einbinden und Thank-You-Pages einrichten

Das Formular ist der zentrale Conversion-Punkt deiner Landing Page. Hier entscheidet sich, ob ein Besucher zum Lead wird oder wieder abspringt. Deshalb verdient dieser Abschnitt besondere Aufmerksamkeit.

Formular erstellen und konfigurieren

Gehe zu Marketing > Formulare und erstelle ein neues Formular. HubSpot unterscheidet zwischen verschiedenen Formulartypen – für Landing Pages brauchst du ein "Eingebettetes Formular" (im Gegensatz zu Pop-up-Formularen oder eigenständigen Seiten).

Die wichtigste Regel bei Formularen: So wenig Felder wie möglich, so viele wie nötig. Jedes zusätzliche Feld senkt deine Conversion Rate. Für einen Whitepaper-Download reichen in der Regel Vorname, Nachname und E-Mail-Adresse. Für eine Demo-Anfrage brauchst du vielleicht zusätzlich den Firmennamen und die Telefonnummer. Aber frag dich bei jedem Feld: Brauche ich diese Information wirklich jetzt, oder kann ich sie später über Progressive Profiling oder im Vertriebsgespräch erheben?

Progressive Profiling nutzen

Progressive Profiling ist eine der cleversten Funktionen von HubSpot. Statt einem Kontakt bei jedem Formular-Ausfüllen die gleichen Felder anzuzeigen, zeigt HubSpot nur die Felder, die für diesen Kontakt noch nicht ausgefüllt sind. Beim ersten Besuch fragt das Formular nach Name und E-Mail. Beim zweiten Download werden automatisch andere Felder angezeigt – zum Beispiel Firma und Position. So sammelst du über mehrere Touchpoints hinweg ein vollständiges Kontaktprofil, ohne den Besucher beim ersten Kontakt mit einem zehn-Felder-Formular abzuschrecken.

Um Progressive Profiling zu aktivieren, gehst du in den Formular-Editor, klickst auf das Feld, das du queuen willst, und aktivierst die Option "Nur anzeigen, wenn dieses Feld unbekannt ist". Dann fügst du unter "Queued Progressive Fields" die zusätzlichen Felder hinzu, die nach und nach abgefragt werden sollen.

Thank-You-Page einrichten

Was passiert, nachdem jemand dein Formular ausgefüllt hat? Bitte nicht einfach eine kurze "Danke"-Nachricht einblenden und den Besucher dann im Regen stehen lassen. Die Thank-You-Page ist eine eigenständige Seite, die nach der Formular-Einreichung angezeigt wird – und sie ist eine enorme Chance.

Eine gute Thank-You-Page macht drei Dinge:

• Bestätigung: Sie bestätigt, dass die Anfrage eingegangen ist und der Download bereitsteht (idealerweise als direkter Download-Link auf der Seite).
• Nächster Schritt: Sie zeigt dem Lead den nächsten logischen Schritt in der Customer Journey. Hat er ein Whitepaper heruntergeladen? Biete ihm ein weiterführendes Webinar an. Hat sie sich für eine Demo angemeldet? Erkläre, was als Nächstes passiert.
• Navigation wiederherstellen: Im Gegensatz zur Landing Page sollte die Thank-You-Page die Website-Navigation enthalten. Der Lead hat konvertiert – jetzt darf er sich gerne weiter auf deiner Website umsehen.

In HubSpot konfigurierst du die Thank-You-Page direkt im Formular unter "Optionen" > "Was soll passieren, nachdem ein Formular gesendet wurde?". Du kannst entweder eine Inline-Nachricht anzeigen lassen (nicht empfohlen) oder auf eine dedizierte Thank-You-Page weiterleiten (empfohlen).

Smart Content: Personalisierte Inhalte

Smart Content ist eine der Funktionen, die HubSpot CMS von den meisten anderen Landing-Page-Tools unterscheidet. Damit kannst du den Inhalt deiner Landing Page dynamisch anpassen – je nachdem, wer sie besucht.

Wie Smart Content funktioniert

Smart Content basiert auf Regeln. Du definierst Bedingungen, und HubSpot zeigt je nach Bedingung unterschiedliche Inhalte an. Die verfügbaren Kriterien sind:

• Land: Basierend auf der IP-Adresse des Besuchers. Praktisch, wenn du verschiedene Angebote für verschiedene Märkte hast.
• Gerätetyp: Desktop vs. Mobile. Du könntest auf mobilen Geräten eine kürzere Headline und weniger Text anzeigen.
• Referral Source: Woher kommt der Besucher? Organische Suche, Social Media, E-Mail, Direct? Du kannst die Ansprache je nach Quelle anpassen.
• Lifecycle Stage: Ist der Besucher ein neuer Lead, ein Marketing Qualified Lead oder bereits ein Kunde? Zeige dem neuen Besucher ein Einsteiger-Angebot und dem bestehenden Kunden ein Premium-Angebot.
• Listenmitgliedschaft: Gehört der Kontakt zu einer bestimmten HubSpot-Liste? Dann zeige ihm maßgeschneiderten Content.
• Preferred Language: Basierend auf der im Browser eingestellten Sprache des Besuchers.

Praxisbeispiel für Smart Content

Nehmen wir an, du bietest ein Whitepaper zum Thema "CRM-Auswahl" an. Ein neuer Besucher sieht die Standard-Headline: "Kostenloses Whitepaper: In 5 Schritten zum passenden CRM". Ein bestehender Kontakt, der bereits in deinem CRM als Lead gespeichert ist, sieht stattdessen: "Dein nächster Schritt: Lade unser Whitepaper zur CRM-Auswahl herunter – exklusiv mit Bonus-Checkliste". Und ein bestehender Kunde sieht: "Du suchst eine Erweiterung für dein bestehendes CRM? Sprich mit uns."

Um Smart Content zu aktivieren, klickst du im Editor auf ein Modul und wählst "Smart-Regel hinzufügen". Dann definierst du die Bedingung und den alternativen Inhalt. Die Standard-Version bleibt als Fallback für alle Besucher, die keiner Regel entsprechen.

A/B-Tests für Landing Pages

Du glaubst, deine Landing Page ist perfekt? Vielleicht ist sie es. Wahrscheinlich nicht. A/B-Testing ist der einzige Weg, um herauszufinden, was wirklich funktioniert – nicht was du denkst, dass es funktioniert.

A/B-Test in HubSpot einrichten

HubSpot macht A/B-Testing erfreulich einfach. Öffne deine Landing Page im Editor, klicke oben auf "Datei" > "A/B-Test durchführen". HubSpot erstellt eine exakte Kopie deiner Seite – die Variante B. Jetzt kannst du Variante B verändern, während Variante A unverändert bleibt.

HubSpot teilt den eingehenden Traffic automatisch 50/50 auf beide Varianten auf. Beide Varianten haben die gleiche URL – der Besucher merkt nicht, dass er an einem Test teilnimmt. Nach einer statistisch signifikanten Menge an Daten zeigt dir HubSpot, welche Variante besser performt.

Was du testen solltest

Der häufigste Fehler bei A/B-Tests: zu viel auf einmal ändern. Wenn du gleichzeitig die Headline, das Bild, die Formularfelder und die Button-Farbe änderst, weißt du am Ende nicht, welche Änderung den Unterschied gemacht hat. Teste immer nur eine Variable pro Test.

Die Elemente mit dem größten Einfluss auf die Conversion Rate sind (in dieser Reihenfolge):

• Headline: Das ist das erste, was der Besucher sieht. Eine bessere Headline kann die Conversion Rate um 20 bis 30 Prozent steigern. Teste verschiedene Formulierungen: nutzenorientiert vs. problemorientiert, mit Zahlen vs. ohne, kurz vs. lang.
• CTA-Button: Text, Farbe, Größe und Position des Buttons. "Jetzt herunterladen" vs. "Whitepaper sichern" vs. "Kostenlosen Guide erhalten". Teste es.
• Formular-Länge: Drei Felder vs. fünf Felder. Weniger Felder bedeutet normalerweise mehr Conversions, aber weniger qualifizierte Leads. Finde die richtige Balance für dein Angebot.
• Hero-Bild: Mit Bild vs. ohne Bild. Produktbild vs. Personenbild. Stock-Foto vs. echtes Foto.
• Social Proof: Mit Testimonial vs. ohne. Mit Kundenlogos vs. ohne. Mit konkreten Zahlen vs. ohne.

Praxisbeispiel: Lead-Magnet-Landing-Page für Whitepaper

Genug Theorie. Lass uns eine konkrete Landing Page Schritt für Schritt aufbauen. Unser Szenario: Du willst ein Whitepaper zum Thema "Digitalisierung im Mittelstand" als Lead-Magnet anbieten.

Struktur und Aufbau

Hero-Section: Die Headline lautet: "Kostenloses Whitepaper: Digitalisierung im Mittelstand – 7 Schritte, die wirklich funktionieren". Darunter zwei bis drei Bulletpoints, die den konkreten Nutzen beschreiben: "Erfahre, welche Prozesse du zuerst digitalisieren solltest", "Lerne aus den Fehlern anderer KMU", "Inklusive Checkliste und ROI-Rechner". Rechts neben dem Text: ein Mockup des Whitepapers als Bild. Unter den Bulletpoints: ein Button "Jetzt kostenlos herunterladen", der zum Formular-Abschnitt weiter unten scrollt.

Nutzen-Section: Drei Spalten mit Icons und kurzem Text. Spalte 1: "Praxisnah – Keine Theorie, sondern echte Fallbeispiele aus dem Mittelstand." Spalte 2: "Sofort umsetzbar – Konkrete Schritte, die du morgen starten kannst." Spalte 3: "Zeitsparend – In 30 Minuten gelesen, spart dir Wochen an Recherche."

Social-Proof-Section: Kundenlogos oder ein kurzes Testimonial. Zum Beispiel: "Durch die Checkliste aus dem Whitepaper haben wir unseren Digitalisierungsprozess um drei Monate beschleunigt. – M. Schmidt, Geschäftsführer XYZ GmbH".

Formular-Section: Links eine Zusammenfassung der Whitepaper-Inhalte (Inhaltsverzeichnis als Bulletpoints). Rechts das Formular mit drei Feldern: Vorname, E-Mail-Adresse, Unternehmen. Der Submit-Button: "Whitepaper jetzt herunterladen". Unter dem Button ein kurzer Datenschutz-Hinweis mit Link zur Datenschutzerklärung.

Abschluss-Section: Ein kurzer Satz wie "Über 500 Unternehmen haben dieses Whitepaper bereits heruntergeladen" als letzter Trust-Indikator.

Die häufigsten Fehler bei Whitepaper-Landing-Pages

In meiner Arbeit mit KMU sehe ich immer wieder die gleichen Fehler:

• Zu viel Text: Die Landing Page ist kein Blogartikel. Halte dich kurz und prägnant. Bulletpoints statt Fließtext.
• Kein Bild des Whitepapers: Menschen wollen sehen, was sie bekommen. Ein einfaches Mockup des Whitepapers (Cover als 3D-Buch-Darstellung) steigert die Conversion Rate messbar.
• Navigation bleibt aktiv: Wenn du eine Landing Page in HubSpot erstellst, wird die Navigation automatisch ausgeblendet. Aber manche Templates fügen sie wieder ein. Prüfe das unbedingt – jeder Navigationslink ist ein potenzieller Exit-Punkt.
• Kein Mobile-Optimierung: Mehr als die Hälfte deiner Besucher kommt über mobile Geräte. Prüfe deine Landing Page auf dem Smartphone. Ist der Button groß genug? Passt das Formular auf den Screen? Ist der Text lesbar?
• Fehlende Thank-You-Page: Nach dem Ausfüllen des Formulars nur eine Inline-Nachricht anzuzeigen ist eine verpasste Chance. Erstelle eine dedizierte Thank-You-Page mit dem Download-Link und einem weiterführenden Angebot.

SEO-Optimierung und Performance

Landing Pages, die über bezahlte Anzeigen beworben werden, brauchen nicht unbedingt SEO. Aber wenn du organischen Traffic auf deine Landing Pages bringen willst – und das solltest du, denn organischer Traffic ist kostenlos und nachhaltig – dann brauchst du eine saubere SEO-Grundlage.

On-Page-SEO für Landing Pages

HubSpot bietet dir in den Seiteneinstellungen alle wichtigen SEO-Felder:

• Page Title: Unter "Einstellungen" > "SEO" findest du das Title-Tag. Formuliere einen klaren, keywordhaltigen Titel mit maximal 60 Zeichen. Beispiel: "Whitepaper Digitalisierung Mittelstand | Kostenloser Download".
• Meta Description: Die Meta Description sollte den Nutzen klar kommunizieren und zum Klicken animieren. Maximal 155 Zeichen. Beispiel: "Kostenlos herunterladen: 7 praxiserprobte Schritte zur Digitalisierung im Mittelstand. Inklusive Checkliste und ROI-Rechner."
• URL-Slug: Halte den Slug kurz und deskriptiv. Beispiel: "/whitepaper-digitalisierung-mittelstand" statt "/landing-page-1-final-v2".
• H1-Tag: Deine Hauptüberschrift ist automatisch die H1. Achte darauf, dass sie dein Haupt-Keyword enthält, aber trotzdem natürlich klingt und den Nutzen kommuniziert.
• Alt-Texte: Vergib für alle Bilder aussagekräftige Alt-Texte. Das hilft nicht nur der SEO, sondern auch der Barrierefreiheit.

Ladezeit und Core Web Vitals

Die Ladezeit deiner Landing Page beeinflusst sowohl die Conversion Rate als auch das SEO-Ranking. Jede Sekunde zusätzliche Ladezeit kann die Conversion Rate um bis zu 7 Prozent senken. HubSpot CMS ist auf Performance ausgelegt – das CDN und die Bildkomprimierung sind automatisch aktiv. Trotzdem solltest du ein paar Dinge beachten:

• Bilder optimieren: Lade keine 5-MB-Bilder hoch. Komprimiere sie vorher mit Tools wie TinyPNG auf unter 200 KB. Nutze das WebP-Format, wenn möglich.
• Videos extern hosten: Binde Videos über YouTube oder Vimeo ein, statt sie direkt in HubSpot hochzuladen. Das spart Ladezeit.
• Custom Code minimieren: Wenn du Custom CSS oder JavaScript verwendest, halte es schlank. Jedes zusätzliche Script ist ein potenzieller Ladezeit-Killer.
• Lazy Loading: HubSpot lädt Bilder unterhalb des sichtbaren Bereichs automatisch per Lazy Loading. Stelle sicher, dass dein Hero-Bild (Above the Fold) aber sofort geladen wird.

Nutze den integrierten SEO-Checker in HubSpot, um deine Seite vor der Veröffentlichung zu prüfen. Er zeigt dir fehlende Alt-Texte, zu lange Title-Tags und andere gängige Fehler an. Kein Ersatz für eine echte SEO-Strategie, aber ein guter Schnellcheck.

Fazit: Landing Pages sind kein Projekt, sondern ein Prozess

Wenn du die Schritte in diesem Guide umsetzt, hast du eine solide Grundlage für effektive Landing Pages in HubSpot CMS. Aber vergiss nicht: Eine Landing Page ist nie "fertig". Die besten Marketing-Teams veröffentlichen eine Landing Page, analysieren die Performance nach zwei Wochen, starten einen A/B-Test, optimieren, analysieren erneut – in einem kontinuierlichen Zyklus.

Der Schlüssel liegt nicht darin, die perfekte Landing Page zu bauen. Der Schlüssel liegt darin, schnell eine gute Landing Page live zu bringen und sie dann systematisch zu verbessern. HubSpot CMS gibt dir alle Werkzeuge an die Hand, die du dafür brauchst. Nutze sie.

Und denk daran: Die Landing Page ist nur ein Baustein in deinem Inbound-Marketing-System. Sie funktioniert am besten im Zusammenspiel mit durchdachtem Content, zielgerichteten Anzeigen, automatisierten Follow-up-Workflows und einem CRM, das deine Leads sauber verwaltet. Wenn du diese Bausteine zusammenbringst, wird aus einzelnen Landing Pages eine Lead-Generierungs-Maschine.