Você já publicou um post de blog no WordPress que parecia bom à primeira vista, mas era difícil de ler depois de rolar? Longos blocos de texto podem sobrecarregar os leitores e fazê-los perder o interesse, mesmo que o conteúdo seja valioso.
Às vezes, tudo o que é preciso é uma simples linha horizontal para melhorar o fluxo do conteúdo. Esses divisores separam o texto para que ele pareça mais organizado e fácil de seguir. Eles também ajudam a destacar anúncios importantes, promoções ou transições entre seções de uma maneira natural.
Neste tutorial, mostraremos três maneiras fáceis de adicionar separadores de linha horizontal no WordPress.
Dessa forma, você pode tornar seus posts com aparência polida e profissional com o mínimo de esforço. 🙌
Por que você deve adicionar um separador de linha horizontal no WordPress?
Um separador de linha horizontal divide seções, torna seu conteúdo mais fácil de escanear e mantém os leitores engajados.
Além da legibilidade, as linhas horizontais também são úteis para chamar a atenção para pontos importantes, enfatizar citações ou criar transições suaves entre ideias.
No geral, os visitantes decidem em segundos se ficam em sua página ou a abandonam. Em muitos dispositivos, seu post de blog pode aparecer como uma longa parede de texto, o que pode ser avassalador de ler.
Uma simples linha horizontal pode mudar isso. ✅
Como este é um guia completo sobre como adicionar um divisor de linha horizontal no WordPress, você pode usar nosso índice para encontrar o método que deseja usar:
- Method 1: Adding a Horizontal Line in the WordPress Block Editor
- Method 2: Adding a Horizontal Line in the WordPress Classic Editor
- Método 3: Dividindo um formulário longo em várias páginas com WPForms
- Bonus Separators You Can Use in Your Posts and Pages
- Perguntas Frequentes Sobre Como Adicionar Linhas Horizontais no WordPress
- Continue Aprendendo: Dicas para Gerenciar Seus Posts e Páginas do WordPress
Pronto? Vamos lá.
Método 1: Adicionando uma Linha Horizontal no Editor de Blocos do WordPress
Para adicionar uma linha horizontal usando o editor de blocos do WordPress, você pode clicar no ícone de ‘+’ para adicionar um novo bloco onde quer que a linha esteja.
Em seguida, vamos selecionar o bloco ‘Separador’ na seção ‘Elementos de Layout’.
Você pode encontrá-lo facilmente usando a barra de pesquisa.
Uma vez adicionado, você verá o divisor de linha horizontal na sua área de conteúdo.
Estilizando a Linha Horizontal no Editor de Blocos do WordPress
Por padrão, o divisor horizontal é uma linha cinza pálida no centro do seu post ou página.
Você pode alterar a aparência clicando na linha para selecionar seu bloco. Em seguida, o painel de edição 'Bloco' será aberto no lado direito da sua tela.
Para mudar o estilo da sua linha, basta clicar na pequena seta ao lado de ‘Estilos’. Em seguida, você verá as diferentes opções.
Você pode mudar a linha horizontal para uma destas opções, se desejar:
- Uma linha larga que cobre toda a largura do conteúdo do seu post.
- Três pontos são exibidos no centro do seu post.
📌 Nota: Em alguns temas do WordPress, tanto a linha larga quanto a linha padrão cobrirão toda a largura da sua postagem.
Você também pode alterar a cor da sua linha horizontal nas configurações de ‘Cor’.
Simplesmente clique em uma das opções exibidas ou use o link 'Cor personalizada' para escolher qualquer cor.
Se você quiser voltar para a cor cinza padrão, basta clicar no botão ‘Limpar’ abaixo das opções de cor.
Aqui, nossa linha horizontal é azul e usa o estilo ‘larga’.
Método 2: Adicionando uma Linha Horizontal no Editor Clássico do WordPress
Se você estiver usando o Editor Clássico (frequentemente ativado com um plugin), você ainda pode adicionar linhas horizontais facilmente.
Para fazer isso, basta editar uma postagem ou página existente ou criar uma nova. Se você vir apenas uma linha de botões na barra de ferramentas acima do editor de postagens, clique no ícone ‘Alternar Barra de Ferramentas’ à direita:
Isso abrirá a segunda linha de botões, que inclui a opção de linha horizontal.
A partir daqui, a primeira coisa a fazer é colocar o cursor em uma nova linha onde você deseja inserir a linha horizontal.
Você pode então clicar no ícone ‘Linha Horizontal’. É o segundo da esquerda na segunda linha:
Uma vez adicionada, você verá uma linha horizontal cinza clara.
Ela cobrirá toda a largura da sua postagem assim:
Adicionando Manualmente uma Linha Horizontal Usando HTML
Em alguns casos raros, você pode precisar adicionar manualmente um divisor de linha horizontal no seu conteúdo do WordPress.
Se sim, você pode simplesmente fazer isso usando a tag HTML <hr> no seu conteúdo:
<hr>
Você pode adicionar esta tag na visualização 'Texto' do Editor Clássico ou dentro de um bloco 'HTML Personalizado' no Editor de Blocos.
É uma maneira rápida de adicionar um separador quando você está trabalhando com código.
Método 3: Dividindo um formulário longo em várias páginas com WPForms
Às vezes, você precisa dividir um formulário longo para torná-lo menos intimidador para os usuários. Em vez de uma linha visual, você pode dividir seu formulário em várias páginas. Mostraremos como fazer isso usando nosso criador de formulários de contato do WordPress favorito, o WPForms.
Na verdade, o WPForms é a ferramenta que amamos e usamos, por isso recomendamos fortemente que você o considere. Para mais informações sobre o plugin, confira nosso guia completo de análise do WPForms!
Primeiro, você precisará baixar, instalar e ativar o plugin WPForms. Se não tiver certeza de como fazer isso, confira nosso guia passo a passo sobre como instalar um plugin do WordPress.
📌 Observação: A versão gratuita do WPForms funciona bem para este guia. Dito isso, se você precisar de recursos avançados como lógica condicional, precisará fazer o upgrade para a versão Pro.
Em seguida, você pode ir para WPForms » Adicionar Novo no seu painel do WordPress.
Na próxima tela, você inserirá um nome para o seu formulário e, em seguida, escolherá um modelo.
Para este tutorial, usaremos o modelo de ‘Formulário de Solicitação de Orçamento‘.
Após escolher um modelo, você pode simplesmente passar o cursor do mouse sobre o modelo e clicar no botão para criar seu formulário.
Em seguida, vamos rolar para baixo na aba ‘Adicionar Campos’ no lado esquerdo até a seção ‘Campos Elaborados’.
Em seguida, você pode arrastar e soltar o ‘Quebra de Página’ onde quiser no formulário. Estamos colocando-o logo antes da caixa ‘Solicitar’.
💡 Dica Profissional: Quer construir seu formulário rapidamente? Então você vai apreciar o construtor de formulários com IA do WPForms! Simplesmente dê uma breve descrição e espere a IA gerar seu formulário.
Você verá que o formulário agora está dividido em 2 partes. O WPForms também adicionou automaticamente um botão ‘Próximo’.
Você pode alterar o rótulo ‘Próximo’ se desejar e adicionar um botão ‘Anterior’ para que os usuários naveguem para a segunda página do formulário.
Basta clicar no campo de quebra de página para editá-lo.
Quando terminar, você pode salvar o formulário clicando no botão ‘Salvar’ no canto superior direito.
Agora, é hora de adicionar o formulário ao seu site.
Clique no botão ‘Incorporar’ ao lado do botão ‘Salvar’ para começar. Isso abrirá uma janela de prompt onde você pode criar uma nova postagem ou página ou editar uma existente.
Para este tutorial, escolheremos a opção ‘Selecionar página existente’.
O próximo passo é escolher entre as páginas disponíveis e clicar em ‘Vamos lá!’
Você será redirecionado para o editor de conteúdo do WordPress.
A partir daqui, basta clicar no ícone ‘+’ para adicionar um novo bloco à sua postagem ou página e encontrar o bloco ‘WPForms’. Você pode usar a barra de pesquisa ou procurar na seção ‘Widgets’.
Assim que encontrá-lo, clique nele para adicionar o bloco à sua página.
Agora, você verá uma opção para selecionar seu formulário.
Escolha o formulário que você acabou de criar na lista suspensa.
Depois de fazer isso, você pode publicar a postagem ou página. E é só isso!
Agora, se você visitar a postagem ou página, poderá ver o formulário em ação.
Bônus: Separadores que você pode usar em suas postagens e páginas
Além de uma linha horizontal, o Editor de Blocos do WordPress oferece outros blocos úteis para ajudar a organizar seu conteúdo e melhorar o layout. Vamos dar uma olhada em algumas ótimas alternativas.
O Bloco Espaçador
O bloco 'Espaçador' permite adicionar espaço em branco entre os blocos.
Por exemplo, se você quiser um pequeno espaço no final da sua postagem antes de um lead magnet, você pode usar o 'Espaçador'.
Veja como ele aparece quando você está criando sua postagem no editor de blocos:
Você pode personalizar a altura do espaçador para que ele se ajuste melhor à sua área de conteúdo.
E veja como o espaçador pode aparecer no seu site:
O Bloco Mais
Se o seu tema exibe postagens completas na sua página principal do blog em vez de trechos, adicionar um link 'Mais' cortará sua postagem naquele ponto.
Isso exigirá que os visitantes cliquem para ler mais.
A imagem acima mostra o que você verá no editor de conteúdo.
E abaixo está como ele pode aparecer no seu site para os visitantes:
Você pode aprender mais sobre isso em nossos guias sobre como usar corretamente o bloco mais e como personalizar facilmente trechos no WordPress.
O Bloco Quebra de Página
‘Quebra de Página’ divide um post longo em várias páginas (uma técnica chamada paginação).
O bloco em si não possui opções de estilo no editor, portanto, sua aparência é controlada pelo seu tema do WordPress. Veja como ele aparece quando você está escrevendo seu post:
Em seguida, ‘Quebra de Página’ usará números de página e permitirá que os leitores escolham em qual página desejam ir.
Veja como ele pode aparecer no seu site WordPress:
Para mais detalhes, você pode consultar nosso guia sobre como dividir posts do WordPress em várias páginas.
Qualquer uma dessas opções pode ser uma boa alternativa para adicionar uma linha horizontal no WordPress, dependendo do seu objetivo.
Perguntas Frequentes Sobre Como Adicionar Linhas Horizontais no WordPress
Qual é a tag HTML para uma linha horizontal?
A tag HTML para uma linha horizontal é <hr>, que significa “horizontal rule” (linha horizontal). Você pode adicionar essa tag no editor de código para inserir manualmente um separador de linha padrão.
Como posso personalizar a linha horizontal no WordPress?
O editor de blocos do WordPress possui configurações integradas que permitem alterar o estilo e a cor da linha. Para personalizações mais avançadas, como ajustar a espessura ou criar designs exclusivos, você normalmente usaria CSS personalizado.
Posso usar uma imagem em vez de uma linha como separador?
Com certeza. Usar uma imagem personalizada como separador pode adicionar um toque único e de marca ao seu conteúdo. Para um controle criativo ainda maior, um plugin de construtor de páginas como SeedProd permite que você crie divisores de seção personalizados sem nenhum código.
Continue Aprendendo: Dicas para Gerenciar Seus Posts e Páginas do WordPress
Esperamos que este tutorial tenha ajudado você a aprender como adicionar separadores de linha horizontal no WordPress.
Se você quiser adicionar mais elementos de design e layout às suas postagens e páginas, confira nossos artigos sobre:
- Os Melhores Construtores de Páginas WordPress Drag-and-Drop
- Como Criar um Divisor de Forma Personalizado no WordPress
- Como Exibir uma Lista de Posts Atualizados Recentemente no WordPress
- Como Adicionar Status de Postagem Personalizado para Posts de Blog no WordPress
- Como Criar Tipos de Postagem Personalizados no WordPress
- Como Proteger uma Página ou Postagem com Senha no WordPress
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.
Jiří Vaněk
Posso perguntar, se é possível fazer um divisor horizontal, em vez de vertical?
WPBeginner Support
Para isso, você precisaria criar colunas e, em seguida, usar CSS para adicionar a propriedade de borda às colunas.
Admin
Shoaib
O uso de tags hr entre artigos afeta o SEO?
WPBeginner Support
Dependeria de como elas estão sendo usadas, mas, na maioria das vezes, não devem ter um grande impacto.
Admin