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.
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
Jessica
Qual é o código para ajustar a altura da linha para um único post?
Bharadwaj
Obrigado, útil
Samadarshi
Thank you for such wonderful articles
I was completely lost when I started wordpress but now I have a pretty basic idea
Thank u
Neal Umphred
Obrigado! Isso me ajudou a otimizar meus posts — exceto o primeiro parágrafo de cada post. Por algum motivo, as linhas parecem ter espaçamento duplo. Existe um trecho de código que eu poderia adicionar ao Editar CSS que me permitiria otimizá-las?
Neal Umphred
Obrigado! Adicionar o trecho (.post p{line-height: 1.5em;}) ao meu Editar CSS tornou meu texto muito mais fácil de ler. Agora, aqui está o meu problema: o parágrafo de abertura em cada post do WordPress tem um espaçamento de linha muito maior do que os outros parágrafos — e NÃO é afetado por este trecho de código de altura de linha. Existe outro trecho de código que eu poderia adicionar ao Editar CSS que otimizaria essas linhas de abertura?
tiffany
Muito obrigado. Seu site é notável. Ele me ajudou muito. Inscrito!! Por favor, continue o ótimo trabalho!!
WPBeginner Support
Obrigado pelas palavras gentis. Ficamos felizes em ajudar.
Admin
Joe Simmons
Obrigado! Eu também não sabia sobre a coisa do "shift+enter".
Debby
Shift + Enter. Quem diria que era tão simples! Obrigado, obrigado, obrigado!
Gamo Nana
obrigado pelo espaçamento de linha única com SHIFT + Enter
Bob M.
Eu também gostaria de agradecer por essa pérola de sabedoria (Shift+Enter)!
JE
Obrigado pelo tutorial. No entanto, como posso ajustar o espaçamento de linha de um único parágrafo? Tenho um título de 3 palavras, centralizado e empilhado em 3 linhas. Todas as linhas têm tamanhos de fonte diferentes, então os espaçamentos de linha são inconsistentes. Tenho procurado uma maneira de ajustar facilmente através de uma ferramenta de editor de texto ou plugin.
Alguma ideia?
Syed Balkhi
Nós acabamos de usar a caixa de pesquisa do navegador, que você pode encontrar pressionando Ctrl + F
Mx
Encontrando .post p você usou uma caixa de pesquisa. Você pode me dizer como encontrar essa caixa de pesquisa? Obrigado4
Jun Han
Isso é muito útil.
Obrigado.
http://www.digitalgrog.com.au/
Era meu pet peeve até agora.. obrigado, agora posso espaçar corretamente.. a propósito, fiz uma lista de hosts, dê uma olhada
http://www.digitalgrog.com.au/australian/comparison-on-blog-web-hosting-for-australians/
Karen Surfy Mum
Incrível!! Eu também queria saber como fazer isso há séculos!!! Tão simples quando você sabe… valeu xxx
Widdershins
Oiiiiiiiiiiii!!! I’ve been trying to find out how to do that for yonks!!!!
Thankyouthankyouthankyou
fastow2012
“Se você não encontrar a tag .post p, então simplesmente crie uma.”
Onde? devo apenas copiar/colar em qualquer lugar no arquivo css?
Equipe WPBeginner
de preferência no final do arquivo css.
Mx
Desculpe, mas ainda não entendi onde colocá-lo. É possível explicar com mais detalhes? Obrigado
James
Sempre me perguntei como fazer isso. Obrigado pelo treinamento.
Valerie
Eu nem sou um verdadeiro "iniciante", mas há lacunas no meu conhecimento e você acabou de resolver uma das coisas mais frustrantes sobre WP para este escritor e usuário do Word… Obrigado por isso e por todas as suas informações fantásticas… Continuo aprendendo coisas ótimas com seus posts e seu site. Obrigado e um brinde a você!
kelly
almost four years of blogging and finally!
so awesome, thanks!!