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://www.wpbeginner.com/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://www.wpbeginner.com/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
phil rooksby
Eu não tenho CSS Adicional. Tentei de todas as outras formas alterar o espaçamento dos parágrafos, mas nada funciona, parece uma bagunça. Por favor, ajude!!!
Norm
Obrigado pela ajuda. Procurei em todos os lugares e queria fazer isso com um plugin. Você tornou tudo tão fácil. Novamente, muito obrigado.
Maria
Olá! Quero ter um espaçamento simples entre meus parágrafos e mesmo depois de pressionar enter (para o espaço duplo), quando pré-visualizo o rascunho, nada mudou (ainda é tudo um parágrafo). Alguém poderia ajudar?
Rashmi
Olá
Gostaria de modificar a altura da linha e o espaçamento. No entanto, não há um ícone de 'editor' (Aparência » Editor) no arquivo CSS do tema.
Então, o que posso fazer?
Obrigado pela sua resposta!
Hannah
Wow. Didn’t know it was so easy. Thank you so much! This double space was driving me crazy!
Christine
Obrigado! Muito mais fácil!
Donna
Obrigado, obrigado, obrigado!
Eu estava em outro editor de HTML e não conseguia descobrir como fazer espaçamento simples.
You saved the day!
Gerard
Brilhante e um salva-vidas eterno.
Eu estava lutando com o espaçamento em um dos sites dos meus clientes e é absolutamente incrível que você tenha a resposta exata quase ao alcance dos seus dedos. Agora estou me tornando um assinante permanente
Elandre
Obrigado por todas as dicas do WordPress. Este site me ajudou muito com a maioria das dificuldades que tive
LR
Estou usando o tema Pilcrow e não tenho ideia de como fazer o espaço duplo entre parágrafos acontecer. Às vezes acontece em minhas postagens, mas às vezes não. Quando olho no arquivo HTML, não vejo nenhuma postagem p ou padding. Eu só vejo o resultado final de como a postagem ficará e é quando sei que o espaçamento duplo não funcionou. Posso voltar e re-editar e consertar? Por último, mas não menos importante, onde você diz para ir dos menus aparência para editor, eu não tenho essas opções.
Eu tenho sob aparência as seguintes opções: temas, personalizar, widgets, menus, cabeçalho, plano de fundo, AMP, Opções do Tema, Mobile.
Por favor, ajude.
WPBeginner Support
Olá LR,
Você pode adicionar o CSS visitando Aparência->Personalizar e depois clicando na aba CSS Adicional no personalizador. Veja nosso guia em como adicionar CSS personalizado no WordPress.
Se você acredita que é um problema de tema, tente mudar temporariamente para um tema padrão do WordPress. Se o problema desaparecer, você pode pedir suporte ao desenvolvedor do seu tema.
Admin
Derek Cummings
Meu tema está quebrado, no sentido de que ele não tem o espaçamento duplo por padrão. O tema está travado no modo shift+enter, em outras palavras. Então, em relação ao seguinte código:
.post p { line-height: 1.5em; padding-bottom: 15px; }
15px é um espaçamento duplo padrão normal? Quantos pixels deveriam ser por padrão? Além disso, não importa onde eu coloco este código? Obrigado!
Femi
Obrigado pela dica do shift + enter. Eu nunca soube disso por anos. Seu site sempre foi um resgate quando fico preso.
Lyn
Olá: Como faço para ter espaçamento de linha personalizado (digamos, 1.5em) para uma instância em uma página, em vez de alterar o CSS de todo o tema? Vejo que outras duas pessoas fizeram a mesma pergunta sem resposta, pelo menos que eu tenha encontrado. Obrigado!
Denise B
Eu defino as margens do p para zero. No seu CSS, seria algo como p {margins: 0; }
Los Hundlos
Shift+Enter para evitar um grande espaço entre as linhas no editor wysywig tinye mce no wordpress. Funciona !!!! Incrível!
Cat
Que tal simplesmente adicionar algum texto e mudar a cor do texto para branco (se o fundo for branco)? Isso deve possibilitar a criação e personalização de espaços de linha com muito mais facilidade (a menos que, é claro, o fundo seja uma imagem de algo que não pode ser combinado com a cor da fonte).
Tim
Muito obrigado! Salva-vidas!
Michael Rich
Olá equipe WPBeginner,
Tenho uma pergunta diferente. Eu uso o Visual Composer e adicionei muitos divisores Separator with Text entre os títulos das minhas seções na minha página inicial. Eu gostaria de fazer com que esses títulos de texto também sejam um link para essa seção.
No entanto, toda vez que adiciono o link, perco o texto de identificação da seção que eu tinha no separador e ele é magicamente substituído pelo texto padrão dizendo "TITLE".
Para tentar transformá-lo em um link, estou adicionando o código de link dentro deste colchete:
[vc_text_separator title="1950s CARS"]
Estou coçando a cabeça com tanta força que acho que estou careca. Qualquer ajuda renderá uma vida de gratidão!!!
Obrigado,
Mike
Anthony Cooper
Estou usando o tema 'Divi' do WordPress e descobri que, se você pressionar Enter (ou Shift + Enter) duas vezes, para criar um espaço maior, ele é ignorado. Para contornar isso, pressione Enter uma vez, digite um caractere na linha (não importa qual), destaque-o e mude a cor da fonte do caractere para branco e, em seguida, pressione Enter novamente; isso resulta no espaço desejado entre as linhas sem ter que editar o tema. O mesmo se aplica a espaços extras em uma linha; digite quantos caracteres desejar, destaque-os e mude a cor da fonte para branco e, em seguida, continue na cor de fonte desejada.
Julie
Dica brilhante! Muito obrigado por isso, você me salvou de muitas dores de cabeça e aborrecimentos, Anthony!
Robin Brinkler
Lembre-se que alguns motores de busca podem tratar texto "oculto" como este como spam.
Ellen
Isso foi muito útil, obrigado!
Christy
THANK YOU!! I Love you guys! So glad I found this site! I’ve almost literally been banging my head against the wall. If I knew how to insert emojis, this post would be covered with hearts and smiley faces.
Christy
P.S. ~ HA! Eu NÃO sabia que meus dois pontos e parênteses se transformariam em um smiley. LOL
Linda Paul
Ah, sim! Você acabou de me ajudar a resolver um problema (parágrafos forçados com espaço único) que me incomoda há anos!
WPBeginner Support
Glad you found it helpful
Admin
David M. Ebersole Sr.
Sou assinante do WP Beginner.
Tive uma dúvida sobre como inserir dados de engenharia para meu produto em meu site. O espaçamento nas tabelas parecia muito grande na página. Pesquisei no suporte do WordPress e tudo o que vi foram respostas ríspidas à questão do espaçamento de linha única.
Você é o primeiro a responder à pergunta, e obviamente estava correto. Obrigado.
Atenciosamente,
Dave
WPBeginner Support
Glad you found it helpful
Admin
Mark
E no Android? A última atualização forçou um espaçamento duplo (novo parágrafo). Não é muito bom para poetas. Existe alguma maneira de reverter para o espaçamento único?
Cheryl
Eu uso o tema Omega e o control/enter não funciona. Há algo mais que eu possa fazer. Não consigo encontrar post.p no arquivo CSS.
Becky
Muito útil, obrigado!
Adnan Khan
Obrigado, esta dica é muito útil para novos usuários do wp
Tina Gleisner
Obrigado por "shift" e enter para espaçamento de linha única, pois eu queria descobrir isso há anos... e nunca cheguei a encontrar a solução.
Ian
Olá,
Isso funcionou para mim, mas o CSS não faz nada na minha página…
Will
Aconteceu a mesma coisa comigo. Existe um código atualizado para inserir?
A. Lougheed
Estou procurando uma resposta em todo lugar… quando adiciono um
no editor de texto, ele é removido no editor visual. Isso me deixa louco. O wpbeginner tem alguma recomendação?
Devo adicionar um plugin para parar isso?
Tentei um plugin anos atrás, mas tive que voltar e reformatar cada post.
Qualquer link com tutorial ou conselho é muito apreciado!
WPBeginner Support
Actually it is also removed from your comment.
Por favor, veja nosso guia sobre Como adicionar caracteres especiais em posts do WordPress.
Admin