Hoppa till innehåll
Observera: Översättningen av denna artikel är endast avsedd att underlätta för dig. Översättningen har skapats automatiskt med hjälp av en översättningsprogramvara och har eventuellt inte korrekturlästs. Den engelska versionen av denna artikel bör därför betraktas som den gällande versionen med den senaste informationen. Du kan komma åt den här.
Design Manager

Centrera ett formulär på en HubSpot-mall

Senast uppdaterad: november 2, 2021

Gäller för:

Marknadsföring Hub Professional, Enterprise
CMS Hub Professional, Enterprise
Tidigare Marketing Hub Basic

Du kan centrera ett formulär i en HubSpot-mall med hjälp av horisontella distansmoduler eller anpassad CSS.

Använda horisontella distansmoduler

  • I ditt HubSpot-konto, navigera till Marknadsföring > Filer och mallar > Designverktyg.
  • Klicka på mallens namn i sökaren för att redigera.
  • I inspektorn till höger klickar du på+Lägg till för att infoga två nya horisontella distansmoduler, en till vänster och en till höger om formulärmodulen.
center-a-form

Användning av anpassad CSS

  • I ditt HubSpot-konto, navigera till Marknadsföring > Filer och mallar > Designverktyg.}
  • I sökaren, ldinCSS-filKlicka sedan på den i mapparna för att välja den i redigeraren.
  • Lägg till följande kod i center alla av dina formulär på hela webbplatsen:
/* För att centrera formuläret i sin modul och tillämpa en maxbredd */
form.hs-form,
.hs_cos_wrapper .form-title {
max bredd: 600px;
display: block;
marginal: 0 auto;
}

/* Centrera formulärets titel i en formulärmodul */
.hs_cos_wrapper .form-title {
text-align: center;
}

/* För att centrera knappen för att skicka in formuläret */
.hs_submit {
   text-align: center;
}
  • Om du vill centrera specifika formulär kan du lägga till enegen klass till din formulärmoduli mallen och sedan anpassa CSS så att den endast gäller för moduler med den klassen. Om du till exempel lägger till den anpassade klassen center-form till formulärmodulen i mallen skulle CSS-filen se ut så här:
/* För att centrera formuläret i modulen och tillämpa en maxbredd */
form.hs-form,
.center-form .hs_cos_wrapper .form-title{
max bredd: 600px;
display: block;
marginal: 0 auto;
}

/* Centrera formulärets titel i en formulärmodul */
.center-form .hs_cos_wrapper .form-title{
text-align: center;
}

/* För att centrera knappen för att skicka formuläret */
.center-form .hs_submit{
   text-align: center;
}
  • Klicka påPublicera ändringar uppe till höger.