Isenção de responsabilidade de tradução: esse conteúdo foi traduzido para sua conveniência com o uso de software e pode não ter sido revisado por uma pessoa. O texto oficial é a versão em inglês e sempre será o texto mais atualizado. Para ver a versão em inglês, clique aqui.
CMS-General

Centralizar um formulário em um modelo do HubSpot

Ultima atualização: Outubro 1, 2019

Disponível para

Marketing Hub  Professional, Enterprise
Basic

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

 

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.