17 dicas de CSS para economia de tempo para usuários do WordPress
Publicados: 2023-03-13O 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 estilizar seu cabeçalho até ajustar suas 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 trabalha em seu site WordPress:
- “Como removo o botão 'ler mais'?”
- “Como posso mudar a cor deste link?”
- “Como faço para tornar este link não 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 do WordPress
- Centralizar um elemento horizontal e verticalmente
- Alterar a cor do link
- Remover um link
- Desativar um link (o link permanece visível, mas os usuários não podem clicar nele)
- Alterar a cor dos links ao passar o mouse
- Links de estilo
- Estilizar um botão
- Alterar a fonte de uma seção
- Criar um cabeçalho fixo
- Crie um cabeçalho fixo com um efeito de sombra
- Adicionar uma cor de fundo a uma seção
- Alterar a cor de fundo do corpo
- Alterar a cor de uma palavra ou frase específica
- Criar uma borda ao redor de uma imagem
- Criar um efeito de foco em uma imagem
- Estilizar um formulário
- Crie um layout responsivo
- Leve suas habilidades de CSS para o próximo nível
Dicas de CSS do 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, basta 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) horizontal e verticalmente, use o seguinte código CSS:
.element {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Neste código, a position: relative é usada para posicionar o elemento em relação ao seu ancestral posicionado mais próximo. As top: 50% e left: 50% movem o elemento para o centro de seu contêiner. Por fim, a transform: translate(-50%, -50%) centraliza o elemento horizontal e 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 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;
}
Observação: às vezes, pode ser necessário colocar um a depois de sua aula para que funcione, assim:
.item-class a{
display : none;
}
Tente adicionar o a ou experimentar sem ele para ver se seu código está funcionando ou não. Basta adicionar seu CSS, salvar e verificar seu front-end.
Desativar um link (o link permanece visível, mas os usuários não podem clicar nele)
Observação: é 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;
}
Nesse código, o seletor a:hover visa todos os links na 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;
}
Nesse código, o 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.
Estilizar 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 várias 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;
}
Nesse código, a propriedade font-family define a fonte como Arial ou uma fonte sem serifa semelhante, a propriedade font-size define o tamanho da fonte como 16 pixels e a propriedade line-height define o espaçamento entre linhas de texto como 1,5 vezes o tamanho da fonte.
Criar um cabeçalho fixo
Se você deseja criar um cabeçalho que fique 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;
}
Nesse código, a propriedade position: fixed fixa o cabeçalho na parte superior da viewport e a propriedade top: 0 o posiciona bem no topo da página. A propriedade width: 100% garante que o cabeçalho ocupe 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 um efeito de sombra
Para criar um cabeçalho fixo com um efeito de sombra que permanece fixo na parte superior 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;
}
Nesse 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 na página. Por fim, 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.
Adicionar uma cor de fundo a uma seção
Deseja 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;
}
Nesse código, a propriedade background-color: #f2f2f2 define a cor do plano de fundo como um cinza claro, e a propriedade padding: 20px adiciona 20 pixels de espaço ao redor do conteúdo dentro 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;
}
Nesse código, a propriedade background-color define a cor do plano de fundo como um 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;
}
Nesse código, o seletor p span tem como alvo qualquer elemento span que apareça dentro de um elemento p . Você pode agrupar a palavra ou frase que deseja segmentar 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>
Isso faria com que a frase “consectetur adipiscing elit” aparecesse em vermelho.
Criar uma borda ao redor de uma imagem
Veja como adicionar uma borda ao redor de uma imagem:
img {
border: 2px solid #ccc;
}
Nesse código, a propriedade border define a largura, o estilo e a cor da borda. O valor 2px define a largura da borda em 2 pixels, solid define o estilo como uma linha sólida e #ccc define a cor como cinza claro.
Criar 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;
}
Nesse código, o seletor img:hover aponta para 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 várias 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 estilizar os rótulos associados a cada campo de formulário. O form input[type="text"], form input[type="email"], form textarea é usado para estilizar os vários campos de entrada no formulário. O form input[type="submit"] do formulário é usado para estilizar o botão enviar.
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;
}
}
Nesse 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 segmenta 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 está funcionando, mesmo que você 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 personalização da aparência do seu site são praticamente infinitas. Ao aprender e aplicar essas dicas, você pode 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
Seja você um iniciante ou um desenvolvedor web ou web designer profissional experiente, se quiser se aprofundar no uso de CSS com o WordPress, esses 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 abrangente para aprender e referenciar CSS especificamente para uso com o 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 alguma inspiração para o seu código CSS? Este artigo lista sete sites que oferecem trechos de 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 e os plug-ins integrados.
- Plugins CSS gratuitos para edição ao vivo do seu site WordPress – Este artigo lista alguns plugins CSS gratuitos que permitem que você edite ao vivo seu site WordPress, 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 legais 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 do 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
Obrigado ao membro do WPMU DEV, Antoine , da Incensy, por contribuir com a ideia para este post e vários dos exemplos de CSS usados acima. Confira o perfil do parceiro de agência da Incensy para obter mais detalhes.
***
Nota: Não aceitamos artigos de fontes externas. Os membros do WPMU DEV, no entanto, podem contribuir com ideias e sugestões para tutoriais e artigos em nosso blog por meio do Blog XChange.