CTA

Wie kann ich individuelle Stile zu meiner CTA hinzufügen?

Zuletzt aktualisiert am: March 7, 2016

Das neue CSS-Design von HubSpot macht es Designern leicht, flexibel personalisierbare CTA-Schaltflächen innerhalb von HubSpot zu gestalten, die in jedes Website-Thema hervorragend passen. Um in Ihrem Portal auf diese Tools zuzugreifen navigieren Sie zu Inhalte > Calls-to-Action > klicken Sie auf die blaue Schaltfläche CTA Erstellen (oder bearbeiten Sie eine bestehende Schaltfläche in Ihrer CTA-Liste)> klicken Sie auf die Registerkarte Design in der Editor-Ansicht > und klicken Sie auf die Schaltfläche CSS Personalisieren, um die Registerkarte CSS-Design zu öffnen.

CTA CSS-Button personalisieren
CTA CSS-Button personalisieren

Das Feld Automatisch generierte CSS ist eine schreibgeschützte Vorschau-Ansicht, die es Ihnen leichter macht, zu erkennen, welche Stile auf die spezifischen CTA-Elemente angewendet werden, basierend auf der derzeitigen Design-Konfiguration der CTA.

Wenn Sie zu Ihrer CTA eine personalisierte Klasse hinzufügen möchten, können Sie das Feld CSS-Klasse für personalisierte Klasseneingaben nutzen. Dies ist nützlich, wenn mehrere CTAs über Ihre Website hinweg eine ähnliche Zusammenstellung an Designcharakteristika teilen sollen, z. B. Schriftfamilien, Größen oder sogar Abstände und Ränder. Wenn Sie eine personalisierte CSS-Klasse verwenden möchten, stellen Sie sicher, dass Sie sie und dazugehörige Stile innerhalb der CSS-Formatvorlage einfügen, die als Hauptstil für Ihre HubSpot-Seiten verwendet wird.

customize-css-class-cta.png
CTA CTA Personalisieren CSS-Klasse

Indem Sie das Feld CSS Personalisieren nutzen, ist es einfach Inline-Stile anzuwenden, die genau zu der CTA passen, die gerade bearbeitet wird. Wenn Sie ein CTA-Element haben, dass Sie ändern möchten, ergänzen Sie einfache eine neue Stil-Deklaration im Feld CSS Personalisieren bevor Sie die Änderungen speichern.

CTA Personalisieren CTA CSS-Code
CTA Personalisieren CTA CSS-Code

Um die CTA auf live geschalteten Seiten vollständig zu aktualisieren, müssen Sie auf CTA Aktualisieren (oder CTA Erstellen klicken, wenn Sie an einer neuen CTA arbeiten.