Centralizar um formulário em um modelo do HubSpot

vrneuman
HubSpot Employee

Você pode centralizar um formulário em um modelo do HubSpot usando módulos espaçadores horizontais ou CSS personalizado.

 

Usando módulos espaçadores horizontais

  • Na sua conta da HubSpot, navegue até Marketing > Arquivos e modelos > Ferramentas de design.
  • Clique no nome do modelo no localizador para editar.
  • No inspetor à direita, clique em + Add ao inserir dois novos módulos de espaçador horizontais, um para a esquerda e um para a direita do módulo de formulário.

 

Usando CSS personalizado

  • Na sua conta da HubSpot, navegue até Marketing > Arquivos e modelos > Ferramentas de design.
  • No localizador, lcalize seu arquivo CSS dentro das pastas, em seguida, clique para selecioná-lo no editor.
  • Adicione o seguinte código ao centro de todos os formulários no site:
/* Para centralizar o formulário dentro do seu módulo e aplicar uma largura máxima */
form.hs-form,
.hs_cos_wrapper .form-title {
max-width: 600px;
display: block;
margin: 0 auto;
}

/* Para centralizar um título de formulário dentro de um módulo de formulário */
.hs_cos_wrapper .form-title {
text-align: center;
}

/* Para centralizar um botão de envio de formulário */
.hs_submit {
    text-align: center;
}
  • Se você quiser centralizar os formulários específicos, pode adicionar uma classe personalizada ao seu módulo de formulário em seu modelo e, em seguida, ajuste seu CSS para aplicar somente aos módulos com essa classe. Por exemplo, se você adicionar a classe personalizada center-form ao seu módulo de formulário em seu modelo, seu CSS ficaria assim:
/* Para centralizar o formulário em seu módulo e aplicar uma largura máxima */
 form.hs-form, 
.center-form  .hs_cos_wrapper .form-title{
  max-width: 600px;
display: block;
margin: 0 auto;
}

/* Para centralizar o título de formulário dentro de um módulo de formulário */
.center-form .hs_cos_wrapper .form-title {
text-align: center;
}

/* Para centralizar o botão de envio de formulário */
.center-form .hs_submit {
    text-align: center;
}
  • No canto superior direito, clique em Publicar mudanças.
1 Resposta 1
PamCotton
Gerente da Comunidade

Obrigada por compartilhar @vrneuman !!

 

Pam

Você sabia que a Comunidade está disponível em outros idiomas?
Participe de conversas regionais, alterando suas configurações de idioma !


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !


0 Avaliação positiva