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.
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;
}
- Wenn Sie nur bestimmte Formulare zentrieren möchten, können Sie Ihrem Formularmodul in Ihrer Vorlage eine benutzerdefinierte Klasse hinzufügen und dann den CSS-Code anpassen, damit dieser nur für Module mit dieser Klasse gilt. Wenn Sie Ihrem Formularmodul z. B. die benutzerdefinierte Klasse center-form hinzufügen, sieht der CSS-Code wie folgt aus:
/* 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.