Opciones
- Suscribirse a un feed RSS
- Marcar tema como nuevo
- Marcar tema como leído
- Flotar este Tema para el usuario actual
- Favorito
- Suscribir
- Silenciar
- Página de impresión sencilla
¿Cómo centrar un formulario en una plantilla de HubSpot?
HubSpot Employee
mar 18, 2021 2:18 PM - editado mar 18, 2021 2:19 PM
Puedes centrar un formulario en una plantilla de HubSpot usando módulos de espaciador horizontales o CSS personalizados.
Usar módulos de espaciador horizontales
- En tu cuenta de HubSpot, dirígete a Marketing > Archivos y plantillas > Herramientas de diseño.
- Haz clic en el nombre de la plantilla en el visor para editar.
- En el inspector de la derecha, haz clic en + Agregar para insertar dos módulos de separador horizontales, uno a la izquierda y uno hacia la derecha del módulo de formulario.
Uso de CSS personalizadas
- En tu cuenta de HubSpot, dirígete a Marketing > Archivos y plantillas > Herramientas de diseño.
- En el buscador, busca el archivo CSS dentro de las carpetas y luego haz clic en él para seleccionarlo en el editor.
- Agrega el siguiente código para centrar todos tus formularios en tu sitio web:
/*Para centrar el formulario en su módulo y aplicar un ancho máximo */
form.hs-form,
.hs_cos_wrapper .form-title {
max-width: 600px;
display: block;
margin: 0 auto;
}
/*para centrar el título del formulario dentro de un módulo de formulario */
.hs_cos_wrapper .form-title {
text-align: center;
}
/*para centrar el botón de envío del formulario */
.hs_submit {
text-align: center;
}
- Si solo deseas centrar formularios específicos, puedes agregar una clase personalizada a tu módulo de formulario en tu plantilla y luego ajustar tu CSS para aplicar solo a los módulos con esa clase. Por ejemplo, si agregas el formulario de clase personalizado center-form a tu módulo de formulario en tu plantilla, tu CSS se verá como lo siguiente:
/*Para centrar el formulario en su módulo y aplicar un ancho máximo */
form.hs-form,
.center-form .hs_cos_wrapper .form-title {
max-width: 600px;
display: block;
margin: 0 auto;
}
/*para centrar el título del formulario dentro de un módulo de formulario */
.center-form .hs_cos_wrapper .form-title {
text-align: center;
}
/*para centrar el botón de envío del formulario */
.center-form .hs_submit {
text-align: center;
}
- En la parte superior derecha, haz clic en Publicar cambios.
- Marcar como nuevo
- Favorito
- Suscribir
- Silenciar
- Suscribirse a un feed RSS
- Resaltar
- Imprimir
- Enviar un correo electrónico a un amigo
- Informe de contenido inapropiado