17 dicas de CSS que economizam tempo para usuários do WordPress

Publicados: 2023-03-13

O WordPress oferece infinitas possibilidades para projetar e personalizar seu site. Neste artigo, compartilharemos algumas dicas práticas de CSS especificamente para usuários do WordPress, desde o estilo do cabeçalho até o ajuste das fontes.

Embora o WordPress ofereça muitos temas e modelos pré-fabricados, às vezes você precisa resolver o problema com suas próprias mãos e fazer personalizações com CSS.

Se você já fez alguma dessas perguntas enquanto trabalhava em seu site WordPress:

“Como faço para remover o botão ‘leia mais’?”
“Como posso mudar a cor deste link?”
“Como faço para que este link não seja clicável, mas mantenho o texto na página?”

… então continue lendo para aprender alguns truques valiosos de CSS para o seu site.

Neste tutorial, abordaremos:

Dicas de CSS para WordPress
1. Centralizar um elemento horizontal e verticalmente
2. Alterar a cor do link
3. Remover um link
4. Desative um link (o link permanece visível, mas os usuários não podem clicar nele)
5. Alterar a cor dos links ao passar o mouse
6. Links de estilo
7. Estilize um botão
8. Alterar a fonte de uma seção
9. Crie um cabeçalho fixo
10. Crie um cabeçalho fixo com efeito de sombra
11. Adicione uma cor de fundo a uma seção
12. Alterar a cor de fundo do corpo
13. Alterar a cor de uma palavra ou frase específica
14. Crie uma borda ao redor de uma imagem
15. Crie um efeito de foco em uma imagem
16. Estilizar um formulário
17. Crie um layout responsivo
Leve suas habilidades de CSS para o próximo nível

Dicas de CSS para WordPress

As únicas duas coisas que você precisa saber para implementar essas dicas são:

Como funciona o CSS
Como adicionar CSS ao WordPress

Nota: CSS não é arriscado, então se você cometer um erro você pode simplesmente deletar seu código ou modificá-lo… não vai quebrar nada :)

Com isso resolvido, vamos direto para algumas dicas práticas de CSS com exemplos para que você possa experimentá-lo em seu próprio site WordPress:

Centralizar um elemento horizontal e verticalmente

Para centralizar um elemento (como uma imagem, texto ou div) tanto horizontal quanto verticalmente, use o seguinte código CSS:

.element {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

Neste código, a propriedade position: relative é usada para posicionar o elemento em relação ao seu ancestral posicionado mais próximo. As propriedades top: 50% e left: 50% movem o elemento para o centro de seu contêiner. Finalmente, a transform: translate(-50%, -50%) centraliza o elemento tanto horizontal quanto verticalmente, movendo-o para trás 50% de sua própria largura e altura.

Alterar a cor do link

.item-class{
color : blue;
}

Você pode usar cores como branco, preto, azul, vermelho… mas você pode querer usar cores específicas.

Nesse caso, você pode fazer assim:

.item-class{
color : #F7F7F7;
}

Se você deseja criar uma paleta de cores para o design do seu site, tente usar a ferramenta Paletton. É muito útil!

Nota: Se você quiser combinar elementos, é bem fácil.

Por exemplo, digamos que você queira desativar o clique e colocar o link novamente em preto.

Você pode usar este código:

.item-class{
pointer-events : none;
color : black;
}

Remover um link

.item-class{
display : none;
}

Nota: Às vezes você pode precisar colocar um a depois da aula para que funcione, assim:

.item-class a{
display : none;
}

Tente adicionar a ou experimentar sem ele para ver se seu código está funcionando ou não. Basta adicionar seu CSS, salvar e verificar seu frontend.

Desative um link (o link permanece visível, mas os usuários não podem clicar nele)

Nota: É sempre melhor modificar o HTML para fazer isso, mas se o CSS for mais fácil ou a única solução possível, use este código:

.item-class{
pointer-events: none;
}

Alterar a cor dos links ao passar o mouse

Você pode fazer com que os links mudem de cor quando um usuário passa o mouse sobre eles usando o seguinte código CSS:


a:hover {
color: red;
}

Neste código, o seletor a:hover tem como alvo todos os links da página sobre a qual o usuário está passando o mouse. A propriedade color: red altera a cor do texto para vermelho.

Links de estilo

Para estilizar links em seu site, use o seguinte código CSS:


a {
color: #0077cc;
text-decoration: none;
border-bottom: 1px solid #0077cc;
transition: all 0.2s ease-in-out;
}

a:hover {
color: #005299;
border-bottom: 1px solid #005299;
}

Neste código, a seletor a é usado para estilizar todos os links da página. A propriedade color define a cor dos links e a propriedade text-decoration remove o sublinhado padrão. A propriedade border-bottom adiciona um efeito de sublinhado sutil. A propriedade transition cria um efeito de transição suave quando o usuário passa o mouse sobre o link. O seletor a:hover é usado para estilizar o link quando o usuário passa o mouse sobre ele.

Estilize um botão

Use o seguinte código para estilizar um botão:


.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}

Neste código, as diversas propriedades são usadas para estilizar um botão, incluindo as propriedades background-color e color para a aparência do botão, a propriedade padding para o tamanho do botão e a propriedade cursor para alterar o ponteiro do mouse ao passar o mouse sobre o botão.

Alterar a fonte de uma seção

Altere a fonte de uma seção do seu site usando o seguinte código CSS:


.section {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}

Neste código, a propriedade font-family define a fonte como Arial ou uma fonte sans-serif semelhante, a propriedade font-size define o tamanho da fonte como 16 pixels e a propriedade line-height define o espaçamento entre as linhas de texto como 1,5. vezes o tamanho da fonte.

Crie um cabeçalho fixo

Se quiser criar um cabeçalho que permaneça fixo no topo da página enquanto o usuário rola, você pode usar o seguinte código CSS:


.header {
position: fixed;
top: 0;
left:0;
width: 100%;
background-color: #333;
color: #fff;
z-index: 9999;
}

Neste código, a propriedade position: fixed fixa o cabeçalho no topo da janela de visualização, e a propriedade top: 0 o posiciona no topo da página. A propriedade width: 100% garante que o cabeçalho abranja toda a largura da viewport. A background-color , color é usada para estilizar o cabeçalho e a propriedade z-index: 9999 garante que o cabeçalho apareça acima de todos os outros elementos da página.

Crie um cabeçalho fixo com efeito de sombra

Para criar um cabeçalho fixo com efeito de sombra que permanece fixo no topo da página enquanto o usuário rola, use este código CSS:


header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
z-index: 999;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.content {
padding-top: 100px;
}

Neste código, a propriedade position: fixed é usada para fixar o cabeçalho no topo da página. As propriedades top: 0 e left: 0 posicionam o cabeçalho no canto superior esquerdo da página. A propriedade width: 100% define a largura do cabeçalho como a largura total da página. A propriedade background-color define a cor de fundo do cabeçalho, e a propriedade z-index garante que o cabeçalho apareça sobre outros elementos da página. Finalmente, a propriedade box-shadow adiciona um efeito de sombra sutil ao cabeçalho. O seletor .content é usado para adicionar preenchimento ao topo da página para que o conteúdo não seja coberto pelo cabeçalho fixo.

E-LIVRO GRATUITO

Seu roteiro passo a passo para um negócio lucrativo de desenvolvimento web. Desde conquistar mais clientes até crescer como um louco.

E-LIVRO GRATUITO

Planeje, construa e lance seu próximo site WP sem problemas. Nossa lista de verificação torna o processo fácil e repetível.

Adicione uma cor de fundo a uma seção

Quer adicionar uma cor de fundo a uma seção do seu site? Em seguida, use o seguinte código CSS:


.section {
background-color: #f2f2f2;
padding: 20px;
}

Neste código, a propriedade background-color: #f2f2f2 define a cor de fundo como cinza claro, e a propriedade padding: 20px adiciona 20 pixels de espaço ao redor do conteúdo da seção.

Alterar a cor de fundo do corpo

Adicione este código para alterar a cor de fundo do corpo do seu site:


body {
background-color: #f5f5f5;
}

Neste código, a propriedade background-color define a cor de fundo como cinza claro.

Alterar a cor de uma palavra ou frase específica

Para alterar a cor de uma palavra ou frase específica em um bloco de texto, você pode usar o seguinte código CSS:


p span {
color: red;
}

Neste código, o seletor p span tem como alvo qualquer elemento span que aparece dentro de um elemento p . Você pode então agrupar a palavra ou frase que deseja atingir com um elemento span em seu HTML, assim:

<p>Lorem ipsum dolor sit amet, <span>consectetur adipiscing elit</span>. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Isto faria com que a frase “consectetur adipiscing elit” aparecesse em vermelho.

Crie uma borda ao redor de uma imagem

Veja como adicionar uma borda ao redor de uma imagem:


img {
border: 2px solid #ccc;
}

Neste código, a propriedade border define a largura, o estilo e a cor da borda. O valor 2px define a largura da borda para 2 pixels, solid define o estilo para uma linha sólida e #ccc define a cor para cinza claro.

Crie um efeito de foco em uma imagem

Use este trecho de código para criar um efeito de foco em uma imagem:


img:hover {
opacity: 0.8;
}

Neste código, o seletor img:hover direciona a imagem quando o usuário passa o mouse sobre ela. A propriedade opacity define a transparência da imagem. Nesse caso, o valor é definido como 0,8, tornando a imagem levemente transparente quando o usuário passa o mouse sobre ela.

Estilizar um formulário

Estilize um formulário em seu site com o seguinte código CSS:


form {
background-color: #f2f2f2;
padding: 20px;
border-radius: 5px;
}

form label {
display: block;
margin-bottom: 10px;
}

form input[type="text"], form input[type="email"], form textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: none;
border-radius: 3px;
box-shadow: 0 0 5px #ccc;
}

form input[type="submit"] {
background-color: #4CAF50;
border: none;
color: #fff;
padding: 10px 20px;
border-radius: 3px;
cursor: pointer;
}

Neste código, as diversas propriedades são usadas para estilizar um formulário, incluindo as propriedades background-color , padding e border-radius para a aparência geral do formulário. O seletor form label é usado para definir o estilo dos rótulos associados a cada campo do formulário. O form input[type="text"], form input[type="email"], form textarea do formulário é usado para estilizar os vários campos de entrada no formulário. O seletor form input[type="submit"] é usado para estilizar o botão de envio.

Crie um layout responsivo

Se você deseja criar um layout responsivo que se ajuste a diferentes tamanhos de tela, use o seguinte código CSS:


@media (max-width: 768px) {
/* Styles for screens smaller than 768px */
.container {
width: 100%;
}

.menu {
display: none;
}

.mobile-menu {
display: block;
}
}

@media (min-width: 769px) {
/* Styles for screens larger than 768px */
.container {
width: 768px;
margin: 0 auto;
}

.menu {
display: block;
}

.mobile-menu {
display: none;
}
}

Neste código, a regra @media é usada para especificar diferentes estilos para diferentes tamanhos de tela. A primeira regra @media visa telas com largura máxima de 768px, e a segunda regra @media visa telas com largura mínima de 769px. Os vários seletores dentro de cada regra @media são usados para ajustar o layout e a aparência da página com base no tamanho da tela.

Mais uma dica de CSS…

Você pode descobrir que seu código não funciona, mesmo que tenha feito tudo corretamente. Isso pode ocorrer porque já existe um código CSS dizendo algo diferente do seu código.

Para substituir isso, basta adicionar !important assim:

.item-class{
pointer-events: none !important;
}

Estes são apenas alguns exemplos de maneiras práticas de usar CSS para aprimorar seu site WordPress.

Com CSS, as possibilidades de personalizar a aparência do seu site são praticamente infinitas. Ao aprender e aplicar essas dicas, você poderá criar um site que não seja apenas visualmente atraente, mas também otimizado para uma melhor experiência do usuário.

Leve suas habilidades de CSS para o próximo nível

Quer você seja um desenvolvedor web ou web designer iniciante ou profissional experiente, se quiser se aprofundar no uso de CSS com WordPress, estes tutoriais adicionais de CSS o ajudarão a expandir seus conhecimentos e habilidades:

10 dicas simples para aprender CSS para WordPress – Dicas práticas para iniciantes que desejam aprender CSS especificamente para uso com WordPress. Abrange tudo, desde a compreensão da sintaxe CSS até o uso de estruturas CSS.
Aprendendo e referenciando CSS para WordPress – Um guia completo para aprender e referenciar CSS especificamente para uso com WordPress. Ele cobre tópicos como usar o WordPress Customizer, entender seletores CSS e trabalhar com temas filhos.
7 melhores sites para encontrar trechos de CSS e inspiração – Procurando inspiração para seu código CSS? Este artigo lista sete sites que oferecem trechos CSS e exemplos que você pode usar em seu próprio site WordPress.
Como estilizar imagens em seu site WordPress com CSS – As imagens são uma parte importante de qualquer site e este artigo oferece dicas sobre como estilizá-las usando CSS. Você aprenderá como adicionar bordas, alterar o tamanho e o alinhamento da imagem e muito mais.
Como adicionar CSS personalizado ao seu site WordPress – Este artigo orienta você no processo de adição de CSS personalizado ao seu site WordPress, usando o personalizador integrado e os plug-ins.
Plug-ins CSS gratuitos para edição ao vivo de seu site WordPress – Este artigo lista alguns plug-ins CSS gratuitos que permitem que você edite seu site WordPress ao vivo, tornando mais fácil ver os efeitos de suas alterações de CSS em tempo real.
14 Ferramentas legais de animação CSS para WordPress – Se você deseja adicionar algumas animações ao seu site WordPress usando CSS, este artigo lista algumas ferramentas interessantes que você pode usar para fazer isso.
Adicione layouts de alvenaria e grade ao seu site WordPress usando CSS – Este artigo explica como usar CSS para adicionar layouts de alvenaria e grade ao seu site WordPress, criando um design visualmente mais atraente.
25 dicas de especialistas para codificação CSS mais limpa para WordPress – Se você deseja melhorar a limpeza e a legibilidade de seu código CSS, este artigo oferece 25 dicas de especialistas para fazer exatamente isso.
25 dicas profissionais para melhorar seu fluxo de trabalho CSS – Dicas para melhorar seu fluxo de trabalho CSS, desde o uso de pré-processadores CSS até o uso de ferramentas de desenvolvedor de navegador para depurar seu código.

Clique nos links para saber mais e comece a melhorar seu site WordPress hoje mesmo.

Colaboradores

Incenso Obrigado ao membro do WPMU DEV, Antoine , da Incensy, por contribuir com a ideia para esta postagem e vários dos exemplos de CSS usados acima. Confira o perfil da agência parceira da Incensy para mais detalhes.

Perdemos algum truque CSS bacana que você aprendeu ao longo do caminho? Adoraríamos saber mais sobre eles nos comentários!