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

Pubblicato: 2023-04-04


Vuoi aggiungere divisori di forma personalizzati al tuo sito Web WordPress?

I divisori di forma possono organizzare i tuoi contenuti in modo accattivante e accattivante. Possono anche evidenziare i contenuti più importanti del tuo sito, in modo che visitatori e clienti non perdano informazioni cruciali.

In questo articolo, ti mostreremo come creare un divisore di forme personalizzato in WordPress.

How to create a custom shape divider in WordPress

Perché creare un divisore di forme personalizzato in 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 blocchi WordPress incorporati.

A custom shape divider, created using the built-in WordPress tools

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

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

A custom shape divider, created using SeedProd

Un divisore di forme dall'aspetto professionale può anche rendere una pagina più interessante e coinvolgente.

Ad esempio, potresti utilizzarli per creare uno sfondo unico per il modulo di iscrizione alla newsletter via e-mail.

How to create a custom shape divider using SeedProd

Detto questo, vediamo come creare un divisore di forme personalizzato in WordPress. Utilizza semplicemente i collegamenti rapidi di seguito per passare direttamente al metodo che desideri utilizzare.

Metodo 1. Crea un semplice divisore di forme (nessun plug-in richiesto)

Il modo più semplice per aggiungere un divisore di forma personalizzato a WordPress è utilizzare il blocco separatore integrato.

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

A custom divider created using the WordPress block editor

Questo metodo non ti consente di aggiungere forme diverse a WordPress e ha impostazioni di personalizzazione limitate. Tuttavia, non sarà necessario installare un plug-in 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. Quindi, fai clic sul pulsante "+" nel punto in cui desideri posizionare il divisore.

Adding a Separator block to WordPress

Nel popup, digita "Separatore".

Quando viene visualizzato il blocco giusto, fai clic per aggiungerlo alla pagina o al post.

Add a custom shape divider to a WordPress website

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 punti utilizzando i pulsanti nella sezione "Stili".

Adding different line styles in WordPress

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

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

How to style the Separator block in WordPress

Quando sei soddisfatto dell'aspetto del divisore, puoi fare clic sul pulsante "Pubblica" o "Aggiorna" per rendere attivo il divisore di forme.

Metodo 2. Crea un divisore di forme personalizzato in WordPress utilizzando un generatore di pagine (consigliato)

Se stai cercando di utilizzare forme diverse e personalizzare ogni parte dei tuoi divisori, ti consigliamo di utilizzare il plug-in SeedProd.

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

Creating a custom shape divider in WordPress

Inoltre viene fornito con oltre 180 modelli progettati professionalmente e più di 90 blocchi che puoi utilizzare per creare splendide home page personalizzate, pagine di destinazione e altro ancora.

Nota: è disponibile una versione gratuita di SeedProd su WordPress.org, ma utilizzeremo la versione Pro poiché include un'ampia gamma di divisori di forme.

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

Dopo l'attivazione, è necessario inserire la chiave di licenza.

Adding a license key to the SeedProd page builder

Puoi trovare queste informazioni sotto il tuo account sul sito web di SeedProd. Dopo aver inserito la chiave di licenza, fare clic sul pulsante "Verifica chiave".

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

How to create a new landing page design using SeedProd

Successivamente, è il momento di scegliere un modello di design della pagina. SeedProd ha un sacco di modelli progettati professionalmente che puoi mettere a punto per adattarli perfettamente al tuo sito Web WordPress.

Per selezionare un modello, passaci sopra con il mouse e fai clic sull'icona "Segno di spunta".

Choosing a page design template for your WordPress website

Quindi, vai avanti e digita un nome per la pagina. SeedProd creerà automaticamente un URL basato sul titolo della pagina, ma puoi cambiare l'URL in qualsiasi cosa tu voglia.

Ad esempio, potresti voler aggiungere alcune parole chiave pertinenti, che aiuteranno i motori di ricerca a capire di cosa tratta la pagina e potrebbero migliorare il SEO di WordPress.

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

Creating a custom landing page using SeedProd

Successivamente, verrai indirizzato al generatore di pagine drag-and-drop, pronto per personalizzare il modello.

L'editor SeedProd mostra un'anteprima dal vivo del tuo progetto a destra e alcune impostazioni del blocco a sinistra.

The SeedProd drag and drop page builder

Il menu a sinistra ha 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, il modulo di contatto, i pulsanti di condivisione sui social e altro ancora.

Adding blocks to a WordPress page builder

Per personalizzare un blocco, basta fare clic per selezionarlo nel layout.

Il menu a sinistra mostrerà quindi tutte le impostazioni che puoi utilizzare per configurare quel blocco. Puoi anche modificare i colori di sfondo della pagina, aggiungere immagini di sfondo o modificare la combinazione di colori e i caratteri per adattarli meglio al tuo marchio.

Customizing the background color in WordPress

SeedProd viene fornito anche con "Sezioni", che sono raccolte di blocchi che vengono spesso utilizzati insieme. Ad esempio, SeedProd ha una sezione di intestazione, un'immagine dell'eroe, un invito all'azione, testimonianze dei clienti, domande frequenti, funzionalità, sezioni a piè di pagina e altro ancora.

Per consultare le diverse sezioni, è sufficiente fare clic sulla scheda "Sezioni".

Adding a Section to a custom page template

Puoi spostare sezioni e blocchi all'interno del layout utilizzando il trascinamento della selezione.

Se desideri eliminare un blocco, passaci sopra con il mouse e fai clic sull'icona del cestino quando appare.

Deleting blocks from a custom page design

Indipendentemente dal fatto che tu scelga o meno di utilizzare una sezione SeedProd, ora puoi creare un divisore di forme personalizzato. È sufficiente fare clic per selezionare la sezione, la riga o la colonna in cui si desidera aggiungere il divisore.

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

SeedProd's 'Advanced' settings

Ora, fai clic per espandere la sezione "Divisore forma".

Per iniziare, puoi scegliere dove mostrare il divisore di forma selezionando il pulsante "In alto" o "In basso".

Adding a custom divider to the bottom of a WordPress block

Ora puoi aprire il menu "Tipo" e scegliere il divisore di forme che desideri utilizzare.

Man mano che selezioni forme diverse, l'anteprima dal vivo si aggiornerà automaticamente in modo da poter provare diversi stili per vedere quale sembra il migliore.

Adding custom shape dividers to a custom landing page

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

Per iniziare, puoi fare clic su "Colore" e quindi scegliere un nuovo colore dal popup che appare.

Adding a color to a custom shape divider in WordPress

Fatto ciò, puoi ingrandire o ridurre il divisore trascinando i cursori "Larghezza" e "Altezza".

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

Create a custom shape divider in WordPress

Puoi anche provare a capovolgere il divisore facendo clic per abilitare o disabilitare l'interruttore "Capovolgi".

Per impostazione predefinita, il divisore verrà visualizzato dietro il resto del contenuto, in modo che gli utenti possano vedere chiaramente qualsiasi testo, immagine o altro contenuto che si sovrappone 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 "Porta in primo piano".

Bringing the custom shape divider to the front

Per aggiungere più divisori è sufficiente seguire lo stesso procedimento sopra descritto.

Puoi persino aggiungere un divisore di forma nella parte superiore e inferiore di un'area, che spesso crea risultati impressionanti e accattivanti.

Adding multiple custom shape dividers to a single section

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

Quando sei soddisfatto dell'aspetto della pagina, fai clic sul pulsante "Salva". Puoi quindi selezionare "Pubblica" per pubblicare quella pagina.

Publishing a custom shape divider

Come aggiungere divisori di forme a un tema WordPress

L'editor drag-and-drop di SeedProd ti dà 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 o persino su tutto il tuo blog o sito Web WordPress.

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 forme al tuo tema utilizzando il generatore di temi SeedProd.

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

The SeedProd theme builder

È quindi possibile 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 usando SeedProd, questo sovrascriverà il tuo tema WordPress esistente, quindi dovresti usare questo metodo solo se vuoi sostituire il tuo tema attuale.

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

Speriamo che questo tutorial ti abbia aiutato a imparare come creare un divisore di forme personalizzato in WordPress. Potresti anche voler imparare come aumentare il traffico del tuo blog o consultare la nostra selezione esperta dei migliori plug-in di prova sociale per WordPress.

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