Redigir e editar

Editor visual

As etapas neste guia se referem ao nosso editor clássico. Se estiver usando o nosso novo editor de blocos, consulte este guia.

Sobre o editor visual

Você pode usar o editor visual para criar, editar e formatar seu conteúdo em uma visualização parecida com a de um processador de texto.

Para garantir que você não esteja recebendo a visualização HTML do post ou da página, selecione a guia Visual, no canto superior direito da área do editor, conforme ilustrado abaixo.

Guia Visual - Editor
Verifique se você está na guia Visual

Há duas fileiras de botões de edição no editor visual. É possível descobrir o que cada botão faz ao passar o mouse sobre eles. Uma pequena dica de ferramenta aparecerá, descrevendo o ícone e sua finalidade.

O conteúdo do editor visual será estilizado pelo CSS (um tipo de código que proporciona a estilização HTML, como cor, espaçamento, largura, etc) do tema que você escolher. O que você vê no editor pode não corresponder com exatidão ao site em tempo real. Use o botão Visualizar para verificar a aparência do seu post ou página no site em tempo real.


Primeira fileira de botões de edição

Inicialmente, ao ser aberto, o editor visual exibirá uma única fileira de ícones:

imagem dos ícones na fileira 1 da barra de ferramentas do editor visual
Botões de edição na primeira fileira (consulte abaixo uma explicação de cada opção)
  1. Adicionar mídia
  2. Estilo – diversos estilos de formatação, definidos por seu tema
  3. Negrito
  4. Itálico
  5. Lista fora de ordem (com marcadores):
    • Item 1
    • Item 2
  6. Lista ordenada
    1. Item 1
    2. Item 2
  7. Citação destacada (uma forma de exibir um texto de citação; cada tema estilizará isso de uma forma diferente).
  8. Alinhar à esquerda
  9. Centralizar
  10. Alinhar à direita
  11. Inserir/editar/remover link
  12. Inserir a tag Mais
  13. Alternar barra de ferramentas (habilita a segunda fileira dos ícones de edição)
  14. Adicionar formulário de contato

Segunda fileira de botões de edição

Para exibir a segunda fileira de ícones, selecione o ícone alternar barra de ferramentas, à direita da primeira fileira (botão nº 13 acima). Esta ação abrirá uma segunda barra de ferramentas, que terá a seguinte aparência:

imagem da segunda fileira dos ícones da barra de ferramentas no editor visual
Botões de edição na segura fileira (consulte abaixo uma explicação de cada opção)
  1. Tachado
  2. Linha horizontal
  3. Selecionar cor do texto: alterar a cor do texto
  4. Colar como texto
  5. Limpar formatação
  6. Inserir caractere especial
  7. Diminuir recuo: mover o texto mais para a esquerda
  8. Aumentar recuo: mover o texto mais para a direita
  9. Desfazer: desfazer sua última ação
  10. Refazer: refazer sua última ação
  11. Ajuda: exibir atalhos de teclado.

↑ Tabela de Conteúdo ↑

Alinhamento

Tanto o texto quanto as imagens podem ser alinhadas, usando os ícones apropriados:

À esquerda

Alinhar à esquerda
Alinhar à esquerda

À direita

Alinhar à direita
Alinhar à direita

Centralizado

Centralizar
Centralizar

↑ Tabela de Conteúdo ↑

Estilos

O menu suspenso de estilo permite que você altere a formatação de qualquer texto selecionado. Isso inclui vários títulos e outros estilos predefinidos, incorporados ao seu tema.

Observe que outras modificações de estilo precisam do CSS personalizado (e conhecimentos apropriados sobre CSS).

Estilos de texto no editor visual
Estilos de texto no editor visual

↑ Tabela de Conteúdo ↑

Cor do texto

Para alterar a cor do texto, primeiro, você deve destacar um trecho do texto:

Ao clicar na seta para baixo, ao lado do botão da cor do texto, um seletor de cores será exibido. Enquanto o seletor de cores estiver sendo aberto, a seta apontará para cima. Você tem a opção de clicar nele, para fechar o seletor sem selecionar uma cor:

imagem da opção de seleção de cores

Ao selecionar uma cor, ela será aplicada ao texto selecionado e irá transformá-la na cor padrão do botão de cores.

Ao clicar no botão da cor do texto, a cor padrão mais recente será aplicada.

imagem do botão de seleção de cor padrão

↑ Tabela de Conteúdo ↑

Como colar texto

Se você copiar e colar o texto de outro lugar, poderá descobrir que ele nem sempre será exibido conforme as suas expectativas. Isso ocorre porque o conteúdo copiado de outro programa (como um e-mail ou processador de texto) pode trazer alguma formatação indesejada.

Se você usar o botão Colar como texto, um processo especial de limpeza será executado, a fim de remover qualquer formatação especial e tags HTML que possam alterar a formatação do seu texto.

Abaixo consta a aparência da Barra de ferramentas no modo “Texto simples desativado”. Observe que não há caixas em torno dele:

imagem do botão colar como texto, quando não está ativo

Abaixo, você observa como é a aparência da Barra de ferramentas no modo “Texto simples ativado”. Observe que o ícone agora apresenta uma caixa ao seu redor e que o botão ficou com um sombreado em preto:

imagem do botão colar como texto quando

Limpar formatação

Botão Limpar formatação

O botão Limpar formatação remove toda a formatação (negrito, itálico, cores etc.) de um trecho destacado do texto. Primeiro, selecione o texto:

imagem do texto formatado

Quando o botão for clicado, toda a formatação será removida:

imagem do texto após clicar no botão limpar formatação.

↑ Tabela de Conteúdo ↑

Caracteres personalizados

É possível inserir caracteres especiais em seu post ou página. Posicione o cursor onde deseja inserir um caractere e clique no botão Inserir caractere personalizado. Uma janela pop-up será exibida:

imagem dos caracteres especiais

Clique em qualquer caractere e ele será inserido onde o cursor estiver posicionado.


↑ Tabela de Conteúdo ↑

Diminuir recuo/Aumentar recuo

O botão Aumentar recuo moverá o texto em um nível, enquanto o botão Diminuir recuo removerá um nível.

exemplo-de-diminuicao-de-recuo
exemplo-de-aumento-de-recuo

Espaçamento

Pressionar a tecla Enter (Return) encerrará o parágrafo em que você estiver escrevendo e iniciará um novo. Caso deseje iniciar uma nova linha sem criar um novo parágrafo, mantenha a tecla Shift pressionada ao apertar a tecla Enter.


↑ Tabela de Conteúdo ↑

Atalhos de teclado

O editor visual tem diversos atalhos de teclado, ou hotkeys, incorporados.

Para ver uma lista com todos os atalhos disponíveis, clique em alternar barra de ferramentas para mostrar a segunda linha de ícones e clique no ícone Atalhos de teclado (ponto de interrogação) no final da segunda linha.

Uma janela pop-up aparecerá, mostrando uma lista de atalhos de teclado disponíveis no editor.

Imagem dos atalhos de teclado

Para usar atalhos padrão, pressione Command + tecla no Mac ou Ctrl + tecla no Windows:

TeclaAçãoTeclaAção
cCopiarxRecortar
vColaraSelecionar tudo
zDesfazeryRefazer
bNegritoiItálico
uSublinharkInserir/editar link

Para atalhos adicionais, pressione Control + Option + tecla no Mac ou Ctrl + Alt + tecla no Windows:

TeclaAçãoTeclaAção
1Título 12Título 2
3Título 34Título 4
5Título 56Título 6
lAlinhar à esquerdacCentralizar
rAlinhar à direitajJustificar
dTachadoqCitação destacada
uLista de marcadoresoLista numerada
aInserir/editar linksRemover link
mInserir/editar imagemtInserir a tag Leia mais
hAtalhos de tecladoxCódigo
pInserir tag de quebra de página
Ainda confuso?

Contate o suporte.