Já notou como alguns sites parecem mais envolventes ao rolar? Muitas vezes, há um elemento de design sutil em ação – divisores de forma que criam transições suaves e fluidas entre diferentes seções.
Essas linhas curvas, anguladas ou em zigue-zague podem parecer um detalhe pequeno, mas fazem uma grande diferença na aparência profissional e moderna do seu site.
Além disso, elas ajudam a quebrar o conteúdo naturalmente e guiar os olhos dos seus visitantes exatamente para onde você quer que eles vão.
Após testarmos várias opções para encontrar os métodos mais confiáveis, reduzimos para duas que consistentemente entregam ótimos resultados.
Hoje, vamos guiá-lo por essas duas abordagens simples: usando o método padrão do WordPress e o SeedProd.
Por que Adicionar Divisores de Forma Personalizados ao Seu Site WordPress?
Um divisor de forma é um tipo de divisor de seção que você adiciona entre blocos de conteúdo.
Esses divisores podem ser simples, como uma linha horizontal criada com blocos do WordPress integrados.
Você pode usar esses divisores básicos para organizar e separar o conteúdo, o que é particularmente útil em páginas que cobrem muitos tópicos diferentes.
Você também pode criar divisores de forma mais avançados usando plugins de construtor de páginas e outro software de design web. Estes podem destacar o conteúdo mais importante do seu site para que ele se destaque para visitantes e clientes.
Introduzir divisores de forma que pareçam profissionais também pode tornar suas páginas mais interessantes e envolventes.
Por exemplo, você pode usá-los para criar um fundo exclusivo para o seu formulário de inscrição de newsletter por e-mail.
Dito isso, vamos ver como você pode criar um divisor de forma personalizado no WordPress. Basta usar os links rápidos abaixo para ir direto para o método que você deseja usar:
- Método 1: Crie um Divisor de Forma Simples no Editor de Blocos (Sem Plugin Necessário)
- Método 2: Crie um Divisor de Forma Personalizado no WordPress Usando um Page Builder (Recomendado)
- Frequently Answered Questions: Custom Shape Dividers
Método 1: Crie um Divisor de Forma Simples no Editor de Blocos (Sem Plugin Necessário)
A maneira mais fácil de adicionar um divisor de forma no WordPress é usando o bloco Separador integrado.
Este método permite que você adicione um separador de linha horizontal entre quaisquer blocos do WordPress e, em seguida, personalize a cor e o estilo da linha.
Este método não permite adicionar formas diferentes ao WordPress e tem configurações de personalização limitadas. No entanto, você não precisará instalar um plugin WordPress adicional, então esta é a maneira mais fácil de adicionar um divisor de forma simples ao seu site.
Para começar, basta abrir a postagem ou página onde você deseja adicionar um divisor horizontal no editor de conteúdo Gutenberg. Em seguida, clique no botão ‘+’ onde você deseja colocar esse divisor.
No pop-up, digite ‘Separador’.
Quando o bloco correto aparecer, clique para adicioná-lo à página ou postagem.
Para personalizar o bloco Separador padrão, clique nele e, em seguida, use as configurações no menu do lado direito.
Você pode alternar entre linha padrão, linha larga e pontos usando os botões na seção ‘Estilos’.
Você também pode alterar a cor da linha para que ela combine com o restante do seu tema ou marca.
Para fazer isso, clique em ‘Cor de Fundo’ e, em seguida, escolha uma cor no pop-up que aparece.
Além disso, você pode ajustar a margem do separador.
Quanto maior a margem, mais espaço haverá entre os blocos separados.
Quando estiver satisfeito com a aparência do divisor, você pode clicar no botão ‘Publicar’ ou ‘Atualizar’ para tornar o recurso de divisor de forma ativo.
Método 2: Crie um Divisor de Forma Personalizado no WordPress Usando um Page Builder (Recomendado)
Se você procura usar uma forma diferente e personalizar cada parte dos seus divisores, então recomendamos o uso do plugin SeedProd.
SeedProd é o melhor plugin construtor de páginas WordPress do mercado, e permite adicionar um divisor de forma personalizado a qualquer seção, linha ou coluna usando um editor simples de arrastar e soltar.
Testamos exaustivamente esta ferramenta em nosso ambiente de demonstração e descobrimos que ela é incrivelmente amigável para iniciantes e intuitiva. Tornou a criação de páginas uma tarefa sem esforço, especialmente para novos usuários. Você pode saber mais sobre o que descobrimos em nossa análise completa.
SeedProd também possui mais de 300 modelos projetados profissionalmente e mais de 90 blocos que você pode usar para criar belas páginas iniciais personalizadas, páginas de destino e muito mais.
Observação: Existe uma versão gratuita do SeedProd disponível no WordPress.org, mas usaremos a versão Pro, pois ela vem com uma ampla variedade de divisores de forma.
A primeira coisa que você precisa fazer é instalar e ativar o plugin SeedProd. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.
Após a ativação, você precisa inserir sua chave de licença.
Você pode encontrar essas informações em sua conta no site do SeedProd. Após inserir a chave de licença, clique no botão ‘Verificar chave’.
Com isso feito, vá para SeedProd » Páginas e clique no botão ‘Adicionar Nova Página de Destino’.
Depois disso, é hora de escolher um modelo de página. O SeedProd tem uma tonelada de modelos de design de sites profissionais que você pode ajustar para se adequar perfeitamente ao seu site WordPress.
Para selecionar um modelo, basta passar o mouse sobre ele e clicar no ícone de ‘Checkmark’.
Em seguida, digite um nome para a página. O SeedProd criará automaticamente um URL com base no título da página, mas você pode alterar o URL para o que quiser.
Quando estiver satisfeito com as informações que inseriu, clique no botão ‘Salvar e Começar a Editar a Página’.
Em seguida, você será levado ao construtor de páginas de arrastar e soltar, pronto para personalizar o modelo.
O editor do SeedProd mostra uma prévia ao vivo do seu design à direita e algumas configurações de blocos à esquerda.
O menu do lado esquerdo também tem blocos que você pode arrastar para o seu layout.
Por exemplo, você pode arrastar e soltar blocos padrão como botões e imagens ou usar blocos avançados como o contador regressivo, botões de compartilhamento em mídias sociais e muito mais.
Para personalizar um bloco, basta clicar para selecioná-lo em seu layout.
O menu à esquerda mostrará todas as configurações que você pode usar para configurar esse bloco. Você também pode alterar as cores de fundo da página, adicionar imagens de fundo ou alterar o esquema de cores e as fontes para combinar melhor com sua marca.
O SeedProd também vem com ‘Seções’, que são coleções de blocos que são frequentemente usados juntos. Por exemplo, o SeedProd tem uma seção de cabeçalho, imagem principal, chamada para ação, depoimentos de clientes, recursos, seções de rodapé e muito mais.
Para navegar pelas diferentes seções, basta clicar na aba ‘Seções’.
Você pode mover seções e blocos pelo seu layout usando arrastar e soltar.
Se você quiser excluir um bloco, basta passar o mouse sobre ele e clicar no ícone de lixeira quando ele aparecer.
Independentemente de você escolher usar uma seção do SeedProd ou não, agora você pode criar um divisor de forma personalizado. Basta clicar para selecionar a seção, linha ou coluna onde deseja adicionar o divisor.
Em seguida, clique na aba ‘Avançado’ no menu do lado esquerdo.
Agora, clique para expandir a seção ‘Divisor de Forma’.
Para começar, você pode escolher onde mostrar o divisor de forma selecionando o botão ‘Topo’ ou ‘Baixo’.
Agora você pode abrir o menu ‘Tipo’ e escolher o divisor de forma que deseja usar.
Ao selecionar diferentes formas, a visualização ao vivo será atualizada automaticamente para que você possa experimentar diferentes estilos e ver qual fica melhor.
Após escolher um divisor de forma, você pode estilizá-lo usando as novas configurações.
Para começar, você pode clicar em ‘Cor’ e depois escolher uma nova cor no pop-up que aparece.
Com isso feito, você pode tornar o divisor maior ou menor arrastando os controles deslizantes ‘Largura’ e ‘Altura’.
Se você já tem um tamanho específico em mente, pode digitar esses números nas caixas.
Você também pode tentar inverter o divisor clicando para ativar ou desativar o interruptor ‘Inverter’.
Por padrão, o divisor aparecerá atrás do restante do conteúdo, para que os usuários possam ver claramente qualquer texto, imagem ou outro conteúdo que se sobreponha ao divisor.
No entanto, mover a forma para a frente pode criar alguns efeitos interessantes. Se você quiser ver como isso fica, basta clicar para ativar o interruptor ‘Trazer para a Frente’.
Para adicionar mais divisores, basta seguir o mesmo processo descrito acima.
Você pode até adicionar um divisor de forma na parte superior e inferior de uma área, o que muitas vezes cria resultados impressionantes e chamativos.
Você pode continuar trabalhando na página adicionando mais blocos e personalizando esses blocos no menu à esquerda.
Quando estiver satisfeito com a aparência da página, clique no botão ‘Salvar’. Você pode então selecionar ‘Publicar’ para tornar essa página ativa.
Como Adicionar Divisores de Forma a um Tema WordPress
O editor de arrastar e soltar do SeedProd lhe dá a liberdade de adicionar um divisor de forma exclusivo a qualquer página. No entanto, às vezes você pode querer usar os mesmos divisores de forma em várias páginas da web ou até mesmo em todo o seu blog WordPress ou site.
Isso ajudará você a criar um design consistente e também pode economizar muito tempo. Nesse caso, recomendamos adicionar um divisor de forma ao seu tema usando o construtor de temas SeedProd.
Com o SeedProd, você pode criar e personalizar um tema WordPress sem escrever nenhum código. Ele cria todos os arquivos que compõem seu tema, incluindo a barra lateral, cabeçalho, rodapé, posts individuais e muito mais.
Você pode então personalizar esses arquivos usando o familiar construtor de arrastar e soltar. Isso inclui adicionar divisores de forma seguindo o mesmo processo descrito acima.
Ao ativar o novo tema usando o SeedProd, ele substituirá seu tema WordPress existente, portanto, você só deve usar este método se desejar substituir seu tema atual.
Para obter instruções detalhadas passo a passo, consulte nosso guia sobre como criar facilmente um tema personalizado do WordPress.
Perguntas Frequentes: Divisores de Forma Personalizados
Aqui estão algumas perguntas frequentemente feitas por nossos leitores sobre como criar um divisor de forma personalizado:
Os divisores de forma afetarão a velocidade do meu site?
Em geral, os divisores de forma não têm um impacto significativo no desempenho, especialmente se forem criados usando CSS puro ou SeedProd. Eles são leves e carregam rapidamente no navegador.
No entanto, se você os usar em excesso ou depender de arquivos de imagem, isso poderá aumentar ligeiramente os tempos de carregamento. Para manter seu site rápido:
- Use plugins mínimos.
- Prefira SVGs a arquivos de imagem grandes.
- Evite sobrepor muitos efeitos em uma única seção.
Equilibrar design e velocidade é fundamental para uma experiência de usuário fluida.
Como garantir que meus divisores de forma fiquem bons no celular?
O design responsivo é super importante. Se você estiver usando um construtor de páginas, a maioria permitirá que você ajuste a visibilidade, altura e orientação do divisor de forma separadamente para desktop, tablet e celular.
Aqui estão algumas dicas:
- Teste seus divisores de forma em diferentes tamanhos de tela. O SeedProd facilita isso, permitindo que você visualize como seu design fica no celular diretamente no construtor de arrastar e soltar.
- Use formas menores ou simplificadas no celular.
- Evite formas que dificultem a leitura do texto ou que sobreponham conteúdo importante.
Ferramentas como o SeedProd fornecem controles responsivos que permitem ajustar cada versão do seu site facilmente.
Onde posso encontrar SVGs de divisores de forma prontos?
Existem muitos recursos gratuitos onde você pode baixar divisores de forma SVG pré-projetados. Eles funcionam muito bem se você quiser algo personalizado sem ter que projetar do zero.
Aqui estão algumas opções:
- Haikei – Gerador de SVG gratuito para formas exclusivas e personalizáveis.
- ShapeDividers.com – Oferece vários divisores SVG que você pode copiar e colar.
Once you download the SVG, you can paste it into a custom HTML block or include it in your theme’s files, depending on your setup.
Discover More WordPress Design Tips and Tricks
Want to add more design features that impress your website visitors? Check out these WordPress design tips and tricks for more information:
- How to Add a Parallax Effect to Any WordPress Theme
- How to Create a “Sticky” Floating Footer Bar in WordPress
- Beginner’s Guide to Creating a Mobile-Ready Responsive WordPress Menu
- How to Add a Preloader Animation to WordPress (Step by Step)
- How to Add Drop Caps in WordPress Posts
- Beginner’s Guide to Adding Dark Mode to Your WordPress Website (Easy)
- How to Add an Animated Background in WordPress
We hope this tutorial helped you learn how to create a custom shape divider in WordPress. You may also want to learn how to add feature boxes with icons in WordPress and our expert tips on ways to create a mobile-friendly WordPress website.
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.
kzain
Ei, tenho experimentado divisores de formas personalizadas e eles são uma verdadeira revolução para o design do meu blog.
Você tem alguma dica para garantir que esses divisores fiquem ótimos tanto em desktops quanto em dispositivos móveis? Estou achando um pouco complicado equilibrar estética e funcionalidade em diferentes tamanhos de tela.
WPBeginner Support
Por enquanto, isso exigiria testes. Não temos dicas específicas no momento.
Admin
Dayo Olobayo
Adorei como as instruções são detalhadas e fáceis de seguir. Personalizar o divisor de forma é uma ótima maneira de adicionar um toque pessoal ao meu site. Com certeza vou salvar isso para referência futura.