Como deixar seu post do blog mais bonito usando só HTML e CSS no editor de texto

O editor de texto do painel do blog parece simples — título, um campo de conteúdo, botão de publicar. Mas por baixo dele tem o mesmo editor clássico do WordPress, que aceita bem mais HTML e CSS do que a maioria usa. Isso quer dizer que dá pra deixar um post visualmente muito mais rico sem precisar mexer em nenhum arquivo do site: só escrevendo HTML com estilo embutido direto no texto.

Esse post é denso de propósito — cada seção tem o código que você pode copiar e colar, seguido do resultado real dele. É o mesmo código que está rodando nesta página agora.

Antes de tudo: onde colar esse código

No campo de conteúdo do post, tem duas abas acima da caixa de texto: Visual e Texto. É na aba Texto que você cola o HTML abaixo — ela mostra o código puro, sem "traduzir" nada. Depois de colar, dá uma olhada na aba Visual só pra conferir se ficou como esperado; se for editar de novo, prefira voltar pra aba Texto em vez de mexer direto na Visual, porque o editor visual às vezes reorganiza ou limpa atributos que ele não reconhece.

Todo exemplo abaixo usa style="..." direto em cada elemento (nada de arquivo CSS separado), porque é isso que sobrevive ao editor — uma tag <style> por si só não passa pelo filtro de segurança do WordPress, mas atributos de estilo em cada elemento passam.

1. Caixa de destaque, pra chamar atenção pra um ponto importante

Uma div com borda colorida de um lado e fundo suave — ótima pra separar uma dica ou um aviso do resto do texto corrido.

<div style="background:#fff4ec;border-left:4px solid #ff6b1b;border-radius:12px;padding:20px 24px;margin:0 0 24px;">
  <strong>Dica:</strong> troque esse texto pelo aviso ou dica que você quer destacar.
</div>

2. Bloco de código bonito (o mesmo que está formatando os exemplos deste post)

Se você ensina alguma ferramenta ou processo técnico, mostrar o código de um jeito legível — fundo escuro, cantos arredondados, fonte monoespaçada — já deixa o conteúdo mais profissional do que um texto corrido cheio de aspas.

<pre style="background:#16120f;color:#f7f3eb;padding:20px 22px;border-radius:12px;font-family:monospace;font-size:13.5px;line-height:1.7;white-space:pre-wrap;">
  <code>seu código ou comando aqui</code>
</pre>

seu código ou comando aqui

3. Comparação lado a lado (errado x certo)

Duas caixas lado a lado usando display:flex — uma vermelha suave pro "evite", uma verde suave pro "prefira". Funciona sem precisar de media query porque o flex-wrap:wrap já empilha as caixas sozinho quando a tela é estreita (celular).

<div style="display:flex;flex-wrap:wrap;gap:16px;margin:0 0 24px;">
  <div style="flex:1;min-width:220px;background:#fdeceb;border:1px solid #f3b7ae;border-radius:12px;padding:20px;">
    <strong style="color:#c62f22;">Evite</strong>
    <p style="margin:8px 0 0;">Texto explicando o que não fazer.</p>
  </div>
  <div style="flex:1;min-width:220px;background:#eaf7ee;border:1px solid #a9dab9;border-radius:12px;padding:20px;">
    <strong style="color:#1f7a3d;">Prefira</strong>
    <p style="margin:8px 0 0;">Texto explicando o que fazer no lugar.</p>
  </div>
</div>

Esse formato combina direto com os outros posts da categoria Design — dá pra usar exatamente essa estrutura pra ilustrar um erro comum com um "antes e depois".

4. Tabela estilizada

Tabela é uma das tags que mais sobrevive intacta no editor, incluindo bordas, cor de fundo do cabeçalho e espaçamento — dá pra comparar opções sem precisar de plugin nenhum.

<table style="width:100%;border-collapse:collapse;margin:0 0 24px;">
  <tr>
    <th style="background:#16120f;color:#fff;text-align:left;padding:12px 14px;">Ferramenta</th>
    <th style="background:#16120f;color:#fff;text-align:left;padding:12px 14px;">Melhor pra</th>
  </tr>
  <tr>
    <td style="padding:12px 14px;border-bottom:1px solid #e4dfd4;">Canva</td>
    <td style="padding:12px 14px;border-bottom:1px solid #e4dfd4;">Templates prontos, edição rápida</td>
  </tr>
  <tr>
    <td style="padding:12px 14px;">Figma</td>
    <td style="padding:12px 14px;">Layouts do zero, com mais controle</td>
  </tr>
</table>

5. Etiqueta (badge) dentro do texto

Um <span> em formato de pílula, pra marcar "grátis", "novo", "iniciante" no meio de uma frase, sem quebrar a linha.

<span style="display:inline-block;background:#ff6b1b;color:#16120f;font-weight:700;font-size:12px;padding:4px 12px;border-radius:999px;text-transform:uppercase;letter-spacing:0.03em;">Grátis</span>

O Canva Grátis já resolve a maioria dos casos deste post.

6. Botão de call-to-action

Um link (<a>) estilizado como botão — útil pra puxar o leitor pro seu contato, seu portfólio ou uma outra página, no meio do próprio texto, sem depender de nenhum bloco especial do site.

<a href="#" style="display:inline-block;background:#ff6b1b;color:#16120f;font-weight:800;font-size:15px;padding:14px 28px;border-radius:999px;text-decoration:none;">
  Fale com a gente
</a>

Fale com a gente

Os limites de fazer tudo só no editor de texto

• Sem tag <style>. Todo estilo precisa estar dentro do atributo style="" de cada elemento — não dá pra centralizar regras num só lugar, então elementos repetidos (como os blocos de código deste post) exigem colar o mesmo trecho de estilo em cada um.
• Sem :hover nem media query. Não dá pra criar efeito ao passar o mouse nem regra "só no celular" — por isso os exemplos acima usam flex-wrap:wrap e unidades relativas (min-width, %) pra já nascerem responsivos sem precisar de uma regra separada pra tela pequena.
• Nem toda propriedade de CSS passa. O WordPress filtra o que entra num style="" por segurança — as propriedades usadas nesse post (fundo, borda, espaçamento, flexbox, tipografia) passam tranquilo, mas vale sempre conferir na aba Texto depois de salvar se algo sumiu.

Nenhuma dessas caixas, tabelas ou botões precisou de plugin, de editor de página nem de acesso ao código do site — só HTML com estilo embutido, colado na aba Texto do editor. Guarda esse post como referência: da próxima vez que for escrever, é só voltar aqui, copiar o bloco que precisa e trocar o texto.