Compartilhe

Aprenda a construir uma variação do estilo de tema do WordPress Block - Speckyboy

Os temas do WordPress oferecem muita flexibilidade. Você pode fazer alterações de estilo e layout no seu navegador da Web – nenhum conhecimento de codificação é necessário. Eles também podem incluir extras como padrões de bloco e variações de estilo.

Variações de estilo Dê a você uma vantagem no design. Eles nos permitem criar várias combinações de cores e tipografia. Eles também abrigam estilos de blocos personalizados definidos no editor do site. Qualquer coisa em um arquivo tema.json também pode ser incluído em uma variação de estilo.

Isso é útil para profissionais da Web e usuários. Escolha a variação que atenda às suas necessidades e comece a criar seu site.

Criar uma variação de estilo de tema de bloco personalizado é mais fácil do que você pensa. Todo o processo ocorre no editor do site do WordPress. Uma variação simples pode ser construída em minutos.

Então, acompanhe enquanto construímos uma variação de estilo! Mostraremos como apontar e clicar em seu caminho para um design personalizado.

Requisitos de projeto de variação de estilo

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

Não recomendamos o uso de um site de produção para este processo. Uma instalação de encenação ou WordPress local é o caminho mais seguro.

Vamos construir uma variação de estilo

Agora, é hora de começar a construir! Faça login no seu site WordPress e siga as etapas abaixo.

Etapa 1: Abra o editor do site WordPress

Primeiro, navegue para Aparência> Editor no administrador do WordPress para abrir o Editor de site. Em seguida, clique no Estilos Link na barra lateral esquerda.

O painel Styles inclui links para TipografiaAssim, CoresAssim, FundoAssim, Sombrase Layout. Você também encontrará um Navegue estilos Link que exibe variações de estilo disponíveis para o tema.

Finalmente, o Blocos O link permite que você personalize estilos de bloco individuais em todo o site.

Etapa 2: Altere os estilos do seu tema

Esta etapa tem tudo a ver com preferência pessoal. Trabalhe no painel Styles e comece a fazer alterações.

Cor e tipografia são as mudanças mais óbvias, mas você pode levar as coisas adiante. 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, preenchimento, bordas ou CSS personalizados.

Adicionamos fontes personalizadas ao tema de vinte e cinco e cinco.

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

  • Criou uma paleta de cores personalizada;
  • Instalado novas fontes do Google Fontes;
  • Adicionado espaçamento personalizado para os blocos de grupo e parágrafo;
  • Mudou a aparência do bloco de botões;

O resultado é uma aparência terrosa que visa a simplicidade. Mas você pode fazer o quanto quiser. Lembre -se de salvar suas alterações quando for feito.

A cor e a tipografia personalizadas de nossa variação de estilo.

Etapa 3: Salve sua variação de estilo

Nossa próxima tarefa envolve salvar nossa variação de estilo personalizada. Essa funcionalidade faz parte do plug -in Create Block Theme.

O recurso está localizado dentro do editor do site. Veja como encontrá -lo:

  1. Enquanto estiver no editor do site, clique em Painel direitodestacado em verde abaixo:

Clique no painel direito do editor do site para acessar as configurações de tema Criar blocos.

  1. Clique no Ícone da chave inglesa no canto superior direito da tela e selecione Crie variação do tema:

O menu de tema do Create Block no editor do site WordPress.

  1. Nomeie a variação e garantir o Salvar fontes a caixa é verificada. Vamos chamar a nossa de “linda terra”.

Salvamos nossa variação de estilo personalizada.

  1. Clique no Crie variação do tema botão para salvar as configurações.

Uma vez salvo, a nova variação é adicionada à lista no Navegue estilos Área do editor de temas. Passando sobre a variação revela seu nome.

Nossa variação de estilo personalizada está agora disponível no editor do site.

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 do estilo em /wp-content/your-theme/styles/
    Substituir your-theme com o nome do tema que você está usando (o nosso é twentytwentyfive).

    Para referência, nosso arquivo json é chamado beautiful-earth.json

  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/ – Pode ser necessário fazer upload do arquivo via SFTP ou o gerenciador de arquivos do seu host.
  4. Agora você poderá escolher a variação de estilo no editor do site.

Sobre fontes personalizadas

Anteriormente, mencionamos a capacidade de adicionar fontes personalizadas a uma variação de estilo. Requer algumas etapas extras para funcionar ao mover sua variação para um novo site.

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

Dê um olhar personalizado ao seu bloco

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

Eles também atuam como ponto de partida para os designers. Você pode continuar adicionando estilos personalizados após a aplicação de uma variação. As alterações que você faz 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 experiência sem perder os elementos -chave do seu design.

A melhor parte é que as variações de estilo não requerem experiência em codificação. Isso coloca o design personalizado ao alcance de todos.



Principal

Written by

Categorias