Como adicionar estilos CSS personalizados para seus WPForms

Gostaria de adicionar estilos CSS personalizados ao seu site? Este tutorial lhe dará várias opções de como adicionar esses trechos ao seu site com instruções passo a passo para cada forma opcional que você escolher para adicionar seu CSS.

Com este guia útil, você poderá escolher facilmente a maneira como deseja adicionar os snippets ao seu site. Depois de selecionar o método de implementação, você poderá começar a explorar a documentação do desenvolvedor para escolher os snippets de CSS que deseja adicionar ao seu site!

Para dar uma olhada no host de todos os snippets disponíveis, explore nossa documentação para desenvolvedores.

Consulte nosso tutorial em vídeo para obter uma visão mais prática de como adicionar trechos de CSS personalizados ao seu site.

Opções de implementação

O CSS é uma ferramenta poderosa para estilizar seu site, bem como seus formulários. Há três abordagens principais para adicionar CSS personalizado ao seu site.

Uso do plug-in WPCode (recomendado)

Usar o plug-in WPCode é muito rápido e fácil para adicionar trechos de CSS ao seu site.

Um dos muitos motivos pelos quais recomendamos enfaticamente o uso desse plug-in para adicionar snippets personalizados ao seu site é o fato de ele ter uma verificação integrada antes de salvar o snippet. Se um ponto e vírgula for esquecido ou um colchete extra for adicionado, o snippet não será salvo. Isso evita que ocorram problemas em seu site devido a um snippet de CSS copiado e colado incorretamente. E sim, mesmo com a versão gratuita, você receberá essa auditoria extra antes que o snippet seja ativado.

Para saber mais sobre esse plug-in, consulte o site para obter mais informações, inclusive a documentação dedicada.

Depois que o plug-in estiver instalado, navegue até o menu Code Snippets no menu do lado esquerdo do painel do WordPress e selecione + Add Snippet. Em seguida, basta clicar em Add Your Custom Code (New Snippet) e, depois, no botão azul Use Snippet para criar um novo snippet de CSS.

no menu WPCode, clique em + Add Snippet

Quando a tela do novo snippet for exibida, dê ao snippet um nome que faça sentido para que você e os administradores do site entendam sua finalidade. No menu suspenso Tipo de código, selecione CSS, pois adicionaremos apenas CSS a esse snippet.

Na seção Code Preview (Visualização de código), adicione seu CSS. Aqui está um exemplo a ser usado para os fins desta documentação.

/* write your CSS code here */
	ul#wpforms-999-field_27 li label, 
	ul#wpforms-999-field_26 li label {
    padding: 10px;
    transition: all ease 0.3s;
    background: linear-gradient(to right, #e27730 50%, #cd631d 50%);
    background-size: 200% 100%;
    background-position: left bottom;
    color: white;
	}
	
	ul#wpforms-999-field_27 li.wpforms-selected label, 
	ul#wpforms-999-field_27 li label:hover, 
	ul#wpforms-999-field_26 li.wpforms-selected label, 
	ul#wpforms-999-field_26 li label:hover {
		cursor: pointer;
		border-radius: 2px;
		background-position: right top;
	}
	
	ul#wpforms-999-field_27 li input, 
	ul#wpforms-999-field_26 li input {
		display: none;
	}
	
	ul#wpforms-999-field_27 li, 
	ul#wpforms-999-field_26 li {
		float: left;
		width: auto;
		display: inline-block;
		padding: 10px 10px 10px 0!important;
	}

Em seguida, você verá a seção Inserção. Como estamos adicionando CSS, selecionaremos Auto-Insert para o Insert Method e Site Wide Header para o Location.

Depois de adicionar o snippet, clique em Save Snippet (Salvar snippet). Isso salvará o snippet, mas não o ativará automaticamente. Após o salvamento inicial, você notará que o status do snippet está definido como Inativo por padrão. Basta alternar a chave de Inativo para Ativo e clicar em Atualizar para definir o snippet como Ativo.

Uso do CSS Hero

Se você preferir não mexer em nenhum código, o WPForms tem um tutorial completo sobre como usar o CSS Hero. Para saber mais sobre isso, siga este tutorial.

Criação de um tema filho

Os temas filhos são recomendados para desenvolvimento mais avançado. Você pode descobrir como criar um tema filho seguindo este tutorial.

Em cada tema filho, há o arquivo style.css necessário; é nesse arquivo que você adicionaria seu CSS personalizado.

Usando o personalizador do WordPress

Desde a versão 4.5 do WordPress, ele nos oferece uma ferramenta integrada para adicionar estilos CSS personalizados ao seu tema ou a qualquer plug-in que você tenha instalado, o que o torna uma opção popular para adicionar CSS.

Para saber mais sobre o WordPress Customizer, consulte a documentação.

Você pode encontrar o personalizador do WordPress navegando até Appearance " Customize " Additional CSS.

Lembre-se de que, depois de adicionar o CSS, clique no botão Publish (Publicar ) para salvar as alterações. Enquanto o tema permanecer ativo, seu CSS personalizado será aplicado.

Se você desativar o tema, seu CSS personalizado será removido, pois qualquer CSS personalizado adicionado aqui é anexado ao próprio tema.

Notas

Ao adicionar qualquer tipo de código personalizado ao seu site, é importante garantir a proteção do código. Portanto, independentemente da abordagem que você escolher, é uma boa ideia sempre fazer o backup do site primeiro. Dessa forma, você terá acesso a versões mais antigas dos arquivos do site e do banco de dados, se necessário.

Links adicionais

Para obter mais informações sobre CSS personalizado para WPForms, confira estes links de referência:

PERGUNTAS FREQUENTES

P: Como isso me ajuda a adicionar CSS personalizado para WPForms?

R: Este tutorial não se refere especificamente ao CSS personalizado do WPForms, mas a qualquer CSS personalizado que você queira adicionar ao seu site.

Basta encontrar a opção acima que seja mais fácil para você adicionar qualquer trecho de código, incluindo os trechos de código do WPForms mencionados na seção Tutoriais e trechos.

Como adicionar estilos CSS personalizados para WPForms