Os divisores padrão do Elementor são suficientes para layouts típicos, mas quando um design exige um contorno de onda único, um chanfro de marca ou uma diagonal que corresponda exatamente à maquete, o conjunto integrado de 26 formas fica aquém. O designer cria uma transição personalizada entre secções e o programador fica a pensar: como adicionar o seu próprio SVG ao Elementor para que este assuma a cor das definições e sobreviva à próxima atualização do plugin?

O problema não é a falta de mecanismo: o filtro elementor/shapes/additional_shapes existe no núcleo há muito tempo. O problema é que a maioria dos tutoriais online sugere colocar o SVG na própria pasta do plugin, o que é um caminho direto para perder o ficheiro durante as atualizações automáticas. E os parâmetros url/path são frequentemente omitidos; sem eles, o divisor simplesmente não é renderizado no editor.

Abaixo está um fluxo de trabalho testado: desde a preparação do ficheiro vetorial até ao seu registo através de um filtro com colocação no tema filho. Após isto, o seu divisor de forma personalizado aparecerá no menu suspenso juntamente com os padrão e persistirá independentemente das atualizações do Elementor.

💡 Visão geral rápida:

• Prepare um esboço rasterizado no Photoshop: recorte a área necessária e preencha-a com preto.
• Converta o PNG para SVG através de um serviço online, simplificando para uma única cor.
• Limpe o código SVG: remova tags desnecessárias, adicione elementor-shape-fill e preserveAspectRatio.
• Coloque o ficheiro na pasta do tema filho e registe-o via add_filter com as chaves url, path e has_negative.
• Teste o divisor no editor do Elementor, altere a cor e a altura.

O que é um divisor de forma e porquê adicionar o seu próprio

Um Divisor de Forma é uma forma SVG sobreposta no topo ou na base de uma secção no Elementor. Cria uma transição suave entre blocos: uma onda, chanfro, arco ou extremidade pontiaguda. A biblioteca padrão inclui 26 formas: montanhas, gotas, nuvens, curvas, etc.

Um divisor personalizado é necessário em três casos. Primeiro, quando o design contém uma forma única não encontrada no conjunto padrão. Segundo, para fins de marca (por exemplo, uma transição com a forma de um logótipo ou uma onda de assinatura). Terceiro, quando vários projetos usam o mesmo conjunto personalizado; nesse caso, os divisores são adicionados centralmente através de um tema filho ou de um plugin personalizado.

Tecnicamente, o mecanismo é implementado através do filtro elementor/shapes/additional_shapes. O hook aceita um array onde cada elemento descreve um divisor: o nome, o caminho do ficheiro, a capacidade de inversão e a opção negativa. Após o registo, a forma aparece no menu suspenso do editor.

Criar um ficheiro SVG para o divisor

O princípio por detrás do funcionamento dos divisores de forma é que a área visível é tudo o que preencher no SVG. Portanto, primeiro precisa de perceber qual parte do esboço se tornará a forma.

Suponha que o designer criou uma transição com uma secção inferior azul e uma "onda" superior branca. O contorno branco deve tornar-se a forma; é isso que precisa de recortar e preencher com uma cor sólida.

Ponto-chave: se cometer um erro e selecionar a área azul em vez da branca, o divisor no Elementor parecerá invertido ou cortado. Determine sempre o que exatamente deve ser a forma visível.

Passos no Photoshop

Abra o esboço no Photoshop e complete três passos:

• Apague a área de fundo que NÃO deve ser o divisor. No exemplo acima, apague a parte azul.

• Preencha a área restante (a "onda" branca) com preto. O preto simplifica o traçado vetorial subsequente; o conversor não se confunde com diferentes tonalidades.

• Recorte a tela até aos limites da forma e exporte para PNG. O Photoshop gera SVGs com invólucros e artefactos extra, pelo que o PNG como formato intermédio é mais fiável.

Porquê preto em vez da cor do site de imediato? O Elementor aplica a cor do divisor a partir das suas próprias definições; o preenchimento do SVG não importa. E uma silhueta preta sobre fundo branco produz o vetor mais limpo após o traçado automático.

Resultado após processamento no Photoshop:

Converter PNG para SVG

De seguida, precisa de um vetor limpo. Use o conversor online pngtosvg.com; não requer registo e lida com formas de cor única sem ruído desnecessário no código.

Carregue o PNG e defina os parâmetros:

• Simplificação máxima, uma cor. Isto remove curvas "lixo" e mantém o SVG compacto.

• Número de cores: 1 (ou 2 se precisar de um fundo transparente; nesse caso, defina a segunda cor como transparente).

Descarregue o SVG resultante e abra-o num editor de código: Notepad++, VS Code ou um editor de texto simples. De seguida, vem a limpeza manual.

Ajustar o SVG aos requisitos do Elementor

Para que o divisor assuma a cor e dimensione corretamente, faça três edições diretamente no código do ficheiro:

Adicione a classe elementor-shape-fill. Sem ela, o Elementor não pode recolorir o SVG. Encontre a tag <path> ou <polygon> e adicione o atributo class="elementor-shape-fill".

Remova width e height. Mantenha apenas viewBox e adicione preserveAspectRatio="none"; isto permite que o divisor se estique por toda a largura da secção. Se os atributos width/height não estiverem presentes, deixe-os como estão e apenas garanta que o viewBox está lá.

Remova tudo o que for desnecessário. Apague as construções <?xml...>, <!DOCTYPE...> e quaisquer cabeçalhos XML fora da tag <svg>. Mantenha apenas o código limpo dentro de <svg>...</svg>; o Elementor analisa esses ficheiros de forma mais fiável.

O SVG final deve parecer-se aproximadamente com isto:

1
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
2
  <path class="elementor-shape-fill" d="M0,0 C300,100 900,0 1200,120 L0,120 Z"/>
3
</svg>

Onde colocar o ficheiro SVG

A abordagem mais rudimentar e comum é a pasta /wp-content/plugins/elementor/assets/shapes/. Funciona exatamente até à primeira atualização automática do Elementor, que sobrescreve silenciosamente o conteúdo da pasta do plugin juntamente com o seu ficheiro.

A abordagem correta é um tema filho. Crie uma pasta assets/shapes/ dentro dele e coloque lá o SVG:

1
/wp-content/themes/your-child-theme/assets/shapes/shape-custom.svg

Quase todos os temas modernos (Hello Elementor, GeneratePress, Astra, Kadence) suportam temas filhos. Se não tiver um, crie-o: na raiz do tema, só precisa de um style.css com um cabeçalho /* Theme Name: My Child Theme Template: parent-theme */ e um functions.php.

Uma alternativa é um plugin personalizado. Mas para um ou dois divisores, um tema filho é mais simples e não cria entidades extra.

Código para registar o divisor

No ficheiro functions.php do tema filho (ou através do plugin Code Snippets), adicione o seguinte código:

1
/**
2
 * Registers a custom shape divider in Elementor.
3
 * SVG is located in the assets/shapes/ folder of the child theme.
4
 */
5
add_filter( 'elementor/shapes/additional_shapes', function( $additional_shapes ) {
6
 
7
    $additional_shapes['shape-custom-wave'] = [
8
        'title'        => esc_html__( 'Custom Wave', 'my-child-theme' ),
9
        'url'          => get_stylesheet_directory_uri() . '/assets/shapes/shape-custom.svg',
10
        'path'         => get_stylesheet_directory() . '/assets/shapes/shape-custom.svg',
11
        'has_flip'     => true,
12
        'has_negative' => true,
13
        'height_only'  => false,
14
    ];
15
 
16
    return $additional_shapes;
17
 
18
} );

Detalhe dos elementos-chave:

• title: o nome do divisor no menu suspenso do editor. Escreva em caracteres latinos; este é um identificador interno exibido tal qual na interface.
• url: o URL público do ficheiro, usado para a pré-visualização no editor. get_stylesheet_directory_uri() aponta para a pasta do tema filho.
• path: o caminho do servidor para o ficheiro. Necessário para a renderização do lado do servidor e algumas verificações.
• has_flip: ativa a inversão vertical do divisor (o botão Inverter no editor).
• has_negative: necessário se tiver dois ficheiros: shape.svg (direto) e shape-negative.svg (com cores invertidas). Se não houver negativo, defina como false.
• height_only: quando true, o Elementor só permite alterar a altura do divisor; quando false, a largura também pode ser alterada.

A diferença chave em relação às instruções que circulam nos fóruns: a presença de url e path é obrigatória. Sem eles, o divisor não será renderizado; o Elementor simplesmente não encontrará o ficheiro.

Nota importante sobre o ID do divisor

O identificador shape-custom-wave (a chave do array) deve ser único. Se outro plugin registar um divisor com a mesma chave, o seu será sobrescrito. Use sempre um prefixo: por exemplo, mytheme-wave-1 em vez de apenas wave.

Testar no editor

Após adicionar o código, abra qualquer página no editor do Elementor, selecione uma secção e vá ao separador Estilo → Divisor de Forma. O seu divisor deve aparecer no menu suspenso abaixo dos padrão.

Teste três cenários:

• Cor: altere a cor do divisor nas definições. O SVG deve ser recolorido. Se não, verifique a presença de class="elementor-shape-fill" no ficheiro.
• Altura: ajuste a altura com o controlo deslizante. O divisor deve dimensionar sem distorção.
• Inverter: se has_flip estiver ativado, o botão de inversão deve estar ativo.

Se não aparecer de todo, verifique primeiro o URL: abra get_stylesheet_directory_uri() . '/assets/shapes/shape-custom.svg' no navegador. Deve exibir código SVG limpo, não um 404.

Veja todo o processo, da maquete ao divisor funcional, em tempo real; neste vídeo, o autor percorre todo o caminho, incluindo nuances com preserveAspectRatio e depuração de caminhos quebrados:

⁉️🤔 Perguntas frequentes

O divisor personalizado desaparecerá quando o Elementor for atualizado?

Não, se o SVG estiver num tema filho ou plugin personalizado. As atualizações do Elementor apenas sobrescrevem a sua própria pasta /wp-content/plugins/elementor/. Os ficheiros do tema não são tocados. No entanto, se colocou o SVG em /wp-content/plugins/elementor/assets/shapes/, será eliminado na primeira atualização automática.

Posso criar um divisor com gradiente?

Não diretamente através das definições do Elementor; apenas cores sólidas estão disponíveis lá. Mas pode definir um gradiente diretamente no SVG, dentro de <defs> e <linearGradient>. Nesse caso, o Elementor não recolorirá a forma (não adicione a classe elementor-shape-fill a esse caminho) e o divisor será exibido com o gradiente "incorporado".

Porque é que o divisor não aparece no editor mesmo sem erros no código?

As três causas mais comuns: esquecimento de url/path no array de registo, um caminho de ficheiro quebrado (verifique o acesso direto ao URL) ou a falta da classe elementor-shape-fill no SVG; sem ela, o Elementor ignora silenciosamente o divisor.

O Photoshop é obrigatório?

Não, qualquer editor rasterizado funciona: GIMP, Figma (exportar para PNG), Photopea, até Paint.NET. O segredo é obter uma silhueta preta limpa sobre fundo transparente ou branco antes de converter para SVG. O traçado em si não é feito no editor, mas via pngtosvg ou uma ferramenta semelhante.

Quantos divisores personalizados posso adicionar?

Não há limite de quantidade; registe quantos precisar na mesma chamada add_filter. Cada um com a sua própria chave, caminho e definições. O limite prático é a conveniência: mais de 10-15 divisores num menu suspenso torna-se complicado de pesquisar.

Vale a pena o esforço para criar um divisor de forma personalizado

Se o projeto for pontual e a "onda" padrão for suficiente, não vale. As 26 formas integradas do Elementor cobrem a maioria dos layouts típicos, e o tempo gasto a preparar SVG e a depurar código é melhor investido no conteúdo.

Mas quando o design exige uma correspondência exata com a maquete, ou tem uma série de sites com a mesma transição de marca entre secções, um divisor personalizado compensa desde a primeira utilização. Adiciona-o uma vez através do tema filho e fica disponível em todas as páginas da rede sem qualquer complicação.

A principal conclusão: **não coloque o SVG na pasta do plugin, especifique sempre url e path no filtro e não se esqueça do **elementor-shape-fill. Estes três pontos são a raiz da maioria dos problemas que surgem em tópicos de fóruns e issues no GitHub.