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í.
CMS-General

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

Última actualización: marzo 25, 2019

Requisitos

Marketing Hub Professional, Enterprise
Básico

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.