¿Cómo centrar un formulario en una plantilla de HubSpot?

vrneuman
HubSpot Employee

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.

0 Respuestas

Aún no hay respuestas para esta publicación.

Por ahora, ningún usuario ha respondido a esta publicación. Vuelve pronto para ver si alguien tiene la solución o envía tu propia respuesta si sabes cómo ayudar. Cada grano de arena cuenta.

Responder esta publicación

¿Necesitas ayuda para responder? Echa un vistazo a las pautas de la comunidad

0 Respuestas 0