Como Adicionar Estilos CSS Personalizados para WPForms

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

Com este guia útil, poderá escolher facilmente a forma como pretende adicionar os trechos ao seu site. Assim que tiver selecionado o seu método de implementação, poderá começar a explorar a documentação do programador para escolher os trechos de CSS que gostaria de começar a adicionar ao seu site!

Para ver a vasta gama de todos os trechos disponíveis, explore a nossa documentação do programador.

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

Opções de Implementação

CSS é uma ferramenta poderosa para estilizar o seu site, bem como os seus formulários. Existem 3 abordagens principais para adicionar CSS personalizado ao seu site.

Utilizar o plugin WPCode (recomendado)

Utilizar o plugin WPCode é super rápido e fácil para adicionar trechos CSS ao seu site.

Apenas uma das muitas razões pelas quais recomendamos vivamente a utilização deste plugin para adicionar trechos personalizados ao seu site é que ele tem uma verificação integrada antes de guardar o seu trecho. Se um ponto e vírgula for omitido ou um parêntese extra for adicionado, o trecho não será guardado. Isto impede que quaisquer problemas ocorram no seu site devido a um trecho CSS copiado e colado incorretamente. E sim, mesmo com a versão gratuita, receberá esta auditoria extra antes de o seu trecho ser ativado.

Depois de o plugin ser instalado, navegue até ao menu Code Snippets no menu do lado esquerdo do seu painel WordPress e selecione + Add Snippet. Em seguida, basta clicar em Add Your Custom Code (New Snippet), depois clicar no botão azul Use Snippet para criar um novo trecho CSS.

Quando o seu novo ecrã de trecho aparecer, dê um nome ao trecho que faça sentido para si, para que você e os administradores do seu site compreendam o seu propósito. No menu suspenso Code Type, selecione CSS, pois adicionaremos apenas CSS a este trecho.

Na secção Code Preview, adicione o seu CSS. Aqui está um exemplo para usar para o propósito 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, verá a secção Insertion. Como estamos a adicionar CSS, selecionaremos Auto-Insert para o Insert Method e Site Wide Header para o Location.

Depois de adicionar o seu trecho, clique em Guardar Trecho. Isto guardará o trecho, mas não o ativará automaticamente. Assim que guardar inicialmente, notará que o estado do trecho é definido como Inativo por defeito. Simplesmente alterne o interruptor de Inativo para Ativo e clique em Atualizar para definir o trecho como Ativo.

Utilizar o CSS Hero

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

Criar um tema filho

Temas filhos são recomendados para desenvolvimento mais avançado. Pode descobrir como criar um tema filho seguindo este tutorial.

Em cada tema filho está o ficheiro obrigatório style.css, neste ficheiro é onde adicionaria o seu CSS personalizado.

Utilizar o Personalizador do WordPress

Desde a versão 4.5 do WordPress, o WordPress oferece uma ferramenta integrada para adicionar quaisquer estilos CSS personalizados ao seu tema ou a qualquer plugin que tenha instalado, o que o torna uma escolha popular para adicionar o seu CSS.

Para saber mais sobre o Personalizador do WordPress, consulte a documentação deles.

Pode encontrar o personalizador do WordPress navegando para Aparência » Personalizar » CSS Adicional.

Basta lembrar-se de clicar no botão Publicar para guardar as suas alterações depois de adicionar o seu CSS. Desde que o tema permaneça ativo, o seu CSS personalizado será aplicado.

Notas

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

Ligações Adicionais

Para informações adicionais sobre CSS personalizado para o WPForms, consulte estas ligações de referência:

• Documentação de estilo para WPForms
• Uma lista completa de documentação para estilizar o WPForms usando CSS

FAQ

P: Como é que isto me ajuda a adicionar CSS personalizado para o WPForms?

R: Este tutorial não é especificamente para CSS personalizado do WPForms, mas sim para qualquer CSS personalizado que possa querer adicionar ao seu site.

Simplesmente encontre qual a opção acima que lhe é mais fácil para adicionar quaisquer trechos de código, incluindo os trechos de código do WPForms mencionados nas secções Tutoriais e Trechos.