Os temas de bloco do WordPress oferecem grande flexibilidade, permitindo alterações de estilo e layout diretamente no navegador, sem necessidade de programação. Eles podem incluir padrões de bloco e variações de estilo.

As variações de estilo oferecem um ponto de partida para o design, permitindo criar combinações de cores e tipografias, assim como estilos de bloco personalizados definidos no Editor do Site. Qualquer coisa no arquivo theme.json também pode ser incluída em uma variação de estilo.

Criar uma variação de estilo personalizada é mais fácil do que você pensa e pode ser feito em minutos no Editor de Sites do WordPress. Vamos mostrar como criar uma variação de estilo personalizada.

Requisitos do Projeto de Variação de Estilo

Os requisitos para criar uma variação de estilo são mínimos. Você precisará de:

• Um site WordPress (uma instalação local é suficiente).
• Um tema de bloco (estamos usando Twenty Twenty-Five).
• O plugin Create Block Theme deve estar instalado e ativado.

Recomendamos usar uma instalação de teste ou local do WordPress.

Vamos Criar uma Variação de Estilo

Agora é hora de começar! Acesse o seu site WordPress e siga os passos abaixo.

Passo 1: Abra o Editor de Sites do WordPress

Navegue até Aparência > Editor no admin do WordPress para abrir o Editor de Sites. Em seguida, clique no link Estilos na barra lateral esquerda.

O painel de Estilos inclui links para Tipografia, Cores, Fundo, Sombras e Layout. Você também encontrará um link Explorar Estilos que exibe as variações de estilo disponíveis para o tema.

Por fim, o link Blocos permite personalizar estilos de bloco individuais no site.

Passo 2: Mude os Estilos do Seu Tema

Este passo é sobre preferência pessoal. Explore o painel de Estilos e comece a fazer mudanças.

Cor e tipografia são as mudanças mais óbvias, mas você pode ir além. Por exemplo, você pode alterar a largura e o espaçamento do layout. Além disso, cada bloco incluído no WordPress pode ser personalizado. Adicione margens, preenchimentos, bordas ou CSS personalizado.

Cobrimos o básico em nossa variação, incluindo:

• Criamos uma paleta de cores personalizada;
• Instalamos novas fontes do Google Fonts;
• Adicionamos espaçamento personalizado para os blocos Grupo e Parágrafo;
• Mudamos a aparência do bloco Botão;

O resultado é um visual terroso que busca simplicidade. Mas você pode fazer o quanto quiser. Apenas lembre-se de salvar suas alterações quando terminar.

Passo 3: Salve Sua Variação de Estilo

Nosso próximo passo envolve salvar nossa variação de estilo personalizada. Esta funcionalidade faz parte do plugin Create Block Theme.

A funcionalidade está localizada dentro do Editor de Sites. Veja como encontrá-la:

1. Enquanto estiver no Editor de Sites, clique no painel direito, destacado em verde abaixo:

2. Clique no ícone de chave inglesa no canto superior direito da tela e selecione Criar Variação de Tema:

3. Nomeie a variação e garanta que a caixa Salvar Fontes esteja marcada. Vamos chamá-la de “Beautiful Earth.”

4. Clique no botão Criar Variação de Tema para salvar as configurações.

Uma vez salvo, a nova variação é adicionada à lista na área Explorar Estilos do editor de temas. Ao passar o mouse sobre a variação, seu nome é revelado.

Como Usar Sua Variação de Estilo em Outro Site

As variações de estilo são portáteis e podem ser usadas em vários sites. O processo envolve copiar o arquivo JSON gerado e adicioná-lo ao site desejado.

1. Localize o arquivo JSON da variação de estilo em /wp-content/your-theme/styles/
   Substitua your-theme pelo nome do tema que você está usando (o nosso é twentytwentyfive).
2. Copie o arquivo JSON da sua variação de estilo.
3. No seu novo site, cole o arquivo em /wp-content/your-theme/styles/ – você pode precisar fazer o upload do arquivo via SFTP ou gerenciador de arquivos do seu host.
4. Agora você poderá escolher a variação de estilo dentro do Editor de Sites.

Sobre Fontes Personalizadas

Mencionamos anteriormente a capacidade de adicionar fontes personalizadas a uma variação de estilo. Isso requer alguns passos extras ao mover sua variação para um novo site.

1. Localize as fontes personalizadas que você adicionou em /wp-content/themes/your-theme/assets/fonts/
2. Copie a respectiva pasta de cada fonte.
3. Cole as pastas de fontes no mesmo diretório no seu novo site. Mais uma vez, você pode precisar fazer o upload delas.

Dê ao Seu Tema de Bloco uma Aparência Personalizada

Variações de estilo são uma maneira conveniente de adicionar personalidade ao seu tema de bloco. Você pode construí-las para atender aos requisitos do seu projeto.

Elas também atuam como um ponto de partida para os designers. Você pode continuar adicionando estilos personalizados após aplicar uma variação. As alterações que você fizer serão salvas no banco de dados do site.

Há também uma opção para redefinir os estilos para os padrões da variação. Isso facilita a experimentação sem perder os elementos-chave do seu design.

A melhor parte é que as variações de estilo não exigem conhecimentos em programação. Isso coloca o design personalizado ao alcance de todos.