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.

Bearbeiten Sie die Einstellungen Ihres Designs

Zuletzt aktualisiert am: Mai 23, 2024

Mit einem der folgenden Abonnements verfügbar (außer in den angegebenen Fällen):

Alle

Ein Design ist eine Reihe von Styles 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.

Bevor Sie loslegen

Die Design-Einstellungen steuern die Hauptfarben, Schriftarten und das Styling der Schaltflächen für Seiten, die Ihre Design-Vorlagen verwenden.

Bitte beachten Sie: die Styling-Optionen, die in Ihrer Design-Einstellung verfügbar sind, hängen von den Design-Feldoptionen ab, die vom Webentwickler, der Ihr Design erstellt hat, bereitgestellt wurden.

Einige der Inhalte für Ihre Website werden in anderen Teilen Ihrer Account-Einstellungen verwaltet, einschließlich:

Designeinstellungen bearbeiten

Sie können die Einstellungen eines Designs vom Content-Editor aus für jede Seite oder jeden Post bearbeiten, der dieses Design verwendet: 

  • Gehen Sie zu Ihren Inhalten:

    • 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..
  • Klicken Sie auf den Namen Ihres Inhalts. 
  • Klicken Sie im Inhaltseditor auf das Menü Bearbeiten und wählen Sie Design

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 genauere Einstellungen für Überschriften, Schriftarten und Links vorzunehmen, klicken Sie auf Bearbeiten neben Weitere Einstellungen.

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. Alle Google-Schriftarten werden 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. 

Abstand 

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

Weitere Einstellungen

In Ihren Designeinstellungen haben Sie möglicherweise weitere detaillierte Einstellungen für spezifischere Stile auf Ihrer Seite. Die Styling-Optionen in Ihrem Design basieren auf den Feldern von , die in der codierten 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 Auflistung der Felder, die in Ihren Vorlagen enthalten sein können, finden Sie in der Dokumentation für Designer .

Bitte beachten Sie: denken Sie daran, dass Sie Schriftarten, Farben und Styles innerhalb eines Rich-Text-Moduls auf Ihrer Seite anpassen können, oder indem Sie die Standard-Styles 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. Alle Google-Schriften werden 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ächenmodule 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 ü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 Ihr Navigationsmenü in Ihren Account-Einstellungen einrichten können. Um Ihr Firmenlogo auf Ihren Design-Vorlagen zu platzieren, fügen Sie Ihr Logobild zu Ihren Account-Standardeinstellungen im Bereich Branding hinzu.

  • Menü: wählen Sie die Farbe und den Stil der Schriftart für Ihr Navigationsmenü wenn Besucher ein Menüelement ansehen, mit dem Mauszeiger darüber fahren oder darauf 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 Ihr Navigationsmenü in Ihren Account-Einstellungen einrichten können. 

  • Menü: wählen Sie die Farbe und das Styling der Schriftart für das Navigationsmenü in der Fußzeile Ihres Designs. 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.

War dieser Artikel hilfreich?
Dieses Formular wird nur verwendet, um Feedback zur Dokumentation zu sammeln. Erfahren Sie, wie Sie Hilfe bei Fragen zu HubSpot erhalten können.