Come aggiungere un tavolo ai post del tuo blog in Element

Creare contenuti di blog a forma di lunga durata è ottimo per la SEO, ma può anche far sentire i tuoi post ... beh, a lungo. Scorri attraverso un enorme articolo senza sapere dove ti trovi o quanto rimane può essere frustrante per i lettori. Ecco dove un tavolo (TOC) è utile.

Un tavolo dei contenuti (TOC) si comporta come una mappa, aiutando i lettori a trovare rapidamente ciò di cui hanno bisogno, saltare in una sezione e ottenere un senso migliore della struttura dei contenuti. Inoltre, può aumentare il tuo SEO consentendo ricchi frammenti nei risultati di ricerca.

Se stai utilizzando Element per progettare i post del tuo sito e del blog, l'aggiunta di un contenuto è super semplice, soprattutto quando si utilizza il plug -in PowerPack Addons.

In questa guida, ti mostreremo come aggiungere un tavolo al tuo post sul blog in Element senza aggiungere alcun codice HTML o CSS.

Perché dovresti aggiungere un contenuto

Prima di saltare nel How-To, parliamo rapidamente del perché un TOC è un'aggiunta intelligente ai post del tuo blog.

• Migliora l'esperienza dell'utente: i lettori possono passare immediatamente alla sezione che li interessa.
• Aumenta la SEO: i motori di ricerca mostrano spesso i collegamenti TOC come sitelink, che possono migliorare le velocità di click-through.
• Incoraggia un coinvolgimento più lungo: dando agli utenti il ​​controllo sulla navigazione, li tieni sulla pagina più a lungo.
• Riduce la frequenza di rimbalzo: i visitatori non si sentono sopraffatti da un lungo contenuto quando possono sfogliare facilmente.

Ora entriamo come aggiungere un TOC completamente funzionale ed elegante in Elementor.

Come aggiungere un tavolo ai post del tuo blog in Element

Passaggio 1: installare i componenti aggiuntivi di PowerPack per Element

Prima di procedere, assicurati di aver installato e attivato i componenti aggiuntivi di PowerPack per Element sul tuo sito Web. Per saperne di più, consulta la nostra guida su come installare e attivare PowerPack Addons Pro.

Passaggio 2: abilita il widget del tavolo

Una volta che il plugin è attivo, è una buona idea assicurarsi che il widget TOC sia effettivamente abilitato.

Per fare questo, vai su Element >> PowerPack >> Elementi nella dashboard WordPress. Da lì, cerca il widget "Sommario" e assicurati che il bosco accanto sia acceso (blu).

Ora sei pronto per usarlo in Element.

Passaggio 3: crea un singolo modello di post in Element

Per applicare il tavolo in modo coerente su tutti i post del blog, è meglio aggiungerlo all'interno di un singolo modello di post.

Ecco come:

• Vai ai modelli >> Aggiungi nuovo.
• Dal menu a discesa, scegli il singolo post.
• Dai un nome al tuo modello, come " Layout del blog " o " Posta modello ", quindi fai clic su " Crea modello ".

Elementor ora chiederà se desideri iniziare da una tela vuota o utilizzare un layout pre-costruito.

Passaggio 4: utilizzare un modello di post pre-progettato (opzionale)

Se non si desidera costruire il layout da zero, Elementator semplifica l'inserimento di un modello pronto. Scegli una delle opzioni pre-progettate; In genere includerà elementi essenziali come il titolo post, l'immagine in primo piano, la casella degli autori e il contenuto di post.

Puoi sempre modificarli in seguito per adattarsi meglio al design del tuo blog.

Passaggio 5: aggiungi il widget del tavolo del contenuto al tuo modello

Successivamente, dobbiamo aggiungere il widget del tavolo dei contenuti.

Nel pannello Element, cerca "Sommario". Quando appare il widget (cerca l'icona PP nell'angolo), trascinalo nel layout.

Un punto comune per posizionare il Sommario (TOC) è proprio sotto il titolo post o l'immagine in primo piano, ma puoi posizionarlo ovunque abbia senso per il tuo contenuto.

Una volta aggiunto il widget, rileverà automaticamente tutte le intestazioni (come H2S e H3S) dal tuo post.

Passaggio 6: personalizza le impostazioni del contenuto

Con il widget sulla pagina, vedrai un elenco di tutte le intestazioni del contenuto del tuo post. Ora, personalizziamo il tavolo dei contenuti.

Nella scheda Contenuto, troverai diverse impostazioni:

Puoi cambiare il titolo del Sommario (TOC) in qualcosa come "Navigazione rapida" o "In questa pagina". Se stai pensando al SEO e all'accessibilità, puoi anche regolare il tag HTML del titolo e impostarlo come H2 o H3 , a seconda di come si adatta alla tua gerarchia.

Quindi, ci sono impostazioni da includere o escludere determinati livelli di intestazione . Ad esempio, dovresti mostrare solo H2S e H3S e saltare H4S e sotto. E puoi scegliere lo stile dell'elenco, andare con i numeri per una sensazione strutturata, passo-passo o proiettili per un aspetto più minimo.

Passaggio 7: esplora funzionalità extra (opzionale ma utile)

Il widget di powerpack Sommings è dotato di funzionalità che aiutano a migliorare sia l'usabilità che il design.

È possibile rendere collapdibile il Sommario (TOC) , il che è ottimo per gli utenti mobili o quando si desidera mantenere pulito il layout. Aggiungi un'icona per espandere/collassare e specificare quando il widget dovrebbe crollare su dispositivi mobili, tablet, desktop o tutti i dispositivi.

C'è anche un'opzione di vista gerarchica . Ciò dimostra la relazione tra H2S, H3S e H4s mediante sottotitoli sotto i titoli dei genitori. Se si dispone di un post dettagliato, la creazione di un contenuto (TOC) (TOC) lo rende più organizzato e più facile da scansionare.

Per post più lunghi, abilitare Sticky TOC su Scroll è molto utile. Mantiene il TOC visibile come utenti scorrere in modo che possano saltare tra le sezioni in qualsiasi momento. Puoi anche aggiungere uno scorrimento al pulsante Top direttamente all'interno del widget per aiutare gli utenti a tornare rapidamente all'inizio del post.

Se si dispone di un'intestazione appiccicosa sul tuo sito, prendi in considerazione la regolazione della scorrimento in modo che le intestazioni non siano nascoste dietro di essa quando un utente fa clic su un link TOC.

Passaggio 8: modella il TOC per abbinare il tuo sito

Ora che la funzionalità è impostata, assicuriamoci che il widget sia fantastico. Nella scheda Style, troverai una suite completa di opzioni di personalizzazione:

• Styling Box: puoi regolare il colore di sfondo, il tipo di bordo e il raggio del bordo del TOC e persino aggiungere un'ombra della scatola per farlo risaltare. Se stai cercando un layout pulito, un bordo sottile e uno sfondo leggero funzionano magnificamente.
• Styling di intestazione: vuoi personalizzare il titolo TOC? È possibile impostare l'allineamento del testo, cambiare l'imbottitura e modificare i colori, la tipografia e le icone. Puoi anche aggiungere una linea di separatore e personalizzare la sua larghezza e colore.
• Elenco Styling: è qui che personalizzi gli elementi TOC effettivi che i collegamenti della sezione. Regola l'imbottitura, modifica il testo e la tipografia di intestazione, scegli il rientro per le sottotitoli e personalizza lo stile del marcatore (come il colore e le dimensioni del proiettile).

Con queste opzioni di stile, puoi far sembrare il TOC come un'estensione naturale del tuo sito Web invece di qualcosa che è stato appena lasciato cadere.

Passaggio 9: pubblica e imposta le condizioni

Una volta che tutto sembra come vuoi, vai avanti e premi pubblica. Elementor ti chiederà quindi dove visualizzare questo modello.

Scegli la condizione "includi >> tutti i post" in modo che il modello (e il TOC al suo interno) sia applicato a tutti i post del blog sul tuo sito.

Fai clic su Salva e Clos E e hai finito!

HIGHIERI CHIAVE DEL WILDGET SONDUTS PowerPack

Il widget del tavolo powerpack è pieno di funzionalità utili che non solo migliorano l'esperienza di lettura, ma forniscono anche il controllo completo su come appare il tuo contenuto e funzioni sul tuo sito Web.

Personalizzare facilmente il titolo del tavolo

Puoi personalizzare il titolo del tuo contenuto per adattarsi meglio al tono o allo scopo del tuo post. Sia che tu voglia nominarlo "navigazione rapida", "contenuto" o "salta in sezione", il widget PowerPack TOC ti consente di aggiornarlo in pochi clic.

Includere o escludere le intestazioni

Una delle caratteristiche straordinarie di questo widget è la flessibilità che ti dà quando si tratta di gestire i livelli di intestazione. Puoi scegliere quali tag di intestazione (H1, H2, H3, ecc.) Dovrebbero apparire nel TOC. Ancora meglio, utilizzando la funzionalità di selezione CSS integrata, è possibile includere o escludere specificamente sezioni o intestazioni particolari dalla tabella, dandoti il ​​controllo completo su ciò che appare.

Scegli il tuo stile di elenco preferito

Vuoi presentare i tuoi contenuti in un elenco pulito e minimalista o scegliere un formato più strutturato e numerato? Hai opzioni. Il widget consente di impostare lo stile del tuo elenco su "nessuno", "proiettili" o "numeri" a seconda delle preferenze di progettazione.

Lunghe intestazioni? Nessun problema

Se i tuoi titoli tendono ad essere lunghi, non preoccuparti. È possibile abilitare l'opzione Word Wrap per assicurarsi che il testo si rompe in modo ordinato e il tuo contenuto (TOC) rimane pulito e allineato.

Crollare il TOC in base al tipo di dispositivo

Puoi scegliere di crollare il tavolo dei contenuti per impostazione predefinita, a seconda del tipo di dispositivo: mobile, tablet o desktop. Questo aiuta a mantenere le cose in ordine su schermi più piccoli. Inoltre, è possibile abilitare una visione gerarchica, consentendo a titoli nidificati (come H3s in H2S) di essere chiaramente rientrati e strutturati.

Sticky Table of Sommone per lunghi post

Per contenuti a forma lunga, avere un contenuto (TOC) che scorre con l'utente è un punto di svolta. La funzione Sticky TOC consente all'elenco dei contenuti di rimanere visibili mentre i visitatori del sito scorrono verso il basso la pagina. Questo rende facile per loro saltare tra le sezioni in qualsiasi momento senza dover scorrere indietro verso l'alto.

Best practice per l'utilizzo di Sommario nei post sul blog

Per sfruttare al meglio il tuo TOC, tieni a mente questi suggerimenti:

• Utilizzare una struttura di intestazione corretta: inizia con H2S per le sezioni principali, seguite da H3S e H4, se necessario. Evita di saltare i livelli, come passare da H2 a H4, in quanto ciò può confondere sia i lettori che il tavolo del contenuto (TOC) stesso.
• Mantieni le intestazioni chiare e concise: ricorda, i tuoi lettori li useranno per navigare nel tuo post. Mantenere il tavolo dei contenuti (TOC) breve e pieghevole. Soprattutto per gli utenti mobili, abilitare il collasso può mantenere pulito il layout.
• Anteprima su tutti i dispositivi: assicurarsi che il tuo contenuto (TOC) appaia correttamente e funzioni correttamente su desktop, tablet e telefoni cellulari.

Domande frequenti

Ques. Posso nascondere il Sommario (TOC) sui dispositivi mobili?

Ans. Sì, è possibile utilizzare l'impostazione "collasso" per rendere il TOC minimizzato per impostazione predefinita su mobile o tablet.

Ques. Aggiornerà automaticamente quando aggiungerò nuove sezioni al mio post?

Ans. SÌ! Il widget tira in modo dinamico i tag di intestazione dai tuoi contenuti, quindi si aggiorna automaticamente.

Ques. Posso usare questo widget fuori dai post sul blog?

Ans. Assolutamente. È possibile aggiungerlo a qualsiasi pagina di layout di elemento, tipo di post personalizzato o persino descrizione del prodotto, purché ci siano tag di intestazione da raccogliere.

Avvolgimento!

Una tabella dei contenuti non è solo una funzione di design; È un aggiornamento di usabilità che può migliorare l'esperienza dei tuoi lettori, aumentare la SEO e rendere i tuoi contenuti più coinvolgenti.

Con i componenti aggiuntivi di Elementor e PowerPack, l'aggiunta e la personalizzazione di un contenuto (TOC) è sorprendentemente facile. Ottieni il pieno controllo su come appare e si comporta, tutto senza scrivere una singola riga di codice.

Puoi fare molto di più con gli addon PowerPack per Elementor. Ci sono più di 70 widget creativi che puoi utilizzare per personalizzare le pagine di Element. Se desideri saperne di più sugli addon PowerPack per Element, controlla qui.