Como destacar texto no WordPress (guia do iniciante)

Publicados: 2023-06-01


Você está procurando uma maneira de destacar o texto em uma postagem ou página do WordPress?

Destacar o texto pode ajudar a chamar a atenção do usuário para uma parte específica do seu conteúdo. Isso pode ser ótimo para mostrar uma chamada à ação, uma oferta especial ou simplesmente adicionar ênfase a frases específicas.

Neste artigo, mostraremos como destacar facilmente o texto no WordPress.

Adicionando cor de destaque de texto no WordPress

Por que e quando destacar texto no WordPress

O destaque de texto é uma maneira fácil de enfatizar informações importantes em seu conteúdo. Isso ajuda você a direcionar a atenção do usuário para detalhes que você não quer que ele perca.

Por exemplo, destacar uma oferta de desconto em seu site WordPress em uma cor diferente chamará a atenção do leitor para ela, ajudando você a gerar mais vendas.

Aqui está uma amostra de como o realce de texto pode parecer em uma postagem de blog:

Pré-visualização para realçar o texto no editor de blocos

Destacar o texto em uma cor diferente também pode ajudar os usuários com deficiência visual ou dificuldades de leitura a navegar e entender o conteúdo com mais facilidade. Pode até melhorar a aparência do seu conteúdo e torná-lo mais atraente visualmente.

No entanto, destacar muito texto em sua página pode ser uma distração e reduzir sua eficácia. É por isso que recomendamos destacar apenas textos muito importantes, como chamadas à ação, avisos e outros detalhes aos quais os leitores devem prestar atenção.

Dito isso, vamos dar uma olhada em como destacar facilmente o texto no WordPress. Você pode usar os links rápidos abaixo para pular para o método que deseja usar:

  • Método 1: Destaque o texto no WordPress usando o editor de blocos
  • Método 2: Destacar texto no WordPress usando WPCode (recomendado)

Método 1: Destaque o texto no WordPress usando o editor de blocos

Este método é para você, se deseja destacar facilmente o texto no WordPress usando o editor de blocos.

Primeiro, você precisará abrir uma postagem nova ou existente no editor de blocos na barra lateral de administração do WordPress.

Quando estiver lá, basta selecionar o texto que deseja destacar e clicar no ícone 'Mais' na barra de ferramentas do bloco na parte superior.

Isso abrirá um menu suspenso onde você deve selecionar a opção 'Destacar' na lista.

Expanda o menu suspenso Mais na barra de ferramentas do bloco e selecione a opção Realçar

Uma ferramenta de seleção de cores será aberta na tela. A partir daqui, você primeiro precisará mudar para a guia 'Plano de fundo'.

Depois disso, você pode escolher uma cor de destaque padrão entre as opções fornecidas.

Você também pode selecionar uma cor personalizada para destacar o texto clicando na opção 'Personalizar' para iniciar uma ferramenta 'Conta-gotas'.

Escolha uma cor de destaque na ferramenta seletora de cores

Por fim, não se esqueça de clicar no botão 'Publicar' ou 'Atualizar' para salvar suas alterações.

Agora você pode visitar seu site para conferir o texto realçado em ação.

Pré-visualização para realçar o texto no editor de blocos

Método 2: Destacar texto no WordPress usando WPCode (recomendado)

Se você deseja usar consistentemente uma cor específica para destacar o texto em todo o site WordPress, esse método é para você.

Você pode destacar facilmente o texto no WordPress adicionando código CSS aos seus arquivos de tema. No entanto, o menor erro ao inserir o código pode quebrar seu site, tornando-o inacessível.

É por isso que recomendamos o uso do WPCode, que é o melhor plug-in de trecho de código do WordPress no mercado. É a maneira mais fácil e segura de adicionar código ao seu site sem editar diretamente os arquivos do tema.

Crie um trecho de código com WPCode

Primeiro, você precisa instalar e ativar o plug-in WPCode gratuito. Para obter mais instruções, consulte nosso guia para iniciantes sobre como instalar um plug-in do WordPress.

Após a ativação, vá para a página Code Snippets »+ Add Snippet na barra lateral de administração do WordPress.

Em seguida, basta clicar no botão 'Usar snippet' na opção 'Adicionar seu código personalizado (novo snippet)'.

Adicionar novo trecho

Isso o levará à página 'Criar snippet personalizado', onde você pode começar digitando um nome para seu snippet de código.

Depois disso, você precisa selecionar a opção 'CSS Snippet' no menu suspenso 'Code Type'.

Observação: a opção 'CSS Snippet' está disponível apenas na versão premium do WPCode. Se você estiver usando a versão gratuita, terá que selecionar a opção 'Universal Snippet'.

Snippet CSS como tipo de código para o texto de destaque no WordPress

Em seguida, clique dentro da 'caixa de visualização de código'.

Então, você deve copiar e colar o seguinte código:

mark 
background-color: #ffd4a1;

Depois de fazer isso, adicione o código hexadecimal para sua cor de destaque preferida ao lado da linha background-color no código.

Em nosso exemplo, estamos usando #ffd4a1, que é uma cor marrom clara.

Cole o trecho de código para destacar o texto no WordPress

Depois disso, role para baixo até a seção 'Inserção'.

A partir daqui, selecione o método 'Auto Insert' para executar automaticamente o código na ativação.

Escolha um método de inserção

Em seguida, vá para o topo da página e alterne a opção 'Inativo' para 'Ativo'.

Por fim, clique no botão 'Salvar trecho' para armazenar suas alterações.

Salvar snippet de código de destaque de texto

Realçar texto no Editor de blocos

Agora que o snippet CSS foi ativado, teremos que adicionar algum código HTML no editor de blocos para destacar o texto no WordPress.

Primeiro, abra uma postagem nova ou existente no editor de blocos do WordPress.

A partir daqui, clique no ícone 'Opções' na barra de ferramentas do bloco na parte superior. Isso abrirá um novo menu suspenso onde você deve selecionar a opção 'Editar como HTML'.

Escolha a opção editar como HTML no menu suspenso Opções na barra de ferramentas do bloco

Agora você verá o conteúdo do bloco no formato HTML.

Aqui, simplesmente coloque o texto que deseja destacar dentro das tags <mark> </mark> assim:

<mark>highlighted-text</mark>

Isso destacará o texto na cor hexadecimal que você escolher em seu snippet WPCode.

Depois disso, clique na opção 'Editar visualmente' na barra de ferramentas do bloco. para voltar ao editor visual.

Escreva o código HTML em ambos os lados do texto que deseja destacar

Quando terminar, vá em frente e clique no botão 'Atualizar' ou 'Publicar' para salvar suas alterações.

Agora, você pode visitar seu site para conferir o texto realçado em ação.

Demonstração de destaque de texto no WordPress

Esperamos que este guia tenha ajudado você a aprender como destacar texto no WordPress. Você também pode querer ver nosso guia sobre como personalizar cores no WordPress para tornar seu site mais esteticamente agradável e nossa comparação dos melhores serviços de marketing por e-mail para aumentar seu tráfego.

Se você gostou deste artigo, assine nosso canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.

O post How to Highlight Text in WordPress (Beginner's Guide) apareceu pela primeira vez no WPBeginner.