HubSpot Knowledge Base

Add custom styles to your CTA

Scritto da HubSpot Support | Jan 27, 2021 5:09:08 PM

Utilizzate le opzioni avanzate di HubSpot per le CTA (legacy) per creare pulsanti CTA altamente personalizzati che si adattano perfettamente al tema del vostro sito web. Potete utilizzare una classe CSS personalizzata persupportare gli input di classe personalizzati dal vostro foglio di stile o aggiungere CSS personalizzati direttamente alla CTA.

Per personalizzare ulteriormente la vostra CTA (legacy), imparate
a modificare le dimensioni della CTA. Se si aggiunge la CTA (legacy) a un'e-mail o a un modello, imparare a centrare la CTA.

Nota bene: gli stili personalizzati possono essere applicati solo ai pulsanti personalizzati e non ai pulsanti immagine.

Per aggiungere uno stile personalizzato alla CTA del pulsante:

  • In alto a sinistra, fare clic sul menu a discesa e selezionare CTA (legacy).
  • Passare il mouse su una CTA e fare clic su Azioni > Modifica, oppure su Crea CTA.
  • Nel pannello di destra, scorrere verso il basso e fare clic su Opzioni avanzate.

  • È possibile applicare uno stile CSS personalizzato alla CTA utilizzando solo la classe CSS personalizzata o l'opzione CSS personalizzata. Se si applicano entrambe le opzioni, potrebbero verificarsi problemi di stile o di visualizzazione della CTA .
    • Classe CSS personalizzata: aggiunge una classe personalizzata alla CTA per supportare gli input di classe personalizzata. È utile quando più CTA nelle pagine del sito web devono condividere un insieme simile di caratteristiche di design, come le famiglie di caratteri, le dimensioni o persino il padding e i margini. Se utilizzate una classe CSS personalizzata, assicuratevi che la classe sia inclusa e stilizzata nel foglio di stile CSS applicato come stile principale alle vostre pagine HubSpot.
    • CSS personalizzato: aggiungere stili personalizzati da applicare solo alla CTA che si sta modificando. Nel campo CSS personalizzato è possibile applicare uno stile in linea specifico per quella CTA. Se si desidera modificare un elemento della CTA, aggiungere qui una nuova dichiarazione di stile prima di salvare le modifiche.
  • In basso a destra, fare clic su Avanti > per terminare la creazione o la modifica della CTA (legacy).