Editor do site

O Editor do site permite que você crie o design de todo o site, incluindo o cabeçalho, o rodapé e tudo o que estiver entre eles, com blocos. Ele oferece maior controle sobre a aparência do seu site. 

O Editor do site está disponível somente quando você instala e ativa um tema de blocos no seu site.

Como acessar o Editor do site

Para trabalhar com o Editor do site, você precisa usar um tema de blocos no seu site. Um tema de blocos é um tema que usa blocos para todas as partes de um site, incluindo menus de navegação, cabeçalho, conteúdo e rodapé do site. 

Todos os blocos disponíveis no Editor de blocos do WordPress podem ser usados no Editor do site. Um conjunto de blocos chamados blocos de tema foi criado especificamente para o Editor do site.

Para encontrar temas de blocos, no painel do WordPress, acesse Aparência > Temas e clique em Adicionar novo. Na página Adicionar temas, selecione Temas de blocos para encontrar a lista crescente de temas de blocos no diretório de temas do WordPress.

Depois de instalar e ativar um tema de blocos no seu site, acesse Aparência > Editor para abrir o Editor do site.

O que fazer no Editor do site

Depois de entrar no Editor do site, você verá cinco itens de menu.

• Navegação: permite navegar pelos seus menus e fazer alterações básicas.
• Estilos: fornece acesso direto para editar as variações de estilo do seu site’s.
• Páginas: agora você pode editar o conteúdo das suas páginas diretamente no Editor do site.
• Modelos: revise os diferentes layouts padrão para as diferentes seções do seu site, bem como páginas personalizadas (resultados de pesquisa, 404 etc.).
• Padrões: seus padrões sincronizados e partes de modelo podem ser gerenciados aqui.

Você também verá um ícone de lupa. Clique nele para acessar a Paleta de comandos.

Abaixo está uma visão geral das diferentes seções do Editor do site.

A área de trabalho do Editor do site

O Editor do site carrega a página inicial do seu site (com base no que você definiu em Configurações de leitura) para começar a edição.

O menu superior do Editor do site inclui as seguintes opções:

1. O ícone do site (ou o ícone W, se nenhum ícone do site estiver definido): retorna ao painel ou alterna para outra seção do Editor do site: Navegação, Estilos, Páginas, Modelos ou Padrões. Se você escolher retornar ao painel, será solicitado que salve as alterações ou saia do Editor do site sem salvá-las.

2. O + botão de inserção de blocos: adiciona um novo bloco, padrão de bloco, mídia ou padrão sincronizado (se o site tiver padrões sincronizados) ao Editor do site.

3. Ferramentas: alterne entre editar um bloco e selecionar um bloco. Escolha a ferramenta Selecionar (ou pressione a tecla Escape no teclado) para selecionar blocos individuais. Depois que um bloco for selecionado, pressione a tecla Enter no teclado para voltar à edição.

4. Desfazer: desfaz a ação mais recente realizada.
5. Refazer: refaz uma ação que você reverteu usando o botão Desfazer.
6. Visualização em lista: veja uma lista de todos os blocos que estão na página e navegue facilmente entre eles. Isso é útil para visualizar a estrutura da página e editar, mover e remover blocos.
7. Paleta de comandos: clique aqui para acessar rapidamente todo o conteúdo, modelos e padrões do seu site’s, além de invocar outras ações (configurações, nova página etc.).

8. Salvar: salva as alterações feitas no Editor do site.
   • Ao clicar no botão Salvar , você verá uma lista de todos os padrões sincronizados, menus de navegação, modelos e partes de modelo nos quais você fez alterações.
   • Você pode escolher salvar todos ou apenas alguns deles.
   • Observe que algumas alterações (como alterações nos modelos de cabeçalho e rodapé) serão aplicadas a todas as páginas do seu site que usam esses modelos, e não apenas à página em que você estava trabalhando.

9. Configurações: mostra ou oculta o menu lateral de Configurações de modelo e bloco.

10. Estilos: navegue pelas variações de estilo disponíveis para o tema que você possui, defina a tipografia, as paletas de cores e o layout de todo o site ou personalize a aparência de blocos específicos para todo o site.
11. Mais opções: clique no ícone de três pontos verticais para abrir configurações e ferramentas adicionais.

Exibir barra de ferramentas superior: exibe ou oculta a barra de ferramentas superior no editor. Quando você ativa essa opção, as barras de ferramentas dos blocos são fixadas na parte superior do Editor de blocos do WordPress (logo abaixo da barra de ferramentas superior), em vez de aparecerem diretamente acima do bloco.

Modo de destaque: todos os blocos ficam acinzentados, exceto aquele em que você está trabalhando, para que possa se concentrar em um bloco por vez.

Livre de distrações: quando essa opção está ativada, todas as partes não essenciais da interface são ocultadas para proporcionar uma experiência de edição mais imersiva.

Editor: por padrão, você estará no Editor visual. Alterne para o Editor de código para visualizar a página inteira no editor de código HTML.

Plugins: aqui, você pode alternar entre Configurações e Estilos na barra lateral do Editor do site.

Ferramentas: aqui, você pode baixar seu tema com os modelos e estilos atualizados (Exportar), aprender atalhos de teclado, visitar o guia de boas-vindas do Editor do site, copiar todos os blocos ou visualizar artigos adicionais de suporte.

Preferências: use o menu Preferências para personalizar a experiência de edição e alterar como você interage com os blocos.

Como usar o Editor do site

Para editar os estilos do site

Você pode usar o Editor do site para personalizar os estilos de todo o site e dos blocos. As configurações de estilo estão disponíveis independentemente do modelo ou parte de modelo que você está editando. 

• Acesse Aparência > Editor.
• Clique no item de menu Estilos ou no ícone ao lado da barra lateral de configurações do bloco.

Na seção Estilos, você pode navegar pelas variações de estilo disponíveis para o tema que possui, alterar as paletas de cores e a tipografia e definir o layout de todo o site, além de alterar a aparência dos blocos, o que também se aplica a todo o site.

Para revisar as revisões de estilo ou redefinir completamente as alterações feitas, clique no ícone de menu de três pontos no canto direito e selecione uma das opções.

Saiba mais sobre Estilos neste artigo de suporte: Visão geral dos estilos.

Para personalizar o layout do site

Você pode usar o Editor do site para criar a estrutura e o layout de todo o site usando blocos. Por exemplo: áreas como cabeçalhos, rodapés e a aparência estrutural das publicações e páginas do seu site.

Todos os blocos disponíveis no Editor de blocos do WordPress podem ser usados no Editor do site. Um conjunto de blocos chamados blocos de tema foi criado especificamente para o Editor do site.

Exemplos: o bloco de loop de consulta permite personalizar a aparência do layout das suas publicações; o bloco de navegação permite personalizar o menu de navegação do site; o bloco de título do site ajuda a personalizar o título do site e muito mais.

Confira a lista completa de blocos de tema.

Exemplo – Como personalizar o Twenty Twenty-Three usando o Editor do site

O Twenty Twenty-Three é compatível com o Editor do site e pode ser personalizado usando-o. Como exemplo, vamos remover o espaço na parte superior da página inicial do Twenty Twenty-Three. Para fazer isso, remova o preenchimento inferior da parte de modelo do cabeçalho e o preenchimento superior da área de conteúdo.

Primeiro, remova o preenchimento inferior das partes de modelo do cabeçalho.

1. Na tela de administração, selecione Aparência > Editor
2. Selecione Padrões > Partes de modelo > Cabeçalho > Cabeçalho e clique no ícone de lápis para editá-lo.
3. Selecione o bloco Grupo > Linha. Use a navegação inferior dos blocos.
4. Nas configurações do bloco, clique em Estilos.

5. Role para baixo até Preenchimento > Inferior. O valor atual é 2.
6. Defina-o como 0.
7. Salve as partes de modelo.

Em seguida, remova o preenchimento superior da área de conteúdo.

8. Volte ao Editor do site.
9. Selecione Modelos > Página inicial e clique no ícone de lápis para editá-la.
10. Selecione o bloco Grupo superior. Use a navegação inferior dos blocos.
11. Nas configurações do bloco, clique em Estilos.

12. Role para baixo até Preenchimento > Superior. O valor atual é 3.
13. Defina-o como 0.
14. Salve o modelo.

Para navegar pelos modelos e partes de modelo

No Editor do site, você pode navegar facilmente pelos modelos e partes de modelo disponíveis para o seu site.

• Acesse Aparência > Editor para abrir o Editor do site. Isso levará você a uma visualização na qual poderá escolher navegar pelos seus modelos ou partes de modelo.
• Clique em Modelos para visualizar a lista de modelos disponíveis para o seu site.
• Clique em Padrões para visualizar a lista de partes de modelo.

Para gerenciar os modelos do site

O WordPress usa modelos para criar o layout e a estrutura de tipos específicos de página no seu site. O Editor do site exibe as opções de modelo que você pode adicionar ao seu site e permite criar modelos personalizados usando o Editor de modelos.

Em Aparência > Editor, será exibida uma visualização que inclui uma barra lateral com sua lista de Modelos e Padrões, incluindo a lista de partes de modelo.

Saiba mais sobre Modelos neste artigo de suporte: Editor de modelos.

Para gerenciar as partes de modelo

Uma parte de modelo é um bloco para gerenciar áreas globais repetidas do site, como Cabeçalho, Rodapé, Barra lateral etc. Elas servem principalmente para definir a estrutura do site e podem ser reutilizadas. Você também pode criar Partes de modelo personalizadas que podem ser reutilizadas nos modelos.

Em Aparência > Editor, clique na opção Padrões. Em Todas as partes de modelo, você pode acessá-las.

Saiba mais sobre Partes de modelo neste artigo de suporte: Parte de modelo.

Para gerenciar páginas

Desde a versão 6.3, é possível gerenciar, editar e criar páginas pelo Editor do site, na seção “Páginas”.

Saiba mais sobre como gerenciar páginas pelo Editor do site neste artigo de suporte: Páginas do Editor do site

Como retornar ao painel

Para voltar ao painel, clique no ícone do WordPress (ou no ícone do site, se você tiver definido um) para abrir a navegação esquerda do Editor do site. Selecione < para voltar ao painel do WordPress. Será solicitado que você salve as alterações feitas no Editor do site antes de sair.

Como exportar modelos e estilos

Você pode exportar seu tema com as alterações feitas no Editor do site, incluindo os modelos, as partes do modelo e as configurações de estilo, de forma semelhante à opção Ferramentas > Exportar.

• Abra o Editor do site acessando Aparência > Editor.
• Selecione o ícone de três pontos verticais ao lado da opção de configurações de Estilos.
• Em Ferramentas, selecione Exportar. Isso iniciará o processo de exportação, e você receberá um arquivo zip baixado do seu tema com os modelos e as partes do modelo incluídos.

Ferramentas úteis ao usar o Editor do site

As ferramentas a seguir são úteis ao usar o Editor do site.

A Paleta de comandos

A Paleta de comandos oferece uma maneira rápida de navegar pelo conteúdo do seu site e executar diferentes ações, como criar novos posts/páginas, alternar preferências e acessar suas configurações de estilos e CSS personalizado.

Você pode abrir a Paleta de comandos na Visualização do site, na barra lateral, clicando no ícone de pesquisa. Na Visualização de edição, a Paleta de comandos fica na barra de título superior. Você também pode usar o atalho de teclado Cmd+k no Mac ou Ctrl+k no Windows

Saiba mais sobre a Paleta de comandos neste artigo de suporte: Paleta de comandos do Editor do site.

Visualização em lista

A Visualização em lista ajuda você a navegar por layouts de blocos complexos e estruturas de blocos aninhados. Você pode selecionar exatamente o bloco de que precisa e obter uma visão geral rápida do layout de blocos na página em que está trabalhando. Você pode selecionar facilmente vários blocos e editá-los, movê-los ou agrupá-los.

Saiba mais sobre a Visualização em lista neste artigo de suporte:  Visualização em lista.

Padrões de blocos

Os padrões de blocos são uma coleção de blocos predefinidos que você pode inserir em posts e páginas. Depois, você pode personalizá-los ainda mais. O WordPress vem com um conjunto de padrões de blocos padrão. Você também pode encontrar padrões de blocos incluídos nos temas de blocos.

Saiba mais sobre os padrões de blocos neste artigo de suporte: Padrão de bloco.

Copiar e colar estilos

Com o WordPress 6.2, foi adicionada uma nova opção que permite copiar e colar estilos de blocos, facilitando a reutilização dos designs que você criou. Você pode encontrar essa opção no menu de três pontos de qualquer bloco, e ela deve ser usada para copiar e colar entre blocos do mesmo tipo:

Aplicar alterações de estilo globalmente

Se você se sente mais confortável com opções avançadas ao criar um design ou personalizar blocos individuais, a partir do WordPress 6.2, pode aplicar as alterações feitas em um bloco individual a todos os blocos do mesmo tipo. Por exemplo, você poderia aplicar um único design de um bloco individual a todos os blocos do seu site com uma nova opção na seção Avançado das configurações do bloco.

Redimensionar a visualização do Editor do site

Quando estiver no Editor do site, talvez você queira alterar a visualização do modelo ou da parte do modelo que está visualizando. Você pode fazer isso selecionando as alças da barra lateral cinza-escura e movendo-a como preferir.

Links de recursos

• Guia adicional para usar o Editor do site
• Design simples de sites e edição completa do site
• Introdução ao Editor do site e ao Editor de modelos