Uma divisão de secção bonita faz uma página parecer mais cara em cinco minutos de trabalho. Esta é a forma mais barata de dar personalidade a um site: sem necessidade de redesign, sem necessidade de designer, apenas uma linha vetorial no sítio certo.

O problema é que o conjunto integrado do Elementor se torna rapidamente repetitivo. As ondas e triângulos padrão do Shape Divider aparecem em todas as outras landing pages, e o widget Divider apenas desenha uma linha reta com um ícone do FontAwesome. Você quer ornamentos, motivos botânicos ou brilhos, e é aí que a procura começa.

Esta coleção tem tudo o que precisa para divisores bonitos: seis estilos SVG prontos a usar que desenhámos nós próprios e incluímos no artigo, uma análise do plugin SVG Divider for Elementor, um olhar honesto sobre as ferramentas integradas e uma forma de inserir qualquer código SVG sem plugins.

💡 Visão geral rápida:

• Passo 1: determine o estilo do divisor para o design do seu site, exemplos de seis estilos abaixo na galeria
• Passo 2: para ondas e inclinações básicas, ative o Shape Divider integrado nas definições da secção do Elementor
• Passo 3: para divisores animados desenhados à mão, instale o plugin SVG Divider for Elementor
• Passo 4: para controlo total, copie o código SVG do artigo e insira-o através do widget HTML

Porque é que uma página precisa de divisores e especificamente de SVG

Um divisor resolve três tarefas: separa blocos semânticos, define o ritmo de scroll e direciona o olhar para a secção seguinte. Uma parede de texto sem pausas visuais é cansativa, o leitor abandona a página antes de chegar ao botão.

O formato SVG é o mais adequado para esta tarefa, e o mercado confirma-o: de acordo com as estatísticas da W3Techs sobre SVG, o formato é usado por 66,8% de todos os sites (julho de 2026). As razões são práticas. O vetor não perde nitidez em ecrãs retina ou em qualquer nível de zoom. Um ficheiro com uma ilustração inteira pesa menos do que um único logótipo raster. E cada elemento dentro do SVG, linha, pétala, ponto, pode ser animado separadamente através de CSS.

A audiência para este tópico é enorme: o próprio Elementor, de acordo com o catálogo do WordPress.org, está instalado em 10 milhões de sites, e o WordPress como um todo alimenta 41,5% de todos os sites da internet (contador da W3Techs, julho de 2026). Por outras palavras, milhões de páginas usam as mesmas ondas padrão. Destacar-se é fácil, e vamos mostrar-lhe como a seguir.

Galeria: seis estilos de divisores SVG com exemplos

Todos os divisores abaixo foram desenhados por nós especificamente para este artigo e carregados para a biblioteca de media como ficheiros SVG normais. A paleta é neutra, azul com um detalhe dourado, cada estilo está identificado pelo propósito. Use-os como referência ao escolher o seu próprio estilo ou aproveite o código para si: como inserir SVG numa página sem um plugin, abordaremos numa secção abaixo.

Onda

O estilo mais versátil. Uma linha dupla com transparência diferente cria profundidade, e os pontos no centro dão ao olhar uma âncora. Apropriado em quase todo o lado: blogs, landing pages de serviços, portfólios.

Ornamento clássico

Uma linha com arabescos e um losango no centro, uma técnica diretamente do design editorial. Um divisor destes pede tipografia com serifa: serviços jurídicos, restaurantes de alta cozinha, sites de casamentos, editoras.

Motivo botânico

Folhas e bagas num eixo fino. Um estilo para tudo o que é «natural e artesanal»: produtos ecológicos, cosmética, estúdios de yoga, produtos agrícolas, artigos feitos à mão.

Geometria de losangos

Uma corrente de losangos em tamanho decrescente. Uma variante rigorosa sem uma única linha curva, que não entra em conflito com a grelha de layout: sites corporativos, SaaS, finanças, blogs de tecnologia.

Linha dupla com medalhão

O parente mais próximo do widget Divider integrado, mas visivelmente mais sofisticado: uma linha dupla de espessura diferente e um medalhão redondo com uma estrela. Bom como divisor final antes do rodapé ou da assinatura do autor.

Linha pontilhada com brilhos

Uma linha pontilhada e brilhos de quatro pontas dispersos. O estilo mais «cenográfico»: promoções festivas, produtos infantis, portefólios criativos, páginas de destino de Ano Novo.

O que o Elementor faz de raiz

Antes de instalar plugins, vale a pena tirar o máximo partido das ferramentas incorporadas. O Elementor tem duas ferramentas padrão e elas cobrem os cenários básicos.

O Shape Divider encontra-se nas definições da secção (separador Estilo). É um rebordo com forma entre secções: onda, declive, colina, nuvens, ziguezague, cerca de uma dúzia de formas no total, com definições de cor, altura e inversão; algumas suportam camadas. Mais detalhes no guia do Elementor sobre o Shape Divider. A limitação fundamental: é uma forma de rebordo de secção, não um elemento decorativo independente, e não tem animação de revelação.

O widget Divisor é colocado entre blocos de conteúdo: uma linha reta, definições de espessura e cor, opcionalmente um ícone ou texto no centro. Um mínimo funcional honesto. Mas a linha é sempre reta, os ícones são apenas dos conjuntos padrão e não há animação.

A conclusão é simples: para um layout corporativo rigoroso, as ferramentas incorporadas são suficientes. Para ornamentos, gráficos desenhados à mão e animação, precisa de um plugin ou de fazer você mesmo. Comecemos por um plugin.

Plugin SVG Divider for Elementor: 90 divisores desenhados à mão

O SVG Divider for Elementor, do estúdio Let's WP, adiciona um widget separado com dois modos. De acordo com o anúncio no blogue da Let's WP, o conjunto inclui 90 designs desenhados à mão e um modo clássico com linhas e ícones, incluindo mais de 300 ícones do seu próprio conjunto, além de séries temáticas exclusivas para sites de viagens e restaurantes.

O modo Drawn é o núcleo do plugin: ilustrações ornamentais com animação de revelação, onde cada pétala e arabesco tem o seu próprio tempo. Todas as animações são escritas em CSS puro, sem bibliotecas externas, e apenas os estilos efetivamente usados são carregados na página. Uma camada opcional de glitter adiciona um brilho infinito sobre o desenho.

O modo Classic repete a ideia do widget Divisor padrão, mas de forma mais flexível: linhas duplas e pontilhadas com ajuste de distância por controlo deslizante, ícone à esquerda, ao centro ou à direita, integração com o botão do Elementor.

A seleção de designs é feita através de um seletor pop-up proprietário com pesquisa instantânea: uma grelha de 90 miniaturas, a animação começa ao passar o rato, a alternância entre opções demora alguns segundos. O plugin é leve: SVG inline com alguns kilobytes, a única dependência é o jQuery, que já é carregado pelo núcleo do WordPress.

Agora a parte honesta. O plugin é vendido na página do plugin no CodeCanyon sob uma licença padrão para um site, requer o Elementor 2.8+ e não tem atualizações significativas desde 2020. A sua arquitetura é simples, quase não há nada que se possa estragar, mas comprar um produto sem suporte ativo continua a ser um risco que cada um avalia por si. Antes de pagar, verifique a demonstração na versão atual do Elementor.

Como inserir o seu próprio divisor SVG sem um plugin

Qualquer divisor da nossa galeria, como qualquer outro SVG, pode ser inserido numa página gratuitamente em três passos. O método funciona no Elementor, Gutenberg e, de forma geral, em qualquer construtor com um bloco de HTML.

Primeiro passo: obter o código SVG. Aqui está uma versão abreviada da nossa onda, copie-a diretamente daqui e altere as cores para corresponderem à sua marca:

1
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="120" viewBox="0 0 1200 120">
2
  <path d="M60,60 C210,20 360,100 510,60 S810,20 960,60 S1140,100 1140,60"
3
        fill="none" stroke="#4a6fa5" stroke-width="3" stroke-linecap="round"/>
4
  <circle cx="600" cy="60" r="6" fill="#c9a227"/>
5
</svg>

Segundo passo: no Elementor, arraste o widget HTML para o local desejado e cole o código. O SVG inline é renderizado instantaneamente, não cria pedidos HTTP e herda o dimensionamento do contentor. A sintaxe de caminhos e formas está bem explicada na documentação da MDN sobre SVG.

Terceiro passo, se for mais conveniente trabalhar através da biblioteca de multimédia: note que o WordPress, por predefinição, proíbe o carregamento de ficheiros SVG. Isto não é um capricho, mas sim segurança: um script executável pode residir dentro de um SVG, pelo que o ficheiro precisa de ser sanitizado antes da publicação. A tarefa é resolvida pelo plugin gratuito Safe SVG: limpa os ficheiros no momento do carregamento, após o que o SVG é inserido com o widget de Imagem normal.

A regra de segurança é uma só: não carregue SVG de fontes não verificadas para o seu site sem sanitização. O seu próprio código e os ficheiros deste artigo são limpos por definição, contendo apenas caminhos e formas.

Comparação: qual o método a escolher

Algumas palavras sobre a linha do meio da tabela: o Shape Dividers Plus expande o Shape Divider nativo com novos estilos de borda (pincel, geometria, papel), funciona na interface nativa e é atualizado, sendo a versão mais recente de fevereiro de 2026. Um módulo semelhante, Animated Shape Divider, com suporte para SVG personalizado, também está disponível nos Premium Addons. Se precisar especificamente de uma borda de secção com forma, comece por estas opções, não pela arte paga.

⁉️🤔 Perguntas frequentes

O plugin SVG Divider funciona sem o Elementor?

Não. Este é um addon que adiciona um widget ao painel do Elementor e não funciona sem ele, não existe uma versão autónoma. O requisito mínimo, Elementor 2.8+, está indicado no CodeCanyon. Para sites sem Elementor, utilize a inserção do seu próprio código SVG através de um bloco de HTML.

Os divisores SVG tornam o site mais lento?

Praticamente não. O vetor inline é renderizado sem pedidos HTTP adicionais, e o peso do divisor mede-se em kilobytes, o que é confirmado pela análise do autor do plugin. As animações CSS utilizam a aceleração de hardware do navegador. Um único banner raster é geralmente mais pesado do que todos os divisores da página juntos.

Por que razão o WordPress não permite carregar SVG para a biblioteca de multimédia?

Por razões de segurança: o SVG é um documento XML, dentro do qual pode ser incorporado um script. O núcleo bloqueia esses carregamentos por predefinição. A solução, o plugin Safe SVG do catálogo oficial: sanitiza os ficheiros no carregamento e abre uma pré-visualização na biblioteca de multimédia.

Posso usar os divisores da vossa galeria no meu site?

Sim, livremente. Desenhámo-los especificamente para este artigo: guarde o ficheiro SVG da galeria ou copie o código de exemplo da secção sobre inserção sem plugin e altere as cores para corresponderem à sua paleta. Não é necessária atribuição, não há restrições de licenciamento.

O plugin não é atualizado há vários anos, vale a pena comprá-lo?

Pondere o risco. A arquitetura é simples, CSS puro mais a API do Elementor, pelo que o plugin continua a funcionar nas versões atuais. Mas não há suporte ativo, e se a próxima atualização do Elementor quebrar algo, não haverá ninguém para corrigir. Verifique a demonstração antes de comprar e mantenha um plano de reserva sob a forma do seu próprio código SVG.

Qual é a diferença entre o Shape Divider e o widget Divider?

São ferramentas diferentes do Elementor. O Shape Divider define uma borda com forma de uma secção inteira (onda, inclinação, nuvens) e é configurado no estilo da secção. O widget Divider coloca uma linha horizontal entre blocos de conteúdo, opcionalmente com um ícone. O primeiro trata da geometria do layout, o segundo de uma pausa dentro de uma coluna de texto.

💎 Conclusões e pontos-chave

Belos separadores são uma melhoria visual barata, acessível a qualquer orçamento. Receita por cenários: para geometria básica de secções, o Shape Divider integrado ou o Shape Dividers Plus gratuito são suficientes. Para arte desenhada à mão com animação de revelação, existe o SVG Divider para Elementor, mas compre-o de olho nas atualizações paradas. E a máxima flexibilidade é proporcionada pelo seu próprio código SVG através de um widget HTML: gratuito, sem dependências e com controlo total sobre cada linha.

Dica prática: escolha um estilo de separador e utilize-o em todo o site. Três ornamentos diferentes numa página ficam pior do que a sua ausência, e um estilo repetido funciona como elemento de identidade de marca.

Pegue no separador de que gosta na galeria, mude as cores para combinar com a sua marca e escreva nos comentários qual dos seis estilos instalaria: onda, ornamento ou brilhos?