Você quer aprender a personalizar as cores do tema do WordPress? Talvez você tenha encontrado um tema que adora, mas a paleta de cores não combina com sua marca. Há algumas maneiras de ajustar as cores do tema para atender às suas necessidades.
Nesta postagem, veremos como você pode personalizar as cores do tema do WordPress com e sem código.
Crie seu formulário WordPress agora
Como posso alterar a cor de um formulário de contato no WordPress?
Depois de personalizar as cores do tema, você desejará que os formulários do seu site correspondam ao estilo e às cores. A maneira mais fácil de fazer isso é usar o WPForms.
Além de examinar como você pode personalizar as cores do tema com e sem código, também examinaremos mais de perto como usar o WPForms para obter um estilo de formulário. Em resumo, o novo recurso Form Styles torna muito simples combinar seus formulários com o site. Mostraremos a você como.
Como personalizar as cores do tema do WordPress
Vamos começar a personalizar!
Neste artigo
Personalização das cores do tema do WordPress com código
Se você domina bem o CSS e se sente à vontade para editar os arquivos e a folha de estilo do seu site, usar código para personalizar o tema do WordPress é uma opção.
No entanto, não recomendamos que você edite o arquivo existente. Em vez disso, sugerimos o uso de outro plug-in para criar e personalizar temas filhos. Os temas filhos são, basicamente, cópias de seu tema com todos os mesmos atributos.
Editar um tema filho é editar uma cópia. Se você cometer algum erro, poderá reverter para o tema pai. Isso também o ajudará a evitar problemas se houver atualizações no tema pai.
Etapa 1: Instalar um plug-in de tema filho
Aqui estão algumas sugestões de plug-ins que você pode usar para criar temas filhos:
Em nosso exemplo, usaremos o Child Theme Configurator.
Etapa 2: Configure seu tema filho
Depois de instalar e ativar o plug-in do tema filho de sua escolha, você precisará acessá-lo para fazer as configurações.
O local onde o plug-in do tema filho aparece no WordPress pode ser diferente, dependendo do plug-in que você usa. Acessamos o Child Theme Configurator clicando no menu Tools (Ferramentas) na barra lateral esquerda.
Depois de localizar o plug-in, você deverá ver as configurações ou opções para criar um tema filho.
Descobrimos que o Child Theme Configurator orienta você durante o processo, o que é útil e simplifica uma tarefa que, de outra forma, seria confusa.
Depois de clicar no botão Analyze, aparecerão mais etapas. Percorra cada uma dessas etapas e, no final, você estará pronto para criar seu tema filho.
Etapa 3: Personalize seu tema filho
Depois de criar seu novo tema filho, clique em Appearance " Theme File Editor no menu da barra lateral esquerda.
Quando estiver no Theme File Editor, você verá um menu suspenso no lado direito, no qual poderá selecionar o tema a ser editado. Seu tema filho deve estar nessa lista.
Depois de selecionar o tema filho, há duas maneiras de alterar os arquivos.
A primeira maneira é editar o CSS diretamente no editor de arquivos, como mostramos acima. A segunda maneira é usar o editor de CSS incorporado para visualizar as alterações à medida que você as faz.
Para acessar o editor CSS integrado, vá para Appearance " Customize no menu da barra lateral esquerda.
Nessa página, você verá uma visualização ao vivo do seu site WordPress, juntamente com opções para fazer alterações.
Como você pode ver no menu de opções, há várias alterações de estilo que podem ser feitas sem nenhum código. Isso pode depender de seu tema e do que já foi configurado.
Nessas opções, você encontrará configurações para atualizar as cores do tema.
Por exemplo, você pode escolher o estilo de botão que deseja usar em seu site.
E depois de selecionar o estilo, você pode selecionar opções de cores personalizadas para o texto, o plano de fundo e a borda do botão.
Você também pode alterar as famílias de fontes do cabeçalho e do corpo.
Observe, entretanto, que há uma opção de menu para CSS adicional na parte inferior. Talvez você descubra que o código CSS ainda é necessário para determinadas alterações que deseja fazer nas cores do tema do seu site. Nesse caso, insira o código CSS necessário nesse menu suspenso e visualize as alterações ao vivo à medida que as fizer.
Personalização das cores do tema do WordPress sem código
Se você estiver preocupado em quebrar algo ao alterar o CSS do tema, há uma maneira ainda mais fácil de personalizar as cores do tema do WordPress. Você pode usar um plug-in sem código, como o Thrive Themes.
O Thrive Theme Builder é um personalizador de temas que permite que você crie seu próprio tema sem usar ou conhecer qualquer código. Ele tem uma interface de arrastar e soltar para personalização do front-end, e você tem controle sobre todos os aspectos do design.
Etapa 1: Instale o plug-in e conclua o assistente do site
Depois de registrar uma conta e instalar o plug-in, o assistente de site é iniciado.
Você também pode acessar o assistente de site novamente a qualquer momento no painel de controle do Thrive Themes.
Quando você inicia o assistente de site, ele solicita que você carregue seu logotipo e mostra como ele ficará em um fundo claro e escuro. Mesmo que você esteja usando um plano de fundo claro, o plano de fundo escuro é importante porque as pessoas usam o modo escuro em seus dispositivos.
Depois disso, você pode selecionar a cor da sua marca. Ao clicar na caixa de cor, você tem a opção de selecionar uma cor com o seletor de cores ou usando um código de cor hexadecimal.
Ao passar por cada etapa do assistente, você está criando seu próprio tema personalizado.
Ao concluir o restante do assistente do site, você personaliza a aparência do seu site sem precisar escrever uma linha de código. O Thrive Theme Builder torna muito fácil criar um tema de site que seja exclusivamente seu.
Etapa 2: Faça quaisquer personalizações adicionais no painel de controle
Como mencionamos anteriormente, você sempre pode voltar ao assistente se quiser fazer alterações. Você também pode acessar esses recursos por meio do painel. Depois de concluir o assistente, clique nas outras opções para fazer outras personalizações.
Se quiser fazer uma alteração rápida nas cores e no logotipo do seu site, ou se quiser carregar um favicon para o seu site, você poderá acessá-lo no assistente ou na seção Branding no painel. Da mesma forma, você também pode atualizar a tipografia aqui.
Depois de personalizar todos os aspectos da sua página, você poderá salvar o tema e começar a usá-lo imediatamente.
Alterando a cor do formulário de contato no WordPress
Como mencionamos anteriormente, depois de atualizar as cores do tema, você deve se certificar de que todo o resto corresponda.
Veja seus formulários, por exemplo. Se você tiver uma página com bordas arredondadas e cores suaves, um formulário quadrado com botões retangulares e um contraste nítido provavelmente parecerá um pouco deslocado.
Entre no WPForms. As opções de estilo de formulário facilitam a personalização de seus formulários para que correspondam ao seu tema.
Etapa 1: Instalar e ativar o WPForms
Talvez sejamos tendenciosos, mas achamos que o WPForms é o melhor criador de formulários que existe. Sua interface amigável de arrastar e soltar permite que você crie e publique formulários bonitos e profissionais em minutos. Além disso, suas opções de estilo de formulário permitem que você combine facilmente os estilos de formulário com o tema do seu site WordPress.
Para começar a estilizar os formulários de acordo com as cores do tema do WordPress, instale e ative o WPForms. Se precisar de alguma orientação, confira este guia para iniciantes sobre como instalar plug-ins do WordPress.
Etapa 2: criar um formulário no WPForms
Depois de instalar e ativar o WPForms, é hora de criar seu formulário!
Use o botão Adicionar novo para começar.
O criador de formulários será aberto para que você possa criar o formulário perfeito para atender às suas necessidades. Crie um formulário do zero ou escolha entre centenas de modelos personalizáveis.
Quando o formulário estiver concluído, você poderá usar o botão Incorporar para incorporá-lo em um post ou página do seu site. Você pode optar por incorporar o formulário em uma página existente ou criar uma nova página para ele.
Etapa 3: Editar estilos de formulário no Block Editor do WordPress
Em seguida, abra o rascunho da página no construtor de páginas. Para essa etapa, você deve usar o editor de blocos do WordPress para acessar as opções de personalização.
Clique no formulário incorporado. As opções de estilo do formulário serão abertas na barra lateral do lado direito do editor de páginas. Você verá que pode alterar os estilos de campo, rótulo e botão.
Ao editar estilos de campo, você pode ajustar o tamanho e o raio da borda da área de texto. Quanto maior for o raio da borda, mais arredondada será a área de texto. Você também pode escolher cores para o plano de fundo, a borda e o texto.
Em seguida, você pode alterar o estilo do rótulo. Decida a cor que deseja para o rótulo e, em seguida, escolha cores para o subrótulo e a dica, bem como para a mensagem de erro.
Por fim, você pode fazer ajustes no estilo do botão.
Para facilitar ainda mais, depois de fazer suas seleções de estilo de formulário, clique em Advanced Options (Opções avançadas). Você verá um campo contendo o código CSS.
Esse é o código personalizado para seu formulário. O WPForms o gera automaticamente para você. Você pode copiá-lo e colá-lo no campo Advanced em todos os seus formulários para que todos correspondam aos estilos.
E se você quiser começar de novo, basta clicar em Reset Style Settings (Redefinir configurações de estilo ) para limpar toda a formatação.
Depois disso, você estará pronto para publicar seu formulário totalmente estilizado.
Agora seus formulários combinam com as cores do tema do WordPress, e você não precisou escrever uma única linha de código para fazer isso.
Em seguida, crie o formulário interativo perfeito
Pronto para melhorar seu jogo de formulários? Agora que você já sabe como personalizar as cores do tema do WordPress e estilizar seus formulários de acordo com elas, é hora de passar para o próximo nível. Temos algumas dicas para criar o formulário interativo perfeito para manter os usuários envolvidos e aumentar as conversões.
Deseja enviar uma pesquisa de clientes irresistível? Confira estes exemplos de pesquisas com clientes para inspirá-lo!
Crie seu formulário WordPress agora
Pronto para criar seu formulário? Comece hoje mesmo com o plug-in de criação de formulários mais fácil do WordPress. O WPForms Pro inclui vários modelos gratuitos e oferece uma garantia de reembolso de 14 dias.
Se este artigo o ajudou, siga-nos no Facebook e no Twitter para obter mais tutoriais e guias gratuitos sobre o WordPress.
