I divisori standard di Elementor sono sufficienti per i layout tipici, ma quando il design richiede un contorno ondulato unico, uno smusso brandizzato o una diagonale che corrisponda esattamente al mockup, il set integrato di 26 forme non basta. Il designer crea una transizione personalizzata tra le sezioni e lo sviluppatore si chiede: come si aggiunge un SVG personalizzato a Elementor in modo che erediti il colore dalle impostazioni e sopravviva al prossimo aggiornamento del plugin?

Il problema non è la mancanza di un meccanismo: il filtro elementor/shapes/additional_shapes esiste nel core da molto tempo. Il problema è che la maggior parte dei tutorial online suggerisce di inserire l'SVG direttamente nella cartella del plugin, il che è un modo sicuro per perdere il file durante gli aggiornamenti automatici. E i parametri url/path vengono spesso omessi; senza di essi, il divisore semplicemente non viene renderizzato nell'editor.

Di seguito trovi un flusso di lavoro testato: dalla preparazione del file vettoriale alla registrazione tramite un filtro con posizionamento nel child theme. Dopo questi passaggi, il tuo divisore di forma personalizzato apparirà nel menu a tendina insieme a quelli standard e persisterà indipendentemente dagli aggiornamenti di Elementor.

💡 Panoramica rapida:

• Prepara uno schizzo raster in Photoshop: ritaglia l'area necessaria e riempila di nero.
• Converti il PNG in SVG tramite un servizio online, semplificandolo a un unico colore.
• Pulisci il codice SVG: rimuovi i tag non necessari, aggiungi elementor-shape-fill e preserveAspectRatio.
• Posiziona il file nella cartella del child theme e registralo tramite add_filter con le chiavi url, path e has_negative.
• Testa il divisore nell'editor di Elementor, cambia il colore e l'altezza.

Cos'è un divisore di forma e perché aggiungerne uno personalizzato

Un divisore di forma è una forma SVG sovrapposta al bordo superiore o inferiore di una sezione in Elementor. Crea una transizione fluida tra i blocchi: un'onda, uno smusso, un arco o un bordo appuntito. La libreria standard include 26 forme: montagne, gocce, nuvole, curve e così via.

Un divisore personalizzato serve in tre casi. Primo, quando il design contiene una forma unica non presente nel set standard. Secondo, per scopi di branding (ad esempio, una transizione a forma di logo o un'onda distintiva). Terzo, quando più progetti usano lo stesso set personalizzato; in tal caso, i divisori vengono aggiunti centralmente tramite un child theme o un plugin personalizzato.

Tecnicamente, il meccanismo è implementato tramite il filtro elementor/shapes/additional_shapes. L'hook accetta un array in cui ogni elemento descrive un divisore: il nome, il percorso del file, la capacità di capovolgimento e l'opzione negativa. Dopo la registrazione, la forma appare nel menu a tendina dell'editor.

Creare un file SVG per il divisore

Il principio alla base del funzionamento dei divisori di forma è che l'area visibile è tutto ciò che riempi nell'SVG. Quindi per prima cosa devi capire quale parte dello schizzo diventerà la forma.

Supponiamo che il designer abbia creato una transizione con una sezione inferiore blu e un'"onda" superiore bianca. Il contorno bianco dovrebbe diventare la forma; è quello che devi ritagliare e riempire con un colore solido.

Punto chiave: se sbagli e selezioni l'area blu invece di quella bianca, il divisore in Elementor apparirà invertito o ritagliato. Determina sempre esattamente quale dovrebbe essere la forma visibile.

Passaggi in Photoshop

Apri lo schizzo in Photoshop e completa tre passaggi:

• Elimina l'area di sfondo che NON deve essere il divisore. Nell'esempio sopra, elimina la parte blu.

• Riempi l'area rimanente (l'"onda" bianca) con il nero. Il nero semplifica la successiva tracciatura vettoriale; il convertitore non viene confuso da diverse sfumature.

• Ritaglia la tela ai confini della forma ed esporta in PNG. Photoshop genera SVG con involucri e artefatti extra, quindi il PNG come formato intermedio è più affidabile.

Perché il nero invece del colore del sito direttamente? Elementor applica il colore del divisore dalle proprie impostazioni; il riempimento dell'SVG non ha importanza. E una silhouette nera su sfondo bianco produce il vettore più pulito dopo la tracciatura automatica.

Risultato dopo l'elaborazione in Photoshop:

Convertire PNG in SVG

Successivamente, hai bisogno di un vettore pulito. Usa il convertitore online pngtosvg.com; non richiede registrazione e gestisce forme a colore singolo senza rumore inutile nel codice.

Carica il PNG e imposta i parametri:

• Massima semplificazione, un colore. Questo rimuove le curve "spazzatura" e mantiene l'SVG compatto.

• Numero di colori: 1 (o 2 se hai bisogno di uno sfondo trasparente; in tal caso, imposta il secondo colore come trasparente).

Scarica l'SVG risultante e aprilo in un editor di codice: Notepad++, VS Code o un editor di testo semplice. Ora segue la pulizia manuale.

Adattare l'SVG ai requisiti di Elementor

Per far sì che il divisore erediti il colore e si ridimensioni correttamente, apporta tre modifiche direttamente nel codice del file:

Aggiungi la classe elementor-shape-fill. Senza di essa, Elementor non può ricolorare l'SVG. Trova il tag <path> o <polygon> e aggiungi l'attributo class="elementor-shape-fill".

Rimuovi width e height. Mantieni solo viewBox e aggiungi preserveAspectRatio="none"; questo permette al divisore di estendersi su tutta la larghezza della sezione. Se gli attributi width/height non sono presenti, lasciali stare e assicurati solo che viewBox ci sia.

Rimuovi tutto il superfluo. Elimina i costrutti <?xml...>, <!DOCTYPE...> e qualsiasi intestazione XML al di fuori del tag <svg>. Mantieni solo il codice pulito all'interno di <svg>...</svg>; Elementor analizza tali file in modo più affidabile.

L'SVG finale dovrebbe apparire approssimativamente così:

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>

Dove posizionare il file SVG

L'approccio più rozzo e comune è la cartella /wp-content/plugins/elementor/assets/shapes/. Funziona esattamente fino al primo aggiornamento automatico di Elementor, che sovrascrive silenziosamente il contenuto della cartella del plugin insieme al tuo file.

L'approccio corretto è un child theme. Crea al suo interno una cartella assets/shapes/ e posiziona lì l'SVG:

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

Quasi tutti i temi moderni (Hello Elementor, GeneratePress, Astra, Kadence) supportano i child theme. Se non ne hai uno, crealo: nella root del tema ti servono solo un style.css con un'intestazione /* Theme Name: My Child Theme Template: parent-theme */ e un functions.php.

Un'alternativa è un plugin personalizzato. Ma per uno o due divisori, un child theme è più semplice e non crea entità extra.

Codice per registrare il divisore

Nel file functions.php del child theme (o tramite il plugin Code Snippets), aggiungi il seguente codice:

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
} );

Scomposizione dei punti chiave:

• title: il nome del divisore nel menu a tendina dell'editor. Scrivi in caratteri latini; è un identificatore interno visualizzato così com'è nell'interfaccia.
• url: l'URL pubblico del file, usato per l'anteprima nell'editor. get_stylesheet_directory_uri() punta alla cartella del child theme.
• path: il percorso server del file. Necessario per il rendering lato server e alcuni controlli.
• has_flip: abilita il capovolgimento verticale del divisore (il pulsante Flip nell'editor).
• has_negative: necessario se hai due file: shape.svg (diretto) e shape-negative.svg (con colori invertiti). Se non c'è un negativo, impostalo su false.
• height_only: quando è true, Elementor permette di cambiare solo l'altezza del divisore; quando è false, si può cambiare anche la larghezza.

La differenza fondamentale rispetto alle istruzioni che circolano nei forum: la presenza di url e path è obbligatoria. Senza di essi, il divisore non verrà renderizzato; Elementor semplicemente non troverà il file.

Nota importante sull'ID del divisore

L'identificatore shape-custom-wave (la chiave dell'array) deve essere unico. Se un altro plugin registra un divisore con la stessa chiave, il tuo verrà sovrascritto. Usa sempre un prefisso: ad esempio, mytheme-wave-1 invece del semplice wave.

Test nell'editor

Dopo aver aggiunto il codice, apri una pagina qualsiasi nell'editor di Elementor, seleziona una sezione e vai alla scheda Stile → Divisore di forma. Il tuo divisore dovrebbe apparire nel menu a tendina sotto quelli standard.

Testa tre scenari:

• Colore: cambia il colore del divisore nelle impostazioni. L'SVG dovrebbe essere ricolorato. In caso contrario, verifica la presenza di class="elementor-shape-fill" nel file.
• Altezza: regola l'altezza con il cursore. Il divisore dovrebbe ridimensionarsi senza distorsioni.
• Capovolgimento: se has_flip è abilitato, il pulsante di capovolgimento dovrebbe essere attivo.

Se non appare affatto, controlla prima l'URL: apri get_stylesheet_directory_uri() . '/assets/shapes/shape-custom.svg' nel browser. Dovrebbe mostrare codice SVG pulito, non un 404.

Guarda l'intero processo dal mockup al divisore funzionante in tempo reale; in questo video l'autore percorre l'intero tragitto, incluse le sfumature con preserveAspectRatio e il debug dei percorsi interrotti:

⁉️🤔 Domande frequenti

Il divisore personalizzato scomparirà quando Elementor viene aggiornato?

No, se l'SVG si trova in un child theme o in un plugin personalizzato. Gli aggiornamenti di Elementor sovrascrivono solo la propria cartella /wp-content/plugins/elementor/. I file del tema non vengono toccati. Tuttavia, se hai posizionato l'SVG in /wp-content/plugins/elementor/assets/shapes/, verrà eliminato al primo aggiornamento automatico.

Posso creare un divisore con un gradiente?

Non direttamente tramite le impostazioni di Elementor; lì sono disponibili solo colori solidi. Ma puoi definire un gradiente direttamente nell'SVG, all'interno di <defs> e <linearGradient>. In tal caso, Elementor non ricolorerà la forma (non aggiungere la classe elementor-shape-fill a quel percorso) e il divisore verrà visualizzato con il gradiente "predefinito".

Perché il divisore non appare nell'editor anche se non ci sono errori nel codice?

Le tre cause più comuni: url/path dimenticati nell'array di registrazione, un percorso file errato (verifica l'accesso diretto all'URL) o la mancanza della classe elementor-shape-fill nell'SVG; senza di essa, Elementor salta silenziosamente il divisore.

Photoshop è obbligatorio?

No, qualsiasi editor raster va bene: GIMP, Figma (esporta in PNG), Photopea, persino Paint.NET. La chiave è ottenere una silhouette nera pulita su sfondo trasparente o bianco prima di convertirla in SVG. La tracciatura stessa non viene eseguita nell'editor, ma tramite pngtosvg o uno strumento simile.

Quanti divisori personalizzati posso aggiungere?

Non c'è un limite di quantità; registrane quanti te ne servono nella stessa chiamata add_filter. Ognuno con la propria chiave, percorso e impostazioni. Il limite pratico è la comodità: più di 10-15 divisori in un menu a tendina diventano scomodi da cercare.

Vale la pena creare un divisore di forma personalizzato

Se il progetto è una tantum e l'"onda" standard è sufficiente, non ne vale la pena. Le 26 forme integrate di Elementor coprono la maggior parte dei layout tipici e il tempo speso per preparare l'SVG e fare debug del codice è meglio investito nei contenuti.

Ma quando il design richiede una corrispondenza esatta con il mockup, o hai una serie di siti con la stessa transizione brandizzata tra le sezioni, un divisore personalizzato si ripaga dal primo utilizzo. Lo aggiungi una volta tramite il child theme e diventa disponibile su tutte le pagine della rete senza alcuna seccatura.

Il punto principale: **non posizionare l'SVG nella cartella del plugin, specifica sempre url e path nel filtro e non dimenticare **elementor-shape-fill. Questi tre punti sono la radice della maggior parte dei problemi che emergono nei thread dei forum e nelle issue su GitHub.