Zum Hauptinhalt
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

Eine Seite mit einer Starter-Vorlage erstellen

Zuletzt aktualisiert am: Juni 18, 2021

Produkte/Lizenzen

Alle

Sie können eine Starter-Vorlage verwenden, um eine einfache Website oder Landing-Page zu erstellen. In diesem Artikel erfahren Sie, wie Sie mithilfe einer Starter-Vorlage eine neue Seite erstellen, Ihr Seitendesign anpassen und Ihre Seite veröffentlichen. 

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


Eine Seite 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“ > „Website-Seiten“ oder „Landing-Pages“
  • Klicken Sie oben rechts auf das Dropdown-Menü „Erstellen“ und wählen Sie „Website-Seite“ oder „Landing-Page“. aus. 
  • Klicken Sie im Menü der linken Seitenleiste des Bildschirms zur Auswahl von Vorlagen auf „Alle Ihre Vorlagen“.
  • Um Ihre verfügbaren Starter-Vorlagen anzuzeigen, klicken Sie auf das Dropdown-Menü „Nach Quelle filtern“ und wählen Sie „Starter“ aus. 

select-a-starter-template

  • Bewegen Sie den Mauszeiger über eine Vorlage und klicken Sie dann oben rechts auf „Vorschau“.
  • Um eine Seite mit dieser Vorlage zu erstellen, klicken Sie oben rechts auf „Vorlage verwenden“.
  • Klicken Sie im Dialogfeld auf „Fortfahren“.
  • Geben Sie einen internen Namen für Ihre Seite ein und klicken Sie dann auf „Seite erstellen“

Seiteninhalte bearbeiten

Starter-Vorlagen enthalten Blöcke an Website-Content, die Module genannt werden. Sie können diese Module in horizontalen Zeilen oder in vertikalen Spalten neu anordnen.

Sie können Zeilen und Spalten in Abschnitte von Elementen gruppieren. 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 verschieben, um das Layout Ihrer Seite neu zu gestalten. Erfahren Sie mehr über das Bearbeiten von Seiten-Content in einem Drag-&-Drop-Bereich.

Um das Erscheinungsbild Ihrer Seite auf Mobilgeräten anzupassen, klicken Sie im Seitenleisten-Editor auf das mobile edi„Für Mobilgeräte bearbeiten“-Symbol.

edit-page-for-mobile

Schriftarten, Farben und Schaltflächen anpassen

Um die Standardstile für Ihre Start-Vorlage anzupassen, klicken Sie im Seitenleisten-Editor 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“ und wählen Sie eine Schriftart aus.
    • Klicken Sie auf die Pfeiltasten, um die Schriftgröße anzupassen.
    • Klicken Sie auf die Farbauswahl und wählen Sie eine Farbe für Ihre Schriftart aus. Um eine benutzerdefinierte Farbe festzulegen, klicken Sie auf die Registerkarte „Erweitert“ und geben Sie einen Hexadezimalwert ein. 
  • Überschriften: Passen Sie die Schriftart und Farbe für Text in Ihren Modulen mit einem Heading-Tag an.
    • Klicken Sie auf das Dropdown-Menü „Überschriften“ und wählen Sie eine Schriftart aus.
    • Klicken Sie auf die Farbauswahl und wählen Sie eine Schriftartfarbe aus.  Um eine benutzerdefinierte Farbe festzulegen, klicken Sie auf die Registerkarte „Erweitert“ und geben Sie einen Hexadezimalwert ein. 
  • Link-Text: Passen Sie die Schriftarten und Farben für Links auf Ihrer Seite an.
    • Klicken Sie auf das Dropdown-Menü „Link-Text“ und wählen Sie eine Schriftart aus.
    • Klicken Sie auf die Farbauswahl und wählen Sie eine Link-Farbe aus.  Um eine benutzerdefinierte Farbe festzulegen, klicken Sie auf die Registerkarte „Erweitert“ und geben Sie einen Hexadezimalwert ein. 
    • Klicken Sie auf das Dropdown-Menü und wählen Sie einen Stil aus, der auf Ihren Link-Text angewendet wird.
    • Passen Sie die Farbe und die Transparenz Ihrer Links an, wenn der Mauszeiger über sie bewegt wird, auf sie geklickt und wenn sie bereits besucht wurden: 
      • Farbe des Links beim Daraufzeigen: Klicken Sie auf die Farbauswahl und wählen Sie eine Link-Farbe für den Fall aus, dass ein Besucher den Mauszeiger über den Link bewegt. Um die Transparenz der Farbe zu ändern, geben Sie einen Prozentwert im Textfeld ein. 
      • Farbe des aktiven Links: Klicken Sie auf die Farbauswahl und wählen Sie eine Link-Farbe für den Fall aus, dass der Link angeklickt wird. Um die Transparenz der Farbe zu ändern, geben Sie einen Prozentwert im Textfeld ein. 
      • Farbe des besuchten Links: Klicken Sie auf die Farbauswahl und wählen Sie eine Link-Farbe für den Fall aus, dass der Link bereits von einem Besucher angeklickt wurde. Um die Transparenz der Farbe zu ändern, geben Sie einen Prozentwert im Textfeld ein. 

edit-link-text

Formulare und Schaltflächen

Passen Sie im Abschnitt „Formulare und 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 Hexadezimalwert ein oder klicken Sie auf die Farbauswahl, um eine Farbe auszuwählen. 
    • Um die Transparenz der Hintergrundfarbe Ihrer Schaltflächen festzulegen, geben Sie im Feld einen Prozentsatz ein. 
  • Button-Textfarbe: Passen Sie die Farbe für den Text von Schaltflächen auf Ihrer Seite an.
    • Geben Sie einen Hexadezimalwert ein oder klicken Sie auf die Farbauswahl, um eine Farbe für den Text auszuwählen.
    • Um die Transparenz der Hintergrundfarbe Ihrer Schaltflächen festzulegen, geben Sie im Feld einen Prozentsatz ein. 
  • Button-Eckenradius: Passen Sie an, wie rund oder eckig die Schaltflächen auf Ihrer Seite angezeigt werden. 
    • Geben Sie einen Wert im Feld ein oder klicken Sie auf den Schieberegler und ziehen Sie ihn an eine neue Position. 
    • Ein höherer Wert bedeutet, dass die Schaltflächen auf Ihrer Seite abgerundete Ränder haben, während ein Wert von 0 bedeutet, dass Ihre Schaltflächen quadratisch sind.

Bitte beachten: Es empfiehlt es sich, einheitliche Farben, Schriftarten und Stile basierend auf den Einstellungen der Registerkarte „Design“ zu verwenden. Sie können auf der Registerkarte „Optionen“ im linken Bereich die Standardstile für ein Modul überschreiben.


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 Desktop- und Mobilgeräten angezeigt wirdKlicken Sie oben rechts auf „Veröffentlichen”, wenn Sie mit der Vorschau Ihrer Seite zufrieden sind.