Redigir e editar

Editor do WordPress: como trabalhar com blocos

Você usará o editor do WordPress para criar as páginas e posts no seu site. Saiba como usá-lo.

Este é um guia completo sobre todas as funcionalidades do editor do WordPress.

Para início rápido, acesse como adicionar conteúdo usando blocos, confira esses vídeos ou leia nossos tutoriais para começar aqui.

Sumário

o editor do WordPress com um bloco de cobertura, texto e um botão.
O editor de blocos do WordPress

Você pode usar o editor do WordPress para criar páginas e posts repletos de conteúdos de mídia, além de controlar o layout com facilidade. Em vez de você se preocupar com o alinhamento e a organização do texto, das citações e das imagens, agora todos os elementos de um post ou página terão seu próprio bloco. E você pode se concentrar na criação deles.

Se seu editor não se parece com o descrito neste guia, verifique essas informações úteis sobre os tipos diferentes de editores.


Elementos do editor do WordPress

O editor do WordPress é composto por três áreas principais: o menu superior, os menus da barra lateral e a área de conteúdo principal.

Menu superior do editor do WordPress

exibe as opções na parte superior do editor para adicionar um bloco, publicar um post e abrir o menu de configurações.
Menu superior do editor do WordPress

Opções do menu superior

um ícone de mais.

Adicionar blocos: descubra todos os blocos, padrões de bloco e blocos reutilizáveis disponíveis.

um ícone de lápis

Modos: ferramentas que oferecem diversas interações para seleção e edição de blocos. Para selecionar, pressione Esc. Para voltar à edição, pressione Enter.

ícones de setas para a esquerda e para a direita.

Desfazer e refazer: desfaça uma ação ou refaça uma ação desfeita.

Detalhes: número de caracteres, palavras, títulos, parágrafos e blocos usados no documento.

três linhas verticais empilhadas afastadas.

Resumo: visualização em lista de todos os blocos usados na página. Útil para navegar por diferentes blocos.

Antes de publicar uma página ou post, você verá as seguintes opções:

Salvar rascunho: salve um rascunho da sua página ou post
Visualizar: veja como fica a aparência de sua página ou post ao aplicar o tema.
Publicar: publique sua página/post.

Depois de publicar uma página ou post, você verá as seguintes opções:

Mudar para rascunho: cancele a publicação de uma página ou post e volte para o formato rascunho.
Visualizar: veja a aparência de sua página ou post ao aplicar o tema.
Atualizar: atualize sua página ou post publicado com o novo conteúdo adicionado.

um ícone de configurações.

Configurações: exiba ou oculte o menu da barra lateral de Configurações do bloco, página e documento.

um ícone com a letra A no meio.

Estilos globais: se você usar um tema compatível com os estilos globais, essa opção permitirá alterar os estilos de fonte de todo o site.

um ícone verde e branco para o Jetpack.

Jetpack: permite que você ative/desative curtidas e compartilhamentos de páginas e posts individuais, visualize o compartilhamento nas redes sociais e receba o link abreviado da sua página ou post.

ícone com três pontos verticais ou reticências.

Opções: abre as opções de visualização, o estilo do Editor e ferramentas adicionais.

Menu da barra lateral do editor do WordPress

No menu superior, os ícones de configurações, estilos globais e do Jetpack abrem diferentes menus da barra lateral.

📌

Caso você não veja um menu da barra lateral no editor de blocos, clique em um dos três ícones no menu superior, ao lado do botão Publicar/Atualizar.

Configurações

No menu Configurações da barra lateral, você encontra as configurações do documento ou da página:

Ao clicar em um bloco específico, o menu Configurações da barra lateral exibirá configurações adicionais do bloco específicas para cada tipo de bloco.

o menu superior com o ícone de configurações ativo.
Ícone de configurações

Estilos globais

Altere as fontes padrão usadas em títulos e as fontes base em todo o site com a barra lateral de estilos globais.

o menu superior com o ícone de estilos globais ativo.
Ícone de Estilos globais

Jetpack

No menu da barra lateral do Jetpack, você consegue:

o menu superior com o ícone do Jetpack ativo.
Ícone do Jetpack

Área de conteúdo do editor do WordPress

Você passará a maior parte do tempo no terceiro elemento do editor do WordPress. Essa é a seção principal do editor, onde é possível adicionar blocos de conteúdo.

O editor oferece uma experiência simples de criação de páginas e posts. Com os blocos, é possível adicionar e personalizar com rapidez várias mídias e elementos visuais que utilizavam shortcodes complexos, códigos HTML personalizados e códigos incorporados.

💡

Também é possível começar a escrever imediatamente e pensar no layout da página depois (ou nem pensar).

Veja um ótimo guia de como usar o editor do WordPress como escritor ou blogueiro.


↑ Tabela de Conteúdo ↑

Adicionar conteúdo usando blocos

No editor do WordPress, crie conteúdo usando blocos. Há um bloco para cada tipo de elemento que você quiser adicionar: texto, imagens, vídeo, áudio, colunas, espaços, quebras de página, botões de pagamento, calendários e muito mais!


↑ Tabela de Conteúdo ↑

Adicionar um bloco

Há diversos tipos de blocos para você escolher, organizados por categoria. Você pode editar ou deslocar cada bloco independentemente dos demais. Os blocos individuais, às vezes, vêm com suas próprias configurações de formatação, para que haja um controle ainda maior sobre o layout e as funções.

uma gravação de tela de diferentes formas de adicionar novos blocos no editor do WordPress.
Como adicionar novos blocos

Há várias formas de adicionar um bloco e selecionar o tipo de bloco de que você precisa.

💡

A maneira mais rápida de adicionar um bloco é pelo ícone “+” na tela. Sempre que este ícone aparecer na tela, você poderá adicionar um novo bloco.

Ou, começar a escrever em uma área em branco e um bloco de parágrafo será criado automaticamente.

  1. Clique no ícone + preto na lateral do bloco vazio.
  2. Clique no ícone + na parte superior esquerda do editor. Esta é uma ótima opção para visualizar diferentes estilos de blocos.
  3. Aperte a tecla Enter/Return em um bloco selecionado, para criar um bloco abaixo dele.
  4. Clique nos três pontos logo acima do bloco selecionado e opte por adicionar um bloco acima ou abaixo da seleção atual.

Depois de conhecer os nomes dos diferentes blocos, você poderá adicionar um inserindo uma barra seguida do nome do bloco (por exemplo, /imagem ou /título).

exemplo de uso do atalho do teclado/para pesquisar blocos.
Atalho para adicionar um bloco

Veja seus blocos mais usados

Para ativar a categoria de blocos mais usados, siga estas etapas:

  1. Clique no ícone de reticências (três pontos), no canto superior direito da tela do editor.
  2. Escolha Preferências.
  3. Marque a caixa ao lado da opção Mostrar blocos mais usados.
Mostrar blocos mais usados

Após selecionar a opção blocos mais usados, você poderá ver os blocos que mais usa na biblioteca de blocos.

Clique no ícone + no menu superior para acessar a biblioteca de blocos. Seu bloco mais usado aparecerá na parte superior da biblioteca.

a biblioteca de blocos é expandida exibindo os blocos mais usados.
Categoria de blocos mais usados

↑ Tabela de Conteúdo ↑

Mover blocos

Para mover os blocos, basta clicar e arrastar os seis pontos na barra de ferramentas exibida ao clicar dentro de um bloco. Também é possível usar as setas para cima e para baixo para mover um bloco nessas direções.

Como mover blocos

↑ Tabela de Conteúdo ↑

Personalizar blocos

Cada bloco tem suas próprias configurações. Para encontrá-las, clique em um bloco. Uma barra de ferramentas será exibida na parte superior do bloco. Você encontrará também configurações adicionais na barra lateral à direita do editor.

📌

Se as configurações do bloco não são exibidas à direita do editor, clique no ícone de configurações ⚙️ (parecido com uma engrenagem) ao lado do botão Publicar/Atualizar para expandir o menu da barra lateral.

o ícone de Configurações ao lado do botão Publicar em destaque.

Exemplos de outras barras de ferramentas de blocos

Barra de ferramentas do bloco de parágrafo acima do bloco.
Barra de ferramentas do bloco de parágrafo
Barra de ferramentas do bloco de imagem acima do bloco.
Barra de ferramentas do bloco de imagem
Barra de ferramentas do bloco de lista acima do bloco.
Barra de ferramentas do bloco de lista

Configurações do bloco – Barra de ferramentas

Clique nos três pontos à direita da barra de ferramentas do bloco para ver mais opções, presentes na maioria dos blocos.

  1. Ocultar configurações do bloco fecha o menu de configurações.
  2. Duplicar cria outro bloco na mesma página com o mesmo conteúdo.
  3. Inserir antes/depois adiciona um novo bloco antes ou depois do bloco atual.
  4. Editar como HTML muda o bloco para a versão HTML, de modo que você possa editar o HTML diretamente. Ao editar como HTML, essa opção muda para Editar visualmente.
  5. Adicionar aos blocos reutilizáveis permite criar um bloco que pode ser usado em outras páginas sem perder o conteúdo e o estilo. Saiba mais.
  6. Remover bloco exclui o bloco da sua página/post.
o menu de reticências (Mais opções) é expandido para exibir as opções adicionais do bloco.
Opções adicionais da barra de ferramentas do bloco

⚠️

Nem todos os códigos funcionarão ao editar como HTML. Se o seu código estiver bem escrito e não tiver erros, verifique se ele está na lista de tags HTML aprovadas e se não é um código restrito, como JavaScript.

Configurações do bloco – Barra lateral

As configurações do bloco, à direita do seu editor, mostrarão opções diferentes conforme o bloco usado.

Na captura de tela à direita, o bloco ativo é um Parágrafo. Portanto, as opções incluem alterar o tamanho da fonte e a cor da fonte e do plano de fundo, além de opções avançadas para criar atalhos de página ou adicionar uma classe CSS.

📌

Se as configurações do bloco não são exibidas à direita do editor, clique no ícone de configurações ⚙️ (parecido com uma engrenagem) ao lado do botão Publicar/Atualizar para expandir o menu da barra lateral.

o ícone de Configurações ao lado do botão Publicar em destaque.
A barra lateral de configurações do bloco que exibe as opções do bloco de parágrafo, como configurações de texto, cor e AMP.
As configurações do bloco na barra lateral incluem opções adicionais específicas ao bloco que você está editando.

↑ Tabela de Conteúdo ↑

Mudar tipo de bloco

E se você quiser alterar o tipo de bloco? Sem problema! Você pode transformar cada um dos blocos em tipos de blocos semelhantes ou relacionados. Por exemplo, transforme um parágrafo em um título, uma lista ou uma citação.

uma gravação de tela da opção da barra de ferramentas do bloco para alterar o tipo de bloco de um parágrafo para uma citação ou título.
Como alterar o tipo de bloco

↑ Tabela de Conteúdo ↑

Alguns blocos são aninhados dentro de outros blocos, chamados de blocos “pai”, e você precisa de uma forma fácil de selecionar o bloco pai. 

Por exemplo, você tem um bloco de colunas que quer colocar em largura total. Você não conseguirá fazer isso clicando em uma coluna individual. Você terá a opção de alterar o estilo de layout do bloco de colunas no bloco principal (ou seja, o bloco de colunas).

Para selecionar o bloco principal, passe o mouse sobre o ícone exibido mais à esquerda da barra de ferramentas do bloco, como na captura de tela:

uma gravação de tela passando o mouse sobre a opção do bloco principal na barra de ferramentas do bloco.

Isso pode ser útil se você tiver texto dentro de um bloco de coluna e precisar selecionar esse tipo de bloco ou se você tiver vários botões dentro de um bloco de botões e precisar selecionar vários desse tipo de bloco.

Você também pode usar o menu Detalhes para ver os blocos que adicionou na sua página/post:

o menu Detalhes no menu superior é expandido para mostrar a visualização em lista dos blocos usados na página ou post.

O menu Detalhes é uma lista suspensa de todos os blocos inseridos na sua página ou post. Assim fica fácil ver a estrutura da sua página e selecionar o bloco existente no qual você quer trabalhar.


Para acessar o menu Detalhes, clique no ícone parecido com uma pequena lista de marcadores com três linhas horizontais. Ele está localizado após a estrutura de conteúdo (ícone de informações), no canto superior esquerdo do editor.

O menu Detalhes é útil especialmente para selecionar blocos difíceis de alcançar, como uma coluna individual dentro de um bloco de colunas ou um bloco dentro de um grupo de blocos:

uma gravação de tela do menu Detalhes expandindo e selecionando um bloco específico para ativá-lo.
Se você estiver usando a ferramenta de navegação nos blocos, poderá pular diretamente para qualquer bloco na página e editá-lo.

↑ Tabela de Conteúdo ↑

Remover um bloco

Para remover um bloco, selecione-o e clique nos três pontos na barra de ferramentas logo acima dele. Nas configurações, você verá a opção para removê-lo.

o menu de reticências na barra de ferramentas do bloco é expandido para selecionar a opção Remover bloco em destaque.
Remover um bloco

↑ Tabela de Conteúdo ↑

Padrões de bloco

Os padrões de bloco são uma coleção de blocos que podem ser inseridos em posts e páginas. São uma maneira rápida de adicionar conteúdo em padrões com visual atraente.

Por exemplo, há um padrão de bloco para inserir três imagens lado a lado.

Para inserir um padrão de bloco, siga estas etapas:

  1. Clique no ícone + no menu superior para incluir um novo bloco.
  2. Clique na guia Padrões.
  3. Quando você clicar no padrão que quer inserir, ele será inserido onde o cursor estiver no documento.
o ícone + no menu superior é expandido e a opção Padrões é selecionada para mostrar os diferentes padrões de bloco disponíveis.

Para mais informações, consulte o nosso guia sobre padrões de bloco.


↑ Tabela de Conteúdo ↑

Visualizar a página ou o post

Embora o editor de blocos mostre uma representação visual da aparência que a página terá ao ser publicada, a aplicação e a personalização do tema podem gerar pequenas mudanças na aparência final.

a opção Visualizar, com uma caixa deixando-a em destaque.
a opção Visualizar no menu superior

A opção Visualizar carrega a página em que você está trabalhando, junto com o tema e as personalizações do tema salvo (como CSS personalizado).

Com a visualização, você também tem a opção de ver como seu post ou página será exibido em desktop, tablet ou dispositivo móvel. Com o plano WordPress Negócios ou superior, também é possível visualizar como a página será exibida nas pesquisas e em compartilhamento nas redes sociais.

na opção Visualizar, exibindo as opções de visualizar em desktop, tablet, telefone ou redes sociais.
Visualize em diversos dispositivos

↑ Tabela de Conteúdo ↑

Configurações do documento

À direita do editor de blocos, o menu Configurações do documento é o que você pode usar para adicionar tags e categorias, escolher uma imagem destacada, ver e mudar o status do seu post e muito mais. Essas opções se aplicam à página ou post como um todo.

Para editar essas opções específicas, clique na seta para baixo ao lado de cada cabeçalho nas configurações do documento.

📌

Se as configurações do documento não são exibidas à direita do editor de blocos, clique no ícone de configurações ⚙️ (uma engrenagem), na parte superior direita, para abri-las.

o ícone de Configurações ao lado do botão Publicar em destaque.

↑ Tabela de Conteúdo ↑

Mais opções

Personalize a sua experiência de edição clicando nos três pontos à direita do ícone Configurações.

Exibir

Dá opções de posicionamento das barras de ferramentas do bloco durante a edição.

Editor

Por padrão, você está no editor visual. Para ver a página inteira em código HTML, troque para o editor de código.

Nem todo código funcionará ao editar como HTML. Se o seu código estiver bem escrito e não tiver erros, verifique se ele está na lista de tags HTML aprovadas e se não é um código restrito, como JavaScript.

Ferramentas

Gerencie os blocos reutilizáveis existentes, copie todo o conteúdo para colar em outra página ou conheça os atalhos de teclado.

Opções

Escolha quais configurações de documento aparecem na barra lateral.

o menu de reticências na barra de ferramentas superior é expandido para exibir a visualização, o editor, os plugins e outras configurações de exibição para o editor de blocos.
Mais opções

↑ Tabela de Conteúdo ↑

Perguntas frequentes

Como faço para editar HTML no editor do WordPress?

Caso queira criar seu próprio código HTML, um bloco HTML personalizado pode ser adicionado.

Outras opções de edição do código HTML no editor do WordPress podem ser encontradas aqui.

Nem todos os códigos funcionarão ao editar como HTML. Se o seu código estiver bem escrito e não tiver erros, verifique se ele está na lista de tags HTML aprovadas e se não é um código restrito, como JavaScript.

Como será a aparência do conteúdo que já existe?

Se você mudou do editor clássico para o editor de blocos, o conteúdo atual terá a mesma aparência que tinha antes. Se você editar um post ou página existentes no novo editor, todo o conteúdo será colocado em um bloco clássico, que receberá o mesmo tratamento fornecido pelo editor anterior. Clique aqui para mais informações sobre como converter conteúdo em blocos.

Por que o meu conteúdo não tem a mesma aparência no editor e no site?

É possível que você observe algumas variações entre o seu conteúdo no editor e no site, principalmente devido à forma com que o seu tema exibe elementos visuais diferentes. Alguns temas incluirão estilos que deixarão o editor mais parecido com a página inicial do site, outros não. Se o tema incluir uma barra lateral, por exemplo, ela não aparecerá no editor, o que pode afetar a largura do conteúdo quando exibido na página inicial do site.

Por que algumas configurações estão disponíveis em um dos meus sites, mas não em outros?

Se você tiver o plano WordPress.com Negócios em um site, pode ser que também tenha plugins que adicionam blocos personalizados ao seu editor. Eles não estarão disponíveis em outros sites que não tenham o plugin.

Algumas configurações de blocos (“amplos” ou “largura total”) precisam ser compatíveis com o seu tema. Apesar de os mesmos blocos estarem presentes em sites distintos, as configurações específicas que você pode aplicar a esses blocos podem ser um pouco diferentes, de acordo com o seu tema ativo.

Ainda conseguirei usar o editor antigo?

O antigo editor, também conhecido como editor clássico, pode ser usado dentro do editor de blocos, graças ao bloco clássico. Veja como usar o bloco clássico.

Os shortcodes ainda funcionarão?

Sim. O editor acompanha um bloco shortcode, que pode ser usado nos shortcodes exatamente como antes. Futuramente, diversos shortcodes se tornarão seus próprios blocos.

Esse editor é acessível?

O nosso objetivo é que o editor do WordPress seja tão acessível quanto os anteriores, de preferência, ainda mais. Queremos que todos consigam usá-lo. Os Padrões de codificação de acessibilidade do WordPress definem que “Todos os códigos lançados no WordPress, sejam novos ou atualizados, deverão estar em conformidade com as diretrizes WCAG 2.0, no nível AA”. Não haverá exceções para essa regra. Caso tenha algum problema de acessibilidade, fale conosco.

Preciso utilizar algum tema específico no novo editor?

Não. O novo editor de blocos funcionará com todos os temas. No entanto, apenas alguns podem ser compatíveis com recursos de layouts específicos (como os conteúdos “amplos” e “largura total”).

Onde encontro uma lista completa de atalhos do teclado?

Uma lista completa de atalhos está disponível no Manual do WordPress.

Onde encontro recursos como a contagem de palavras e a verificação ortográfica?

Para ver o número de palavras usadas na sua página ou post, clique no ícone de informações que parece com a letra “i” dentro de um círculo, na parte superior esquerda da tela. Essa opção não é exibida em dispositivos móveis; apenas em desktops.

Não oferecemos verificação ortográfica ou gramatical, pois os navegadores modernos já incluem essa opção por padrão. Você pode usar isso para corrigir erros de digitação em posts.

Achou este guia útil?