Siirry sisältöön
Huomaa: Tämän artikkelin käännös on tarkoitettu vain tiedoksi. Käännös on luotu automaattisesti käännösohjelmiston avulla, eikä sitä ole välttämättä tarkistettu. Näin ollen tämän artikkelin englanninkielistä versiota on pidettävä hallitsevana versiona, joka sisältää uusimmat tiedot. Voit tutustua siihen täällä.
Design Manager

Lomakkeen keskittäminen HubSpot-malliin

Päivitetty viimeksi: marraskuuta 1, 2021

Tämä koskee seuraavia:

Marketing Hub Professional, Enterprise
CMS Hub Professional, Enterprise
Vanhentunut Marketing Hub Basic-versio

Voit keskittää lomakkeen HubSpot-mallissa käyttämällä vaakasuuntaisia välimoduuleja tai mukautettua CSS:ää.

Vaakasuuntaisten välimoduulien käyttäminen

  • Siirry HubSpot-tililläsi kohtaan Markkinointi > Tiedostot ja mallipohjat > Suunnittelutyökalut.
  • Muokkaa mallia napsauttamalla mallin nimeä hakulaitteessa.
  • Napsauta oikealla olevassa tarkastajassa+Lisää lisätäksesi kaksi uutta vaakasuoraa välimoduulia; toinen lomakemoduulin vasemmalle ja toinen oikealle puolelle.
center-a-form

Mukautetun CSS:n käyttäminen

  • Siirry HubSpot-tililläsi kohtaan Markkinointi > Tiedostot ja mallipohjat > Suunnittelutyökalut.
  • Etsijässä locate yourCSS-tiedostokansioiden sisällä ja valitse se sitten editorissa napsauttamalla sitä.
  • Lisää seuraava koodi center all lomakkeiden keskelle kaikkialla verkkosivustollasi:
/* Lomakkeen keskittäminen moduulin sisällä ja maksimileveyden soveltaminen */
form.hs-form,
.hs_cos_wrapper .form-title {
max-width: 600px;
display: block;
margin: 0 auto;
}

/* Lomakkeen otsikon keskittäminen lomakemoduulin sisällä */
.hs_cos_wrapper .form-title {
text-align: center;
}

/* Lomakkeen lähetyspainikkeen keskittäminen */
.hs_submit {
   text-align: center;
}
  • Jos haluat keskittää tietyt lomakkeet, voit lisätä lomakkeisiinmukautetun luokan lomakemoduuliinmalliisi ja säädä sitten CSS:ääsi niin, että se koskee vain moduuleja, joissa on tämä luokka. Jos esimerkiksi lisäät mukautetun luokan center-form lomakemoduuliin mallissasi, CSS näyttää seuraavalta:
/* Lomakkeen keskittäminen moduulin sisällä ja maksimileveyden soveltaminen */
form.hs-form,
.center-form .hs_cos_wrapper .form-title{
max-width: 600px;
display: block;
margin: 0 auto;
}

/* Lomakkeen otsikon keskittäminen lomakemoduulin sisällä */
.center-form .hs_cos_wrapper .form-title{
text-align: center;
}

/* Lomakkeen lähetyspainikkeen keskittäminen */
.center-form .hs_submit{ center-form .hs_submit{
   text-align: center;
}
  • Napsauta oikeassa yläkulmassaJulkaise muutokset.