Você já tentou mudar uma cor ou ocultar algo no seu site WordPress, apenas para descobrir que não há opção para isso? Eu também já passei por isso. Lembro-me de passar muito tempo procurando nas configurações do meu tema por um simples ajuste de fonte que simplesmente não era possível.
Foi quando aprendi sobre CSS personalizado. É uma maneira rápida de corrigir pequenos problemas visuais no seu site, sem editar arquivos de tema ou contratar um desenvolvedor.
Se você é novo nisso, não se preocupe. Você não precisa saber codificar ou entender como os sites funcionam por baixo dos panos.
Neste guia, mostrarei maneiras fáceis para iniciantes de adicionar CSS personalizado ao WordPress. Também mostrarei minha ferramenta favorita para essa tarefa, o SeedProd, que torna todo o processo muito mais fácil.
Métodos para Adicionar CSS Personalizado no WordPress:
O que é CSS Personalizado?
CSS significa Cascading Style Sheets (Folhas de Estilo em Cascata). É uma linguagem simples que controla a aparência do seu site WordPress.
Por exemplo, este trecho de CSS muda a cor de um título para vermelho:
h1 {
color: red;
}E este oculta um elemento na página:
.hidden {
display: none;
}Você não precisa escrever código como este do zero. Na maioria das vezes, você apenas copiará e colará no lugar certo.
O segredo é saber onde colocar seu CSS personalizado, e é exatamente isso que mostrarei a seguir.
Por que Adicionar CSS Personalizado no WordPress?
Às vezes, você quer mudar a cor de um botão, centralizar um título ou remover um espaço extra, e seu tema não oferece uma maneira de fazer isso.
É aí que entra o CSS personalizado. Ele lhe dá controle sobre os pequenos detalhes de design que fazem seu site parecer e se sentir exatamente como você deseja.
Com CSS, você não fica preso às configurações padrão do tema do WordPress. Você pode ajustar seu layout, estilo e espaçamento sem trocar de tema ou instalar plugins do WordPress extras.
Apenas lembre-se: o CSS ajuda a ajustar seu design, mas não corrigirá erros visuais maiores que o CSS personalizado não pode corrigir, como layouts confusos ou navegação ruim.
Então, como você realmente adiciona CSS personalizado no WordPress?
Existem algumas maneiras diferentes, mas começarei com a que uso com mais frequência e a que recomendo se você quiser controle total sem o incômodo.
1. Adicionar CSS Personalizado com SeedProd (Minha Maneira Favorita)
Se você nunca usou o SeedProd antes, é um construtor de arrastar e soltar para WordPress que torna a personalização do seu site super fácil, mesmo que você não seja um desenvolvedor.
Eu o uso o tempo todo porque posso criar temas completos ou páginas de destino sem tocar em nenhum código. E quando quero adicionar um pouco de CSS, o SeedProd me dá um lugar simples para fazer isso.
Antes de entrarmos nas etapas, é útil ter o SeedProd configurado no seu site. Se você ainda não o usou, aqui estão alguns tutoriais amigáveis para iniciantes para ajudá-lo a começar:
Depois de criar uma landing page ou tema com o SeedProd, você estará pronto para adicionar seu CSS personalizado. Vamos começar com como fazer isso em uma única landing page.
Como Adicionar CSS a uma Landing Page no SeedProd
Para começar, abra seu painel do WordPress e vá para SeedProd » Landing Pages.
Encontre a landing page que deseja editar e clique no link Editar ao lado dela.
Isso abrirá o construtor de páginas do SeedProd. No canto inferior esquerdo, clique no ícone de engrenagem para abrir suas Configurações Globais.
Na barra lateral esquerda, clique na aba CSS Personalizado.
Agora cole seu CSS. Por exemplo, aqui está um que estiliza o texto do seu parágrafo:
p {
font-style: italic;
color: #444;
}
Clique no botão Salvar no canto superior direito.
Você pode então pré-visualizar sua página para ver as alterações salvas ao vivo em seu site.
Como Adicionar CSS Global com o Theme Builder do SeedProd
Se você estiver usando o Theme Builder do SeedProd para projetar todo o seu site, poderá aplicar CSS personalizado que funcione em todas as páginas.
Para começar, abra seu painel do WordPress e vá para SeedProd » Theme Builder.
Encontre o modelo chamado CSS Global e clique em Editar Design.
Dentro do construtor, clique no ícone de engrenagem no canto inferior esquerdo para abrir as Configurações Globais.
Na barra lateral esquerda, clique na aba CSS Personalizado.
Clique no botão Editar CSS Personalizado. Isso abre o Personalizador do WordPress em uma nova janela.
No Personalizador, clique em CSS Adicional e, em seguida, cole seu código.
Por exemplo:
p {
font-style: italic;
}Isso fará com que todo o texto do parágrafo em seu site apareça em itálico.
Clique em Publicar para salvar suas alterações e aplicá-las em todo o site.
Agora você pode atualizar sua página para ver a atualização ao vivo.
Este método é útil para fazer alterações de estilo globais, como ajustes de fonte, espaçamento e ajustes de cor.
2. Adicionar CSS Personalizado no WordPress Sem um Construtor de Páginas
Se você não estiver usando um construtor de páginas como o SeedProd, ainda poderá adicionar CSS personalizado diretamente no WordPress. As etapas dependem do tipo de tema que você está usando, seja um tema clássico ou um tema de blocos.
Temas clássicos usam a ferramenta Personalizador mais antiga e geralmente dependem de widgets e modelos de página. Temas de blocos, por outro lado, usam o Editor de Site mais recente, que permite projetar todo o seu site com blocos.
Vamos começar com temas clássicos.
Use o Personalizador do WordPress (Temas Clássicos)
No seu painel do WordPress, vá para Aparência » Personalizar.
No menu do Personalizador, clique em CSS Adicional.
Uma caixa de texto aparecerá onde você pode colar seu código personalizado. Por exemplo:
p {
color: #0073aa;
}Isso muda todo o texto do parágrafo em seu site para um tom de azul.
Você verá uma prévia ao vivo das suas alterações à direita enquanto digita.
Quando estiver satisfeito com o resultado, clique no botão Publicar para salvar suas alterações.
Este método funciona bem com temas mais antigos que suportam o Personalizador e não requer nenhum plugin do WordPress.
Use o Editor de Site (Temas de Blocos)
Se o seu site WordPress usa um tema de blocos, você gerenciará seu design usando o Editor de Site completo em vez do Personalizador.
Para começar, vá para Aparência » Editor no seu painel do WordPress.
Na barra lateral esquerda, clique no ícone de Estilos. Ele se parece com uma meia-lua ou uma paleta de tinta.
Em seguida, clique no pequeno ícone de lápis rotulado Editar Estilos.
Agora você verá o editor do WordPress. No canto superior direito da tela, clique no menu de três pontos (⋮) e selecione CSS Adicional no menu suspenso.
Cole seu código personalizado na caixa. Por exemplo:
p {
color: #0073aa;
}Isso alterará a cor do texto dos parágrafos em todo o seu site.
Clique em Salvar no canto superior direito para aplicar as alterações.
⚠️ Se você não vir o painel de CSS Adicional, seu tema de blocos pode não suportá-lo. Nesse caso, você pode usar um plugin como o WPCode ou mudar para um construtor como o SeedProd.
3. Use um Plugin de CSS Personalizado
Se o seu tema não suporta o Personalizador ou o Editor de Site, ou se você apenas deseja uma maneira limpa de gerenciar seu CSS em um só lugar, recomendo usar um plugin como o WPCode.
WPCode é um plugin leve para WordPress que permite adicionar com segurança trechos de código personalizados, como CSS, HTML, JavaScript ou PHP, sem editar os arquivos do seu tema.
Depois de instalar e ativar o WPCode, vá para Snippets de Código » + Adicionar Snippet no seu painel do WordPress.
Clique na caixa que diz Adicionar seu código personalizado (Novo Snippet) e dê um nome ao seu snippet, como Estilos CSS Personalizados.
Em Tipo de Código, selecione Snippet CSS no menu suspenso.
Agora cole seu CSS na caixa de código. Por exemplo:
p {
color: #0073aa;
}Role para baixo e escolha Inserção Automática para aplicar o CSS em todo o seu site.
Em seguida, clique em Salvar Snippet e ative o interruptor no topo para Ativo.
É isso! Seus estilos personalizados agora estão ativos em todo o seu site, e você pode voltar a este snippet a qualquer momento para fazer alterações.
4. Edite os Arquivos do Seu Tema (Não Recomendado)
Este método só funciona se você estiver usando um tema clássico. Temas de blocos não incluem acesso ao Editor de Arquivos de Tema no painel do WordPress.
Se você estiver usando um tema clássico e estiver confortável em editar código, pode adicionar CSS personalizado diretamente ao arquivo style.css do seu tema. Mas não recomendo isso, a menos que você saiba o que está fazendo.
Ao editar arquivos de tema diretamente, suas alterações podem ser perdidas durante as atualizações. Você também não verá uma prévia ao vivo, e até mesmo um pequeno erro de digitação pode quebrar seu layout.
Dito isso, se você estiver usando um tema filho ou souber como restaurar seu site se algo der errado, veja como fazer.
Vá para Aparência » Editor de Arquivos de Tema no seu painel do WordPress.
Na lista de arquivos à direita, clique em style.css.
Role até o final do arquivo e cole seu CSS. Por exemplo:
p {
color: #0073aa;
}Clique em Atualizar Arquivo para salvar suas alterações.
⚠️ Faça isso apenas se você estiver usando um tema filho ou souber como restaurar seu site com segurança. Para a maioria dos usuários, ferramentas como SeedProd ou WPCode são opções muito mais seguras.
Bônus: Direcione CSS Personalizado para Páginas ou Blocos
Às vezes, você não quer que seu CSS afete o site inteiro, apenas quer que ele se aplique a uma página ou a um único bloco. Você pode fazer isso usando IDs de página ou classes CSS personalizadas.
Usando IDs de Página no WordPress
Cada página no WordPress tem um ID exclusivo, e você pode usá-lo para direcionar estilos apenas para essa página.
Para encontrar o ID da página, visite a página em seu navegador, clique com o botão direito em qualquer lugar e escolha Inspecionar.
No código, procure pela tag <body>. Ela incluirá uma classe como page-id-37.
Você pode então usá-la em seu CSS assim:
.page-id-37 p {
color: green;
}
Isso mudará apenas a cor do texto do parágrafo nessa página específica.
Usando as Configurações de Bloco do SeedProd
Se você estiver usando o SeedProd, pode direcionar blocos específicos adicionando um nome de classe personalizado.
Abra sua página no construtor do SeedProd e clique no bloco que você deseja estilizar. No meu caso, quero estilizar um bloco de título específico.
No painel esquerdo, vá para a aba Avançado, procure pela opção Atributos e expanda-a.
Encontre o campo rotulado Classe CSS e adicione um nome de classe como my-special-style.
Em seguida, na sua caixa de CSS Personalizado global ou de nível de página, adicione algo como isto:
.my-special-style {
background-color: #fff7e6;
border-radius: 10px;
}
Após salvar e visualizar a página, você verá suas alterações nesse bloco específico sem afetar o restante do seu site.
Perguntas Frequentes Sobre Adicionar CSS Personalizado no WordPress
.page-id-123 p {color: red; }Or, if you’re using SeedProd or WPCode, you can create a custom CSS class and apply it to a block or section manually.
Pronto para Personalizar seu Site WordPress?
Como você viu, existem várias maneiras fáceis de adicionar CSS personalizado no WordPress, mesmo que você não seja um desenvolvedor.
Você pode estilizar blocos individuais, ajustar todo o seu tema ou fazer pequenas alterações que ajudem seu site a ter exatamente a aparência que você deseja. Se você prefere usar SeedProd, WPCode ou uma das ferramentas integradas do WordPress, o importante é que você não precisa se sentir preso aos padrões do seu tema.
Se você deseja mais controle sem editar arquivos de tema, o SeedProd é a maneira mais fácil de construir e estilizar suas páginas, sem necessidade de código.
Quer continuar personalizando seu site WordPress? Aqui estão alguns guias que recomendo a seguir:
- Como Editar a Página Inicial do Seu WordPress
- Como Personalizar Cabeçalhos no WordPress
- Como Adicionar Depoimentos a Páginas do WordPress
- Como Criar uma Página 404 Personalizada no WordPress
- Como Adicionar um Formulário de Contato no WordPress
