Designeinstellungen bearbeiten

Ein Design besteht aus einer Reihe von Stilen und Vorlagen, die Sie auf Ihre Seiten und Blogbeiträge in HubSpot anwenden können. Um sicherzustellen, dass Ihr Web-Content einheitlich aussieht, werden die Stileinstellungen für alle Seiten und Beiträge, die dasselbe Design verwenden, in Ihren Designeinstellungen verwaltet.

Bevor Sie loslegen

Bevor Sie mit dieser Funktion beginnen, sollten Sie sich im Voraus darüber im Klaren sein, welche Schritte unternommen werden sollten und welche Einschränkungen die Funktion mit sich bringt und welche Konsequenzen sich daraus ergeben können.

Einschränkungen und Wissenswertes

• Die in den Designeinstellungen verfügbaren Styling-Optionen hängen von den Designfeldoptionen ab, die vom Webentwickler berücksichtigt wurden, der das Design erstellt hat.
• Wissensdatenbanken verwenden eine modifizierte Version von Designs. Erfahren Sie mehr über das Bearbeiten der Designeinstellungen der Wissensdatenbank. 
• Einige der Elemente für Webinhalte werden in anderen Bereichen der Account-Einstellungen verwaltet, darunter:
  • Unternehmenslogo: Aktualisieren Sie Ihr Unternehmenslogo im Brand-Kit.
  • Navigationsmenü: Die Menüfarben können in den Designeinstellungen festgelegt werden, aber die Inhalte und Links Ihres Navigationsmenüs werden in Ihren Navigationseinstellungen verwaltet. Erfahren Sie, wie Sie ein Navigationsmenü erstellen, das Sie den globalen Kopf- oder Fußzeileninhalten im Seiten-Editor hinzufügen können.

Designeinstellungen bearbeiten

Sie können die Einstellungen eines Designs über den Volldesign-Editor für jede Seite oder jeden Beitrag bearbeiten, die dieses Design verwenden. Sie können die Designeinstellungen für Website-Seiten und Landingpages auch im Content-Editor bearbeiten, wenn ein Super-Admin den Account für den universellen Design-Editor (BETA) angemeldet hat. 

1. Gehen Sie zu Ihrem Content:

   • Website-Seiten:Gehen Sie in Ihrem HubSpot-Account zu Content > Website-Seiten.
   • Landingpages: Gehen Sie in Ihrem HubSpot-Account zu Content > Landingpages.
   • Blog: Gehen Sie in Ihrem HubSpot-Account zu Content > Blog..
2. Klicken Sie auf den Namen Ihres Inhalts. 
3. So verwenden Sie den Volldesign-Editor für Seiten und Beiträge:
   • Klicken Sie im Content-Editor auf das Menü Bearbeiten und wählen Sie in der Editor-Symbolleiste Design aus. Wenn Sie z. B. das Elevate-Design verwenden, klicken Sie auf das Menü Bearbeiten und wählen Sie Design: Elevate aus.

• • Klicken Sie im Design-Editor auf die relevanten Abschnitte (z. B. Farben oder Buttons), um sie zu erweitern und die Designeinstellungen zu bearbeiten. 
  • Wenn Sie fertig sind, klicken Sie auf Design veröffentlichen. Sie werden zurück zum Content-Editor geleitet.
    

4. So verwenden Sie den universellen Design-Editor (BETA) für Seiten:
   • Klicken Sie im Content-Editor für Seiten in der linken Seitenleiste auf das Symbol für globale Designstile . 
   • Klicken Sie in der linken Seitenleiste auf die relevanten Abschnitte (z. B. Farben oder Buttons), um die Designeinstellungen zu bearbeiten. Die Änderungen gelten für alle Seiten und Vorlagen, die das Design verwenden.

Designstile verstehen

In Ihren Designeinstellungen haben Sie möglicherweise Stiloptionen für Schriftarten, Farben, Buttons und Links. Möglicherweise haben Sie auch zusätzliche Detaileinstellungen für spezifischere Stile auf Ihrer Seite. Die Stiloptionen in Ihrem Design basieren auf den Designfeldern, die in der Code-Vorlage Ihres Designs enthalten sind. Wenn Sie die gewünschte Einstellung nicht finden können, wenden Sie sich an Ihren Vorlagen-Designer, um zu erfahren, welche Optionen in Ihrer Vorlage enthalten sind.

Die folgenden Beispiele sind eine allgemeine Anleitung, welche Arten von Stiloptionen in Ihrem Design enthalten sein können. Eine vollständige Übersicht der Designfelder, die in Ihren Vorlagen enthalten sein können, finden Sie in der Dokumentation für Designer.

Bitte beachten: Sie können Schriftarten, Farben und Stile in einem Rich-Text-Modul auf Ihrer Seite anpassen oder indem Sie die Standardstile Ihres Designs im Seiten-Editor überschreiben. Ändern Sie diese Stile nur, wenn Sie möchten, dass sie mithilfe dieses Designs für alle Seiten übernommen werden.

Farben

Die Farbeinstellungen Ihres Designs wenden auf alle Elemente, die in Ihren Designvorlagen enthalten sind, eine primäre, eine sekundäre und eine Hintergrundfarbe an. Diese Stile werden auf alle Elemente auf Ihrer Website angewendet. 

Schriftarten

Wählen Sie eine primäre und sekundäre Schriftart für die Überschriften Ihrer Website, Formulare, Buttons und den Haupttext Ihre Website aus. Es werden nur Google-Schriftarten unterstützt. Klicken Sie auf das Farbfeld, um Ihre primären oder sekundären Schriftfarben anzupassen. Sie können einen einfachen Farbwert auswählen oder auf den Tab Erweitert klicken und über eine Farbauswahl einen bestimmten Hexadezimalwert auswählen. 

Abstand 

Ihre Designeinstellungen für den Abstand steuern die maximale Breite Ihrer Seite oder Ihres Beitragsinhalts sowie den vertikalen Abstand zwischen verschiedenen Elementen.

Typografie

In Ihren Typografieeinstellungen können Sie die Schriftarten festlegen, die für bestimmte Elemente in Ihren Vorlagen übernommen werden. Es werden nur Google-Schriftarten unterstützt. Sie können auch benutzerdefinierte Farben für bestimmte Überschriften, Schriftarten oder Links in Ihrem Design auswählen.

• Überschriften: Sie können die genaue Schriftart, Farbe, Größe und den Stil für alle in Ihrem Design enthaltenen Überschriften anpassen.
• Text: Passen Sie die Schriftgröße, -farbe oder -größe für den Seitentext an. 
• Links: Passen Sie die Standardfarbe der Links auf Ihrer Website an. Sie können auch die Farbe und das Verhalten von Links anpassen, wenn ein Besucher den Mauszeiger über Ihren Link bewegt oder auf diesen klickt.

Buttons

Sie können benutzerdefinierte Farben, Schriftarten und Stile für Buttons auf Ihren Seiten und Ihrem Blog festlegen. Im Seiten-Editor für eine bestimmte Seite können Sie die die Größen oder Typen von Buttons ersetzen, je nachdem, wie Ihr Design von Ihrem Website-Entwickler erstellt wurde.

• Größe: Geben Sie die Maße von kleinen, normalen und großen Buttons auf Ihrer Seite an. 
• Primär: Ein primärer Button ist die Schaltfläche für die wichtigste Aktion eines Besuchers auf Ihrer Seite. Deren Farbe sollte sich abheben und die Aufmerksamkeit des Besuchers auf sich ziehen.
• Sekundär: Ein sekundärer Button wird für vergleichsweise weniger wichtige Aktionen verwendet und bereits eine primäre Schaltfläche auf Ihrer Seite vorhanden ist. Sekundäre Buttons werden in der Regel für Aktionen mit niedrigerer Priorität auf Seiten angewendet. 
• Einfach: Dies sind die Standardschriftarten und -stile, die auf einfache Button-Module auf Ihrer Seite angewendet werden.

Formulare

Passen Sie die standardmäßigen Farben, Schriftarten sowie Text- und Button-Stile für Ihre Formulare an.

• Titel: Dies sind Stile, die auf das Textfeld angewendet werden, das über Ihrem gesamten Formular angezeigt wird. Dies umfasst normalerweise eine Begrüßung und Anweisungen zum Ausfüllen des Formulars. Diese Stile für Ihr Formular können nur hier in den Einstellungen Ihres Designs verwaltet werden.
• Labels: Stile, die auf die Label angewendet werden, die über einem Formularfeld angezeigt werden.
• Felder: Stile, die auf die Namen der Formularfelder selbst angewendet werden.
• Hilfetext: Dies ist der Beispielinhalt, der in jedem Formularfeld angezeigt wird und angibt, welche Art von Informationen Ihr Besucher übermitteln soll.
• Einsenden: Wählen Sie aus, welchen Button-Stil und welche Buttonsgröße für Ihre Formulare übernommen werden soll.
• Hintergrundfarbe: die Hintergrundfarbe, die auf Ihr Formular angewendet werden soll.
• Rahmen: die Farbe des Rahmens um die Formularfelder.
• Auffüllung: der Abstand um das Formular auf Ihrer Seite herum.

Tabellen

Legen Sie die Standardfarben, -schriftarten, -abstände und -rahmen für Tabellen fest, die Ihrer Seite hinzugefügt werden. Erfahren Sie mehr darüber, wie Sie eine Tabelle in ein Rich-Text-Modul auf Ihrer Seite einfügen.

• Tabellenüberschrift: die Farben, die auf Schriftarten in Ihrer Tabellenüberschrift angewendet werden, sowie die Standardhintergrundfarbe auf der gesamte Breite der ersten Zeile Ihrer Tabelle Sie können auch einen unteren Rahmen für eine Akzentfarbe entlang des unteren Rands Ihrer Tabellenüberschrift festlegen.
• Schriftartfarbe: Standardfarbe für Schriftarten in Ihrer Tabelle.
• Hintergrundfarbe: standardmäßige Hintergrundfarbe für den Hintergrund der Zellen Ihrer Tabelle.
• Rahmen: die Standardfarbe und -breite sowie der Standardstil Ihrer Tabelle.
• Auffüllung: der Abstand über und unter der Tabelle auf Ihrer Seite. 

Website-Kopfzeile

Diese Einstellungen steuern die Farben und Schriftarten, die in der Kopfzeile Ihrer Seite einschließlich Ihres Navigationsmenüs angezeigt werden. Erfahren Sie, wie Sie in Ihren Account-Einstellungen Ihr Navigationsmenü einrichten. Um Ihr Unternehmenslogo in Ihren Designvorlagen einzurichten, müssen Sie im Abschnitt Branding Ihr Logo-Bild zu den Standardeinstellungen Ihres Accounts hinzufügen.

• Menü: Wählen Sie die Farbe und den Stil der Schriftart für Ihr Navigationsmenü aus, wenn Besucher einen Menüeintrag anzeigen, den Mauszeiger darüber bewegen oder auf diesen klicken. Diese Stile können nur hier in Ihren Designeinstellungen verwaltet werden.
• Hintergrundfarbe: Wählen Sie die Farbe für den Hintergrund der Kopfzeile Ihrer Website aus.
• Unterer Rahmen: Wenn gewünscht, können Sie eine horizontale Linie als Rahmen unter der Kopfzeile Ihrer Website hinzufügen. Wählen Sie einen Stil aus, um den unteren Rahmen zu aktivieren, und wählen Sie dann eine Farbe und Breite für Ihren Rahmen aus.

Fußzeile

Diese Einstellungen steuern die Farben und Schriftarten, die in der Fußzeile Ihrer Seite einschließlich jeglicher Navigationsmenüs angezeigt werden. Erfahren Sie, wie Sie in Ihren Account-Einstellungen Ihr Navigationsmenü einrichten.

• Menü: Wählen Sie die Farbe und den Stil der Schriftart für das Navigationsmenü in der Fußzeile Ihres Designs aus. Sie können anpassen, wie die Farben aussehen sollen, wenn Besucher einen Menüeintrag anzeigen, den Mauszeiger darüber bewegen oder auf diesen klicken. Diese Stile können nur hier in Ihren Designeinstellungen verwaltet werden.
• Hintergrundfarbe: Wählen Sie die Farbe für den Hintergrund der Fußzeile Ihrer Website aus.
• Unterer Rahmen: Wenn gewünscht, können Sie eine horizontale Linie als Rahmen unter der Fußzeile Ihrer Website hinzufügen. Wählen Sie einen Stil aus, um den unteren Rahmen zu aktivieren, und wählen Sie dann eine Farbe und Breite für Ihren Rahmen aus.

Blog

Diese Einstellungen steuern den Stil Ihrer Vorlage für Listing-Seiten und der Blogbeitragsvorlage.

• Banner-Bilder: Laden Sie Bilder hoch, die im Hintergrund der Kopfzeile Ihrer Blog-Vorlage verwendet werden sollen. Sie können ein Bild für die Startseite Ihres Blogs auswählen und ein Bild, dass auf alle Ihre Blogbeiträge angewendet werden soll. 
• Tags: Legen Sie die Standardfarben, -schriftarten und -stile für Ihre Blog-Tags fest, die oben in Ihren Blogbeiträgen angezeigt werden.