Lembra de usar um marca-texto amarelo para marcar passagens importantes em livros didáticos? O equivalente digital no WordPress é tão útil para fazer com que informações-chave se destaquem em seu site.
Mas muitos iniciantes não percebem o quão fácil é adicionar essa formatação ao seu conteúdo.
Durante todo o tempo em que administramos o WPBeginner, notamos que técnicas simples como o destaque de texto frequentemente fazem a maior diferença em como os leitores interagem com o conteúdo.
Quando usado estrategicamente, o texto destacado pode guiar os visitantes para seus pontos mais importantes e melhorar a retenção da mensagem.
Neste guia, mostraremos vários métodos fáceis para destacar texto no WordPress.
⚡ Resposta Rápida: Como Destacar Texto no WordPress
Com pressa? Confira rapidamente as maneiras mais fáceis de destacar texto no WordPress:
- Use a opção nativa de Destaque (Método 1) se você só precisa destacar algumas palavras ou frases em posts individuais.
- Use o WPCode para adicionar uma classe CSS global de destaque (Método 2) se você quiser um estilo de destaque consistente e com a marca do seu site em todo o seu site.
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. Ele direciona 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á um exemplo de como o destaque de texto pode parecer em uma postagem de blog:
Destacar texto em uma cor diferente também pode ajudar usuários com deficiências visuais 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 distrativo e reduzir sua eficácia. É por isso que recomendamos destacar apenas informações importantes, como chamadas para ação, avisos e outros detalhes que os leitores devem prestar atenção.
Dito isso, vamos dar uma olhada em como destacar texto facilmente no WordPress. Você pode usar os links rápidos abaixo para pular para o método que deseja usar:
- Método 1: Destaque de Texto no WordPress Usando o Editor de Blocos
- Method 2: Highlight Text in WordPress Using WPCode (Recommended)
- Bônus: Use o SeedProd para Destacar Páginas Importantes em Seu Site
Método 1: Destaque de Texto no WordPress Usando o Editor de Blocos
Este método é para você se você quiser destacar texto facilmente no WordPress usando o editor de blocos (Gutenberg).
Primeiro, você precisará abrir uma postagem existente ou nova no editor de conteúdo na barra lateral de administração do WordPress.
Uma vez lá, basta selecionar o texto que você deseja destacar. Em seguida, clique no ícone de seta para baixo na barra de ferramentas do bloco para ver mais opções.
Isso abrirá um menu suspenso onde você deve escolher a opção 'Destaque' da lista.
Uma ferramenta de seleção de cores será aberta em sua tela. A partir daqui, você primeiro precisará mudar para a aba 'Fundo'.
Depois disso, escolha uma cor de destaque padrão entre as opções fornecidas.
Você também pode selecionar uma cor personalizada para destacar texto clicando na opção 'Personalizado' para abrir uma ferramenta 'Conta-gotas'.
Finalmente, não se esqueça de clicar no botão ‘Publicar’ ou ‘Atualizar’ para salvar suas alterações.
Agora você pode visitar seu blog WordPress para conferir o texto destacado em ação.
Método 2: Destaque de Texto no WordPress Usando o WPCode (Recomendado)
Se você quiser usar consistentemente uma cor específica para destacar texto em todo o seu site WordPress, então este método é para você.
O principal benefício deste método é o controle global. Se você decidir mudar a cor de destaque, precisará atualizar o trecho de código apenas uma vez. Ele atualizará automaticamente a cor de destaque em todo o seu site.
Você pode facilmente destacar texto no WordPress adicionando código CSS aos arquivos do seu 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 plugin de snippets de código para WordPress do mercado.
Após testes completos, descobrimos que é a maneira mais fácil e segura de adicionar código ao seu site sem editar diretamente os arquivos do seu tema. Para mais detalhes, veja nossa análise do WPCode.
Crie um Snippet de Código com o WPCode
Primeiro, você precisa instalar e ativar o plugin WPCode. Para mais instruções, por favor, veja nosso guia para iniciantes sobre como instalar um plugin do WordPress.
Observação: O WPCode também tem um plano gratuito que você pode usar para este tutorial. No entanto, a atualização para o plano pago desbloqueará mais recursos, como uma biblioteca de nuvem de trechos de código, lógica condicional inteligente e muito mais.
Após a ativação, acesse a página Code Snippets » + Add Snippet na barra lateral de administração do WordPress.
Em seguida, clique no botão ‘+ Adicionar Trecho Personalizado’ em ‘Adicionar Seu Código Personalizado (Novo Trecho)’.
Em seguida, você precisa selecionar um tipo de código. Para este tutorial, selecione a opção ‘Trecho de CSS’.
Depois disso, adicione um nome adequado para o seu trecho de código.
Isso o levará à página ‘Criar Trecho Personalizado’, onde você pode começar digitando um nome para seu trecho de código.
O nome é apenas para sua referência e pode ser qualquer coisa que o ajude a lembrar para que serve o código.
Em seguida, copie e cole o seguinte código na caixa ‘Visualização do Código’:
mark {
background-color: #ffd4a1;
}
Depois de fazer isso, adicione o código hexadecimal da 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.
Depois disso, role para baixo até a seção ‘Inserção’.
A partir daqui, selecione o método ‘Inserção Automática’ para executar o código após a ativação.
Em seguida, vá para o topo da página e alterne o interruptor ‘Inativo’ para ‘Ativo’.
Finalmente, clique no botão ‘Salvar Trecho’ para armazenar suas alterações.
Destacar Texto no Editor de Blocos
Agora que o trecho de CSS foi ativado, precisamos aplicar a formatação. Como este é um estilo personalizado, mudaremos brevemente para a visualização HTML para um bloco específico para envolver o texto.
Primeiro, abra um post existente ou novo 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’.
Agora você verá o conteúdo do bloco em formato HTML.
Aqui, simplesmente envolva o texto que você deseja destacar dentro das tags <mark> </mark> assim:
<mark>highlighted-text</mark>
Isso destacará o texto na cor hexadecimal que você escolheu em seu trecho WPCode.
Depois disso, clique na opção ‘Editar Visualmente’ na barra de ferramentas do bloco para voltar ao editor visual.
Quando terminar, prossiga e clique no botão ‘Atualizar’ ou ‘Publicar’ para salvar suas alterações.
Agora, você pode visitar seu site para conferir o texto destacado em ação.
Bônus: Use o SeedProd para Destacar Páginas Importantes em Seu Site
Discutimos como formatar palavras específicas em seu conteúdo. No entanto, às vezes você pode querer destacar seções ou páginas inteiras em seu site, como um formulário de contato ou um cupom de presente.
Por exemplo, se você tem uma loja online e acabou de lançar uma promoção sazonal, então você pode querer destacar essa oferta em seu site.
Você pode destacar essas seções criando páginas de destino para elas. Estas são páginas independentes em seu site que são projetadas para gerar leads.
Para criar páginas de destino visualmente atraentes para o seu site, recomendamos o uso de SeedProd. É o melhor construtor de páginas de destino do WordPress do mercado, que vem com um construtor de arrastar e soltar, mais de 350 modelos pré-fabricados e mais de 90 blocos.
Várias de nossas marcas parceiras criaram seus sites inteiros com ele e tiveram ótimas experiências. Para mais detalhes, veja nossa análise do SeedProd.
O plugin facilita a criação de páginas de destino atraentes que destacam seções importantes do seu site, como um formulário de contato, anúncio de promoção, sorteios, depoimentos, formulários de opt-in, páginas de login e muito mais.
Fora isso, você também pode usar o SeedProd para criar temas personalizados, páginas 'em breve', páginas de manutenção e muito mais.
Para mais detalhes, você pode ver nosso tutorial sobre como criar uma landing page no WordPress.
Esperamos que este guia tenha ajudado você a aprender como destacar texto no WordPress. Você também pode querer ver nosso guia passo a passo sobre como personalizar cores no WordPress para tornar seu site mais esteticamente agradável e nossa comparação dos melhores construtores de sites de IA para WordPress.
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Jiří Vaněk
Destacar texto é ótimo para chamar a atenção. Até agora, eu só usava sublinhado, mas em vários comentários em meus artigos, recebi feedback de que alguns usuários o ignoravam. É por isso que faz mais sentido para mim enfatizar a importância do texto dessa forma. Usei um snippet no plugin WP Code e as tags. Funciona muito bem e, graças ao snippet, também pude usar uma cor estilizada para combinar com o design do meu site.
Mrteesurez
Enquanto eu lia sua postagem sobre redimensionamento de texto, vejo que é benéfico em meu site educacional, pois me preocupo com usuários que podem ter deficiências visuais ou dificuldades de leitura. Destacar texto é outra ótima maneira que também posso usar para mostrar alguns textos importantes com mais clareza aos usuários.
Eu aprecio este guia, obrigado WPbeginner!
Dennis Muthomi
Ao escolher uma cor personalizada para o destaque, como posso adicionar uma cor personalizada de minha escolha para aparecer nas 5 opções de cores padrão mostradas na parte inferior do seletor de cores.
Seria útil se eu pudesse salvar uma cor hexadecimal personalizada para reutilizar facilmente, em vez de ter que digitá-la manualmente toda vez.
WPBeginner Support
No momento, não há um método simples que recomendaríamos, mas se encontrarmos um método, certamente o compartilharemos!
Admin
Dennis Muthomi
olá, obrigado por dedicar tempo para responder, definitivamente ficarei de olho caso você descubra um bom método no futuro
Jiří Vaněk
Nesse caso, eu recomendaria usar um construtor de páginas em vez disso. Por exemplo, o Elementor tem um recurso semelhante, e eu o uso em sites onde o Elementor está instalado. Você pode configurar uma paleta de cores personalizada, que o Elementor memoriza, e depois usá-la para destacar.
Ralph
Que maneira simples de fazer algo se destacar! Ótimo!
Isso deve estar relacionado à personalização do meu tema, mas quando eu realço o texto em si ou o fundo, ele muda a fonte. O que é estranho, pois na personalização eu defini todas as fontes em todos os cenários para apenas 2 fontes. A primeira para títulos e a segunda para todo o resto. Terei que passar outra noite nisso, eu acho.
WPBeginner Support
Isso é muito estranho, recomendamos que você entre em contato com o suporte do seu tema para ver se há algum tipo de conflito de estilo.
Admin
Prakash Joshi
Olá,… obrigado pela postagem.
Tentei usar a marcação HTML e as ferramentas do editor avançado. Mas há um problema. O texto realçado está ficando em negrito automaticamente. Por que isso está acontecendo? Você tem alguma solução??
WPBeginner Support
Se isso acontece automaticamente, você deve verificar com o suporte do seu tema específico para garantir que não seja um conflito com a estilização padrão do tema.
Admin
Luqman khokhar
Boa postagem sobre como destacar texto específico, na minha experiência, a 2ª e 3ª opção são boas porque muitos plugins não são uma boa abordagem. Eles podem deixar seu site lento.
WPBeginner Support
Obrigado, mas o número de plugins não é o principal fator para a velocidade do seu site, recomendamos dar uma olhada em nossas recomendações abaixo:
https://www.wpbeginner.com/opinion/how-many-wordpress-plugins-should-you-install-on-your-site
Admin