Regolare le dimensioni della CTA (legacy) utilizzando le opzioni di dimensionamento integrate e i CSS personalizzati. Quando si carica l'immagine per una CTA immagine, è bene tenere conto dell'ottimizzazione retina.
Per personalizzare ulteriormente la CTA, imparare ad aggiungere stili personalizzati alla CTA (legacy) con i CSS. Se si aggiunge la CTA a un'e-mail o a un modello, imparare a centrare la CTA (legacy).
Modificare le dimensioni della CTA (legacy)
È possibile regolare manualmente le dimensioni della CTA o utilizzare CSS personalizzati per riempire automaticamente la larghezza del contenitore o del modulo della CTA. Se si
incorpora una
CTA immagine su un sito non HubSpot, potrebbe essere necessario applicare dichiarazioni CSS aggiuntive (come width: 100%;) nel foglio di stile per rendere la CTA immagine reattiva.
Per modificare le dimensioni del pulsante CTA:
- 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.
- Nel pannello a scorrimento, fare clic su Opzioni avanzate.
- Per ridimensionare manualmente la CTA personalizzata:
- Deselezionare la casella di controllo Adatta al testo. Questo rimuoverà il ridimensionamento automatico applicato.
- Nella sezione Imbottitura del pulsante, inserire i valori delle dimensioni per i campi Larghezza e Altezza del pulsante.
- Fare clic su Avanti >.
- Fare clic su Salva. Quindi, fare clic su Fine.
- Per fare in modo che la CTA personalizzata riempia l'intera larghezza del suo contenitore o modulo:
- Deselezionare la casella di controllo Dimensioni automatiche .
- Nel campo CSS personalizzato, inserire il CSS personalizzato.
- Impostare la larghezza su width: 100%;
- Fare clic su Avanti >.
- Fare clic su Salva. Quindi, fare clic su Fine.
Che cos'è l'ottimizzazione della retina?
L'ottimizzazione retina rende l'immagine della CTA più nitida quando viene visualizzata sulle pagine del sito e nei messaggi di posta elettronica se i destinatari visualizzano la CTA nelle versioni moderne di Apple Mail e iOS; non è supportata da Outlook o dai servizi di webmail come Gmail.
L'ottimizzazione retina è supportata quando si carica un'immagine di dimensioni almeno due volte superiori a quelle necessarie per la CTA, analogamente a come il supporto retina funziona per tutte le immagini su Internet. Si noti inoltre quanto segue:
- Se si sta creando una CTA di 400px per 100px, l'immagine caricata dovrà essere di 800px per 200px per supportare una visualizzazione con densità di pixel @2x.
- Le CTA supportano l'aggiunta di una versione 4x. Ad esempio, se si sta creando una CTA di 400px per 100px, è possibile caricare un'immagine di 1600px per 400px.
- La CTA sarà automaticamente resa sul sito web con un attributo srcset che servirà le versioni 1x, 2x, 3x e 4x, se disponibili.
- Se l'immagine viene caricata alla dimensione in cui verrà resa la CTA, non avrà il supporto retina. Ad esempio, se viene caricata un'immagine di 400px per 100px per una CTA di 400px per 100px