Transcrição
Introdução
Vamos explorar o Editor do site, que permite criar tudo no seu site usando blocos, do cabeçalho ao rodapé e tudo o que está entre eles. Vamos acessar Aparência e clicar em Editor. Isso abrirá o Editor do site. À esquerda, está a barra lateral de visualização do site, e essa ferramenta útil permite explorar as principais partes do seu site, incluindo navegação, estilos, páginas, modelos e padrões. Este tutorial tem como objetivo proporcionar uma compreensão profunda desses elementos.
Navegação
Vamos começar pelo topo, com a navegação. Aqui, você pode visualizar e ajustar rapidamente todos os seus menus. Este é o seu centro de comando para o gerenciamento de menus. Você pode fazer edições simples diretamente, como reordenar. Ao clicar nos três pontos verticais ao lado do nome do item de menu, você pode renomear, duplicar e excluir o item conforme necessário. Se aberto no modo de edição, você pode fazer determinadas alterações sem distrações. E as atualizações serão sincronizadas em todo o seu site. Você pode adicionar novas páginas ou outros itens de menu ao clicar no ícone de mais. Você perceberá que o bloco Navegação está bloqueado nesta área. Se quiser estilizar o menu de navegação, será necessário abrir um modelo ou a parte de modelo da qual ele faz parte.
Estilos
Em seguida, vamos falar sobre estilos. Ao selecionar Estilos, você poderá navegar por uma variedade de combinações de estilos diferentes que acompanham o seu tema. Ao clicar em Editar estilos, você poderá navegar pelos seus estilos a partir daqui e alterar a tipografia, as cores e o layout do seu site. Vamos ver como funciona. Ao clicar em Tipografia, você pode gerenciar as configurações de tipografia para textos, links, títulos, legendas e botões. Um novo recurso maravilhoso é que agora você também tem acesso a uma biblioteca de fontes. Em Fontes, veremos as fontes adicionadas ao nosso tema. Mas, ao clicar em Gerenciar fontes, podemos instalar, remover e ativar fontes locais e do Google em todo o site com qualquer tema de blocos. Ao clicar em Instalar fontes, você pode instalar qualquer fonte do Google no seu site e clicar em Enviar se quiser enviar uma fonte do seu computador. Certifique-se de ter o direito de usar todas as fontes que estiver enviando. Abaixo de Tipografia, veremos as cores. Aqui, você também pode alterar as cores de diferentes elementos globais do seu site. Ao acessar Layout, perceberemos que você também tem controle sobre elementos como preenchimento e espaçamento entre blocos.
Livro de estilos
Se você olhar mais abaixo, poderá personalizar a aparência de blocos específicos para todo o seu site. Para ver como esses blocos serão alterados quando você os editar, acesse o Livro de estilos do seu site. Você perceberá que há um pequeno ícone de olho no topo. O Livro de estilos permite que o usuário visualize todos os blocos que podem ser inseridos no site. Ele oferece uma prévia rápida de como os estilos globais afetarão quaisquer blocos exibidos, sem que o usuário precise inserir esses blocos em um modelo. Também é importante observar que o estilo de um bloco pode ser ajustado dentro do Livro de estilos. Vamos atualizar o bloco Botões, por exemplo, alterando a cor de fundo e as letras para maiúsculas. Se gostar do resultado, você pode clicar em Salvar. Observe também que alterar um bloco individual no Livro de estilos tem precedência sobre os estilos globais definidos.
Revisões de estilo
Enquanto estamos aqui, também precisamos falar sobre as revisões de estilo. Vamos clicar em Revisões de estilo, ao lado do ícone do Livro de estilos. As revisões de estilo serão abertas quando você estiver editando um modelo no Livro de estilos. O recurso de revisões de estilo adiciona uma forma visual de navegar pelas alterações feitas nos seus estilos ao longo do tempo, e você pode facilmente reverter para uma etapa anterior caso encontre um estilo de que goste ou queira voltar a uma versão anterior. Basta selecionar a versão e clicar em Aplicar. Neste exemplo, estou editando um modelo e seguirei o mesmo processo. Abrirei as revisões de estilo, selecionarei um estilo anterior e clicarei em Aplicar para reverter. Ao clicar nos três pontos verticais ao lado dos estilos, você pode redefinir os estilos e adicionar CSS adicional.
Páginas
Abaixo de Estilos, podemos acessar Páginas para criar e publicar páginas. Para adicionar uma nova página, clique no ícone de mais ao lado de páginas e crie um rascunho. Mas você também pode, é claro, criar uma nova página quando estiver no seu Painel ou no WP Admin. Em seguida, vamos abrir uma das nossas páginas existentes, a minha página Sobre. Ao abrir uma página, é importante lembrar de adicionar conteúdo ao bloco Conteúdo. Em outras palavras, o bloco Conteúdo é a casa ou o contêiner de todo o seu conteúdo. A segunda coisa a lembrar é que você não pode personalizar o cabeçalho e o rodapé ao editar uma página. Isso faz parte do gerenciamento de modelos. Se você clicar no cabeçalho, verá uma mensagem dizendo: ‘Edite o seu modelo para editar este bloco.’ Se quiser modificar o modelo atribuído a esta página, clique em Editar modelo. Isso levará você ao modelo da sua página neste exemplo. Aqui, você pode modificar o cabeçalho e o rodapé. Você não poderá adicionar conteúdo a um modelo. O conteúdo, é claro, é adicionado a posts e páginas. O bloco Conteúdo é apenas um espaço reservado neste contexto.
Modelos
Isso nos leva ao nosso próximo tópico: os modelos. Os modelos fornecem a estrutura de como o seu conteúdo é exibido. Ao selecionar Modelos, você verá uma variedade de modelos incluídos no seu tema, os modelos integrados. Por exemplo, o modelo de página, que exibe uma página individual; o modelo de índice, que é um modelo alternativo; ou o modelo de post individual, que exibe o layout de posts individuais. E, logo na parte inferior, veremos todos os modelos personalizados. Ao clicar no ícone de mais ao lado de modelos, você pode adicionar uma variedade de novos modelos, inclusive um modelo personalizado que pode ser aplicado a qualquer post ou página. Vamos abrir o modelo de página para entender melhor como um modelo funciona. Um modelo fornece estrutura. Geralmente, um modelo inclui uma parte de modelo de cabeçalho e uma parte de modelo de rodapé.
O bloco Conteúdo do post extrai o conteúdo da página ou do post atribuído ao modelo. Portanto, um modelo é usado apenas para modificar o layout ou o design da página, ou seja, o cabeçalho, o rodapé e até mesmo a barra lateral. O Editor do site, portanto, faz uma distinção clara entre editar o modelo e a página. Você pode modificar o cabeçalho e o rodapé dentro do modelo. Uma das opções disponíveis é clicar nos três pontos verticais e selecionar Substituir cabeçalho. Em seguida, você pode substituir o cabeçalho atual por uma das partes de modelo de cabeçalho existentes ou por padrões de cabeçalho incluídos no seu tema. Outra opção é selecionar o cabeçalho e clicar em Editar. Isso permitirá modificar o cabeçalho ou o rodapé no modo de edição de modelos, sem outras distrações.
Atribuir um modelo
Para atribuir um novo modelo a uma página ou post, abra o conteúdo relevante, neste caso, a minha página Sobre, e depois abra as configurações da barra lateral à direita. Ao lado de Modelo, clique no nome do modelo, selecione Trocar modelo e, em seguida, escolha um modelo personalizado para atribuir à sua página ou post.
Gerenciar modelos
Também vale mencionar que, ao clicar em Gerenciar todos os modelos e selecionar Edição em massa, você pode explorar e filtrar seus modelos pela visualização em tabela ou em grade. E, ao selecionar Edição em massa novamente, haverá mais opções de filtragem. Observe que você pode explorar e filtrar páginas e partes de modelo exatamente da mesma maneira.
Padrões
Por fim, vamos falar sobre padrões. No topo, você pode visualizar todos os padrões disponíveis. Ao selecionar Meus padrões, você pode criar e gerenciar seus próprios padrões personalizados sincronizados e não sincronizados. Abaixo de Meus padrões, podemos visualizar todos os nossos padrões personalizados e os padrões que acompanham o nosso tema em suas respectivas categorias. Abaixo de Partes de modelo, também podemos criar e gerenciar nossas partes de modelo de cabeçalho, rodapé e gerais. As partes de modelo são essencialmente padrões. Elas são componentes reutilizáveis sincronizados que podem ser usados em todo o site.
Padrões personalizados
Vamos começar com Meus padrões. Para criar seu padrão personalizado, clique no Inseridor ao lado de padrões e selecione Criar padrão. Depois de nomeá-lo, você pode optar por adicioná-lo à categoria relevante e decidir se deseja sincronizar ou não o padrão. Um padrão sincronizado será sincronizado em todo o site, o que significa que, se você alterar o padrão em um local, ele será atualizado em todos os lugares onde for usado. Você também pode desativar essa opção se preferir ter um padrão não sincronizado. Padrões não sincronizados são padrões comuns que podem ser editados de forma independente. Ao retornar à área de padrões personalizados, você perceberá que os padrões sincronizados têm um ícone roxo e os não sincronizados não têm. Em seguida, você verá que os padrões que acompanham o seu tema estão bloqueados e não podem ser editados. Mas, ao clicar nos três pontos verticais abaixo de um padrão, você pode copiá-lo para a área Meus padrões.
Partes de modelo
Na parte inferior, podemos criar e gerenciar nossas partes de modelo de cabeçalho, rodapé e gerais. Você tem duas opções aqui. Pode criar cabeçalhos e rodapés personalizados ou personalizar padrões de partes de modelo que acompanham o seu tema. Para criar sua própria parte de modelo, clique no ícone de mais no topo, ao lado de padrões, e selecione Criar uma parte de modelo. Ao adicionar uma nova parte de modelo, você pode escolher entre partes de modelo gerais, de cabeçalho e de rodapé. As partes de modelo gerais não estão vinculadas a nenhuma área específica, portanto, lembre-se de dar a elas um nome descritivo. Ao abrir uma parte de modelo a partir daqui, você poderá modificar e editar sua parte de modelo no modo de edição de modelos, sem distrações. Você também pode abrir o modelo relevante, neste caso, o meu modelo personalizado, e modificar a parte de modelo do cabeçalho ou do rodapé dentro do modelo. Como mostrado anteriormente, você pode substituir facilmente um dos seus cabeçalhos ou rodapés por um padrão ou uma parte de modelo existente da biblioteca.
Paleta de comandos
Para finalizar, também quero destacar um recurso extremamente útil chamado Paleta de comandos, que economizará muito tempo e ajudará você a navegar pelo Editor do site com mais eficiência. A paleta de comandos permite concluir tarefas e navegar rapidamente dentro do Editor do site. Por exemplo, você pode digitar ‘Novo’ para criar uma página ou um modelo, ou simplesmente o nome da área para a qual deseja ir. Por exemplo, padrão, para gerenciar todos os meus padrões. Você pode acessar a paleta de comandos usando o atalho command+k no Mac ou control+k no Windows. Você também a encontrará na barra lateral de visualização do site clicando no ícone de pesquisa. Ou pode simplesmente clicar na barra de título.
Conclusão
Isso conclui nossa breve visão geral do que você pode fazer usando o Editor do site.
Prática
Use o WordPress Playground para explorar o Editor do site.
- Pratique navegar entre as diversas áreas do Editor do site.
- Use a Paleta de comandos para navegar pelo Editor do site com mais rapidez.
- Compare a diferença entre uma página e um modelo.