Come aggiungere un separatore di linee orizzontali in WordPress (3 metodi)

L’aggiunta di una linea orizzontale alla vostra pagina o post di WordPress è un modo efficace per migliorare la leggibilità. Queste linee aiutano a suddividere le pubblicazioni più lunghe in sezioni gestibili, assicurando che i contenuti rimangano coinvolgenti.

I divisori orizzontali sono perfetti anche per attirare l’attenzione su annunci o promozioni importanti. Separano in modo netto le diverse parti della pagina, rendendo più facile per i lettori seguirla.

In questa guida vi illustreremo 3 semplici metodi per aggiungere separatori a linee orizzontali in WordPress. Condivideremo anche alcune alternative di separatori di linee orizzontali.

Perché aggiungere un separatore di linee orizzontali in WordPress?

I visitatori impiegano solo pochi secondi per decidere se abbandonare la pagina. A seconda del dispositivo, i browser potrebbero visualizzare i blog come lunghi muri di testo.

Molti lettori se ne andranno se il contenuto è troppo difficile da leggere, anche se l’articolo del blog è ricco di valore.

L’aggiunta di un separatore di linee orizzontali potrebbe essere tutto ciò che serve per rendere leggibili i contenuti.

Un separatore di linee orizzontali può contribuire a migliorare la leggibilità e, in ultima analisi, ad aumentare l’engagement degli utenti nelle pagine e nei post dei blog. Inoltre, può evidenziare i punti chiave, aiutando a sottolineare citazioni o transizioni importanti all’interno del contenuto.

Poiché questa è una guida completa su come aggiungere una linea divisoria orizzontale in WordPress, potrebbe essere utile utilizzare il nostro indice per trovare il metodo che si desidera utilizzare:

Pronti? Entriamo nel vivo.

Metodo 1: Aggiunta di una linea orizzontale nell’editor a blocchi di WordPress

Per aggiungere una linea orizzontale utilizzando l’editor a blocchi di WordPress, si può fare clic sull’icona ‘+’ per aggiungere un nuovo blocco nel punto in cui si desidera la linea.

Quindi, selezioniamo il blocco ‘Separatore’ dalla sezione ‘Elementi di layout’.

È possibile trovarlo facilmente utilizzando la barra di ricerca.

Una volta aggiunto, si vedrà il divisore a linee orizzontali nell’area dei contenuti.

Stilizzazione della linea orizzontale nell’editor di blocchi di WordPress

Per impostazione predefinita, il divisore orizzontale è una linea grigio chiaro che attraversa il centro del post o della pagina.

È possibile modificarne l’aspetto facendo clic sulla riga per selezionarne il blocco. A questo punto si aprirà il pannello di modifica “Blocco” sul lato destro dello schermo.

Per modificare lo stile della linea, fare clic sulla piccola freccia accanto a Stili. Verranno quindi visualizzate le diverse opzioni.

Se si desidera, è possibile cambiare la linea orizzontale in una di queste:

• Una linea ampia che copre l’intera larghezza del contenuto del post.
• Al centro del post vengono visualizzati tre punti.

È inoltre possibile modificare il colore della linea orizzontale nelle impostazioni “Colore”. È sufficiente cliccare su una delle opzioni visualizzate o utilizzare il link ‘Colore personalizzato’ per scegliere un colore qualsiasi.

Se si desidera tornare al colore grigio predefinito, è sufficiente fare clic sul pulsante “Cancella” sotto le opzioni di colore.

In questo caso, la linea orizzontale è blu e utilizza lo stile “largo”.

Metodo 2: Aggiunta di una linea orizzontale nell’Editor classico di WordPress

Se si utilizza ancora il Classic Editor, non c’è da preoccuparsi: è ancora possibile aggiungere linee orizzontali di base.

Per farlo, basta modificare una pubblicazione o una pagina esistente o crearne una nuova. Se si vede solo una fila di pulsanti nella barra degli strumenti sopra l’editor dei post, cliccare sull’icona Attiva/disattiva della barra degli strumenti a destra:

Si aprirà la seconda fila di pulsanti, che include l’opzione linea orizzontale.

A questo punto, si inserisce un’interruzione di riga tra i paragrafi nel punto in cui si desidera inserire la linea orizzontale. Si può quindi fare clic sull’icona ‘Linea orizzontale’. È la seconda da sinistra nella seconda riga:

Una volta aggiunta, si vedrà una linea orizzontale di colore grigio chiaro.

Copre l’intera larghezza del post in questo modo:

Aggiungere manualmente un divisore a linee orizzontali utilizzando l’HTML

In alcuni rari casi, potrebbe essere necessario aggiungere manualmente una linea divisoria orizzontale nel contenuto di WordPress.

In tal caso, è sufficiente utilizzare il tag HTML hr nel contenuto:

<hr>

Questo aggiungerà il separatore di linee orizzontali al contenuto del post.

Metodo 3: Aggiungere un’interruzione di pagina nei moduli di WordPress usando WPForms

E se voleste inserire un’interruzione non in una pagina o in un post, ma in un modulo di contatto di WordPress? Potete fare anche questo!

Per questo useremo WPForms.

Per prima cosa, dovrete scaricare, installare e attivare il plugin WPForms. Se non sapete come fare, consultate la nostra guida passo passo su come installare un plugin di WordPress.

Successivamente, si può andare su WPForms ” Aggiungi nuovo dalla dashboard di WordPress.

Nella schermata successiva, si inserisce un nome per il modulo e si sceglie un template.

Per questa esercitazione, utilizzeremo il template“Modulo di richiesta di preventivo“.

Dopo aver scelto un template, è sufficiente passare il cursore del mouse sul template e fare clic sul pulsante per creare il modulo.

Scorriamo poi la scheda “Add Fields” sul lato sinistro fino alla sezione “Fancy Fields”.

Quindi, è possibile trascinare e rilasciare l’interruzione di pagina in qualsiasi punto del modulo. Noi la collochiamo subito prima del boxed ‘Richiesta’.

Vedrete che il modulo è ora diviso in due parti. WPForms ha aggiunto automaticamente anche il pulsante “Avanti”.

È possibile modificare l’etichetta “Avanti” e aggiungere un pulsante “Precedente” per consentire agli utenti di passare alla seconda pagina del modulo.

È sufficiente fare clic sul campo dell’interruzione di pagina per modificarlo.

Una volta terminato, è possibile salvare il modulo facendo clic sul pulsante “Salva” in alto a destra.

Ora è il momento di aggiungere il modulo al sito web.

Per iniziare, fare clic sul pulsante “Incorpora” accanto al pulsante “Salva”. Si aprirà una finestra di richiesta in cui è possibile creare una nuova pagina o un nuovo post o modificarne uno esistente.

Per questa esercitazione, sceglieremo l’opzione “Seleziona pagina esistente”.

Il passo successivo è scegliere tra le pagine disponibili e fare clic su “Let’s Go!”.

Verrete quindi reindirizzati all’editor di contenuti di WordPress.

Da qui, basta fare clic sull’icona ‘+’ per aggiungere un nuovo blocco alla propria pagina o post e trovare il blocco ‘WPForms’. Potete usare la barra di ricerca o cercare nella sezione ‘Widget’.

Una volta trovato, fare clic su di esso per add-on il blocco alla pagina.

A questo punto, verrà visualizzata un’opzione per selezionare il modulo.

Scegliere il modulo appena creato dal menu a discesa.

Una volta fatto questo, potete pubblicare la pagina o il post. E questo è tutto!

Ora, se si visita la pagina o il post, si può vedere il modulo in azione.

Suggerimento bonus: Altri separatori da usare nelle pagine e nelle pubblicazioni

L’editor a blocchi predefinito di WordPress consente di aggiungere diversi tipi di separatori ai post / tipi di contenuto delle pagine.

A lato del separatore di linee orizzontali, le altre opzioni della serie di blocchi “Elementi di layout” includono i blocchi “Distanziatore”, “Altro” e “Interruzione di pagina”.

Il blocco distanziatore

Il blocco “Distanziatore” consente di aggiungere uno spazio bianco tra i blocchi. Ad esempio, se si desidera un leggero spazio alla fine della pubblicazione prima di un’offerta speciale, si può usare il blocco “Spacer”.

Ecco come appare quando si crea il post nell’editor dei blocchi:

È possibile personalizzare l’altezza dello spaziatore per adattarlo meglio all’area dei contenuti.

Ecco come potrebbe apparire lo spaziatore sul vostro sito:

Il blocco More

Se il tema mostra i post completi sulla pagina principale del blog anziché i riassunti, l’aggiunta di un link “Altro” offuscherà la pubblicazione in quel punto.

In questo modo i visitatori dovranno cliccare per leggere tutto.

L’immagine qui sopra mostra ciò che si vedrà nell’editor dei contenuti.

Ecco come potrebbe apparire sul vostro sito ai visitatori:

Per saperne di più, potete consultare le nostre guide su come utilizzare correttamente il blocco more e su come personalizzare facilmente i riassunti in WordPress.

Il blocco dell’interruzione di pagina

L’opzione “Interruzione di pagina” consente di suddividere lunghi blog in più pagine, ma non è possibile personalizzarla in alcun modo. Ecco come appare durante la creazione della pubblicazione:

Poi, “Interruzione di pagina” utilizzerà i numeri di pagina e permetterà ai lettori di scegliere a quale pagina andare.

Ecco come potrebbe apparire sul vostro sito:

A seconda del vostro obiettivo, ognuna di queste potrebbe essere una buona alternativa all’aggiunta di una linea orizzontale in WordPress.

Speriamo che questo tutorial vi abbia aiutato a imparare come aggiungere separatori di linee orizzontali in WordPress. Se volete aggiungere altri elementi di design e layout ai vostri post e alle vostre pagine, date un’occhiata al nostro articolo sui migliori builder di pagine WordPress con trascinamento e rilascio o leggete tutto il nostro blog su come creare un divisore di forma personalizzato in WordPress.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.