### [Como Personalizar o Divisor de Seção do WPForms Usando CSS](https://wpforms.com/developers/how-to-customize-wpforms-section-divider-using-css/)
**Publicado:** 8 de julho de 2021
**Autor:** Equipe Editorial
**Resumo:** Este artigo irá guiá-lo sobre como usar CSS para personalizar a aparência do Divisor de Seção do WPForms quando usado em seus formulários.
**Conteúdo:**
## Visão Geral
Gostaria de personalizar o campo de formulário **Divisor de Seção** do WPForms? Usando um pouco de CSS, você pode alterar o estilo não apenas do divisor em si, mas também do texto usado com o divisor. Neste artigo, detalharemos as etapas necessárias para personalizar a estilização do campo de formulário **Divisor de Seção**.
## Criando o formulário
Para começar, criaremos um formulário, adicionaremos nossos campos e, em seguida, dividiremos esses campos com o **Divisor de Seção**.
Se precisar de alguma ajuda na criação do seu formulário, [consulte esta documentação](https://wpforms.com/docs/creating-first-form/ "Criando Seu Primeiro Formulário").
Para fins desta documentação, estamos criando um formulário que capturará informações pessoais, histórico médico e informações de seguro primário. Como o formulário será muito longo, queremos dividi-lo em seções que definam claramente o que cada seção é e, para fazer isso, usaremos **Divisores de Seção** para dividir o formulário.
Para saber mais sobre **Divisores de Seção**, [verifique esta documentação](https://wpforms.com/docs/how-to-choose-the-right-form-field-for-your-forms/#section-divider "Um Guia Completo para Tipos de Campo no WPForms - Divisor de Seção").
## Adicionando o CSS
Agora é hora de adicionar o CSS que personalizará o estilo do **Divisor de Seção**.
Para obter ajuda na adição de CSS ao seu site, [revise este tutorial](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "Como Adicionar Estilos CSS Personalizados para WPForms").
```
form#wpforms-form-220 .wpforms-field-divider h3 {
color: #ffffff;
text-align: center;
font-size: 30px;
text-transform: uppercase;
}
form#wpforms-form-220 .wpforms-field-divider {
padding: 20px;
background-color: #e27730;
border-radius: 3px;
}
```
Estamos visando o ID do formulário **220**. Você precisará atualizar este ID para corresponder ao seu próprio ID de formulário. Para obter assistência na localização deste ID, [revise este tutorial](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/ "Como Localizar o ID do Formulário e o ID do Campo").
Agora, com o CSS adicionado, nosso **Divisor de Seção** tem uma aparência completamente diferente.
E é tudo o que você precisa para personalizar o **Divisor de Seção**. Gostaria também de personalizar o estilo dos itens de **Checkbox**? Dê uma olhada em nosso artigo sobre [Como Personalizar Campos de Checkbox e Rádio para Parecerem Botões](https://wpforms.com/developers/how-to-customize-checkbox-and-radio-fields-to-look-like-buttons/ "Como Personalizar Campos de Checkbox e Rádio para Parecerem Botões").
## FAQ
#### P: E se eu quisesse fazer essa alteração para todos os meus formulários?
**R:** Para usar este CSS para todos os WPForms, basta adicionar seu CSS ao seu site e remover o ID do formulário prefixado.
```
.wpforms-field-divider h3 {
color: #ffffff !important;
text-align: center !important;
font-size: 30px !important;
text-transform: uppercase !important;
}
.wpforms-field-divider {
padding: 20px !important;
background-color: #e27730 !important;
border-radius: 3px !important;
}
```
**Categorias:** Snippets
**Tags:** CSS
---