Já notou como alguns sites têm conteúdo perfeitamente espaçado e fácil de escanear, enquanto outros parecem apertados e difíceis de ler?
O segredo muitas vezes se resume a algo simples: quebras de linha e espaçamento adequados.
Se você já adicionou quebras de linha no seu editor do WordPress apenas para descobrir que elas não aparecem na sua página publicada, você definitivamente não está sozinho. O WordPress lida com o espaçamento de forma um pouco diferente de processadores de texto como Google Docs ou Microsoft Word.
No entanto, assim que você entender como funciona, terá controle total sobre a aparência do seu conteúdo.
Mostraremos vários métodos confiáveis para adicionar quebras de linha no WordPress, desde atalhos rápidos até opções de formatação mais avançadas.
Por que Adicionar uma Quebra de Linha no WordPress (Espaçamento de Nova Linha)?
À primeira vista, uma quebra de linha pode parecer uma pequena escolha de formatação, mas pode ter um grande impacto no desempenho do seu conteúdo.
Desde melhorar a legibilidade até aumentar a experiência do usuário, adicionar o espaçamento adequado ajuda suas páginas a parecerem limpas e profissionais. Veja por que isso importa:
- Melhor legibilidade: Divide blocos de texto para facilitar o escaneamento.
- Amigável para dispositivos móveis: Mantém o conteúdo claro em telas menores.
- Corrige texto colado: Limpa a formatação de outras fontes.
- Chama a atenção: Ajuda dicas e CTAs a se destacarem.
Em resumo, quebras de linha tornam seu conteúdo mais fácil de ler e mais envolvente — tanto para visitantes quanto para mecanismos de busca.
Observação: Antes de começarmos, é importante saber que o espaçamento entre linhas é controlado pelo tema do WordPress que você usa.
Mostraremos como adicionar espaço entre blocos no editor de blocos e, em seguida, como ajustar o espaçamento entre linhas no seu tema, caso você não esteja satisfeito com os resultados padrão.
Dito isso, vamos ver como adicionar facilmente uma quebra de linha no WordPress.
- Como Adicionar Espaço Duplo Entre Linhas nos Blocos
- Como Adicionar Espaço Simples Entre Linhas
- A Maneira Mais Fácil: Usando o Bloco Espaçador
- Modifying the Line Height and Spacing
- Tutorial em Vídeo
Como Adicionar Espaço Duplo Entre Linhas nos Blocos
Quando você pressiona a tecla Enter para Windows ou a tecla Return para Mac no seu teclado para adicionar uma quebra de linha, o WordPress o considera como um novo parágrafo.
Isso significa que ele adicionará automaticamente um espaço de linha dupla. A quantidade de espaçamento é controlada pelo seu tema, e este estilo é um recurso padrão em todos os bons temas do WordPress.
Simplesmente vá para o editor de conteúdo, pressione a tecla Enter ou Return após a linha e, em seguida, digite algo mais na próxima linha.
Ao fazer isso, com base na estilização do seu tema, você deverá ver uma clara distinção entre os parágrafos.
Como Adicionar Espaço Simples Entre Linhas
Agora, se você estiver escrevendo algo como um endereço, provavelmente desejará que ele tenha espaçamento simples em vez de espaçamento duplo no seu site WordPress.
Neste caso, você precisa pressionar a tecla SHIFT + ENTER no Windows ou a tecla SHIFT + RETURN no Mac.
Isso diz ao WordPress que você deseja iniciar uma nova linha dentro do mesmo parágrafo. Essa ação cria uma quebra de linha única em vez do espaço duplo usado para um novo parágrafo.
A Maneira Mais Fácil: Usando o Bloco Espaçador
Para uma maneira simples e sem código de adicionar espaço extra entre quaisquer dois blocos, o método mais fácil é usar o bloco Espaçador integrado.
Simplesmente clique no botão 'Adicionar Bloco' no editor para adicionar um novo bloco e pesquise por 'Espaçador'. Assim que você o adicionar, um novo espaço vazio aparecerá em sua página.
Você pode então clicar no espaçador e arrastar a alça azul para cima ou para baixo para ajustar sua altura.
Isso lhe dá controle preciso sobre seu espaçamento vertical diretamente no editor.
Modificando a Altura e o Espaçamento das Linhas
Às vezes, mesmo quando você adiciona o espaçamento de linha correto no editor, ele não é exibido da maneira que você deseja no seu tema.
Existem duas maneiras de corrigir isso:
- Usando um plugin (o jeito fácil)
- Manualmente com código CSS (mais avançado)
Vamos dar uma olhada primeiro no método fácil.
Adicionando Espaçamento de Linha Usando um Plugin
Se você quiser fazer alterações de estilo no seu tema sem ter que aprender código, usar um plugin como CSS Hero é a melhor maneira de fazer isso.
CSS Hero facilita a alteração do design do seu site WordPress sem saber nenhum código.
Você pode ver mais detalhes em nossa revisão completa do CSS Hero.
Se você quiser fazer alterações maiores no seu tema, como mover uma barra lateral ou adicionar um rodapé, então um plugin construtor de páginas drag-and-drop seria uma opção melhor. Um plugin construtor de páginas também permitiria fazer pequenos ajustes como alterar cores de fontes ou adicionar quebras de linha no WordPress.
Não quer usar um plugin, ou só precisa fazer essa única alteração? Então, a opção de código CSS manual pode ser a melhor para você.
Alterando o Espaçamento de Parágrafo Manualmente com Código CSS
Para adicionar quebras de linha manualmente sem um plugin, você precisa adicionar algum CSS ao seu tema.
CSS é basicamente como o recurso de formatação no Microsoft Word. Em vez de clicar em botões, você escreverá um código CSS simples. Não é tão assustador quanto alguns iniciantes podem pensar. CSS é muito fácil de entender se você estiver apenas seguindo instruções.
Para adicionar CSS personalizado ao seu tema, você precisa visitar a página Aparência » Personalizar. Isso abrirá o personalizador de temas do WordPress, onde você precisa clicar na aba 'CSS Adicional' na coluna da esquerda.
Se você não vir essas opções de menu, talvez esteja usando um tema de blocos. Consulte nosso artigo sobre como corrigir o Personalizador de Temas ausente no painel do WordPress.
Na caixa de CSS personalizado, você precisa adicionar o seguinte código CSS:
Este código visa todos os elementos de parágrafo (p) especificamente dentro da área de conteúdo principal de suas postagens, que o WordPress geralmente identifica com a classe .post. Isso garante que afete apenas seus artigos.
.post p{line-height: 1.5em;}A regra CSS mostrada acima alterará o espaçamento entre linhas do conteúdo do parágrafo para 1.5em. Em é uma unidade de largura para tipografia.
Agora, isso apenas altera o espaçamento de espaçamento simples.
Se você quiser alterar o espaçamento de parágrafos no WordPress (ou seja, espaçamento duplo), você precisará adicionar preenchimento (padding).
.post p {
line-height: 1.5em;
padding-bottom: 15px;
}
Sinta-se à vontade para ajustar os números neste código CSS. Alterar o valor padding-bottom mudará o espaço entre seus parágrafos.
Você também pode adicionar CSS personalizado ao seu site usando o plugin WPCode. O plugin torna muito fácil inserir e gerenciar código em seu site.
Para mais detalhes, consulte nosso guia sobre como adicionar CSS personalizado ao seu site WordPress.
Se você não gosta de ler as instruções, assista ao nosso tutorial em vídeo.
Tutorial em Vídeo
Para um guia visual, você pode assistir ao nosso tutorial em vídeo abaixo. Ele cobre todos os métodos que discutimos para adicionar espaçamento de linha única e dupla em seu conteúdo.
Esperamos que este artigo tenha ajudado você a adicionar uma quebra de linha no WordPress. Você também pode consultar nosso guia sobre como usar padrões de blocos do WordPress e nossa lista dos melhores temas WordPress compatíveis com Gutenberg.
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.
Ralph
Este era um grande problema no criador antigo. Eu nunca sabia como ficaria e tinha que clicar em pré-visualizar a cada poucas linhas, mas acho que com o Gutenberg é muito mais fácil e aprendi a usar apenas shift+enter. Faço isso automaticamente e quase sem consciência. Não sei por que, mas alguns sites não permitem shift+enter, apenas enter ou não, e então eu fico tipo "POR QUE não está funcionando"!
Deepak Sahani
Vídeo e postagem excelentes resolveram minha dúvida.
WPBeginner Support
Glad our guide could be helpful!
Admin
Jennyfer
Muito obrigado por esta informação! Muito útil. Era exatamente o que eu procurava.
WPBeginner Support
Glad our guide was helpful
Admin
Colleen Cochran
Finalmente descobri o truque de shift-enter para linhas de poesia com espaço simples, mas quando a postagem é publicada e enviada por e-mail aos seguidores, ela perde a formatação e todas as linhas se juntam. Como posso corrigir isso?
WPBeginner Support
Você precisaria verificar com a ferramenta que está sendo usada para enviar a notificação sobre o estilo para corrigir esse problema.
Admin
Luiz
Obrigado! Muito útil!
WPBeginner Support
You’re welcome
Admin
Robin
Muito útil! Obrigado!!
WPBeginner Support
You’re welcome
Admin
Dhirendra
Alguma opção para reduzir o espaço entre imagens...
WPBeginner Support
Dependeria da imagem específica, mas para começar a encontrar o que está causando o espaço, você precisaria dar uma olhada no nosso guia abaixo:
https://014.leahstevensyj.workers.dev/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
jan van den hoed
Obrigado pela explicação. Tenho uma pergunta. Como posso fazer a mesma coisa em um smartphone? Estou editando meu blog em trânsito e não tenho um laptop disponível. Tentei usar shift enter, mas não funcionou.
WPBeginner Support
Devido às limitações do celular, você provavelmente precisaria usar o método CSS.
Admin
Val
Muito obrigado, foi de grande ajuda. Fiquei agoniado com o espaçamento!
WPBeginner Support
Glad our guide was helpful
Admin
Stephen
Obrigado, ajudou muito.
WPBeginner Support
Glad our article was helpful
Admin
Douglas Daniel
Para mudar o CSS, ele me diz que tenho que comprar um plano premium. Estou sem sorte?
WPBeginner Support
Parece que você está no WordPress.com e este tutorial é para sites WordPress.org:
https://014.leahstevensyj.workers.dev/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
você estaria tristemente limitado às outras opções, como Shift+Enter para espaçar o conteúdo em uma única linha.
Admin
SOO
Obrigado! Útil!!
WPBeginner Support
You’re welcome, glad our article could help
Admin
Rebecca
Não funcionou para mim. Alguma razão pela qual não funcionaria?
WPBeginner Support
Se você estiver usando um plugin de construtor de páginas, ele pode ter um método diferente para o espaçamento de linha simples/duplo. Caso contrário, pode ser um conflito de plugin/tema onde você precisaria desativar seus plugins e/ou trocar seu tema para verificar.
Admin
Tim G
Gostaria de reduzir o espaçamento entre as linhas de parágrafo normais — na minha opinião, há muito espaço em branco por padrão. Eu também gostaria de adicionar meia linha no final de um parágrafo, em vez de uma linha inteira: O Wordpress por padrão parece fazer apenas o equivalente a um duplo retorno de carro, o que é bastante do século XX e não emula o que o Word pode fazer. Alguma ideia?
WPBeginner Support
You would want to reach out to the support for your specific theme and they should be able to tell you what CSS needs to be added to reduce your line spacing
Admin
sofar ahmad
TQ so much
very helpful
WPBeginner Support
Glad our guide could be helpful
Admin
Sumeet
obrigado era o que eu estava procurando, ajudou...
WPBeginner Support
Glad our article helped
Admin
Jen
Deus te abençoe! Sou muito grato por você ter postado isso com o CSS! Quem diria que era só isso que eu precisava para mudar o espaçamento! Procuro algo assim há muito tempo! Muito obrigado!
WPBeginner Support
Glad our article could help you
Admin
Kathy
Estou usando o método "shift" enter, mas ele não permite fontes de tamanhos diferentes quando faço isso. Existe alguma solução?
WPBeginner Support
Oi Kathy,
Por favor, veja nosso guia sobre como mudar o tamanho da fonte no WordPress.
Admin
Lora Staples
Ótimo vídeo. Adorei o conteúdo, o ritmo e o tom do palestrante. OBRIGADO!
Kunal Khandelwal
Thank you so much for this suggestion. Didn’t know it was so easy