Nota bene: la traduzione in olandese di questo articolo è fornita solo per comodità. La traduzione viene creata automaticamente tramite un software di traduzione e potrebbe non essere stata revisionata. Pertanto, la versione inglese di questo articolo deve essere considerata come la versione di governo contenente le informazioni più recenti. È possibile accedervi qui.
Design Manager

Centrare un modulo su un modello HubSpot

Ultimo aggiornamento: febbraio 17, 2021

Si applica a:

Marketing Hub  Professional, Enterprisee
CMS Hub  Professional, Enterprisee
Legacy Marketing Hub Basic

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.
center-a-form

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.