Hinweis: Dieser Artikel wird aus Kulanz zur Verfügung gestellt. Er wurde automatisch mit einer Software übersetzt und unter Umständen nicht korrekturgelesen. Die englischsprachige Fassung gilt als offizielle Version und Sie können dort die aktuellsten Informationen finden. Hier können Sie darauf zugreifen.
CMS-General

Formular in einer HubSpot-Vorlage zentrieren

Zuletzt aktualisiert am: März 25, 2019

Produkte/Lizenzen

Marketing Hub Professional, Enterprise
Basic

Sie können Ihr Formular mithilfe des Moduls „Horizontaler Abstandhalter“ oder CSS in einer HubSpot-Vorlage zentrieren.

Mithilfe des Moduls „Horizontaler Abstandhalter“

  • Gehen Sie in Ihrem HubSpot-Account zu Marketing > Dateien und Vorlagen > Design-Manager.
  • Klicken Sie im Finder auf den Namen der Vorlage.
  • Klicken Sie im Inspektor rechts auf Hinzufügen, um zwei neue Module „Horizontaler Abstandhalter“ einzufügen. Eins der Module wird links vom Formularmodul, das andere rechts davon angeordnet.
center-a-form

 

Mithilfe von benutzerdefiniertem CSS

  • Gehen Sie in Ihrem HubSpot-Account zu Marketing > Dateien und Vorlagen > Design-Manager.
  • Suchen Sie im Finder Ihre CSS-Datei in den Ordnern, und klicken Sie auf die Datei, um sie im Editor auszuwählen.
  • Fügen Sie den folgenden Code ein, um alle Ihre Formulare auf Ihrer Website zu zentrieren:
/* Zum Zentrieren des Formulars innerhalb seines Moduls und Anwenden einer maximalen Breite */
form.hs-form,
.hs_cos_wrapper .form-title {
max-width: 600px;
display: block;
margin: 0 auto;
}

/* Zum Zentrieren des Formulartitels innerhalb eines Formularmoduls */
.hs_cos_wrapper .form-title {
text-align: center;
}

/* Zum Zentrieren der Einsende-Schaltfläche im Formular */
.hs_submit {
    text-align: center;
}
/* Zum Zentrieren des Formulars innerhalb seines Moduls und Anwenden einer maximalen Breite */
form.hs-form,
.center-form .hs_cos_wrapper .form-title {
max-width: 600px;
display: block;
margin: 0 auto;
}

/* Zum Zentrieren des Formulartitels innerhalb eines Formularmoduls */
.center-form .hs_cos_wrapper .form-title {
text-align: center;
}

/* Zum Zentrieren der Einsende-Schaltfläche im Formular */
.center-form .hs_submit {
    text-align: center;
}
  • Klicken Sie oben rechts auf Änderungen veröffentlichen.