Gostaria de adicionar estilos CSS personalizados ao seu site? Este tutorial dá-lhe várias opções sobre como adicionar estes snippets 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 snippets ao seu site. Depois de selecionar o seu método de implementação, pode começar a explorar a documentação do programador para escolher os fragmentos de CSS que gostaria de começar a adicionar ao seu site!
Para ver o host de todos os snippets disponíveis, explore a nossa documentação para programadores.
Consulte o nosso tutorial em vídeo para obter uma visão mais prática de como adicionar snippets de CSS personalizados ao seu site.
Opções de implementação
As CSS são uma ferramenta poderosa para estilizar o seu sítio, bem como os seus formulários. Existem 3 abordagens principais para adicionar CSS personalizadas ao seu sítio.
Utilizar o plugin WPCode (recomendado)
Utilizar o plugin WPCode é super rápido e fácil para adicionar trechos de CSS ao seu site.
Uma das muitas razões pelas quais recomendamos vivamente a utilização deste plugin para adicionar snippets personalizados ao seu site é o facto de ter uma verificação incorporada antes de guardar o seu snippet. Se faltar um ponto e vírgula ou se for adicionado um parêntesis extra, o snippet não será guardado. Isto evita que ocorram problemas no seu site devido a um snippet CSS copiado e colado incorretamente. E sim, mesmo com a versão gratuita, receberá esta auditoria extra antes de o seu snippet ser ativado.
Para saber mais sobre este plugin, consulte o sítio para obter mais informações, incluindo documentação específica.
Assim que o plugin estiver instalado, navegue até ao menu Code Snippets no menu do lado esquerdo do seu painel de controlo do WordPress e selecione + Add Snippet. Em seguida, basta clicar em Adicionar seu código personalizado (novo snippet) e, em seguida, clicar no botão azul Usar snippet para criar um novo snippet CSS.
Quando o ecrã do novo snippet aparecer, dê-lhe um nome que faça sentido para si, para que você e os administradores do seu site compreendam o seu objetivo. No menu suspenso Tipo de código, selecione CSS, pois adicionaremos apenas CSS a este snippet.
Na secção Pré-visualização do código, adicione o seu CSS. Eis um exemplo a utilizar para efeitos 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 Inserção. Uma vez que estamos a adicionar CSS, seleccionaremos Inserção automática para o Método de inserção e Cabeçalho de todo o site para a Localização.
Depois de adicionar o snippet, clique em Salvar snippet. Isto guardará o snippet, mas não o activará automaticamente. Depois de ter guardado inicialmente, verá que o estado do snippet está definido como Inativo por predefinição. Basta alternar o interrutor de Inativo para Ativo e clicar em Atualizar para definir o snippet 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 isso, siga este tutorial.
Criar um tema filho
Os temas filhos são recomendados para um desenvolvimento mais avançado. Para saber como criar um tema secundário, siga este tutorial.
Em cada tema filho existe o ficheiro style.css necessário. É neste ficheiro que deve adicionar as suas CSS personalizadas.
Utilizar o Personalizador do WordPress
Desde a versão 4.5 do WordPress, este programa oferece uma ferramenta integrada para adicionar estilos CSS personalizados ao seu tema ou a qualquer plug-in que tenha instalado, o que o torna uma escolha popular para adicionar CSS.
Para saber mais sobre o WordPress Customizer, consulte a documentação.
Pode encontrar o personalizador do WordPress navegando para Aparência " Personalizar " CSS adicional.
Lembre-se de que, depois de adicionar o CSS, clique no botão Publicar para salvar as alterações. Enquanto o tema permanecer ativo, as suas CSS personalizadas serão aplicadas.
Se desativar o tema, o CSS personalizado será removido, uma vez que qualquer CSS personalizado adicionado aqui é anexado ao próprio tema.
Notas
Ao adicionar qualquer tipo de código personalizado ao seu site, é importante certificar-se de que protege o seu código. Por isso, independentemente da abordagem que escolher, é uma boa ideia fazer sempre uma cópia de segurança do seu sítio primeiro. Dessa forma, terá acesso a versões mais antigas dos ficheiros do sítio e da base de dados, se necessário.
Ligações adicionais
Para obter informações adicionais sobre CSS personalizado para WPForms, consulte estes links de referência:
- Documentação sobre estilos para WPForms
- Uma lista completa de documentos para estilizar WPForms com CSS
FAQ
P: Como é que isto me ajuda a adicionar CSS personalizado para WPForms?
R: Este tutorial não é especificamente para o CSS personalizado do WPForms, mas para qualquer CSS personalizado que você queira adicionar ao seu site.
Basta escolher 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.