Vuoi aggiungere una linea orizzontale attraverso il tuo post o pagina in WordPress?

I divisori di linea orizzontale sono un ottimo modo per suddividere post lunghi in sezioni più piccole, evidenziare annunci speciali o promozioni e separare chiaramente le diverse parti di una pagina.

In questo articolo, ti mostreremo come aggiungere facilmente un divisore di linea orizzontale in WordPress.

Poiché questa è una guida completa su come aggiungere un divisore di linea orizzontale in WordPress, potresti trovare utile utilizzare il nostro sommario:

Aggiunta di una linea orizzontale nell'editor blocchi di WordPress

Per aggiungere una linea orizzontale usando il Editor di blocchi di WordPress, fai clic sull'icona (+) per aggiungere un nuovo blocco in qualsiasi punto della linea.

Aggiunta di un nuovo blocco in cui si desidera la linea orizzontale

Successivamente, seleziona il blocco Separatore dalla sezione Elementi layout o cercalo utilizzando la barra di ricerca.

Trova e aggiungi il blocco Separatore

Una volta aggiunto, vedrai il tuo divisore di linea orizzontale nell'area dei contenuti.

Stile della linea orizzontale nell'editor blocchi di WordPress

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

Puoi cambiare l'aspetto facendo clic sulla linea per selezionare il suo blocco. Quindi, il riquadro di modifica “Blocca” si aprirà sul lato destro dello schermo.

Fare clic sul blocco Separator per selezionarlo e modificare le impostazioni

Per modificare lo stile della linea, fai clic sulla piccola freccia accanto a Stili. Quindi, vedrai le diverse opzioni.

Puoi cambiare la linea orizzontale in una di queste, se vuoi:

  • Una linea ampia che copre l'intera larghezza del contenuto del tuo post.
  • Tre punti che vengono visualizzati al centro del tuo post.

I diversi stili disponibili per il blocco Separator

Nota: In qualche Temi WordPress, sia la linea larga che la linea predefinita copriranno l'intera larghezza del tuo post.

Puoi anche cambiare il colore della linea orizzontale nelle impostazioni Colore. Fai semplicemente clic su una delle opzioni visualizzate o usa il link “Colore personalizzato” per scegliere qualsiasi colore.

Cambia il colore della linea orizzontale

Se vuoi tornare al colore grigio predefinito, fai clic sul pulsante “Cancella” sotto le opzioni di colore.

Qui, la nostra linea orizzontale è blu e utilizza lo stile “largo”.

Una linea orizzontale che è stata modificata per essere ampia e blu

Aggiunta di una linea orizzontale nell'editor classico di WordPress

Se tu sei usando ancora l'editor classico, quindi è possibile aggiungere linee orizzontali di base. Per fare ciò, basta modificare un post o una pagina esistente o crearne uno nuovo.

Se vedi solo una riga di pulsanti nella barra degli strumenti sopra l'editor dei post, fai clic sull'icona Attiva barra degli strumenti sulla destra:

Fai clic sul pulsante Attiva barra degli strumenti per visualizzare la seconda riga di icone

Questo aprirà la seconda fila di pulsanti, che include l'opzione linea orizzontale.

Ora vai avanti e metti un'interruzione di riga tra i paragrafi in cui vuoi che la linea orizzontale vada. È quindi possibile fare clic sul pulsante Linea orizzontale. È il secondo da sinistra nella seconda fila:

Il pulsante linea orizzontale nel classico editor di WordPress

La linea orizzontale sarà di colore grigio chiaro. Coprirà l'intera larghezza del tuo post in questo modo:

Una regola orizzontale creata usando l'editor classico

Aggiunta manuale di un divisore di linea orizzontale tramite HTML

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

In tal caso, puoi semplicemente farlo utilizzando il tag hr HTML nei tuoi contenuti:


Ciò aggiungerà il separatore di linea orizzontale nel contenuto del tuo post.

Altri separatori che puoi utilizzare nei tuoi post e pagine

L'editor di blocchi predefinito di WordPress ti consente di aggiungere più tipi di separatori ai tuoi post e alle tue pagine.

A parte il separatore di linea orizzontale, le altre opzioni nel set di blocchi Layout Elements includono i blocchi Distanziatore, Più link e Interruzione di pagina.

The Spacer Block

Il distanziatore consente di aggiungere spazi bianchi tra i blocchi. Ad esempio, se si desidera un leggero spazio alla fine del post prima di un'offerta speciale, è possibile utilizzare il distanziatore.

È possibile personalizzare l'altezza del distanziatore. Ecco come appare quando crei il tuo post nell'editor blocchi:

Il blocco spaziatore nell'editor blocchi

Ed ecco come appare il distanziatore sul tuo sito:

Come appare il blocco distanziatore in una pagina o post

Il blocco più

Se il tema mostra post completi (anziché estratti) sulla pagina principale del tuo blog, l'aggiunta di un link “Altro” interromperà il tuo post a quel punto. Il visitatore può fare clic per leggere di più.

Ecco come appare quando stai creando il tuo post:

Il blocco Altro nell'editor dei post

Ed ecco come appare il link Altro sul tuo sito:

Il blocco Leggi di più in un post sul sito

Puoi saperne di più sugli estratti, nella nostra guida su come personalizzare facilmente i brani in WordPress.

Il blocco di interruzione di pagina

L'interruzione di pagina consente di dividere lunghi post di blog in più pagine. Non puoi personalizzarlo in alcun modo. Ecco come appare quando stai creando il tuo post:

Il blocco di interruzione di pagina mostrato nell'editor di blocchi

Ed ecco come appare l'interruzione di pagina sul tuo sito:

L'interruzione di pagina come appare su un sito

Ognuna di queste potrebbe essere una buona alternativa all'aggiunta di una linea orizzontale in WordPress, a seconda di ciò che stai cercando di fare.

Aggiunta di un'interruzione di pagina nei moduli di WordPress mediante WPForms

Che cosa succede se si desidera mettere una pausa non in un post o una pagina, ma in un Modulo di contatto WordPress? Puoi farlo anche tu. Per questo utilizzeremo WPForms.

Innanzitutto, dovrai scaricare, installare e attivare il Plugin WPForms. Se non sei sicuro di come, dai un'occhiata alla nostra guida passo passo su come installare un plugin per WordPress.

Quindi, vai a WPForms »Aggiungi nuovo nella dashboard di WordPress.

Creazione di un nuovo modulo tramite WPForms

Inserisci un nome per il modulo, quindi scegli un modello. Utilizzeremo il modello “Richiedi un preventivo” per il nostro. Posiziona il cursore del mouse sul modello e fai clic sul pulsante per creare il modulo.

Creazione di un modulo di preventivo in WPForms

Quindi, scorri verso il basso la scheda Aggiungi campi sul lato sinistro della sezione Campi fantasia. Trascina e rilascia l'interruzione di pagina nel punto desiderato nel modulo. Lo stiamo mettendo appena prima della casella Richiesta.

Aggiunta di un'interruzione di pagina in WPForms

Vedrai che il modulo è ora suddiviso in due parti. WPForms ha aggiunto automaticamente anche un pulsante “Avanti”.

Puoi modificare l'etichetta “Successivo” se lo desideri e puoi aggiungere un pulsante “Precedente” per passare alla seconda pagina del modulo. Basta fare clic sul campo di interruzione di pagina per modificarlo.

Modifica del campo di interruzione di pagina in WPForms

Salva il modulo una volta terminato, facendo clic sul pulsante Salva in alto a destra.

Ora puoi aggiungere il modulo al tuo sito web. Innanzitutto, dovrai creare un nuovo post o una nuova pagina o modificarne uno esistente.

Fai clic su (+) per aggiungere un nuovo blocco al post o alla pagina e trova il blocco WPForms. Puoi usare la barra di ricerca o guardare nella sezione Widget. Aggiungi il blocco alla tua pagina.

Aggiunta del blocco WPForms alla tua pagina o al tuo post

Ora seleziona il modulo dall'elenco a discesa.

Scegli il modulo dall'elenco a discesa

Una volta fatto, puoi pubblicare il post o la pagina e visualizzare l'aspetto del modulo sul tuo sito web.

Il modulo con un'interruzione di pagina sul sito Web

Speriamo che questo tutorial ti abbia aiutato a imparare come aggiungere un separatore di linee orizzontali in WordPress. Se vuoi aggiungere altri elementi di design e layout ai tuoi post e alle tue pagine, consulta il nostro articolo su i migliori costruttori di pagine di WordPress con trascinamento della selezione.

Se ti è piaciuto questo articolo, ti preghiamo di iscriverti al nostro Canale Youtube per i tutorial video di WordPress. Puoi trovarci anche su cinguettio e Facebook.

Il post Come aggiungere un separatore di linea orizzontale in WordPress (5 metodi) è apparso per primo WPBeginner.



Source link

Web Designer Freelancer Realizzazione Siti Web Serra Simone

Realizzo siti web, portali ed e-commerce con focus specifici sull’usabilità, l’impatto grafico, una facile gestione e soprattutto in grado di produrre conversioni visitatore-cliente. Elaboro siti internet, seguendo gli standard Web garantendo la massima compatibilità con tutti i devices. Sviluppo e-commerce personalizzati, multilingua, geolocalizzati per potervi mettere nelle migliori condizioni di vendita. Posiziono il tuo sito su Google per dare maggiore visibilità alla tua attività sui motori di ricerca con SEO di base o avanzato.