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.

Designeinstellungen bearbeiten

Zuletzt aktualisiert am: Juli 15, 2020

Produkte/Lizenzen

CMS Hub  Professional, Enterprise

Ein Design ist eine Reihe von Stilen und Vorlagen, die Sie auf Ihre Website-Seiten und Blogs in HubSpot anwenden können. Um sicherzustellen, dass Ihre Website konsistent aussieht, werden die Stileinstellungen für alle Seiten, die dasselbe Design verwenden, in Ihren Designeinstellungen verwaltet. Sie können die Einstellungen Ihres Designs mühelos anpassen, indem Sie auf die Registerkarte „Design“ im linken Bereich im Seiten-Editor klicken. Designeinstellungen können mit intuitiven Steuerelementen wie Schaltern und Farbauswahlen angepasst werden.

Bevor Sie loslegen

Globale Designeinstellungen steuern die zentralen Farben, Schriftarten und Schriftartenstile für Seiten, die Ihre Designvorlagen verwenden. Einige der Inhalte für Ihre Website werden in anderen Teilen Ihrer Account-Einstellungen verwaltet, einschließlich:

  • Ihr Unternehmenslogo: Aktualisieren Sie Ihr Unternehmenslogo in Ihren Account-Standardeinstellungen auf der Registerkarte „Branding“.
  • Ihr Navigationsmenü: Menüfarben werden in den Designeinstellungen festgelegt, aber die Inhalte und Links Ihre 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.
  • Ihre Domain für die Veröffentlichung: Alle CMS Hub Professional-Accounts können eine Brand Domain verknüpfen, und alle CMS Hub Enterprise-Accounts können zwei Brand Domains verknüpfen. Alle Accounts können mehrere Subdomains für diese Brand Domains hosten. Erfahren Sie mehr über das Verknüpfen Ihrer Domain im Domain-Manager-Tool für die Seitenveröffentlichung.

Designeinstellungen bearbeiten

Um Ihre Designeinstellungen zu bearbeiten, müssen Sie zunächst eine Seite mit einer Designvorlage erstellen. Auf die Designeinstellungen können Sie im Seiten-Editor zugreifen, indem Sie links auf die Registerkarte „Design“ klicken. Klicken Sie dann auf „Designeinstellungen bearbeiten“.

edit-global-themes-from-editor

Bitte beachten: Jedes Design wird von einem Website-Entwickler mit einer individuellen Kombination von Optionen versehen. Deshalb sehen Sie je nach den im Design enthaltenen Komponenten leicht unterschiedliche Stiloptionen

Durch Anpassen von Farben, Schriftarten und Abständen werden die Standardstile für alle Elemente auf Ihrer Seite festgelegt. Wenn Sie spezifische Details wie Link-Farben, Schaltflächenfarben oder Standardformularfarben bearbeiten möchten, klicken Sie neben „Weitere Einstellungen“ auf „Bearbeiten“, um weitere für Ihre Vorlagen verfügbare Designeinstellungen anzuzeigen.

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. Um weitere spezifische Einstellungen für Überschriften, Schriftarten und Links anzupassen, klicken Sie auf „Bearbeiten“.

edit-global-theme-colors

Schriftarten

Wählen Sie eine primäre und sekundäre Schriftart für die Überschriften Ihrer Website, Formulare, Schaltflächen 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 die Registerkarte „Erweitert“ klicken und über eine Farbauswahl einen bestimmten Hexadezimalwert auswählen. 

 

edit-global-theme-fonts

Abstand 

Ihre Designeinstellungen für den Abstand steuern die maximale Breite Ihrer Seiteninhalte und den vertikalen Abstand zwischen verschiedenen Elementen auf Ihrer Seite.

edit-global-theme-spacing

Weitere Einstellungen

In Ihren Designeinstellungen haben Sie möglicherweise weitere detaillierte Einstellungen 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 Vorlagendesigner, um zu sehen, welche Optionen in Ihrer Vorlage berücksichtigt wurden.

Das folgende Beispiel ist ein allgemeiner Leitfaden dazu, welche Typen an zusätzlichen Feldern 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.

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 Schaltflächen 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 Schaltflächen 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 Schaltflächen auf Ihrer Seite an. 
  • Primär: Eine primäre Schaltfläche 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: Eine sekundäre Schaltfläche wird für vergleichsweise weniger wichtige Aktionen verwendet und bereits eine primäre Schaltfläche auf Ihrer Seite vorhanden ist. Sekundäre Schaltflächen werden in der Regel auf Seiten mit Aktionen von geringerer Priorität angewendet. 
  • Einfach: Dies sind die Standardschriftarten und -stile, die auf einfache Schaltflächen-Module auf Ihrer Seite angewendet werden.

Formulare

Passen Sie die standardmäßigen Farben, Schriftarten sowie Text- und Schaltflächenstile 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 Labels angewendet werden, die über einem Formularfeld angezeigt werden.
  • Felder: Stile, die auf die Namen der Formularfelder selbst angewendet werden.
  • Hilfetext: Dies ist der Beispielinhalt, die in jedem Formularfeld angezeigt wird und angibt, welche Art von Informationen Ihr Besucher übermitteln soll.
  • Einsenden: Wählen Sie aus, welchen Schaltflächenstil und welche Schaltflächengröße für Ihre Formulare übernommen werden soll.
  • Hintergrundfarbe: Die Hintergrundfarbe, für Ihr Formular übernommen 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.

  • Tabellenüberschrift: Die Farben, die auf Schriftarten in Ihrer Tabellenüberschrift angewendet werde, 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. 

Erfahren Sie mehr darüber, wie Sie eine Tabelle in ein Rich-Text-Modul auf Ihrer Seite einfügen.

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ü einrichtenUm 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 Blog-Beitragsvorlage.

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 Blog-Beiträge angewendet werden soll. 

Tags: Legen Sie die Standardfarben, -schriftarten und -stile für Ihre Blog-Tags fest, die oben in Ihren Blog-Beiträgen angezeigt werden.

/de/website-pages/edit-your-global-theme-settings