Como adicionar classes CSS personalizadas ao WordPress (3 maneiras fáceis)

Aqueles que sabem que o CSS sabem que as aulas do CSS são um enorme intervalo de tempo ao modelar um site inteiro. Mas se você não codificar, talvez nunca tenha percebido o quão poderoso eles podem ser. Hoje, mudamos isso.

Neste post, mostrarei três maneiras fáceis de adicionar aulas de CSS ao WordPress - mesmo que você nunca tenha escrito uma única linha de código. Você também aprenderá como fazê-lo da maneira sem código usando o poderoso construtor de sites do WordPress, Divi.

O que são aulas de CSS e como elas ajudam?

CSS ( folhas de estilo em cascata ) é o código que controla o design e a aparência dos elementos, como cores, espaçamento e fontes, em um site. Uma classe CSS é um rótulo reutilizável que você atribui a vários elementos para que você possa estilizá -los de uma só vez, em vez de repetir o mesmo processo para cada elemento.

Sem as classes CSS, você teria que estilizar manualmente cada elemento, que se torna demorado-especialmente ao trabalhar em sites maiores do WordPress com várias páginas. Mas, como costuma ser o caso, a maioria dos sites inclui elementos e motivos repetidos, como os botões em uma página de preços ou caixas de recursos em diferentes seções.

Esses elementos parecem semelhantes porque, no back -end, compartilham o mesmo grupo de classe. Portanto, quando você aplica o CSS a um elemento de um grupo de classe comum, todos os elementos nele herdam automaticamente as mesmas configurações de estilo. No front -end, isso lhes dá uma aparência visualmente semelhante. As aulas CSS economizam tempo, mantenham o design consistente e facilitem as edições futuras - já que você só precisa atualizar a classe em vez de alterar cada elemento um por um.

Maneiras de adicionar aulas de CSS ao WordPress

Você pode adicionar classes CSS a um site do WordPress de várias maneiras, dependendo da sua proficiência no uso do CSS. Vou mostrar como fazê -lo usando o WordPress Customizer e um plug -in como CSS personalizado simples, mas esses dois métodos exigem que você escreva CSS.

Pule para o terceiro método se você estiver mais interessado no método sem código.

1. Usando o WordPress Customizer

Digamos que sua página do WordPress tenha vários botões. Atualmente, eles parecem simples e você quer que eles se destacem, então você planeja adicionar uma borda azul marinha e um fundo azul -céu.

A adição de CSS a cada botão levará um tempo considerável, pois você precisará repetir o processo oito vezes. Mas com as classes CSS, você pode simplesmente atribuir a mesma classe CSS a cada botão e escrever o CSS apenas uma vez. Vamos nomear nossa classe CSS ' Custom-A' . Na janela do editor da página do WordPress, clique em qualquer botão> Configurações (ícone de engrenagem)> alternar a opção avançada . Agora, escreva o nome da classe em classes CSS adicionais.

Repita o processo para cada botão e salve. Para adicionar o código de estilo a esses botões, você precisará navegar para o WordPress Customizer> CSS adicional.

Para fazer o Border Navy Blue e o fundo azul -céu, você colará seu CSS aqui.

Observe que o nome da classe CSS que escolhemos vem antes das regras de estilo no código. Isso garante que o código seja aplicado a todos os elementos que possuem esse nome de classe atribuído.

Depois de clicar em publicar e visualizar sua página, os botões estilizados ficarão assim:

Isso é simples - se você conhece CSS.

O WordPress Customizer também é ótimo para fazer pequenas alterações. No entanto, o problema é que o CSS adicionado lá está ligado ao tema, o que significa que ele pode ser perdido se você mudar de temas. Portanto, se você gosta de testar temas diferentes em seu site, precisará atualizar o código toda vez que mudar para um tema diferente, o que não é divertido. Nesse caso, instalar um plug -in para manter seus estilos de classe CSS seguros é uma opção muito melhor.

2. Usando um plugin como CSS personalizado simples

Depois de instalar o plug -in CSS personalizado simples, a opção CSS personalizada será adicionada à seção de aparência . Agora você só precisa adicionar seu código CSS e atualizar o CSS personalizado para refletir as alterações. (Você ainda precisa atribuir nomes de classe aos elementos que deseja ter estilos comuns.)

Plugins como esse mantêm seu CSS personalizado intacto, mesmo se você mudar seu tema mais tarde. Também é um pouco mais organizado do que o WordPress Customizer. No entanto, ambos os métodos não são escaláveis, pois podem facilmente ficar confusos quando você salva o CSS personalizado para vários grupos de elementos de todo o seu site.

É por isso que, para o estilo em todo o local, a abordagem recomendada é criar um tema filho e atualizar sua folha de estilo. Dessa forma, todas as suas mudanças são mantidas em segurança no tema do seu filho, mesmo após as atualizações do tema.

Embora eficaz (e recomendado pelos codificadores), esse método pode rapidamente se tornar técnico, pois ainda requer trabalho manual-você terá que estilizar cada elemento (ou vários elementos usando classes CSS), que consomem tempo e não são favoráveis ​​ao iniciante. Você também terá que acompanhar os nomes das classes - imagine que você deseja editar uma classe de botão específica e estará rolando por strings infinitas de código.

E daí que você poderia escalar o estilo sem escrever uma única linha de código? É aí que entram os construtores de páginas de arrastar e soltar modernos como o Divi.

3. Usando um construtor de sites sem código como Divi

A beleza de usar um moderno construtor de sites sem código, como o Divi, é que você não precisa escrever CSS (ou qualquer código) para aplicar estilos consistentes em seu site. Com uma interface visual, você pode atribuir estilos a seções, linhas, colunas e módulos apenas selecionando e personalizando as configurações de design.

No Divi, você cria predefinições em vez de classes CSS. Durante anos, a Divi ofereceu predefinições baseadas em módulos que permitem salvar e reutilizar estilos para módulos como botões, brotbos e imagens. Mas lançamos algo ainda mais incrível - predefinições de grupo de opções que permitem ir ainda mais longe.

Antes das predefinições do grupo de opções, você só tinha permissão para aplicar predefinições nos módulos. Por exemplo, uma predefinição de uma sinopse só pode ser usada em outra sinopse. Agora, você pode até compartilhar configurações nos módulos.

Em vez de personalizar um elemento de cada vez, as predefinições do grupo de opções permitem salvar estilos para configurações compartilhadas - como fundos, bordas ou estilos de texto - e aplique -os a vários elementos diferentes ao mesmo tempo. Por exemplo, se uma seção e uma coluna usam uma cor de fundo, você poderá salvar essa configuração de estilo como predefinida e aplicá -la em todos os elementos relevantes para criar um design coesivo.

O Divi simplifica os estilos de construção e salvamento como predefinições através de recursos de arrastar e soltar sem codificação, tornando as mudanças de design em todo o site mais rápidas e acessíveis-especialmente para não-codificadores.

Baixe o divi 5

Vamos ver o que quero dizer com mais detalhes abaixo

Predefinições de grupo de opções da divi facilitam a adição de aulas de CSS

As predefinições do grupo de opções da Divi pegam o conceito de aulas de CSS e simplificam-o para não-codificadores. Em vez de escrever e atribuir classes manualmente, agora você pode usar o Visual Builder da Divi para aplicar estilos de design compartilhados em diferentes elementos com apenas alguns cliques.

Essas predefinições funcionam no nível da opção, o que significa que eles têm como alvo configurações de design específicas, como cores de fundo, bordas ou espaçamento compartilhados em vários tipos de elementos. Assim, por exemplo, as configurações de segundo plano de uma seção podem ser aplicadas a uma coluna, linha e até elemento de texto.

É uma maneira mais rápida, mais fácil e mais intuitiva de manter o design do seu site consistente. Aqui está como:

• Estilos reutilizáveis ​​entre os elementos: você não precisa personalizar todos os elementos manualmente. Salvar estilos de grupo de opções como predefinições e aplique -as a qualquer elemento.
• Atualizações globais com uma única edição: modifique uma predefinição uma vez e todos os elementos usando essa predefinição serão atualizados automaticamente. Isso torna os ajustes de design rápidos e eficientes em todo o site.
• Combine várias predefinições: camada e misture predefinições diferentes (por exemplo, bordas, sombras, estilos de texto) em qualquer elemento para uma combinação de design flexível e criativa sem começar do zero.
• Personalize as predefinições padrão para estilos base: salve as predefinições como padrão para aplicá -las automaticamente a todos os elementos relevantes.

Saiba mais sobre predefinições de grupo de opções

Como usar o Divi para adicionar classes CSS ao WordPress sem codificação

Agora que você sabe quais são as predefinições de grupo de opções da Divi e que você não precisa saber a codificação para trabalhar com elas, eu queria mostrar como exatamente isso funciona dentro do Divi Builder. O que você precisa fazer para criar, salvar e aplicar predefinições de grupo a qualquer opção Configurações como plano de fundo, borda, sombra de caixa etc. Para o nosso exemplo, vamos personalizar uma página de preços.

Alterando o fundo do botão

Suponha que eu queira alterar o fundo do botão para roxo para combinar com a cor da página. Então, personalizarei o botão da primeira coluna e salvarei as configurações como uma predefinição de botão de luz primária . (A cor preta nas configurações da interface do usuário mostra que você está editando uma predefinição de configuração. Se você selecionou o modo escuro, será o oposto.)

Agora, para aplicar as mesmas configurações aos outros dois botões, simplesmente alterarei o botão predefinido para a luz primária.

Mudando a sombra de uma coluna

Vamos adicionar uma sombra de caixa a todas as colunas. Vou adicionar uma sombra de caixa à primeira coluna e salvá -la como a predefinição da sombra da caixa de sombra .

Para aplicar a mesma sombra nas outras duas colunas, simplesmente trocarei a predefinição da sombra da caixa para a sombra .

Modificando predefinições de texto

Você também pode modificar estilos para elementos de texto, como H1 e H2S. Veja como a atualização das colunas H3 Predeft funciona:

Depois de salvar, eis como a página de preços parecerá:

Embora eu tenha feito pequenas alterações para mostrar como funciona, você pode imaginar as possibilidades. Com as predefinições de grupo de opções da Divi, a edição de estilos personalizados de grupos é tão simples quanto clique de um botão. Mas essa é apenas a ponta do iceberg. Você também pode:

• Defina predefinições padrão para grupos de opções para que elementos básicos, como títulos ou botões, herdem seu estilo automaticamente em todo o site. Depois de entender como as predefinições padrão funcionam, você nunca mais voltará a usar métodos antigos.
• Presefas por grupo de opções de camada sobre predefinições de elementos para adicionar ênfase extra - como aplicar um plano de fundo compartilhado e empilhar uma sombra ou estilo de borda para destacar certos elementos.

Escrevemos um guia inteiro sobre tudo o que você deve saber sobre as predefinições de grupo de opções da Divi. Leia o artigo completo para obter idéias e conselhos de design sobre como simplificar a web design de classe com o Divi.

Saiba mais sobre predefinições de grupo de opções

Divi é um divisor de águas para o sistema de design baseado em classe

As predefinições do grupo de opções da Divi trazem o poder das classes CSS para todos. Esteja você projetando solo ou colaborando com uma equipe, as predefinições aceleram seu fluxo de trabalho, escalam lindamente à medida que seu site cresce e torna o estilo consistente sem esforço. Eles são mais rápidos, mais eficientes e muito mais intuitivos que os fluxos de trabalho tradicionais do CSS.

Comece com o Divi 5 hoje

Divi 5 está no modo de atualização completo. Estamos lançando novos recursos toda semana, assim como as predefinições de grupo de opções, é uma boa idéia saber sobre unidades avançadas, variáveis ​​de design do CSS e muito mais que mudam a maneira como você aborda o design de qualquer site.

Saiba mais sobre o Divi 5

O Divi 5 é uma poderosa estrutura de design com ferramentas poderosas como Divi Dash, Divi Quick Sites e Divi AI - construído para ajudá -lo a criar sites profissionais personalizados sem tocar em uma única linha de código. Não há nada que o limite, pronto para fazer um test drive no futuro do design do site?

Baixe o divi 5