Como destacar texto no WordPress (Gutenberg e Classic Editor) em 2020

cupom com desconto - o melhor site de cupom de desconto cupomcomdesconto.com.br


Hoje estamos falando sobre como destacar texto no WordPress (no editor de Gutenberg e no clássico), para obter um resultado destacado como este:

Aqui está um exemplo de texto destacado.

Como um novo blogueiro, quando você acaba de lançar seu blog, todos os pequenos componentes técnicos do aprendizado do WordPress podem ser um desafio indesejável – por exemplo, descobrir coisas como destacar texto no WordPress (ou alterar cores e tamanhos da fonte) para os vários elementos de texto diferentes no seu blog WordPress.

Bem, a boa notícia é que, embora destacar texto no WordPress fosse menos intuitivo para aprender por conta própria, agora ficou muito mais fácil fazer isso em 2020 (tanto em Gutenberg quanto no editor Classic).

E para garantir que cobrimos todas as nossas bases, mostrarei a você como destacar texto no WordPress, usando o editor Gutenberg e o clássico – neste tutorial rápido.

Agora, vamos mostrar o texto destacado no WordPress, sem plug-ins de redução de desempenho que afetam negativamente o SEO do blog e a velocidade de carregamento da página.

Como destacar texto no WordPress (Gutenberg e Classic Editor)

  1. Como destacar texto no WordPress Gutenberg Editor
  2. Como destacar texto no editor clássico do WordPress
  3. Quando destacar texto no seu blog WordPress (e por que)
Leia Também  O que é um Blog? Como um site é diferente (Noções básicas de blogs) em 2020

Tudo bem, agora vamos nos aprofundar e falar sobre o destaque do texto no WordPress!


1. Como destacar texto no editor WordPress Gutenberg

O (melhor) processo para destacar texto nos editores Gutenberg e Classic é na verdade exatamente o mesmo do ponto de vista técnico – apenas parece um pouco diferente, devido às mudanças visuais no Gutenberg e no editor Classic.

Nos dois casos, você adicionará um atributo de estilo HTML de cor de plano de fundo ao texto que deseja destacar.

Essa é, de longe, a maneira mais limpa, fácil e amigável de destacar o texto no WordPress (sem a necessidade de instalar plug-ins ou usar outras ferramentas que injetam código desnecessário no seu blog). Então, vamos percorrer esse processo.

Aqui está um GIF rápido (demonstração em vídeo em loop) mostrando como destacar texto no editor do Gutenberg WordPress:

Como destacar texto no Tutorial e capturas de tela do Gutenberg WordPress Editor (Gravação GIF)

Sei que esse GIF se move um pouco rapidamente (e não é fácil de ler em dispositivos móveis). Então, aqui está um tutorial passo a passo sobre como destacar texto no WordPress usando o editor Gutenberg (em duas etapas fáceis):

1. Selecione a opção “Editar como HTML” no parágrafo em que seu texto está contido

Editar como HTML (Captura de tela) no Gutenberg Editor

Depois de clicar no botão “Editar como HTML“, Você verá seu parágrafo de texto convertido em algo parecido com este (com todos os atributos HTML do seu texto agora visíveis):

Captura de tela do modo HTML em Gutenberg

A partir daqui, é aqui que você adiciona o atributo de estilo de cor de plano de fundo (na versão HTML do seu parágrafo), que destacará seu texto.

2. Adicione o atributo de estilo de cor de plano de fundo (no modo HTML) para destacar seu texto

Atributo de estilo de cor de plano de fundo (captura de tela) no modo HTML para destacar texto no WordPress

Esta é a etapa que realmente destaca seu texto, adicionando este atributo de estilo de cor de plano de fundo ao início do seu texto:

Leia Também  Quais apps um Marketing Blogger usa?

example of text you want to highlight

Saiba que é claro que você pode trocar o Código de cores aqui para qualquer código hexadecimal de 6 dígitos que você deseja usar como cor de destaque – e está pronto!

Não se esqueça de embrulhar a parte do texto que você deseja destacar com um fechamento tag (como mostrado na imagem acima) – caso contrário, o restante do texto em seu parágrafo aqui será destacado automaticamente.

Depois de destacar o texto, volte para “Editar visualmente” no editor Gutenberg da seguinte forma:

Editar visualmente (captura de tela) em Gutenberg

Agora, seu texto será destacado e terá a seguinte aparência:

Captura de tela de texto destacado (tutorial finalizado) no Gutenberg WordPress Editor

cupom com desconto - o melhor site de cupom de desconto cupomcomdesconto.com.br

Tudo bem, você agora aprendeu como destacar texto no editor do Gutenberg WordPress. Vamos continuar fazendo o mesmo com o editor clássico.

2. Como destacar texto no editor clássico do WordPress

Se você está escrevendo uma postagem de blog no editor Clássico do WordPress e deseja enfatizar uma seção específica do texto destacando-a, é tão fácil de fazer quanto em Gutenberg.

A seguir, um GIF rápido (demonstração em vídeo em loop) mostrando como destacar texto no WordPress por meio do editor Clássico:

Como destacar texto no WordPress (Editor clássico) GIF Tutorial e explicação passo a passo de compartilhamento de tela

Como esse GIF se move muito rapidamente e não é tão fácil de ver no celular quanto no computador, aqui está um detalhamento passo a passo do que está acontecendo quando você deseja destacar texto no WordPress usando o editor Clássico (em duas etapas fáceis ):

1. Use o cursor para selecionar o texto que deseja destacar

Exemplo de texto destacado no WordPress Classic Editor (captura de tela)

Depois de selecionar o texto que você deseja destacar, é hora de mudar o modo de edição para “Modo de texto“No canto superior direito do seu painel de edição:

Como alternar para o modo de texto no Editor clássico (captura de tela)

Agora, você visualiza a versão HTML da sua postagem no blog – e é aí que você adiciona o atributo que destaca seu texto.

2. Adicione um atributo de estilo HTML de cor de fundo (no modo de texto) para destacar seu texto

Captura de tela do atributo de texto destacado (cor de fundo) no WordPress Classic

É aqui que você realmente destacará seu texto, adicionando o seguinte atributo de estilo de cor de plano de fundo ao seu texto:

Leia Também  Como criar facilmente um site WordPress multilíngue

example of soon-to-be highlighted text

Como no tutorial de Gutenberg acima, você também pode trocar o código de cor aqui para definir qualquer cor de destaque personalizada para o seu texto.

Lembre-se de fechar a parte do texto que você deseja destacar com um fechamento , caso contrário, você destacará o restante do conteúdo na postagem (de onde você iniciou a alteração da cor de fundo).

Agora, depois que você voltar ao “Modo visual” no seu Editor clássico, veja como será o texto destacado:

exemplo de texto destacado

E voilá! Você destacou seu texto no Editor clássico! 👏

Pensamentos finais: Quando Você deve destacar o texto no WordPress (e por que)?

Agora que passei alguns minutos mostrando a você como para destacar texto no WordPress … ainda não abordamos porque você deseja destacar o texto em primeiro lugar e quando a aplicação do texto destacado pode realmente ter um impacto positivo no conteúdo do seu blog.

Aqui estão algumas das razões pelas quais destaco o texto no conteúdo do meu blog:

  • Chamar a atenção do leitor para uma lição ou lição muito importante
  • Para destacar uma palavra ou frase específica na página
  • Para enfatizar que o texto é clicável (como uma frase de chamariz)

Tudo bem, isso é tudo por hoje!

Você acabou de aprender como destacar texto no WordPress (no editor Gutenberg e no Classic) – e como usar o texto destacado para sua vantagem.

Gostou do que está vendo? Inscreva-se para receber mais tutoriais técnicos e conselhos autênticos de blogs meus.


Deseja que mais tutoriais de blogs sejam entregues diretamente na sua caixa de entrada?

Inscreva-se hoje e participe de 122.843 outros blogueiros inteligentes, recebendo meus melhores conselhos sobre blogs.


Textos interessantes:

https://clipstudio.com.br/9-dicas-para-evitar-um-facebook-conta-de-proibicao/

https://responsibleradio.com/55-formas-de-economizar-dinheiro-na-india-simples-mas-eficazes/

https://teleingressos.com.br/candidatar-se-a-uma-hipoteca-aqui-esta-exatamente-o-que-trazer-consigo/

https://draincleaningdenverco.com/ganhar-mais-dinheiro-na-internet-com-estas-oito-dicas/

https://holidayservice-tn.com/o-lado-brilhante-e-obscuro-do-anonimato-um-apelo-para-uma-responsabilidade-mais-pessoal-lifestyle-x/

https://testmygeekstuff.com/6-razoes-nem-sempre-para-prestar-atencao-as-estatisticas-e-numeros-2/

https://proverasfestas.com.br/o-que-e-pr-e-qual-e-a-sua-importancia-para-o-marketing-digital/

https://multieletropecas.com.br/preguntafreelance-quais-cursos-sobre-desenvolvimento-web-design-software-e-software-para-freelancers-voce-recomenda/

https://coniferinc.com/vivendo-de-doces/

cupom com desconto - o melhor site de cupom de desconto cupomcomdesconto.com.br