Zuletzt aktualisiert am: März 21, 2023
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, passwortgeschützte Seiten 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 zu Ihrem Content:
- Website-Seiten:Gehen Sie in Ihrem HubSpot-Account zu Marketing > Website > Website-Seiten.
- Landing-Pages: Navigieren Sie in Ihrem HubSpot-Account zu Marketing > Landing-Pages.
- Klicken Sie oben rechts auf das Dropdown-Menü „Erstellen“ und wählen Sie „Website-Seite“ oder „Landing-Page“. aus.
- Auf dem Bildschirm für die Vorlagenauswahl werden Vorlagen aus Ihrem aktiven Design oben auf der Seite angezeigt, während alle anderen Vorlagen im Abschnitt „ Andere Vorlagen“ unten angezeigt werden. Klicken Sie auf eine Vorlage. Wenn Sie kein aktives Theme ausgewählt haben, werden Sie aufgefordert, eines auszuwählen, oder Sie klicken auf Zu Vorlagen springen , um eine vorhandene Vorlage auszuwählen.
- Um die Seite mit der ausgewählten Vorlage zu erstellen, klicken Sie oben rechts auf „Diese Vorlage auswählen“. Klicken Sie auf „Vorschau“, um eine Vorschau der Seite auf Mobilgeräten oder Desktops anzuzeigen.
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 „Für Mobilgeräte bearbeiten“-Symbol.
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.
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.
- 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 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.
-
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.
Hinweis: 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 wird. Klicken Sie oben rechts auf „Veröffentlichen”, wenn Sie mit der Vorschau Ihrer Seite zufrieden sind.
