 Bem-vindo ao Learn World Press. Meu nome é Felipe e hoje nós iremos abordar como trabalhamos com estilos globais. No vídeo de hoje vamos aprender como escolhemos variações de estilo, como podemos personalizar a nossa tipografia, personalizar o esquema de cores do nosso site e personalizar blocos individualmente. Primeiramente, precisamos entender a importância desse recurso. Variações de estilo permitem personalizar a apresentação de um site sem a alteração da sua estrutura. Se você está aí na web há um bom tempo, com certeza você já ouviu falar no site Zengarde. Se não, era um site onde as pessoas poderiam enviar o seu CSS para aplicar numa estrutura específica. Como podemos ver, todas essas variações de estilos eram aplicadas a uma estrutura de conteúdo única, mas a sua apresentação variava completamente. Já na versão 5.9 do World Press foi introduzido a funcionalidade de variações de temas. E esse recurso terá uma atenção especial na versão do World Press 6.1, onde será introduzido o tema 2023, que irá contar com dez variações de temas. Como podemos ver, a estrutura do site permanece a mesma, mas a gente tem uma variação de tipografia, esquema de cores e de espaçamento, assim dando uma apresentação completamente diferente ao conteúdo. Para fazer a utilização desse recurso, você irá precisar um World Press com a versão 5.9 ou superior, e a utilização de um tema com suporte a editor de sites. Então agora nós vamos pular em uma instalação World Press e eu vou mostrar como utilizar este recurso. Então aqui nós temos um World Press utilizando o tema 2022. Se você quiser encontrar temas compatíveis com o editor de site, você poderá ir em repositórios de temas, clicar em adicionar um novo tema. Dentro da área de adição de temas, você pode aplicar um filtro por características. Uma vez dentro do filtro da busca, podemos escolher a opção edição completa do site e aplicar este filtro. Quando aplicamos o filtro, nós temos acesso a todos os temas de blocos onde eles possuem suporte ao editor de site. Mas para este vídeo, nós vamos trabalhar com o tema padrão 2022. Então agora vamos ao nosso editor. Então dentro do meu editor de site, no canto superior direito, nós temos o ícone de estilos. Vamos clicar nessa opção e ter acesso ao painel de estilos. Então dentro do painel de estilos, nós temos um preview da variação que estamos trabalhando. Eu posso ir em procurar estilos e ver os estilos disponíveis dentro deste tema. Esta quantidade de variações irá depender do seu tema. Também podemos definir as nossas opções tanto para tipografia, cores, apresentação e também podemos customizar blocos em particular. Então agora eu vou personalizar a tipografia do meu site. Temos a opção de personalização de texto, de links, títulos e botões. Então vou selecionar a opção de títulos. Dentro da opção de títulos, nós temos as seguintes opções. Personalização para todos os cabeçalhos ou um cabeçalho em particular, como H1, H2, H3. Então podemos definir aqui qual a família de fonte queremos trabalhar, qual o tipo da aparência da fonte. Neste caso podemos escolher o peso da nossa fonte como normal, médio ou negrito. Então selecionei a opção de negrito. Posso também definir aqui a altura da minha linha como também o espaçamento entre letras. Então posso aqui definir em pixel o espaçamento. Então podemos ver aqui que nosso texto está mais espaçado. Outra opção que temos é como nossas letras vão se comportar. Se vão ser todas maiúsculas, todas minúsculas ou vamos ter uma apresentação normal. Voltando agora para o panel principal. Então vou sair da área de tipografia. Podemos escolher o esquema de cores para este tema em particular. Eu tenho uma paleta de cores definidas pelo tema, cores padrões ou também podemos incluir cores personalizadas. Então neste caso eu posso aqui incluir na área de personalizado as cores que estão relacionadas à identidade visual do meu projeto. Então posso clicar no mais e para adicionar uma cor nós temos as seguintes opções. Eu posso tanto arrastar no seletor de cores e escolher uma cor aproximada como também eu posso definir digitando o código hexadecimal da cor que eu quero trabalhar. Então vou dizer que estou satisfeito com esta seleção. Vou voltar para o panel. Então posso definir o nome da minha cor então vai ser destaque escolhi a cor destaque e vou salvar essa alteração. Então aqui nós temos a definição das cores personalizada. Uma vez satisfeito eu posso clicar em salvar e uma vez que clicamos em salvar nós vamos ter alguma instrução onde é que essas informações irão ser salvas. Então neste caso aqui nós estamos definindo a estrutura de estilos globais. Então vou salvar essa opção. A opção seguinte que nós temos dentro de estilos é a personalização de apresentação do nosso site. Então dentro dessa área a gente vai ter as seguintes opções. Uma definição do meu conteúdo tanto na versão padrão como na versão ampla. Então podemos ver aqui a estrutura padrão ela tem 650 pixels e na sua visualização ampla ela possui 1000 pixels. Então além disso a gente pode escolher as seguintes opções como recuo do meu conteúdo então vai ser relacionado ao Pery como também o espaçamento entre blocos. Neste tipo de apresentação a gente tem um esquema de escala que é definido por nosso tema. Se quisermos trabalhar com um valor personalizado podemos selecionar definir um tamanho e aplicar um tamanho personalizado manualmente. Então aqui eu posso definir por exemplo como 3 RAM. Então notem que os meus blocos têm um espaçamento agora de 3 R e M. Uma vez satisfeito com essa alteração podemos salvar novamente essas alterações. Então o editor de site mais uma vez irá sinalizar quais são as opções que vamos alterar. Vou clicar em salvar. E agora nós temos o nosso espaçamento redefinido. Voltando para a apresentação a última opção que temos é a opção de customização de blocos. Então a gente tem uma lista completa que para a gente não navegar entre todos os elementos eu posso também pesquisar por um item específico clicando em lope de consulta e eu vou ter todas as opções disponíveis para o bloco de lope de consulta. Se eu quiser alterar o esquema de cores eu posso selecionar o esquema de cores que eu quero. Posso fazer uma personalização na cor de fundo por exemplo. Então aqui eu vou escolher um cinza a gente tem a modificação do background do bloco de lope de consulta. Podemos aqui suavizar essa cor cinza adicionando um alfa. Então vai ser uma vez feliz com essa alteração. Posso salvar e neste caso aqui a gente vai ter de novo a nossa confirmação salvo a gente vai aplicar este estilo globalmente. Outro ponto importante dentro dessa customização de blocos é que cada bloco possui uma configuração específica. Então por exemplo se nós fomos no bloco de título neste caso nós temos a opção de cores e a opção de apresentação dentro de apresentação nós podemos definir tanto o recuo do meu título então podemos ver aqui que o padding ele é aplicado nos quatro eixos se eu quiser aplicar em um eixo específico eu posso desmarcar a opção e aplicar o espaçamento no topo remover o recuo à direita e remover o recuo à esquerda. Então neste caso a gente só aplica um recuo tanto no topo quanto na base deste elemento. Então vou salvar a alteração. Uma vez salvo esta alteração será aplicada em todos os títulos do meu site então é uma alteração global. Então vamos dizer que finalizamos a alteração do nosso estilo caso não esteja contente com as alterações do estilo do seu site você pode dentro do menu de estilos nos três pontos escolher a opção de redefinir para valores padrão. Neste caso você vai resetar todas as alterações feitas no estilo do seu site e assim utilizando as definições do estilo padrão. Espero que esse conteúdo tenha sido útil para você saber mais sobre o editor de site e como trabalhar com estilos globais para mais conteúdos como esse acesse o larno wordpress meu nome é Felipe obrigado por ter assistido esse vídeo e até o próximo tutorial.