Hai mai pubblicato un post sul blog di WordPress che sembrava a posto a prima vista, ma che poi risultava difficile da leggere una volta scorrevano? Lunghi blocchi di testo possono sopraffare i lettori e farli perdere interesse, anche se il contenuto è prezioso.
A volte, tutto ciò che serve è una semplice linea orizzontale per migliorare il flusso del contenuto. Questi divisori spezzano il testo in modo che sembri più organizzato e facile da seguire. Aiutano anche a evidenziare annunci importanti, promozioni o transizioni tra sezioni in modo naturale.
In questo tutorial, ti guideremo attraverso tre semplici modi per aggiungere separatori a linea orizzontale in WordPress.
In questo modo, puoi rendere i tuoi post dall'aspetto curato e professionale con il minimo sforzo. 🙌
Perché dovresti aggiungere un separatore a linea orizzontale in WordPress?
Un separatore a linea orizzontale spezza le sezioni, rende il tuo contenuto più facile da scansionare e mantiene i lettori coinvolti.
Oltre alla leggibilità, le linee orizzontali sono utili anche per attirare l'attenzione su punti chiave, enfatizzare citazioni o creare transizioni fluide tra le idee.
Nel complesso, i visitatori decidono in pochi secondi se rimanere sulla tua pagina o andarsene. Su molti dispositivi, il tuo post sul blog potrebbe apparire come un unico lungo muro di testo, che può essere opprimente da leggere.
Una semplice linea orizzontale può cambiare questo. ✅
Poiché questa è una guida completa su come aggiungere un divisore a linea orizzontale in WordPress, puoi utilizzare il nostro indice per trovare il metodo che desideri utilizzare:
- Method 1: Adding a Horizontal Line in the WordPress Block Editor
- Method 2: Adding a Horizontal Line in the WordPress Classic Editor
- Metodo 3: Suddividere un modulo lungo in più pagine con WPForms
- Bonus Separators You Can Use in Your Posts and Pages
- Domande frequenti sull'aggiunta di linee orizzontali in WordPress
- Continua a imparare: Suggerimenti per gestire i tuoi post e pagine di WordPress
Pronto? Iniziamo.
Metodo 1: Aggiungere una linea orizzontale nell'editor a blocchi di WordPress
Per aggiungere una linea orizzontale utilizzando l'editor a blocchi di WordPress, puoi fare clic sull'icona '+' per aggiungere un nuovo blocco ovunque desideri che si trovi la linea.
Successivamente, selezioniamo il blocco 'Separatore' dalla sezione 'Elementi di layout'.
Puoi trovarlo facilmente usando la barra di ricerca.
Una volta aggiunto, vedrai il tuo divisore a linea orizzontale nell'area dei contenuti.
Stile della linea orizzontale nell'editor a blocchi di WordPress
Per impostazione predefinita, il divisore orizzontale è una linea grigio pallido al centro del tuo post o pagina.
Puoi cambiare il suo aspetto facendo clic sulla linea per selezionare il suo blocco. Quindi, il pannello di modifica 'Blocco' si aprirà sul lato destro dello schermo.
Per cambiare lo stile della tua linea, fai semplicemente clic sulla piccola freccia accanto a 'Stili'. Quindi, vedrai le diverse opzioni.
Puoi cambiare la linea orizzontale in una di queste se lo desideri:
- Una linea larga che copre l'intera larghezza del contenuto del tuo post.
- Tre punti vengono visualizzati al centro del tuo post.
📌 Nota: In alcuni temi WordPress, sia la linea larga che la linea predefinita copriranno l'intera larghezza del tuo post.
Puoi anche cambiare il colore della tua linea orizzontale nelle impostazioni 'Colore'.
Fai semplicemente clic su una delle opzioni visualizzate o usa il link 'Colore personalizzato' per scegliere qualsiasi colore.
Se desideri tornare al colore grigio predefinito, fai semplicemente clic sul pulsante 'Cancella' sotto le opzioni colore.
Qui, la nostra linea orizzontale è blu e utilizza lo stile 'largo'.
Metodo 2: Aggiungere una linea orizzontale nell'editor classico di WordPress
Se stai utilizzando l'editor classico (spesso abilitato con un plugin), puoi comunque aggiungere facilmente linee orizzontali.
Per farlo, modifica semplicemente un post o una pagina esistente o creane uno nuovo. Se vedi solo una riga di pulsanti nella barra degli strumenti sopra l'editor del post, fai clic sull'icona 'Attiva/Disattiva barra degli strumenti' sulla destra:
Questo aprirà la seconda riga di pulsanti, che include l'opzione linea orizzontale.
Da qui, la prima cosa da fare è posizionare il cursore su una nuova riga dove desideri inserire la linea orizzontale.
Puoi quindi fare clic sull'icona 'Linea orizzontale'. È la seconda da sinistra nella seconda riga:
Una volta aggiunta, vedrai una linea orizzontale grigio chiaro.
Coprirà l'intera larghezza del tuo post in questo modo:
Aggiungere manualmente una linea orizzontale usando HTML
In alcuni rari casi, potresti dover aggiungere manualmente un divisore a linea orizzontale nel tuo contenuto WordPress.
In tal caso, puoi semplicemente farlo usando il tag HTML <hr> nel tuo contenuto:
<hr>
Puoi aggiungere questo tag nella vista 'Testo' dell'editor classico o all'interno di un blocco 'HTML personalizzato' nell'editor a blocchi.
È un modo rapido per aggiungere un separatore quando lavori con il codice.
Metodo 3: Suddividere un modulo lungo in più pagine con WPForms
A volte è necessario suddividere un modulo lungo per renderlo meno opprimente per gli utenti. Invece di una linea visiva, puoi dividere il tuo modulo in più pagine. Ti mostreremo come farlo utilizzando il nostro creatore di moduli di contatto WordPress preferito, WPForms.
Infatti, WPForms è lo strumento che amiamo e usiamo noi stessi, quindi ti consigliamo vivamente di prenderlo in considerazione. Per maggiori informazioni sul plugin, dai un'occhiata alla nostra guida completa alla recensione di WPForms!
Innanzitutto, dovrai scaricare, installare e attivare il plugin WPForms. Se non sei sicuro di come fare, consulta la nostra guida passo passo su come installare un plugin di WordPress.
📌 Nota: La versione gratuita di WPForms funziona bene per questa guida. Detto questo, se hai bisogno di funzionalità avanzate come la logica condizionale, dovrai passare alla versione Pro.
Successivamente, puoi andare su WPForms » Aggiungi Nuovo dalla tua bacheca di WordPress.
Nella schermata successiva, inserirai un nome per il tuo modulo, quindi sceglierai un modello.
Per questo tutorial, utilizzeremo il modello ‘Modulo Richiesta Preventivo‘.
Dopo aver scelto un modello, puoi semplicemente passare il cursore del mouse sul modello e fare clic sul pulsante per creare il tuo modulo.
Successivamente, scorriamo verso il basso la scheda ‘Aggiungi Campi’ sul lato sinistro fino alla sezione ‘Campi Fantasia’.
Quindi, puoi trascinare e rilasciare il ‘Separatore di Pagina’ ovunque tu lo desideri nel modulo. Lo stiamo inserendo appena prima della casella ‘Richiesta’.
💡 Suggerimento Pro: Vuoi creare rapidamente il tuo modulo? Allora apprezzerai il generatore di moduli basato sull'intelligenza artificiale di WPForms! Fornisci semplicemente una breve descrizione e attendi che l'IA generi il tuo modulo.
Vedrai che il modulo è ora diviso in 2 parti. WPForms ha aggiunto automaticamente anche un pulsante ‘Avanti’.
Puoi cambiare l'etichetta 'Avanti' se lo desideri e puoi aggiungere un pulsante 'Indietro' per consentire agli utenti di passare alla seconda pagina del modulo.
Fai semplicemente clic sul campo di interruzione di pagina per modificarlo.
Una volta terminato, puoi salvare il modulo facendo clic sul pulsante 'Salva' in alto a destra.
Ora è il momento di aggiungere il modulo al tuo sito web.
Fai clic sul pulsante 'Incorpora' proprio accanto al pulsante 'Salva' per iniziare. Si aprirà una finestra di dialogo in cui potrai creare un nuovo post o pagina o modificarne uno esistente.
Per questo tutorial, sceglieremo l'opzione 'Seleziona pagina esistente'.
Il passaggio successivo consiste nello scegliere tra le pagine disponibili e fare clic su 'Iniziamo!'
Verrai quindi reindirizzato all'editor di contenuti di WordPress.
Da qui, fai semplicemente clic sull'icona '+' per aggiungere un nuovo blocco al tuo post o pagina e trova il blocco 'WPForms'. Puoi usare la barra di ricerca o cercare nella sezione 'Widget'.
Una volta trovato, fai clic su di esso per aggiungere il blocco alla tua pagina.
Ora vedrai un'opzione per selezionare il tuo modulo.
Fai clic e scegli il modulo che hai appena creato dall'elenco a discesa.
Una volta fatto ciò, puoi pubblicare il post o la pagina. E questo è tutto!
Ora, se visiti il post o la pagina, puoi vedere il modulo in azione.
Separatori bonus che puoi usare nei tuoi post e pagine
Oltre a una linea orizzontale, l'editor a blocchi di WordPress offre altri blocchi utili per aiutarti a organizzare i tuoi contenuti e migliorare il layout. Diamo un'occhiata ad alcune ottime alternative.
Il Blocco Spaziatore
Il blocco ‘Spaziatore’ ti permette di aggiungere spazio bianco tra i blocchi.
Ad esempio, se desideri uno spazio leggero alla fine del tuo post prima di un lead magnet, puoi usare 'Spacer'.
Ecco come appare quando stai creando il tuo post nell’editor a blocchi:
Puoi personalizzare l’altezza dello spaziatore per adattarlo meglio alla tua area di contenuto.
Ed ecco come potrebbe apparire lo spaziatore sul tuo sito:
Il Blocco Continua a Leggere
Se il tuo tema mostra post completi sulla tua pagina del blog principale invece di estratti, l'aggiunta di un link 'More' interromperà il tuo post a quel punto.
Ciò richiederà ai visitatori di cliccare per leggere di più.
L'immagine sopra mostra quello che vedrai nell'editor di contenuti.
E sotto come potrebbe apparire sul tuo sito ai visitatori:
Puoi saperne di più su questo nei nostri guide su come usare correttamente il blocco Continua a leggere e come personalizzare facilmente gli estratti in WordPress.
Il Blocco Interruzione di Pagina
'Interruzione di pagina' divide un lungo post del blog in più pagine (una tecnica chiamata paginazione).
Il blocco stesso non ha opzioni di stile nell'editor, quindi il suo aspetto è controllato dal tuo tema WordPress. Ecco come appare quando stai scrivendo il tuo post:
Quindi, 'Interruzione di pagina' utilizzerà i numeri di pagina e consentirà ai lettori di scegliere la pagina a cui desiderano accedere.
Ecco come potrebbe apparire sul tuo sito WordPress:
Per i dettagli, puoi fare riferimento alla nostra guida su come dividere i post di WordPress in più pagine.
Ognuna di queste potrebbe essere una buona alternativa all'aggiunta di una linea orizzontale in WordPress, a seconda del tuo obiettivo.
Domande frequenti sull'aggiunta di linee orizzontali in WordPress
Qual è il tag HTML per una linea orizzontale?
Il tag HTML per una linea orizzontale è <hr>, che sta per "horizontal rule" (linea orizzontale). Puoi aggiungere questo tag nell'editor di codice per inserire manualmente un separatore di linea standard.
Come posso personalizzare la linea orizzontale in WordPress?
L'editor a blocchi di WordPress ha impostazioni integrate che ti consentono di modificare lo stile e il colore della linea. Per personalizzazioni più avanzate, come la regolazione dello spessore o la creazione di design unici, useresti tipicamente CSS personalizzato.
Posso usare un'immagine invece di una linea come separatore?
Assolutamente. L'utilizzo di un'immagine personalizzata come separatore può aggiungere un tocco unico e brandizzato al tuo contenuto. Per un controllo creativo ancora maggiore, un plugin per la creazione di pagine come SeedProd ti consente di progettare divisori di sezione personalizzati senza codice.
Continua a imparare: Suggerimenti per gestire i tuoi post e pagine di WordPress
Speriamo che questo tutorial ti abbia aiutato a imparare come aggiungere separatori a linea orizzontale in WordPress.
Se desideri aggiungere più elementi di design e layout ai tuoi post e pagine, consulta i nostri articoli su:
- I migliori page builder drag-and-drop per WordPress
- Come creare un divisore di forma personalizzato in WordPress
- Come visualizzare un elenco degli articoli aggiornati più di recente in WordPress
- Come aggiungere stati di post personalizzati per i post del blog in WordPress
- Come Creare Tipi di Post Personalizzati in WordPress
- Come proteggere con password una pagina o un post in WordPress
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Jiří Vaněk
Posso chiederti, se è possibile rendere il divisore orizzontale, invece che verticale?
Supporto WPBeginner
Per quello dovresti creare delle colonne e poi usare il CSS per aggiungere la proprietà border alle colonne.
Amministratore
Shoaib
L'utilizzo dei tag hr tra gli articoli influisce sulla SEO?
Supporto WPBeginner
Dipenderebbe da come vengono utilizzati, ma per la maggior parte non dovrebbero avere un effetto significativo.
Amministratore