A Edição Completa do Site permite que você crie cada aspecto do seu site WordPress, do cabeçalho ao rodapé, usando vários recursos de blocos diretamente do Editor do Site.
O Editor do Site permite alterar modelos, partes de modelos e personalizar o estilo geral do site. Antes do Editor do Site, o design dos principais elementos do site (como cabeçalho, barra lateral e rodapé) era determinado pelo tema. Com o Editor do Site, você pode definir a estrutura e o estilo do seu site. Além de ser usado para criar o conteúdo de páginas e posts, o Editor do Site também pode ser usado para criar toda a aparência do site usando modelos.
O Editor de Modelos permite editar, criar e atribuir modelos a cada post e página, além de permitir que você crie modelos personalizados para seus posts e páginas usando o editor de blocos padrão do WordPress.
Objetivo
Após concluir este aprendizado, os participantes poderão:
- Diferenciar as funções do Editor do Site e do Editor de Modelos.
- Gerenciar modelos, partes de modelos e configurações de estilo global por meio do Editor do Site.
- Editar, criar e atribuir modelos a cada post e página por meio do Editor de Modelos.
Habilidades necessárias
Os participantes aproveitarão melhor este aprendizado se estiverem familiarizados com:
Perguntas relacionadas à preparação
- Você consegue explicar a função dos modelos?
- Você está familiarizado com a forma de atribuir um modelo a um post ou página?
Materiais necessários
- Instalação do WordPress em uma rede local
- Um tema de blocos, como o Twenty Twenty-Two
Observação para o apresentador
- Será útil criar um site local antes de iniciar este aprendizado.
- Introdução ao Editor do Site e ao Editor de Modelos
- Modelos
- Partes de modelos
Visão geral do conteúdo
- Apresentar uma visão geral do layout e das funções do Editor do Site: modelos, partes de modelos e configurações de estilo.
- Mostrar como você pode usar as Configurações de Estilo para alterar o estilo geral do site.
- Explicar como os modelos são coleções de blocos combinados para criar o design de uma página da web ou o layout geral de uma página.
- Diferenciar as partes dinâmicas (conteúdo) das partes reutilizáveis (componentes estáticos) de um modelo.
- Demonstrar como modificar partes de modelos existentes e criar novas.
- Demonstrar como usar o Editor de Modelos para editar, criar e atribuir modelos a cada post e página.
Exercício
- Use as Configurações de Estilo para alterar a fonte, a cor de fundo e a cor do texto do site.
- Edite um modelo existente e altere as partes de modelo do cabeçalho e do rodapé.
- Crie um modelo personalizado e use-o em uma página.
Avaliação
O Editor do Site fornece acesso aos seguintes recursos. Selecione todas as opções aplicáveis.
- Modelos
- Partes de modelos
- Edição de páginas ou conteúdo de posts
- Configurações de estilo global
Respostas: 1. Modelos, 2. Partes de modelos, 4. Configurações de estilo global
O Editor de Modelos permite que você…
- crie todo o seu site com blocos.
- edite, crie e atribua modelos a cada post e página.
Resposta: 2. editar, criar e atribuir modelos a cada post e página.
Ao gerenciar modelos, o conteúdo é exibido por meio do bloco Conteúdo do Post.
- Verdadeiro
- Falso
Resposta: 1. Verdadeiro
Ao criar um modelo…
- Você obtém o melhor resultado quando não separa as partes reutilizáveis das partes dinâmicas.
- Você obtém o melhor resultado quando separa as partes reutilizáveis das partes dinâmicas.
Resposta: 2. Você obtém o melhor resultado quando separa as partes reutilizáveis das partes dinâmicas.
Referências adicionais
- Editor do Site
- Editor de Modelos
- Manual do Editor de Blocos: Modelos de edição completa do site
- Manual do Editor de Blocos: Hierarquia de modelos
- Manual do Desenvolvedor de Temas: Modelos e partes de modelos
Exemplo de aprendizado
Hoje vamos aprender mais sobre o Editor do Site e o Editor de Modelos. Se você instalou um tema de blocos, como o Twenty Twenty-Two, e está pronto para começar sua jornada na edição completa do site, verá que o Personalizador desapareceu. No entanto, ao acessar Aparência, verá uma nova opção: Editor. E, quando clicar em Editor, será direcionado ao Editor do Site.
Aqui você pode modificar modelos, partes de modelos e também personalizar o estilo de todo o site. O Editor do Site fornece a opção Mostrar lista de modelos, como você verá à esquerda, permitindo que os usuários explorem a seção Site, que inclui o modelo da página inicial, os modelos e todas as outras partes de modelos. Essa é uma parte importante do conjunto de recursos do Editor do Site; basicamente, você poderá editar o design geral do site. Para alterar o que está vendo, clique no ícone do WordPress ou no ícone do site no canto superior esquerdo. Em seguida, você poderá escolher entre voltar ao Painel, Site (que é o modelo da página inicial, conforme mencionado), a lista de modelos e a lista de partes de modelos.
Ao clicar no ícone de Estilos, você poderá alterar a tipografia e as cores gerais do site. E, se rolar mais para baixo, também terá a opção de personalizar a aparência de blocos específicos em todo o site. Como observação, as configurações de Estilos estarão disponíveis para uso independentemente do modelo ou da parte de modelo que você estiver editando. Se clicar em Tipografia, poderá gerenciar as configurações tipográficas do texto e dos links. Você pode alterar a cor de fundo do site ou a cor do texto e dos links com um único clique. No canto superior direito, você verá a mensagem ‘defina uma cor de fundo ou um gradiente para todo o site.’
Se clicar nos três pontos verticais no canto superior direito, terá a opção de alterar algumas preferências nas configurações do editor:
- Modo de destaque: destaca o bloco selecionado e esmaece o restante do conteúdo.
- Mostrar rótulos de texto dos botões: exibe texto em vez de ícones nos botões.
- Sempre abrir a visualização em lista: abre a barra lateral da visualização em lista de blocos por padrão.
Como gerenciar modelos por meio do Editor do Site? Clique no ícone do WordPress no canto superior esquerdo e abra Modelos. Os modelos são coleções de blocos combinados para criar o design de uma página da web. Vamos abrir o modelo Página. Pode-se dizer que um modelo é o layout completo da página. Ele inclui elementos como a área do cabeçalho, o conteúdo e o rodapé. Clique em Visualização em lista. Na parte superior, você verá o cabeçalho; na parte inferior da página, o rodapé; e, no meio, o bloco Conteúdo do Post. Ao criar um modelo, você obtém o melhor resultado quando separa as partes reutilizáveis das partes dinâmicas. A parte dinâmica é a seção de conteúdo que mudará em cada página que usar esse modelo. A parte reutilizável é a seção estática do modelo que permanecerá igual. Os modelos não servem para publicar conteúdo. O modelo de um post ou página exibe seu conteúdo por meio do bloco Conteúdo do Post. Um modelo é, como o próprio nome diz, um modelo de design que pode ser usado por uma ou várias páginas e posts.
Ao começar a criar um novo site, você pode editar modelos existentes ou adicionar novos. Também pode criar modelos personalizados. Lembre-se de atribuir cada página ou post a um modelo usando o Editor de Modelos.
Agora, vamos falar mais sobre o gerenciamento de partes de modelos. Como informação adicional, as partes de modelos são mais bem utilizadas para criar áreas como cabeçalho, rodapé e barra lateral.
Ao abrirmos as partes de modelos, veremos as partes de modelos que criamos e as partes de modelos fornecidas pelo tema que estamos usando. Portanto, as quatro partes de modelos na parte inferior da lista são fornecidas pelo tema Twenty Twenty-Two. E, se você vir um ponto acima do ícone de uma parte de modelo, saberá que esse modelo foi modificado. O modelo de página na parte superior é uma parte de modelo que criei.
Por fim, você pode decidir adicionar uma nova parte de modelo. Ao adicionar uma nova parte de modelo, terá opções entre uma parte de modelo geral, um cabeçalho e um rodapé. A parte de modelo geral não está vinculada a uma área específica. E lembre-se de dar à sua parte de modelo um nome descritivo.
Vamos ver como adicionar um bloco de Parte de Modelo. Vou abrir meu modelo 404, exibido quando nenhum conteúdo é encontrado. Como você verá, no momento não há cabeçalho. Então, vamos abrir a Visualização em lista. Acima do bloco de grupo, vou inserir meu bloco de Parte de Modelo e, depois de selecionar o bloco de Parte de Modelo, você poderá escolher uma parte de modelo existente ou criar uma nova. Vamos escolher a existente, que já criei.
Agora, vamos falar sobre o Editor de Modelos. O Editor de Modelos permite editar, criar e atribuir modelos a cada post e página. Vamos ver como ele funciona enquanto colocamos isso em prática. Clique no ícone do WordPress no canto superior esquerdo e volte ao painel. Clique em Páginas e abra uma das páginas existentes. Na barra lateral de configurações à direita, você verá que o modelo atribuído a essa página é o modelo padrão, ou seja, o modelo de página. Você também pode atribuir um dos outros modelos disponíveis. Quando estiver pronto, poderá editar o modelo escolhido.
Ao clicar em Editar, você será levado ao Modo de edição de modelos. Você saberá que está no Modo de edição de modelos quando o nome do modelo aparecer na barra superior. Além disso, uma moldura escura aparecerá ao redor do modelo enquanto você o edita. Mas você também tem uma terceira opção: criar um novo modelo personalizado. Aparecerá o comando ‘descreva a finalidade do modelo, por exemplo, largura total’, e o modelo personalizado poderá ser aplicado a qualquer post ou página. Você pode decidir criar um modelo personalizado para uma landing page ou talvez para uma página de portfólio.
Depois de clicar em Criar, você verá que o cabeçalho está diferente e não há rodapé. Portanto, você terá uma tela em branco para criar seu próprio modelo personalizado. Apenas para lembrar, o Modo de edição de modelos permite alternar entre editar o conteúdo de cada post ou página e o modelo usado por esse post ou página.
Acreditamos que agora você tenha uma compreensão melhor de como usar o Editor do Site e o Editor de Modelos.
Encerramento do aprendizado