Trabalhando com estilos globais

Neste tutorial abordaremos como trabalhamos com estilos globais, uma ferramenta muito importante na construção de sites como novo Editor e sites do WordPress.

Resultados de aprendizagem

1. Você poderá projetar seu site com tipografia, cores, layout, bem como definir estilos para blocos específicos usando Estilos globais.
2. Você poderá alterar as configurações padrão para refletir sua própria marca usando Global Styles.
3. Você poderá alterar os estilos do bloco de citações para que correspondam à sua marca em todo o site.

Perguntas de compreensão

1. Você já encontrou um tema WordPress de que realmente gosta, mas queria mudar as cores ou fontes do tema?
2. Você está pronto para personalizar blocos específicos, como o bloco de citações, em todo o site?

Transcript

Bem vindo ao Learn WordPress. O meu nome é Fellyph 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 alteração da sua estrutura. Se você está aí na web há um bom tempo, com certeza você já ouviu falar no site Zen Garden. 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 e estilos era aplicada a uma estrutura de conteúdo única, mas a sua apresentação variava completamente. Já na versão. 5,9 do WordPress foi introduzido a funcionalidade de variações de Temas e esse recurso terá uma atenção especial na versão do WordPress 6,1, onde será introduzido o tema Twenty Twenty Three, que irá contar com dez variações de tema. Como podemos ver, a estrutura do site permanece a mesma, mas nós temos 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 WordPress 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 numa instalação WordPress e eu mostrarei como utilizar este recurso. Então aqui nós temos um WordPress utilizando o tema Twenty Twenty útil. 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 blogs onde eles possuem suporte ao editor de site. Mas para esse vídeo nós. Vamos trabalhar com o tema padrão Twenty Twenty. 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 tã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 desse 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 personalizar 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ções 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 que queremos trabalhar, qual o tipo.

Da aparência da fonte, 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 eu 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 painel 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 personalizado. 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 eu devo dizer que estou Satisfeito com esta seleção. Voltar para o painel, 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 personalizadas. 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. Nós vamos 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. Na estrutura padrão. Ela tem 650 pixels e na sua visualização ampla. Ela possui 1000 pixels. Então, além disso, nós podemos escolher as seguintes opções como recuo do meu conteúdo.Então vai ser relacionado ao padding, como também o espaçamento entre blocos. Nesse tipo de apresentação nós temos 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 três frames. Então notem que um dos meus blocos tem um espaçamento agora de três REM. 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 os nossos espaçamentos redefinido.Então, voltando para apresentação. A última opção que temos é a opção de personalizaçã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 loop de consulta e vou ter todas as opções disponíveis para o Bloco de Loop de consulta. Então, 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 Lupe de consulta. Podemos aqui Suavizar essa cor cinza adicionando um alpha, então vai se.

Uma vez feliz com essa alteração, posso salvar e neste caso aqui a gente vai ter de novo a nossa confirmação salvo nós vamos 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 ao bloco de título neste caso nós temos a opção de cores e a opção de apresentação. Em apresentação. Nós podemos definir tanto o recuo do meu título, então podemos ver aqui que o pedem. Ele é aplicado nos quatros eixos. Se eu quiser aplicar num 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, nós só aplicamos 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ões. Neste caso, você vai resetar todas as alterações feitas no estilo do seu site e assim utilizando as definições. É o 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 Learn WordPress. Meu nome é Fellyph, obrigado por ter assistido esse vídeo e até o próximo tutorial.