Una bella sezione divisoria fa sembrare una pagina più curata in cinque minuti di lavoro. È il modo più economico per dare carattere a un sito: nessuna riprogettazione necessaria, nessun designer, solo una linea vettoriale nel punto giusto.

Il problema è che il set integrato di Elementor diventa presto ripetitivo. Le classiche onde e triangoli di Shape Divider compaiono su ogni altra landing page, e il widget Divider disegna solo una linea retta con un'icona FontAwesome. Tu vuoi ornamenti, motivi botanici o scintille, ed è qui che inizia la ricerca.

Questa raccolta ha tutto ciò che serve per divisori di grande effetto: sei stili SVG pronti all'uso che abbiamo disegnato noi e incluso direttamente nell'articolo, una recensione del plugin SVG Divider for Elementor, un'analisi onesta degli strumenti integrati e un metodo per inserire qualsiasi codice SVG senza alcun plugin.

💡 Panoramica rapida:

• Passo 1: definisci lo stile del divisore per il design del tuo sito, esempi dei sei stili qui sotto nella galleria
• Passo 2: per onde e pendenze di base, attiva lo Shape Divider integrato nelle impostazioni della sezione di Elementor
• Passo 3: per divisori animati disegnati a mano, installa il plugin SVG Divider for Elementor
• Passo 4: per il massimo controllo, copia il codice SVG dall'articolo e inseriscilo tramite il widget HTML

Perché una pagina ha bisogno di divisori e perché proprio SVG

Un divisore risolve tre compiti: separa blocchi semantici, scandisce il ritmo di scorrimento e dirige l'occhio verso la sezione successiva. Un muro di testo senza pause visive è faticoso, il lettore abbandona la pagina prima di arrivare al pulsante.

Il formato SVG è il più adatto a questo compito, e il mercato lo conferma: secondo le statistiche W3Techs su SVG, il formato è usato dal 66,8% di tutti i siti (luglio 2026). Le ragioni sono pratiche. Il vettoriale non perde nitidezza sugli schermi retina o a qualsiasi livello di zoom. Un file con un'intera illustrazione pesa meno di un singolo logo raster. E ogni elemento all'interno dell'SVG, linea, petalo, punto, può essere animato separatamente tramite CSS.

Il pubblico per questo tema è enorme: lo stesso Elementor, secondo il catalogo WordPress.org, è installato su 10 milioni di siti, e WordPress nel suo complesso alimenta il 41,5% di tutti i siti internet (contatore W3Techs, luglio 2026). In altre parole, milioni di pagine usano le stesse onde standard. Distinguersi è facile, e ti mostreremo come fare qui sotto.

Galleria: sei stili di divisori SVG con esempi

Tutti i divisori qui sotto li abbiamo disegnati appositamente per questo articolo e caricati nella libreria media come normali file SVG. La palette è neutra, blu con un accento oro, ogni stile è etichettato in base allo scopo. Usali come riferimento quando scegli il tuo stile o prendi il codice per te: come inserire un SVG in una pagina senza plugin, lo vedremo in una sezione più avanti.

Onda

Lo stile più versatile. Una doppia linea con diversa trasparenza crea profondità, e i punti al centro danno all'occhio un ancoraggio. Adatto quasi ovunque: blog, landing page di servizi, portfolio.

Ornamento classico

Una linea con volute e un diamante al centro, una tecnica presa direttamente dall'impaginazione tipografica. Un divisore del genere richiede una tipografia con grazie: servizi legali, ristoranti di alta cucina, siti per matrimoni, editori.

Motivo botanico

Foglie e bacche su un asse sottile. Uno stile per tutto ciò che è «naturale e fatto a mano»: prodotti ecologici, cosmesi, studi di yoga, prodotti agricoli, articoli artigianali.

Geometria di diamanti

Una catena di diamanti di dimensioni decrescenti. Una variante rigorosa senza una sola linea curva, che non entra in conflitto con la griglia di layout: siti corporate, SaaS, finanza, blog tecnologici.

Doppia linea con medaglione

Il parente più prossimo del widget Divider integrato, ma decisamente più ricercato: una doppia linea di diverso spessore e un medaglione rotondo con una stella. Ottimo come divisore finale prima del footer o della firma dell'autore.

Linea tratteggiata con scintille

Una linea tratteggiata e stelline a quattro punte sparse. Lo stile più "d'atmosfera": promozioni festive, prodotti per bambini, portfolio creativi, landing page di Capodanno.

Cosa sa fare Elementor senza plugin

Prima di installare plugin, conviene sfruttare al massimo gli strumenti integrati. Elementor ne ha due standard, e coprono gli scenari di base.

Shape Divider si trova nelle impostazioni della sezione (scheda Stile). È un bordo sagomato tra le sezioni: onda, pendenza, collina, nuvole, zigzag, circa una dozzina di forme in totale con impostazioni di colore, altezza e capovolgimento, alcune supportano i livelli. Dettagli nella guida Elementor su Shape Divider. Il limite di fondo: è una forma per il bordo della sezione, non un elemento decorativo a sé stante, e non c'è animazione di rivelazione.

Widget Divisore si posiziona tra i blocchi di contenuto: una linea dritta, impostazioni di spessore e colore, opzionalmente un'icona o un testo al centro. Un onesto minimo funzionante. Ma la linea è sempre dritta, le icone sono solo dai set standard, nessuna animazione.

La conclusione è semplice: per un layout aziendale rigoroso, gli strumenti integrati bastano. Per ornamenti, grafiche disegnate a mano e animazioni, serve un plugin o il fai da te. Partiamo da un plugin.

Plugin SVG Divider for Elementor: 90 divisori disegnati a mano

SVG Divider for Elementor di Let's WP studio aggiunge un widget separato con due modalità. Secondo l'annuncio sul blog di Let's WP, il set include 90 design disegnati a mano e una modalità classica con linee e icone, comprese oltre 300 icone dal loro set proprietario più serie tematiche esclusive per siti di viaggi e ristoranti.

La modalità Drawn è il cuore del plugin: illustrazioni ornamentali con animazione di rivelazione, dove ogni petalo e ricciolo ha una sua tempistica. Tutte le animazioni sono scritte in puro CSS senza librerie esterne, nella pagina vengono caricati solo gli stili effettivamente usati. Un layer glitter opzionale aggiunge un luccichio infinito sopra il disegno.

La modalità Classic riprende l'idea del widget Divisore standard, ma in modo più flessibile: linee doppie e tratteggiate con regolazione della distanza tramite slider, icona a sinistra, al centro o a destra, integrazione con il pulsante di Elementor.

La scelta del design avviene tramite un selettore a comparsa proprietario con ricerca live: una griglia di 90 anteprime, l'animazione parte al passaggio del mouse, passare da un'opzione all'altra richiede un paio di secondi. Il plugin è leggero: SVG inline di pochi kilobyte, l'unica dipendenza è jQuery, già caricato dal core di WordPress.

Ora la parte onesta. Il plugin è in vendita sulla pagina del plugin su CodeCanyon con licenza standard per un sito, richiede Elementor 2.8+ e non riceve aggiornamenti significativi dal 2020. La sua architettura è semplice, non c'è quasi nulla che si possa rompere, ma acquistare un prodotto senza supporto attivo resta un rischio che ognuno valuta per sé. Prima di pagare, verificate la demo sulla versione corrente di Elementor.

Come inserire il tuo divisore SVG senza un plugin

Qualsiasi divisore della nostra galleria, come qualsiasi altro SVG, può essere inserito in una pagina gratuitamente in tre passaggi. Il metodo funziona in Elementor, Gutenberg e in generale in qualsiasi builder con un blocco HTML.

Primo passo: prendi il codice SVG. Ecco una versione ridotta della nostra onda, copiala direttamente da qui e cambia i colori per adattarli al tuo brand:

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>

Secondo passo: in Elementor, trascina il widget HTML nella posizione desiderata e incolla il codice. L'SVG inline viene renderizzato all'istante, non crea richieste HTTP ed eredita il ridimensionamento del contenitore. La sintassi di path e shape è ben spiegata nella documentazione MDN su SVG.

Terzo passo, se è più comodo lavorare tramite la libreria media: tieni presente che WordPress di default vieta il caricamento di file SVG. Non è un capriccio, ma sicurezza: uno script eseguibile può annidarsi dentro un SVG, quindi il file va sanificato prima della pubblicazione. Il problema è risolto dal plugin gratuito Safe SVG: pulisce i file al caricamento, dopodiché l'SVG si inserisce con il normale widget Immagine.

La regola di sicurezza è una sola: non caricare SVG da fonti non verificate sul tuo sito senza sanificazione. Il tuo codice e i file di questo articolo sono puliti per costruzione, ci sono solo path e shape.

Confronto: quale metodo scegliere

Due parole sulla riga a metà tabella: Shape Dividers Plus estende lo Shape Divider integrato con nuovi stili di bordo (pennello, geometria, carta), funziona nell'interfaccia nativa ed è aggiornato, l'ultima release è di febbraio 2026. Un modulo simile, Animated Shape Divider, con supporto SVG personalizzato è disponibile anche in Premium Addons. Se ti serve un bordo sagomato per una sezione, parti da queste opzioni, non dall'illustrazione a pagamento.

⁉️🤔 Domande frequenti

Il plugin SVG Divider funziona senza Elementor?

No. È un addon che aggiunge un widget al pannello di Elementor e non funziona senza, non esiste una versione standalone. Il requisito minimo, Elementor 2.8+, è indicato su CodeCanyon. Per siti senza Elementor, usa l'inserimento del tuo codice SVG tramite un blocco HTML.

I divisori SVG rallentano il sito?

Praticamente no. La grafica vettoriale inline viene renderizzata senza richieste HTTP aggiuntive, e il peso del divisore si misura in kilobyte, come conferma il dettaglio dei dati dall'autore del plugin. Le animazioni CSS sfruttano l'accelerazione hardware del browser. Un singolo banner raster pesa di solito più di tutti i divisori della pagina messi insieme.

Perché WordPress non ti lascia caricare SVG nella libreria media?

Per motivi di sicurezza: l'SVG è un documento XML, al cui interno può essere incorporato uno script. Il core blocca questi caricamenti di default. La soluzione, il plugin Safe SVG dal catalogo ufficiale: sanifica i file al caricamento e apre un'anteprima nella libreria media.

Posso usare i divisori della vostra galleria sul mio sito?

Sì, liberamente. Li abbiamo disegnati appositamente per questo articolo: salva il file SVG dalla galleria o copia il codice di esempio dalla sezione sull'inserimento senza plugin e cambia i colori per abbinarli alla tua palette. Non è richiesta attribuzione, non ci sono restrizioni di licenza.

Il plugin non viene aggiornato da diversi anni, vale la pena comprarlo?

Valuta il rischio. L'architettura è semplice, puro CSS più API di Elementor, quindi il plugin continua a funzionare sulle versioni attuali. Ma non c'è supporto attivo, e se il prossimo aggiornamento di Elementor rompe qualcosa, non ci sarà nessuno a sistemarlo. Prova la demo prima di acquistare e tieni pronto un piano B sotto forma del tuo codice SVG.

In cosa Shape Divider differisce dal widget Divider?

Sono due strumenti diversi di Elementor. Shape Divider imposta un bordo sagomato di un'intera sezione (onda, pendenza, nuvole) e si configura nello stile della sezione. Il widget Divider inserisce una linea orizzontale tra blocchi di contenuto, opzionalmente con un'icona. Il primo riguarda la geometria del layout, il secondo una pausa all'interno di una colonna di testo.

💎 Conclusioni e punti chiave

Bei divisori curati sono un upgrade visivo a basso costo, accessibile con qualsiasi budget. Ricetta per scenari: per la geometria di base delle sezioni bastano lo Shape Divider integrato o il plugin gratuito Shape Dividers Plus. Per illustrazioni disegnate a mano con animazione di rivelazione c’è SVG Divider per Elementor, ma acquistatelo tenendo d’occhio gli aggiornamenti fermi. La massima flessibilità la offre il vostro codice SVG tramite un widget HTML: gratuito, senza dipendenze e con il controllo totale su ogni linea.

Consiglio pratico: scegliete uno stile di divisore e usatelo su tutto il sito. Tre decorazioni diverse su una pagina stanno peggio della loro assenza, mentre uno stile che si ripete funziona come elemento di identità del brand.

Prendete il divisore che vi piace dalla galleria, cambiate i colori per allinearli al vostro brand e scrivete nei commenti quale dei sei stili installereste: onda, decorazione o scintille?