Você já tentou alterar uma cor ou ocultar algo em seu site do WordPress e descobriu 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 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 em seu site, sem editar os arquivos do tema ou contratar um desenvolvedor.
Se você é novo no assunto, não se preocupe. Você não precisa saber programar nem entender como os sites funcionam por trás do capô.
Neste guia, mostrarei maneiras fáceis para iniciantes de adicionar CSS personalizado ao WordPress. Também o orientarei sobre minha ferramenta favorita para esse trabalho, o SeedProd, que facilita muito todo o processo.
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, esta parte do CSS altera 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 esse tipo de código do zero. Na maioria das vezes, basta copiar e colar o código 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ê deseja alterar a cor de um botão, centralizar um título ou remover um pouco de espaçamento 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 com que seu site tenha a aparência ideal.
Com o 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 plug-ins adicionais do WordPress.
Mas lembre-se: O CSS ajuda a ajustar seu design, mas não corrige erros visuais maiores que o CSS personalizado não pode corrigir, como layouts desordenados ou navegação ruim.
Então, como você realmente adiciona CSS personalizado no WordPress?
Há algumas maneiras diferentes, mas vou começar com a que uso com mais frequência e a que recomendo se você quiser ter controle total sem complicações.
1. Adicionar CSS personalizado com o SeedProd (minha maneira favorita)
Se você nunca usou o SeedProd antes, ele é um construtor de WordPress do tipo arrastar e soltar que torna a personalização do seu site muito 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 oferece um local simples para fazer isso.
Antes de iniciarmos as etapas, é útil ter o SeedProd configurado em seu site. Se você ainda não o utilizou, aqui estão alguns tutoriais para iniciantes que o ajudarão a começar:
Depois de criar uma landing page ou um tema com o SeedProd, você estará pronto para adicionar seu próprio CSS personalizado. Vamos começar explicando como fazer isso em uma única landing page.
Como adicionar CSS a uma página de destino no SeedProd
Para começar, abra o painel do WordPress e vá para SeedProd " Landing Pages.
Localize a página de destino que deseja editar e clique no link Edit (Editar ) ao lado dela.
Isso abrirá o construtor de páginas do SeedProd. No canto inferior esquerdo, clique no ícone de engrenagem para abrir as Configurações globais.
Na barra lateral esquerda, clique na guia Custom CSS (CSS personalizado ).
Agora, cole seu CSS. Por exemplo, aqui está um que estiliza o texto do parágrafo:
p {
font-style: italic;
color: #444;
}
Clique no botão Save (Salvar ) no canto superior direito.
Em seguida, você pode visualizar sua página para ver as alterações salvas no site.
Como adicionar CSS global com o Theme Builder do SeedProd
Se estiver usando o Theme Builder do SeedProd para projetar todo o seu site, você poderá aplicar CSS personalizado que funcione em todas as páginas.
Para começar, abra o painel do WordPress e acesse SeedProd " Theme Builder.
Localize o modelo chamado Global CSS e clique em Edit Design.
No construtor, clique no ícone de engrenagem no canto inferior esquerdo para abrir as Configurações globais.
Na barra lateral esquerda, clique na guia CSS personalizado.
Clique no botão Editar CSS personalizado. Isso abre o WordPress Customizer em uma nova janela.
No Customizer, clique em Additional CSS e cole seu código.
Por exemplo:
p {
font-style: italic;
}Isso fará com que todo o texto de 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.
Esse método é útil para fazer alterações globais de estilo, como ajustes de fonte, espaçamento e ajustes de cor.
2. Adicionar CSS personalizado no WordPress sem um construtor de páginas
Se não estiver usando um construtor de páginas como o SeedProd, você 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 bloco.
Os temas clássicos usam a ferramenta Customizer mais antiga e geralmente dependem de widgets e modelos de página. Os temas de blocos, por outro lado, usam o mais recente Site Editor, que permite projetar todo o site com blocos.
Vamos começar com os temas clássicos.
Use o personalizador do WordPress (temas clássicos)
No painel do WordPress, vá para Appearance " Customize (Aparência " Personalizar).
No menu Customizer, clique em Additional CSS.
Será exibida uma caixa de texto na qual você poderá colar seu código personalizado. Por exemplo:
p {
color: #0073aa;
}Isso altera todo o texto de parágrafo em seu site para um tom de azul.
Você verá uma visualização ao vivo de suas alterações à direita enquanto digita.
Quando estiver satisfeito com a aparência, clique no botão Publicar para salvar suas alterações.
Esse método funciona bem com temas mais antigos que suportam o Customizer e não requer nenhum plug-in do WordPress.
Usar o Site Editor (Temas de bloco)
Se o seu site WordPress usar um tema de bloco, você gerenciará o design usando o Site Editor completo em vez do Customizer.
Para começar, vá para Appearance " Editor no painel do WordPress.
Na barra lateral esquerda, clique no ícone Styles (Estilos). Ele se parece com uma meia-lua ou uma paleta de pintura.
Em seguida, clique no pequeno ícone de lápis chamado Edit Styles (Editar estilos).
Agora você verá o editor do WordPress. No canto superior direito da tela, clique no menu de três pontos (⋮) e selecione Additional CSS no menu suspenso.
Cole seu código personalizado na caixa. Por exemplo:
p {
color: #0073aa;
}Isso mudará a cor do texto do parágrafo em todo o site.
Clique em Save (Salvar ) no canto superior direito para aplicar as alterações.
⚠️ Se você não vir o painel CSS adicional, talvez seu tema de bloco não seja compatível com ele. Nesse caso, você pode usar um plug-in como o WPCode ou mudar para um construtor como o SeedProd.
3. Use um plug-in CSS personalizado
Se o seu tema não for compatível com o Customizer ou o Site Editor, ou se você quiser apenas uma maneira limpa de gerenciar seu CSS em um só lugar, recomendo usar um plug-in como o WPCode.
O WPCode é um plug-in 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 tema.
Depois de instalar e ativar o WPCode, vá para Code Snippets " + Add Snippet no painel do WordPress.
Clique na caixa que diz Adicionar seu código personalizado (novo snippet) e dê um nome ao snippet, como Estilos CSS personalizados.
Em Code Type (Tipo de código), selecione CSS Snippet na lista suspensa.
Agora, cole seu CSS na caixa de código. Por exemplo:
p {
color: #0073aa;
}Role para baixo e escolha Auto Insert (Inserção automática) para aplicar o CSS em todo o site.
Em seguida, clique em Save Snippet e alterne a chave na parte superior para Active (Ativo).
Pronto! Seus estilos personalizados agora estão ativos em todo o site, e você pode voltar a esse snippet a qualquer momento para fazer alterações.
4. Editar os arquivos do tema (não recomendado)
Esse método só funciona se você estiver usando um tema clássico. Os temas de bloco não incluem acesso ao Theme File Editor no painel do WordPress.
Se estiver usando um tema clássico e se sentir à vontade para editar códigos, você poderá adicionar CSS personalizado diretamente à seção style.css arquivo. Mas não recomendo isso a menos que você saiba o que está fazendo.
Quando você edita os arquivos do tema diretamente, suas alterações podem ser perdidas durante as atualizações. Você também não verá uma visualização ao vivo, e até mesmo um pequeno erro de digitação pode danificar seu layout.
Dito isso, se você estiver usando um tema filho ou souber como restaurar seu site se algo der errado, veja como fazer isso.
Acesse Appearance " Theme File Editor em seu painel do WordPress.
Na lista de arquivos à direita, clique em style.css.
Role até a parte inferior do arquivo e cole seu CSS. Por exemplo:
p {
color: #0073aa;
}Clique em Update File (Atualizar arquivo) para salvar suas alterações.
⚠️ Faça isso somente se estiver usando um tema filho ou se 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 o CSS personalizado para páginas ou blocos
Às vezes, você não quer que seu CSS afete todo o site, mas apenas 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.
Uso de 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, acesse a página em seu navegador, clique com o botão direito do mouse em qualquer lugar e escolha Inspecionar.
No código, procure a tag <body> tag. Ela incluirá uma classe como page-id-37.
Você pode usar isso em seu CSS da seguinte forma:
.page-id-37 p {
color: green;
}
Isso só alterará a cor do texto do parágrafo nessa página específica.
Uso das configurações de bloco do SeedProd
Se estiver usando o SeedProd, você poderá direcionar blocos específicos adicionando um nome de classe personalizado.
Abra sua página no construtor do SeedProd e clique no bloco que deseja estilizar. No meu caso, quero estilizar um bloco de título específico.
No painel esquerdo, vá para a guia Advanced (Avançado ), procure a opção Attributes (Atributos ) e expanda-a.
Localize o campo rotulado como Classe CSS e adicione um nome de classe como my-special-style.
Em seguida, na caixa CSS personalizado global ou no nível da página, adicione algo como isto:
.my-special-style {
background-color: #fff7e6;
border-radius: 10px;
}
Depois de salvar e visualizar a página, você verá suas alterações nesse bloco específico sem afetar o restante do site.
Perguntas frequentes sobre a adição de CSS personalizado no WordPress
.page-id-123 p {color: red; }Ou, se você estiver usando SeedProd ou WPCode, é possível criar uma classe CSS personalizada e aplicá-la a um bloco ou seção manualmente.
Pronto para personalizar seu site WordPress?
Como você viu, há 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 tema ou fazer pequenas alterações que ajudem o site a ficar exatamente como você deseja. Quer você prefira usar o SeedProd, o 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 quiser ter mais controle sem editar arquivos de tema, o SeedProd é a maneira mais fácil de criar e estilizar suas páginas, sem necessidade de código.
Deseja continuar personalizando seu site WordPress? Aqui estão alguns guias que recomendo a seguir:
- Como editar sua página inicial do 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
