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: April 29, 2020

Produkte/Lizenzen

Marketing Hub  Starter, Professional, Enterprise
CMS Hub  Professional, Enterprise
Ehemaliges Marketing Hub Basic

Mit einer Starter-Vorlage können Sie schnell und einfach eine Landing-Page erstellen, um Ihren Website-Besuchern ein Content-Angebot zu präsentieren. Sie erfassen die Kontaktdaten eines Besuchers und senden Sie ihm dann eine Follow-up-E-Mail, um Ihr Content-Angebot zu übermitteln. Erfahren Sie, wie Sie eine Landing-Page einrichten und Ihr Seitendesign in einer Starter-Vorlage anpassen.

Bitte beachten: Um in einem Video-Tutorial zu erfahren, wie Sie eine Landing-Page mit einer Starter-Vorlage erstellen, sehen Sie sich diese 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“.
  • Bewegen Sie den Mauszeiger über eine beliebige Vorlage mit einem Starter-Tag 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“.

Content in einem Drag-&-Drop-Bereich 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 der 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 Schriftfarbe 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 Ihre Schriftfarbe zu ändern.
    • 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.

Nächste Schritte

Da Sie nun bereit sind, Ihre Landing-Page mit anderen zu teilen, gehen Sie folgendermaßen vor:

/de/landing-pages/edit-a-page-using-a-starter-template