Nota: Este contenido se tradujo a través de un software y es posible que no haya sido revisado. La versión en inglés se considera, por tanto, la versión oficial y es posible que haya sido actualizada. Para acceder a la versión en inglés, haz clic aquí.
Design Manager

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

Última actualización: octubre 19, 2020

Requisitos

Marketing Hub  Professional, Enterprise
CMS Hub  Professional, Enterprise
Marketing Hub Básico (versión anterior)

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.
center-a-form

 

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.