Hinweis: Dieser Artikel wird aus Kulanz zur Verfügung gestellt. Er wurde automatisch mit einer Software übersetzt und unter Umständen nicht korrekturgelesen. Die englischsprachige Fassung gilt als offizielle Version und Sie können dort die aktuellsten Informationen finden. Hier können Sie darauf zugreifen.
Landing Pages

Landing-Page mit einer Starter-Vorlage erstellen

Zuletzt aktualisiert am: November 23, 2020

Produkte/Lizenzen

Alle

Mit einer Starter-Vorlage können Sie schnell und einfach eine Landing-Page erstellen, um Ihren Website-Besuchern ein Content-Angebot zu präsentieren. In diesem Artikel erfahren Sie, wie Sie eine neue Landing-Page erstellen, Ihr Seitendesign anpassen und Ihre Seite veröffentlichen.

 Bitte beachten: Starter-Vorlagen unterstützen nicht Smart Content, benutzerdefinierte Module, Personalisierung oder Zugriff auf Quellcode in Rich-Text-Modulen. Diese Vorlagen unterstützen ebenfalls nicht erweiterte Optionen wie das Wechseln zu einer anderen Vorlage und den Zugriff auf Header-HTML.

Um in einem Video-Tutorial zu erfahren, wie Sie eine Landing-Page erstellen und veröffentlichen, sehen Sie sich diese kostenlose Lektion der HubSpot Academy an.

Bevor Sie loslegen

Landing-Page mit einer Starter-Vorlage erstellen

So erstellen Sie eine neue Landing-Page mit einer Starter-Vorlage:

  • Gehen Sie in Ihrem HubSpot-Account zu Marketing > Website > Landing-Pages.
  • Klicken Sie oben rechts auf „Erstellen“ > „Landing-Page“.
  • Klicken Sie im Menü der Seitenleiste links auf „Alle Ihre Vorlagen“.
  • Klicken Sie oben auf das Dropdown-Menü „Nach Quelle filtern“ und wählen Sie „Starter“ aus.
  • Bewegen Sie den Mauszeiger über eine Vorlage und klicken Sie oben rechts auf „Vorschau“.

starter-template-create-page

  • Um eine Seite mit dieser Vorlage zu erstellen, klicken Sie oben rechts auf „Vorlage verwenden“.

Seiteninhalte bearbeiten

Starter-Vorlagen enthalten Module, die Blöcke an Website-Content darstellen. Diese Module können in horizontalen Zeilen oder in vertikalen Spalten angeordnet werden.

Zeilen und Spalten können in Elementbereiche gruppiert werden. Indem Sie Elemente zusammen gruppieren, können Sie Hintergrundstile auf einen ganzen Bereich Ihrer Seite anwenden. Sie können diese Elemente auch per Drag-&-Drop an die gewünschte Position ziehen, um das Layout Ihrer Landing-Page neu anzuordnen.

Erfahren Sie mehr darüber, wie Sie Seiten-Content in einem Drag-&-Drop-Bereich bearbeiten.

Schriftarten, Farben und Schaltflächen anpassen

Um die Standardstile für Ihre Start-Vorlage anzupassen, klicken Sie im linken Bereich auf die Registerkarte „Design“. Sie können auch die Hintergrundfarbe oder das Hintergrundbild für eine bestimmte Zeile, eine bestimmte Spalte oder einen bestimmten Abschnitt Ihrer Seite anpassen.

edit-starter-theme-on-page

Typografie

Bearbeiten Sie im Abschnitt „Typografie“ die Schriftarten und Schriftstile für den Text und die Überschriften auf Ihrer Seite. Es werden nur Google-Schriftarten unterstützt.
  • Haupttext: Passen Sie die Schriftart, die Schriftgröße und die Schriftfarben für den Hauptteil Ihrer Seite an:
    • Klicken Sie auf das Dropdown-Menü „Haupttext“, um eine Schriftart auszuwählen.
    • Klicken Sie auf die Pfeiltasten, um die Schriftgröße auszuwählen.
    • Klicken Sie auf das Farbfeld, um eine Farbe für Ihre Schriftart auszuwählen. Um eine benutzerdefinierte Farbe festzulegen, klicken Sie auf die Registerkarte „Erweitert“ und geben Sie einen Hexadezimal-Wert ein.
  • Überschriften: Passen Sie die Schriftart und Farbe für jeden Text in Ihren Modulen mit einem Heading-Tag an.
    • Klicken Sie auf das Dropdown-Menü „Überschriften“, um eine Schriftart auszuwählen.
    • Klicken Sie auf das Farbfeld, um eine Schriftfarbe auszuwählen.
  • Link-Text: Passen Sie die Schriftarten und Farben für Links auf Ihrer Seite an.
    • Klicken Sie auf das Dropdown-Menü „Link-Text“, um eine Schriftart auszuwählen.
    • Klicken Sie auf das Farbfeld, um eine Link-Farbe auszuwählen.
    • Klicken Sie auf die Styling-Schaltflächen oder das Dropdown-Menü, um die Stile für Ihren Link-Text auszuwählen. Dies umfasst auch die Option, ob Ihre Links auf der Seite unterstrichen angezeigt werden sollen.
    • Um anzupassen, wie Links dargestellt werden, wenn Besucher mit Ihrer Seite interagieren, können Sie die Link-Farbe und -Transparenz ändern.
      • Farbe des Links beim Daraufzeigen: Passen Sie die Farbe und Transparenz von Link-Text an, wenn ein Besucher den Mauszeiger auf Links auf Ihrer Seite bewegt.
      • Farbe des aktiven Links: Passen Sie die Farbe und Transparenz von Link-Text an, bevor der Link angeklickt wird.
      • Farbe des besuchten Links: Passen Sie die Farbe und Transparenz von Link-Text an, nachdem ein Besucher den Link angeklickt hat.

Buttons

Passen Sie im Abschnitt „Schaltflächen“ die Art und Weise an, wie einfache Schaltflächen und Schaltflächen zur Formulareinsendung auf der Seite mit Stilen formatiert sind.
  • Button-Hintergrundfarbe: Passen Sie die Farbe für den Hintergrund Ihrer Schaltflächen an.
    • Geben Sie einen Hexadezimal-Wert ein oder klicken Sie auf das Farbfeld, um eine Farbe auszuwählen.
    • Geben Sie einen Prozentwert ein oder klicken Sie auf die Pfeiltasten, um die Transparenz der Hintergrundfarbe Ihrer Schaltflächen festzulegen.
  • Button-Textfarbe: Die Farbe für den Text von Schaltflächen auf Ihrer Seite.
    • Geben Sie einen Hexadezimal-Wert ein oder klicken Sie auf das Farbfeld, um eine Farbe für den Text auszuwählen.
    • Geben Sie einen Prozentwert ein oder klicken Sie auf die Pfeiltasten, um die Transparenz der Textfarbe Ihrer Schaltflächen festzulegen.
  • Button-Eckenradius: Passen Sie die Form Ihrer Formular-Schaltflächen an, indem Sie einen Wert eingeben oder den Schieberegler ziehen. Ein höherer Wert bedeutet, dass die Schaltflächen auf Ihrer Seite abgerundete Ecken aufweisen. Ein Wert von Null bedeutet, dass Ihre Schaltflächen rechteckig sind.

Bitte beachten: Als Best Practice empfiehlt es sich, einheitliche Farben, Schriftarten und Stile basierend auf den Einstellungen der Registerkarte „Design“ zu verwenden.  Wenn Sie aus einem bestimmten Grund die Standardstile für ein spezifisches Element auf Ihrer Seite überschreiben möchten, können Sie auf der Registerkarte „Optionen“ im linken Bereich die Standardstile für ein Modul überschreiben.

Seite für Suchmaschinen optimieren

Klicken Sie oben in der Navigationsleiste auf die Registerkarte „Optimieren“, um das SEO-Tool zu öffnen. Hier können Sie Empfehlungen für das Verbessern der Performance Ihrer Inhalte in Suchmaschinenergebnissen anzeigen.

Seiteneinstellungen bearbeiten

Klicken Sie auf die Registerkarte „Einstellungen“, um Ihre Seitendetails anzupassen.

  • Interner Seitenname: Der Name der internen Seite ist der Name, den Sie beim ersten Erstellen der Seite hinzugefügt haben und auf den im Dashboard verwiesen wird. Für Besucher ist er nicht sichtbar.
  • Seitentitel: Der Titel, der oben in der Registerkarte Ihres Webbrowsers erscheint, wenn die Seite geladen wird.
  • Seiten-URL: Die URL für Ihre Seite erscheint in der URL-Leiste im Browser, wenn Besucher zu dieser Seite navigieren. Sie können das Content-Slug für Ihre Seiten-URL anpassen.
  • Meta-Beschreibung: Der Inhalt, der in den Suchergebnissen unterhalb des Seitentitels angezeigt wird.
  • Feature-Bild: Klicken Sie auf diesen Schalter, um ihn zu aktivieren und damit ein bestimmtes Bild zu präsentieren, wenn Ihre Seite in sozialen Medien geteilt wird. Klicken Sie auf „Hochladen“, um ein Bild aus Ihrem Computer auszuwählen.

Seite in Vorschau anzeigen und veröffentlichen

Bevor Ihre Seite live geht, klicken Sie oben rechts auf „Vorschau“, um zu testen, wie Ihre Seite auf einem Mobilgerät angezeigt wird. Sie können außerdem auch testen, wie Personalisierung oder Smart Content Ihren Besuchern in der Seitenvorschau angezeigt wird.

Um die Darstellung Ihrer Seiteninhalt auf einem Mobilgerät anzupassen, klicken Sie auf das mobile edi„Für Mobilgeräte bearbeiten“-Symbol oben links.

Klicken Sie oben rechts auf „Veröffentlichen”, wenn Sie mit der Vorschau Ihrer Seite zufrieden sind.