Come Aggiungere Facilmente Elenchi Puntati e Numerati in WordPress

Creare contenuti ben organizzati con elenchi puntati e numerati potrebbe sembrare basilare, ma abbiamo scoperto che molti utenti faticano a farli apparire esattamente come desiderano. 📋

Dopo aver esplorato vari metodi di formattazione nell'editor a blocchi, abbiamo scoperto i modi più semplici per creare elenchi chiari e coerenti.

Attraverso test approfonditi nei nostri ambienti demo, abbiamo identificato diversi metodi per aggiungere e stilizzare elenchi in WordPress, da semplici punti elenco a elenchi personalizzati.

La cosa fantastica è che non è necessaria alcuna conoscenza di codifica per far apparire professionali i tuoi elenchi.

In questa guida per principianti, ti mostreremo esattamente come aggiungere e formattare elenchi puntati e numerati in WordPress.

Quando Aggiungere Elenchi Puntati e Numerati in WordPress

Dovresti aggiungere elenchi ai tuoi contenuti ogni volta che hai bisogno di presentare informazioni in un formato strutturato e di facile lettura. La chiave è scegliere il tipo di elenco giusto per il tuo contenuto.

Usa un elenco numerato quando l'ordine degli elementi è importante. Questo è ideale per tutorial passo passo, classifiche top 10 o qualsiasi processo che segua una sequenza specifica.

Usa un elenco puntato quando l'ordine degli elementi non è importante. Questo è ottimo per elencare le caratteristiche del prodotto, esempi o un gruppo di idee correlate.

Usare correttamente gli elenchi aiuta i visitatori a comprendere i tuoi contenuti a colpo d'occhio, anche se le informazioni sono complesse. Questo migliora l'esperienza utente e può mantenere le persone sul tuo sito WordPress più a lungo.

Tenendo presente questo, vediamo come puoi aggiungere elenchi puntati e numerati in WordPress. Usa semplicemente i collegamenti rapidi qui sotto per passare direttamente al metodo che desideri utilizzare:

• Method 1: Using the Built-in WordPress List Block (Easy)
• Metodo 2: Utilizzo di Shortcodes Ultimate (elenchi con icone personalizzate)
• Method 3: Using a Page Builder Plugin (Best for Landing Pages)
• Method 4: Using Code to Add Bullet Points and Number Lists (Advanced)
• Domande frequenti sull'aggiunta di punti elenco ed elenchi numerati in WordPress

Metodo 1: Utilizzo del blocco elenco integrato di WordPress (facile)

Il modo più semplice per aggiungere elenchi puntati e numerati è utilizzare il blocco Elenco e l'editor a blocchi di WordPress Gutenberg.

Questo ti consente di creare semplici elenchi numerati o puntati senza installare un plugin WordPress separato. Detto questo, questo blocco predefinito ha solo poche opzioni di personalizzazione.

Se desideri perfezionare i tuoi elenchi con icone personalizzate, layout orizzontali, colori diversi e altro ancora, ti consigliamo di utilizzare uno degli altri metodi in questo articolo.

Per iniziare, apri semplicemente l'editor a blocchi per il post o la pagina WordPress in cui desideri aggiungere un elenco. Oppure, puoi aprire l'editor dei widget per aggiungere l'elenco puntato a un'area widget, come una barra laterale.

Puoi quindi scegliere se creare un elenco puntato o un elenco numerato.

Come creare un elenco puntato in WordPress

Per creare un elenco puntato, fai clic sull'icona '+' per aggiungere un nuovo blocco WordPress.

Nel popup che appare, digita 'Elenco'.

Quando appare il blocco giusto, fai clic per aggiungerlo alla pagina.

Questo crea il primo elemento di un elenco puntato. Digita semplicemente il testo che desideri utilizzare per il primo elemento dell'elenco.

Fatto ciò, premi il tasto 'Invio' sulla tastiera per passare alla riga successiva. WordPress creerà automaticamente il secondo punto elenco.

Ora puoi procedere e digitare il testo che desideri utilizzare per il secondo punto elenco. Ripeti semplicemente questi passaggi per aggiungere altri elementi all'elenco.

Se desideri creare un elenco nidificato, fai clic sul pulsante 'Rientro'. Questo sposta il cursore di un passaggio verso destra, pronto per digitare il testo rientrato.

Puoi fare clic nuovamente sul pulsante ‘Rientro’ per creare due livelli di elenchi puntati nidificati.

Come puoi vedere nell'immagine seguente, ogni livello utilizza un'icona diversa.

Per diminuire il rientro, fai clic sul pulsante ‘Sposta a sinistra’.

Questo sposta il cursore di un passo a sinistra, pronto per iniziare a digitare.

Premendo i pulsanti ‘Rientro’ e ‘Sposta a sinistra’, puoi creare elenchi nidificati con diversi livelli.

Per impostazione predefinita, l'editor a blocchi di WordPress utilizzerà la dimensione del carattere ‘Media’, ma puoi passare da piccola, grande ed extra large utilizzando le impostazioni ‘Tipografia’ nelle opzioni del blocco a destra.

Puoi anche aggiungere collegamenti o utilizzare le opzioni di formattazione del testo standard, come grassetto e corsivo. Questo rende i tuoi elenchi ancora più facili da scansionare e comprendere a colpo d'occhio.

Come Creare un Elenco Numerato in WordPress

Per creare un elenco numerato in WordPress, premi semplicemente il tasto ‘1’ sulla tastiera seguito da un punto (.)

WordPress trasformerà automaticamente questo testo nel primo elemento di un elenco numerato.

Ora sei pronto per digitare il primo elemento dell'elenco numerato.

Dopodiché, premi semplicemente il tasto ‘Invio’ sulla tastiera e WordPress creerà automaticamente il punto numerato successivo.

Proprio come con gli elenchi puntati, puoi creare elenchi nidificati facendo clic sui pulsanti ‘Rientro’ e ‘Sposta a sinistra’.

Questo crea un punto elenco rientrato sotto il punto elenco numerato.

A differenza degli elenchi puntati, puoi utilizzare solo un singolo livello di rientro.

Quando sei soddisfatto dell'aspetto dell'elenco, fai semplicemente clic sul pulsante 'Aggiorna' o 'Pubblica' per renderlo attivo sul tuo sito web WordPress.

Metodo 2: Utilizzo di Shortcodes Ultimate (elenchi con icone personalizzate)

Il blocco Elenco integrato è perfetto per creare elenchi basati su testo, ma a volte potresti voler creare un elenco con icone personalizzate. In questo modo, puoi rendere i tuoi elenchi più accattivanti visivamente e più adatti al tema dei tuoi contenuti.

Il modo più semplice per farlo è utilizzare Shortcodes Ultimate. Questo plugin ti consente di creare elenchi con icone personalizzate utilizzando semplici shortcode.

Per questo, utilizzeremo la versione gratuita del plugin poiché è già sufficiente per questo metodo. Ma se desideri funzionalità più avanzate, puoi passare a un piano a pagamento.

Per utilizzare Shortcodes Ultimate, procedi e installa il plugin WordPress nella tua area amministrativa. Dopodiché, crea un nuovo post o modifica uno esistente nell'editor a blocchi.

Ora, fai clic sul pulsante '+' in qualsiasi punto della pagina e seleziona il blocco 'Shortcode'.

A questo punto, incolla lo shortcode qui sotto nel blocco:

[su_list icon="icon: star" icon_color="#ffde0f"]
<ul>
 	<li>List item</li>
 	<li>List item</li>
 	<li>List item</li>
</ul>
[/su_list]

Questo shortcode visualizzerà tre elementi di elenco puntato con icone a stella gialla, così:

Per personalizzare l'icona e il colore, puoi visitare il sito web di Fork Awesome. Qui vedrai tutte le icone che puoi usare per le tue liste puntate. Qui, cerca semplicemente un'icona che desideri utilizzare.

Ad esempio, useremo l'icona 'flag'. Ora, copia il nome dell'icona e torna all'editor a blocchi.

Una volta lì, sostituisci semplicemente star con esso. Quindi, invece di icon: star, useremo icon: flag.

Per cambiare il colore, sostituisci il codice HEX in icon_color="#ffde0f" con il codice HEX del colore desiderato.

Quindi, se vuoi rendere l'icona verde, devi digitare icon_color="#008000". Puoi saperne di più su come trovare i colori giusti nel nostro articolo su come trovare lo schema di colori perfetto per il tuo sito WordPress.

Ora, non dimenticare di sostituire List item con il tuo testo.

Ecco come appare ora il nostro codice:

Quando sei soddisfatto dell'aspetto dell'elenco, puoi fare clic sul pulsante ‘Aggiorna’ o ‘Pubblica’ per renderlo live sul tuo blog WordPress o sito web.

Questo è l'aspetto dell'elenco sul front-end:

Metodo 3: Utilizzo di un plugin per page builder (ideale per landing page)

Se desideri creare bellissimi elenchi con uno stile personalizzato, potresti voler utilizzare SeedProd.

Questo tema WordPress avanzato e plugin page builder ti consente di creare pagine dal design professionale utilizzando un semplice editor drag-and-drop.

Viene inoltre fornito con un blocco Elenco già pronto che ti consente di perfezionare ogni parte del design dell'elenco, inclusa la modifica dello spazio tra i singoli elementi, la sostituzione dei punti elenco standard con icone personalizzate e altro ancora.

Inoltre, rende facile progettare pagine autonome con un design unico, quindi questa è anche un'ottima scelta se desideri aggiungere elenchi a una homepage personalizzata o a una landing page.

Abbiamo testato a fondo lo strumento e lo abbiamo trovato super facile da usare per i principianti. Per saperne di più, consulta la nostra recensione di SeedProd.

La prima cosa da fare è installare e attivare 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 aggiunto la chiave di licenza, fai semplicemente clic su 'Verifica chiave'.

Scegli un modello progettato professionalmente

Dopodiché, vai su SeedProd » Pagine di destinazione e fai clic su 'Aggiungi nuova pagina di destinazione'.

Nella schermata successiva, ti verrà chiesto di scegliere un modello.

SeedProd offre oltre 300 splendidi modelli organizzati in diverse categorie, come modelli di pagine 404 e pagine di ringraziamento personalizzate per WooCommerce.

Fai semplicemente clic su una scheda qualsiasi per vedere i diversi modelli all'interno di quella categoria.

Quando trovi un modello che desideri utilizzare, passaci sopra il mouse e fai clic sull'icona del segno di spunta.

Stiamo utilizzando il modello 'Explosive Growth Webinar' in tutte le nostre immagini, ma puoi usare qualsiasi design desideri.

Successivamente, devi dare un titolo alla pagina.

SeedProd creerà automaticamente un URL basato sul titolo della pagina, ma puoi cambiarlo come preferisci. Ad esempio, aggiungere parole chiave pertinenti a un URL migliora spesso il tuo SEO di WordPress e aiuta la pagina ad apparire nei risultati di ricerca pertinenti.

Per saperne di più, consulta la nostra guida su come fare ricerca di parole chiave per il tuo blog WordPress.

Quando sei soddisfatto del titolo e dell'URL, fai semplicemente clic su 'Salva e inizia a modificare la pagina'.

Crea il tuo layout di pagina personalizzato

SeedProd aprirà ora il tuo modello nel suo editor drag-and-drop. Sulla destra, vedrai un'anteprima dal vivo del design della pagina, con alcune impostazioni sulla sinistra.

SeedProd viene fornito con molti blocchi che puoi aggiungere al tuo design, inclusi blocchi che ti consentono di aggiungere pulsanti di condivisione social, video, moduli di contatto e altro.

Per maggiori informazioni, consulta la nostra guida su come creare una pagina personalizzata in WordPress.

Per aggiungere un elenco al tuo design, trova il blocco 'Elenco' e trascinalo sulla pagina.

Questo aggiunge un elenco verticale alla tua pagina con un segnaposto 'Elemento 1'.

Se invece vuoi creare un elenco orizzontale, fai clic sulla scheda 'Avanzate' e quindi seleziona il pulsante 'Orizzontale'.

Ora sei pronto per iniziare a costruire il tuo elenco selezionando la scheda 'Contenuto'.

Per sostituire il testo predefinito con il tuo messaggio, fai clic su 'Elemento 1' nel menu a sinistra.

Ora puoi digitare il tuo elemento dell'elenco nel piccolo editor di testo che appare.

Qui, puoi anche applicare qualsiasi formattazione desideri utilizzare, come grassetto o corsivo.

Per impostazione predefinita, SeedProd utilizza un segno di spunta per ogni punto elenco, ma dispone di una libreria integrata di font icona, che include 1400 icone Font Awesome che puoi utilizzare al loro posto.

Per sostituire il segno di spunta, posiziona semplicemente il cursore del mouse su di esso e fai clic su 'Libreria icone' quando appare.

Questo apre un popup dove puoi scegliere l'icona che desideri utilizzare al suo posto.

Puoi utilizzare icone diverse per i singoli punti elenco all'interno della lista, quindi questo è un ottimo modo per creare liste più interessanti e accattivanti.

Per creare altri punti elenco, fai semplicemente clic sul pulsante 'Aggiungi nuovo elemento'.

Ora puoi aggiungere testo e cambiare l'icona predefinita seguendo esattamente lo stesso processo descritto sopra.

Dopo aver aggiunto tutti gli elementi alla tua lista, puoi cambiare la dimensione del carattere e l'allineamento utilizzando le impostazioni nel menu a sinistra.

Puoi anche aumentare o diminuire lo spazio tra i singoli elementi della lista utilizzando il cursore 'Spazio tra'.

Dopodiché, potresti voler cambiare il colore delle icone nella lista. Anche se stai usando icone diverse, SeedProd applicherà lo stesso colore a ogni elemento in modo che il design appaia sempre coerente.

Per apportare questa modifica, fai clic sull'area 'Colore icona' e quindi scegli un nuovo colore dal popup che appare.

Fatto ciò, potresti voler fare clic su 'Avanzate' e dare un'occhiata ad alcune impostazioni aggiuntive. Abbiamo già visto come puoi passare da layout di lista verticali e orizzontali, ma puoi anche cambiare il colore del testo e il font.

Per far risaltare davvero il tuo elenco, puoi persino aggiungere un'ombra a scatola o un'animazione CSS.

La maggior parte delle impostazioni nella scheda 'Avanzate' sono abbastanza autoesplicative, quindi vale la pena esplorarle per vedere quali effetti puoi creare.

Fatto ciò, puoi continuare a lavorare sul design della tua pagina aggiungendo altri blocchi e quindi personalizzandoli utilizzando le impostazioni nel menu di sinistra.

Quando sei soddisfatto dell'aspetto della pagina, fai semplicemente clic sul menu a discesa sul pulsante 'Salva' e seleziona 'Pubblica'.

Ora puoi visitare questa pagina per vedere l'elenco live sul tuo negozio online o sito web.

Metodo 4: Utilizzo del codice per aggiungere elenchi puntati e numerati (avanzato)

Puoi anche creare elenchi utilizzando l'editor di codice integrato di WordPress e HTML.

Sebbene l'editor a blocchi sia più semplice, l'uso dell'editor di codice ti offre un controllo preciso sulla struttura HTML, che può essere utile per la risoluzione dei problemi o per incollare elenchi complessi e preformattati.

Per saperne di più su questo argomento, consulta la nostra guida su come modificare l'HTML nell'editor di codice di WordPress.

Per iniziare, apri la pagina o il post in cui desideri mostrare l'elenco. Quindi, fai clic sull'icona dei tre punti nell'angolo in alto a destra e seleziona 'Editor di codice'.

I passaggi successivi varieranno a seconda che si desideri aggiungere un elenco puntato o un elenco numerato.

Come creare un elenco puntato usando il codice

Per creare un elenco puntato, inizia digitando quanto segue:

<!-- wp:list -->
<ul>

ul sta per 'unordered list' (elenco non ordinato), il che significa che l'elenco non ha numeri, e wp:list dice a WordPress che stai creando manualmente un blocco Elenco.

Successivamente, premi il tasto 'Invio' per passare a una nuova riga e creare il tuo primo elemento dell'elenco:

<!-- wp:list -->
<ul>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

Qui, li sta per 'list item' (elemento dell'elenco) e stiamo chiudendo la riga con /li.

Puoi ripetere questo processo per creare altri elementi dell'elenco. Ad esempio:

<!-- wp:list -->
<ul>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Orange</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Green</li>
<!-- /wp:list-item -->

Una volta terminato, chiudi il blocco di codice con un altro flag 'unordered list':

</ul>
<!-- /wp:list -->

Questo ci dà il seguente codice per l'elenco:

<!-- wp:list -->
<ul>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Orange</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Green</li>
<!-- /wp:list-item -->
</ul>
<!-- /wp:list -->

Come puoi vedere nell'immagine seguente, questo crea un elenco molto semplice, ma puoi personalizzarlo aggiungendo altro HTML, come i tag di intestazione.

Come creare un elenco numerato usando il codice

Per creare un elenco numerato, digita semplicemente quanto segue:

<!-- wp:list {"ordered":true} -->

Puoi quindi digitare ol che sta per "ordered list" (elenco ordinato):

<!-- wp:list {"ordered":true} -->
<ol>

Dopo di che, aggiungi ogni elemento dell'elenco seguendo lo stesso processo descritto sopra:

<!-- wp:list {"ordered":true} -->
<ol>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

Infine, chiudi l'elenco ordinato usando un tag /ol e wp:list.

<!-- wp:list {"ordered":true} -->
<ol>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Orange</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Green </li>
<!-- /wp:list-item -->
</ol>
<!-- /wp:list -->

Domande frequenti sull'aggiunta di punti elenco ed elenchi numerati in WordPress

Ecco alcune domande che i nostri lettori hanno posto frequentemente sull'aggiunta di elenchi puntati e numerati in WordPress:

Come si crea un elenco con punti elenco e numerazione?

Puoi creare un elenco misto utilizzando il pulsante ‘Indenta’. Inizia un elenco numerato e, quando vuoi aggiungere un sotto-elemento puntato, fai semplicemente clic sul pulsante ‘Indenta’ nella barra degli strumenti. Questo creerà un punto elenco nidificato sotto il tuo elemento numerato.

Qual è la scorciatoia per i punti elenco in WordPress?

La scorciatoia principale da tastiera per iniziare un elenco puntato nell'editor a blocchi di WordPress è digitare un asterisco (*) seguito dalla barra spaziatrice. Per un elenco numerato, digita 1. seguito dalla barra spaziatrice.

Come si può trasformare un elenco numerato in a) dl b) ol c) list d) ul?

Puoi creare un elenco numerato utilizzando l'opzione (b), il tag <ol> in HTML. 'ol' sta per "ordered list" (elenco ordinato), che viene utilizzato quando la sequenza degli elementi è importante. Il tag <ul> viene utilizzato per elenchi non ordinati (puntati).

È meglio usare elenchi o div?

È sempre meglio usare i tag di elenco appropriati (come <ul> o <ol>) per il contenuto degli elenchi invece dei tag <div>. I tag di elenco forniscono un significato semantico, che è fondamentale per la SEO e per gli strumenti di accessibilità come gli screen reader per comprendere la struttura del tuo contenuto.

Speriamo che questo tutorial ti abbia aiutato a imparare come aggiungere punti elenco ed elenchi numerati in WordPress. Potresti anche voler imparare come aggiungere la collaborazione nell'editor a blocchi di WordPress e le nostre scelte esperte dei migliori plugin per blocchi Gutenberg per WordPress.

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