Centrare un modulo su un modello HubSpot

Puoi centrare un modulo su un template HubSpot usando moduli distanziatori orizzontali o CSS personalizzati.

Usare i moduli distanziatori orizzontali

• Nel tuo account HubSpot, naviga su Marketing > File e Modelli > Strumenti di progettazione.
• Fai clic sul nome del modello nel finder per modificarlo.
• Nell'ispettore sulla destra, clicca + Add perinserire due nuovi moduli distanziatori orizzontali; uno a sinistra e uno a destra del tuo modulo.

Usare il CSS personalizzato

• Nel tuo account HubSpot, naviga su Marketing > File e Modelli > Strumenti di progettazione.
• Nel cercatore, locare il tuo filefile CSSall'interno delle cartelle, quindi fai clic su di esso per selezionarlo nell'editor.
• Aggiungi il seguente codice al centro all dei tuoi moduli nel tuo sito web:

/* Per centrare il modulo all'interno del suo modulo e applicando una larghezza massima */
form.hs-form,
.hs_cos_wrapper .form-title {
max-width: 600px;
display: block;
margine: 0 auto;
}

/* Per centrare il titolo del modulo all'interno di un modulo */
.hs_cos_wrapper .form-title {
text-align: center;
}

/* Per centrare il pulsante di invio del modulo */
.hs_submit {
   text-align: center;
}

• Se vuoi centrare moduli specifici, puoi aggiungere una classeclasse personalizzata al modulo del modulosultuo template e poi regolare il tuo CSS per applicarlo solo ai moduli con quella classe. Per esempio, se aggiungi la classe personalizzata center-form al tuo modulo form nel tuo template, il tuo CSS sarà simile a questo:

/* Per centrare il modulo all'interno del suo modulo e applicando una larghezza massima */
form.hs-form,
.center-form .hs_cos_wrapper .form-title{
max-width: 600px;
display: block;
margine: 0 auto;
}

/* Per centrare il titolo del modulo all'interno di un modulo */
.center-form .hs_cos_wrapper .form-title{
text-align: center;
}

/* Per centrare il pulsante di invio del modulo */
.center-form .hs_submit{
   text-align: center;
}

• In alto a destra, clicca suPublish changes.