Come creare un divisore di forma personalizzato in WordPress (2 modi)

Hai mai notato come alcuni siti web sembrino più coinvolgenti da scorrere? Spesso c'è un sottile elemento di design al lavoro: divisori di forma che creano transizioni fluide e scorrevoli tra diverse sezioni.

Queste linee curve, angolate o a zigzag potrebbero sembrare un piccolo dettaglio, ma fanno una grande differenza in quanto professionale e moderno appare il tuo sito.

Inoltre, aiutano a spezzare il contenuto in modo naturale e a guidare gli occhi dei tuoi visitatori esattamente dove vuoi che vadano.

Dopo aver testato diverse opzioni per trovare i metodi più affidabili, li abbiamo ridotti a due che offrono costantemente ottimi risultati.

Oggi ti guideremo attraverso questi due semplici approcci: utilizzando il metodo predefinito di WordPress e SeedProd.

Perché aggiungere divisori di forma personalizzati al tuo sito WordPress?

Un divisore di forma è un tipo di divisore di sezione che aggiungi tra blocchi di contenuto.

Questi divisori possono essere semplici, come una linea orizzontale creata con i blocchi WordPress integrati.

Puoi utilizzare questi divisori di base per organizzare e separare il contenuto, il che è particolarmente utile nelle pagine che trattano molti argomenti diversi.

Puoi anche creare divisori di forma più avanzati utilizzando plugin per page builder e altri software di web design. Questi possono evidenziare i contenuti più importanti del tuo sito in modo che risaltino per visitatori e clienti.

L'introduzione di divisori di forma dall'aspetto professionale può anche rendere le tue pagine più interessanti e coinvolgenti.

Ad esempio, potresti usarli per creare uno sfondo unico per il tuo modulo di iscrizione alla newsletter via email.

Detto questo, vediamo come puoi creare un divisore di forme personalizzato in WordPress. Usa semplicemente i collegamenti rapidi qui sotto per passare direttamente al metodo che desideri utilizzare:

• Metodo 1: Crea un semplice divisore di forme nell'editor a blocchi (nessun plugin richiesto)
• Metodo 2: Crea un divisore di forme personalizzato in WordPress utilizzando un page builder (consigliato)
• Frequently Answered Questions: Custom Shape Dividers

Metodo 1: Crea un semplice divisore di forme nell'editor a blocchi (nessun plugin richiesto)

Il modo più semplice per aggiungere un divisore di forme WordPress è utilizzare il blocco Separatore integrato.

Questo metodo ti consente di aggiungere un separatore di linea orizzontale tra qualsiasi blocco WordPress e quindi personalizzare il colore e lo stile della linea.

Questo metodo non ti consente di aggiungere forme diverse a WordPress e ha impostazioni di personalizzazione limitate. Tuttavia, non avrai bisogno di installare un plugin WordPress aggiuntivo, quindi questo è il modo più semplice per aggiungere un semplice divisore di forme al tuo sito web.

Per iniziare, apri semplicemente il post o la pagina in cui desideri aggiungere un divisore orizzontale nell'editor di contenuti Gutenberg. Quindi, fai clic sul pulsante '+' dove desideri posizionare quel divisore.

Nel popup, digita 'Separatore'.

Quando appare il blocco corretto, fai clic per aggiungerlo alla pagina o al post.

Per personalizzare il blocco Separatore predefinito, fai clic su di esso e quindi utilizza le impostazioni nel menu a destra.

Puoi passare da predefinito, linea larga e puntini utilizzando i pulsanti nella sezione 'Stili'.

Puoi anche cambiare il colore della linea in modo che corrisponda al resto del tuo tema o del tuo marchio.

Per fare ciò, fai clic su 'Sfondo' e quindi scegli un colore dal popup che appare.

Inoltre, puoi regolare il margine del separatore.

Maggiore è il margine, maggiore sarà lo spazio tra i blocchi separati.

Quando sarai soddisfatto dell'aspetto del divisore, potrai fare clic sul pulsante ‘Pubblica’ o ‘Aggiorna’ per rendere attiva la funzionalità del divisore di forme.

Metodo 2: Crea un divisore di forme personalizzato in WordPress utilizzando un page builder (consigliato)

Se desideri utilizzare una forma diversa e personalizzare ogni parte dei tuoi divisori, ti consigliamo di utilizzare il plugin SeedProd.

SeedProd è il miglior plugin per la creazione di pagine WordPress sul mercato e ti consente di aggiungere un divisore di forme personalizzato a qualsiasi sezione, riga o colonna utilizzando un semplice editor drag-and-drop.

Abbiamo testato a fondo questo strumento nel nostro ambiente demo e lo abbiamo trovato incredibilmente intuitivo e facile da usare per i principianti. La creazione di pagine è risultata senza sforzo, specialmente per i nuovi utenti. Puoi saperne di più su ciò che abbiamo scoperto nella nostra recensione completa.

SeedProd dispone anche di oltre 300 modelli progettati professionalmente e più di 90 blocchi che puoi utilizzare per creare bellissime homepage personalizzate, landing page e altro ancora.

La prima cosa da fare è installare e attivare il plugin SeedProd. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.

Dopo l'attivazione, devi inserire la tua chiave di licenza.

Puoi trovare queste informazioni nel tuo account sul sito web di SeedProd. Dopo aver inserito la chiave di licenza, fai clic sul pulsante ‘Verifica chiave’.

Fatto ciò, vai su SeedProd » Pagine e fai clic sul pulsante ‘Aggiungi nuova pagina di destinazione’.

Dopodiché, è ora di scegliere un modello di pagina. SeedProd dispone di una tonnellata di modelli di design professionali per siti web che puoi perfezionare per adattarli perfettamente al tuo sito web WordPress.

Per selezionare un modello, passa semplicemente il mouse sopra di esso e fai clic sull’icona del ‘Segno di spunta’.

Successivamente, digita un nome per la pagina. SeedProd creerà automaticamente un URL basato sul titolo della pagina, ma puoi modificare l'URL come preferisci.

Quando sei soddisfatto delle informazioni che hai inserito, fai clic sul pulsante ‘Salva e inizia a modificare la pagina’.

Successivamente, verrai portato all'editor di pagine drag-and-drop, pronto per personalizzare il modello.

L'editor di SeedProd mostra un'anteprima live del tuo design sulla destra e alcune impostazioni dei blocchi sulla sinistra.

Il menu di sinistra contiene anche blocchi che puoi trascinare sul tuo layout.

Ad esempio, puoi trascinare e rilasciare blocchi standard come pulsanti e immagini o utilizzare blocchi avanzati come il conto alla rovescia, pulsanti di condivisione sui social media e altro ancora.

Per personalizzare un blocco, fai semplicemente clic per selezionarlo nel tuo layout.

Il menu a sinistra mostrerà quindi tutte le impostazioni che puoi utilizzare per configurare quel blocco. Puoi anche cambiare i colori di sfondo della pagina, aggiungere immagini di sfondo o cambiare lo schema di colori e i font per abbinarli meglio al tuo brand.

SeedProd include anche le ‘Sezioni’, che sono raccolte di blocchi spesso utilizzati insieme. Ad esempio, SeedProd ha una sezione intestazione, immagine hero, call to action, testimonianze dei clienti, funzionalità, sezioni piè di pagina e altro ancora.

Per esaminare le diverse sezioni, fai semplicemente clic sulla scheda ‘Sezioni’.

Puoi spostare sezioni e blocchi nel tuo layout utilizzando il drag and drop.

Se desideri eliminare un blocco, posiziona il cursore del mouse su di esso e fai clic sull'icona del cestino quando appare.

Indipendentemente dal fatto che tu scelga di utilizzare una sezione SeedProd o meno, ora puoi creare un divisore di forma personalizzato. Fai semplicemente clic per selezionare la sezione, la riga o la colonna in cui desideri aggiungere il divisore.

Quindi, fai clic sulla scheda ‘Avanzate’ nel menu a sinistra.

Ora, fai clic per espandere la sezione ‘Shape Divider’.

Per iniziare, puoi scegliere dove mostrare il divisore di forma selezionando il pulsante ‘Top’ o ‘Bottom’.

Ora puoi aprire il menu ‘Type’ e scegliere il divisore di forma che desideri utilizzare.

Man mano che selezioni forme diverse, l'anteprima live si aggiornerà automaticamente in modo da poter provare diversi stili per vedere quale ha un aspetto migliore.

Dopo aver scelto un divisore di forma, puoi stilizzarlo utilizzando le nuove impostazioni.

Per iniziare, puoi fare clic su ‘Color’ e quindi scegliere un nuovo colore dal popup che appare.

Fatto ciò, puoi rendere il divisore più grande o più piccolo trascinando i cursori ‘Width’ e ‘Height’.

Se hai già una dimensione specifica in mente, puoi digitare quei numeri nelle caselle.

Puoi anche provare a capovolgere il divisore facendo clic per abilitare o disabilitare l'interruttore ‘Flip’.

Per impostazione predefinita, il divisore apparirà dietro il resto del contenuto, in modo che gli utenti possano vedere chiaramente testo, immagini o altri contenuti che si sovrappongono al divisore.

Tuttavia, spostare la forma in primo piano può creare alcuni effetti interessanti. Se vuoi vedere come appare, fai semplicemente clic per abilitare l'interruttore ‘Bring to Front’.

Per aggiungere altri divisori, segui semplicemente lo stesso processo descritto sopra.

Puoi persino aggiungere un divisore di forma in alto e in basso di un'area, il che spesso crea risultati impressionanti e accattivanti.

Puoi continuare a lavorare sulla pagina aggiungendo altri blocchi e personalizzando tali blocchi nel menu a sinistra.

Quando sei soddisfatto dell'aspetto della pagina, fai clic sul pulsante ‘Save’. Puoi quindi selezionare ‘Publish’ per rendere la pagina live.

Come aggiungere divisori di forma a un tema WordPress

L'editor drag-and-drop di SeedProd ti offre la libertà di aggiungere un divisore di forma unico a qualsiasi pagina. Tuttavia, a volte potresti voler utilizzare gli stessi divisori di forma su più pagine web o persino sul tuo intero blog WordPress o sito web.

Questo ti aiuterà a creare un design coerente e può anche farti risparmiare un sacco di tempo. In questo caso, ti consigliamo di aggiungere un divisore di forma al tuo tema utilizzando il tema builder di SeedProd.

Con SeedProd, puoi creare e personalizzare un tema WordPress senza scrivere codice. Crea tutti i file che compongono il tuo tema, inclusi la barra laterale, l'intestazione, il piè di pagina, i singoli post e altro ancora.

Puoi quindi personalizzare questi file utilizzando il familiare builder drag-and-drop. Ciò include l'aggiunta di divisori di forma seguendo lo stesso processo descritto sopra.

Quando attivi il nuovo tema utilizzando SeedProd, sovrascriverà il tuo tema WordPress esistente, quindi dovresti usare questo metodo solo se vuoi sostituire il tuo tema attuale.

Per istruzioni dettagliate passo dopo passo, consulta la nostra guida su come creare facilmente un tema WordPress personalizzato.

Domande frequenti: Divisori di forma personalizzati

Ecco alcune domande frequenti poste dai nostri lettori sulla creazione di un divisore di forma personalizzato:

I divisori di forma influenzeranno la velocità del mio sito?

In generale, i divisori di forma non hanno un impatto significativo sulle prestazioni, soprattutto se sono creati utilizzando puro CSS o SeedProd. Sono leggeri e si caricano velocemente nel browser.

Tuttavia, se li usi eccessivamente o ti affidi a file immagine, ciò potrebbe aumentare leggermente i tempi di caricamento. Per mantenere il tuo sito veloce:

• Usa plugin minimi.
• Preferisci SVG rispetto a file immagine di grandi dimensioni.
• Evita di sovrapporre troppi effetti in una sezione.

Bilanciare design e velocità è fondamentale per un'esperienza utente fluida.

Come posso assicurarmi che i miei divisori di forma siano belli su mobile?

Il design reattivo è super importante. Se stai usando un page builder, la maggior parte ti permetterà di regolare la visibilità, l'altezza e l'orientamento del divisore di forma separatamente per desktop, tablet e mobile.

Ecco alcuni suggerimenti:

• Testa i tuoi divisori di forma su diverse dimensioni dello schermo. SeedProd lo rende facile permettendoti di visualizzare in anteprima come appare il tuo design su mobile direttamente all'interno del builder drag-and-drop.
• Usa forme più piccole o semplificate su mobile.
• Evita forme che rendono il testo difficile da leggere o che sovrappongono contenuti importanti.

Strumenti come SeedProd forniscono controlli reattivi che ti permettono di modificare facilmente ogni versione del tuo sito.

Dove posso trovare SVG di divisori di forma già pronti?

Ci sono molte risorse gratuite dove puoi scaricare divisori di forma SVG pre-progettati. Questi funzionano benissimo se desideri qualcosa di personalizzato senza dover progettare da zero.

Ecco alcune opzioni:

• Haikei – Generatore SVG gratuito per forme uniche e personalizzabili.
• ShapeDividers.com – Offre vari divisori SVG che puoi copiare e incollare.

Una volta scaricato l'SVG, puoi incollarlo in un blocco HTML personalizzato o includerlo nei file del tuo tema, a seconda della tua configurazione.

Scopri altri suggerimenti e trucchi per il design di WordPress

Vuoi aggiungere altre funzionalità di design che impressionino i visitatori del tuo sito web? Dai un'occhiata a questi suggerimenti e trucchi per il design di WordPress per maggiori informazioni:

• Come aggiungere un effetto parallasse a qualsiasi tema WordPress
• Come creare una barra a piè di pagina "sticky" (fluttuante) in WordPress
• Guida per principianti alla creazione di un menu WordPress reattivo pronto per dispositivi mobili
• Come aggiungere un'animazione di precaricamento a WordPress (Passo dopo passo)
• Come aggiungere drop cap negli articoli di WordPress
• Guida per principianti all'aggiunta della modalità scura al tuo sito WordPress (Facile)
• Come aggiungere uno sfondo animato in WordPress

Speriamo che questo tutorial ti abbia aiutato a imparare come creare un divisore di forme personalizzato in WordPress. Potresti anche voler imparare come aggiungere caselle di funzionalità con icone in WordPress e i nostri consigli esperti su modi per creare un sito web WordPress ottimizzato per dispositivi mobili.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.