Come creare un sommario cliccabile per un post di blog con il blocco di layout Divi
Pubblicato: 2020-03-14L'aggiunta di un sommario cliccabile a un post del blog è un ottimo modo per migliorare l'esperienza dell'utente. In molti casi, un sommario di un post di blog utilizza collegamenti di ancoraggio per aiutare gli utenti a navigare attraverso il contenuto. Inoltre, un sommario (con collegamenti di ancoraggio) è davvero semplice da creare utilizzando l'HTML di base. Tuttavia, aggiungere un design personalizzato/CSS per personalizzarlo può essere una sfida. È qui che torna utile il Divi Layout Block.
In questo tutorial, progetteremo un sommario cliccabile per un singolo post del blog (a Gutenburg) che utilizza collegamenti di ancoraggio per portare gli utenti a intestazioni designate in tutto il post. Per fare ciò utilizzeremo il blocco Divi Layout per creare il sommario con tutti i potenti strumenti di progettazione del Divi builder a nostra disposizione.
Iniziamo!
Sbirciata
Scarica GRATUITAMENTE il blocco di layout del sommario riutilizzabile
Per mettere le mani sul blocco di layout del sommario di questo tutorial, dovrai prima scaricarli utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.
Scarica gratis
Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.
Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!
Come utilizzare il download per importare questo blocco di layout sul tuo sito
Per importare questi blocchi di layout immagine Divi riutilizzabili nel tuo sito, devi prima decomprimere il file di download. Lì troverai i tre file JSON che dovrai importare sul tuo sito.
Vai a modificare un post usando l'editor predefinito (Gutenberg). Apri il menu "Altri strumenti e opzioni" in alto a destra nella pagina e seleziona "Gestisci tutti i blocchi riutilizzabili".
Quindi fare clic sul pulsante Importa da JSON. Scegli uno dei file JSON dalla cartella di download e fai clic sul pulsante di importazione.
Una volta fatto, aggiungi un nuovo blocco all'interno di Gutenberg. Saremo in grado di trovare i blocchi di layout riutilizzabili importati sotto l'opzione Riutilizzabile. Basta fare clic su quello denominato "Sommario" per aggiungerlo al tuo post.
Questo è tutto!
Passiamo al tutorial, vero?
Di cosa abbiamo bisogno per iniziare
Per iniziare, dovremo fare quanto segue:
- Se non l'hai ancora fatto, installa e attiva il tema Divi.
- Crea un nuovo post in WordPress e usa l'editor predefinito (Gutenberg) per aggiungere alcuni contenuti fittizi (titolo, intestazioni, paragrafi, immagine in primo piano, ecc.). Assicurati di creare almeno tre blocchi di intestazione con il contenuto sotto ciascuno. Poiché aggiungeremo collegamenti di ancoraggio al sommario, abbiamo bisogno di tre intestazioni da collegare più in basso nel post.
Dopodiché, siamo pronti per iniziare.
Creazione di un sommario cliccabile per un post di blog con il blocco layout Divi
Aggiungi blocco layout Divi
Innanzitutto, aggiungi un nuovo Divi Layout Block nella parte superiore del contenuto del tuo post sul blog.
Quindi fare clic sul pulsante Crea nuovo layout. Questo distribuirà l'editor di layout che è il generatore Divi per un blocco di layout.
Aggiungi riga
Nell'editor di layout, avvia il progetto aggiungendo una riga a una colonna.
Aggiungi divisore superiore
All'interno della colonna, aggiungi un modulo divisore. Questo sarà uno dei due divisori che useremo per inquadrare il sommario.
Impostazioni divisori
Quindi aggiorna le impostazioni del divisore come segue:
- Colore linea: #eeeeee
- Posizione della linea: centrata verticalmente
- Peso del divisore: 3px
- Larghezza: 25%
- Imbottitura: 30px in alto, 30px in basso
Aggiungi divisore inferiore
Per creare il secondo divisore, duplica il divisore precedente.
Crea l'intestazione del sommario con un modulo Blurb
Una volta posizionati i divisori, creiamo la nostra intestazione per il sommario.
Aggiungi un nuovo modulo blurb tra i due divisori.
Blurb contenuto
Apri le impostazioni del blurb e aggiorna il contenuto come segue:
- Titolo: “Sommario”
- Usa l'icona: S
- Icona: vedi screenshot
Blurb Design Impostazioni
Nella scheda Progettazione, aggiorna quanto segue:
- Colore icona: #eeeeee
- Posizionamento immagine/icona: a sinistra
- Usa la dimensione del carattere dell'icona: S
- Dimensione carattere icona: 100 px
- Livello titolo titolo: H2
- Larghezza contenuto: 100%
- Altezza: 38px
Notare che l'altezza del contrassegno è inferiore all'altezza dell'icona. Ciò consente all'icona di estendersi verso il basso accanto agli elementi blurb che aggiungeremo in seguito.
Una volta che la descrizione del titolo è a posto, siamo pronti per iniziare ad aggiungere gli elementi/definizioni cliccabili che compongono il nostro sommario. Per fare ciò, utilizzeremo anche i moduli blurb.
Aggiungi elemento #1 Blurb
Aggiungi un nuovo modulo blurb sotto il blurb del titolo.
Blurb contenuto
Apri le impostazioni del blurb ed elimina il contenuto del corpo predefinito in modo che sia visibile solo il titolo. Il titolo è dove aggiungerai il blocco di testo che corrisponde alla sezione/intestazione che vogliamo collegare più in basso nel post.
Quindi aggiorna il contenuto con l'icona della freccia a destra sul desktop.
Distribuisci l'opzione al passaggio del mouse per l'icona e cambia l'icona con la freccia giù al passaggio del mouse. Questa sarà una bella micro-interazione che enfatizza il collegamento scorrerà in una posizione lungo il post.
Blurb Design
Ora possiamo progettare il modulo blurb come vogliamo. Per questo esempio, aggiorniamo le impostazioni del blurb come segue:
- Colore icona: #b856c7
- Icona del cerchio: S
- Colore del cerchio: #ffffff
- Mostra bordo cerchio: S
- Colore bordo cerchio: #b856c7
- Posizionamento immagine/icona: a sinistra
- Usa la dimensione del carattere dell'icona: S
- Dimensione carattere icona: 16px
- Dimensione del testo del testo: 16px
- Altezza della riga del titolo: 2em
- Larghezza contenuto: 100%
- Margine: 118px a sinistra
- Imbottitura: 10px in alto
- Padding (hover): 10px a sinistra
Blurb duplicato per più elementi
Ora che il nostro primo elemento blurb è finito, possiamo duplicarlo tutte le volte necessarie a seconda del numero di link cliccabili che vogliamo includere nel post. Per ora, duplichiamolo due volte per creare un totale di tre elementi per il nostro sommario.
Aggiunta degli URL di collegamento di ancoraggio
Al momento i nostri elementi blurb non sono cliccabili, quindi dobbiamo aggiungere gli URL di collegamento di ancoraggio necessari a ciascuno di essi. L'URL del collegamento di ancoraggio inizia sempre con un hashtag (#) seguito dall'ID che desideri includere.
Link di ancoraggio #uno
Per semplicità, aggiungeremo il link di ancoraggio "#one" al primo contrassegno nell'elenco. Per fare ciò, apri le impostazioni per il primo modulo blurb nell'elenco (non il titolo blurb) e aggiorna quanto segue:
- URL collegamento modulo: #uno
Collegamento di ancoraggio #due
Quindi apri le impostazioni del secondo elemento blurb e aggiungi il seguente link:
- URL collegamento modulo: #due
Collegamento di ancoraggio #tre
Infine, aggiungi il seguente link al terzo elemento blurb:
- URL collegamento modulo: #tre
Aumentare la spaziatura
Impostazioni riga
In questo momento, c'è un po' troppo spazio tra gli elementi della nostra riga. Per risolvere questo problema, apri le impostazioni della riga e aggiorna la larghezza della grondaia e il riempimento come segue:
- Larghezza grondaia: 1
- Larghezza: 100%
- Imbottitura: 0px in alto, 0px in basso
Impostazioni della sezione
Prendiamo anche l'imbottitura della sezione. Apri le impostazioni della sezione e aggiorna quanto segue:
- Imbottitura: 0px in alto, 0px in basso
Salva il layout
Abbiamo finito con il nostro design del sommario. Assicurati di salvare ed uscire dall'editor di layout.
Ora dovresti vedere il tuo nuovo sommario all'interno dell'editor di blocchi predefinito.
Aggiungere le ancore HTML alle intestazioni dei post
Abbiamo aggiunto gli URL dei link di ancoraggio a ciascuno dei blurb che compongono gli elementi del nostro sommario. Ora dobbiamo aggiungere il corrispondente ID CSS (o HTML Anchor) ai blocchi di intestazione più in basso nel post.
HTML Ancora uno
Fare clic sul blocco contenente la prima intestazione a cui si desidera collegare/saltare. Quindi apri le impostazioni per quel blocco. Sotto l'interruttore Opzioni avanzate, aggiungi "uno" alla casella di input di ancoraggio HTML:
Ancoraggio HTML: uno
Ricorda, il nostro primo articolo blurb ha l'URL "#one" che si collegherà a questo. Ma non aggiungere l'hashtag a questo ancoraggio HTML. Non è necessario.)
HTML Anchor due
Quindi, seleziona il secondo blocco di intestazione e aggiorna quanto segue:
- Ancora HTML: due
HTML Ancora tre
E infine, seleziona il terzo blocco di intestazione e aggiungi l'ancora HTML come segue:
- Ancora HTML: tre
Risultato finale
Vediamo il risultato finale sul post in diretta.
Ed ecco come funzioneranno i collegamenti di ancoraggio. Notare l'effetto al passaggio del mouse sulle icone e come il collegamento scorre agevolmente fino all'ancoraggio corrispondente sotto la pagina.
Aggiunta del sommario come blocco di layout riutilizzabile
Se desideri continuare a utilizzare questo blocco di layout come modello per i post futuri, sarebbe una buona idea salvare il blocco di layout come blocco di layout riutilizzabile. Ciò ti consentirà di aggiungere facilmente un blocco "indice" dall'elenco di blocchi integrato.
Per fare ciò, fai clic sul Blocco layout Divi contenente il sommario e apri il menu Altre impostazioni. Quindi selezionare "Aggiungi a blocchi di layout riutilizzabili".
Immettere un nome per il blocco riutilizzabile ("Sommario") e fare clic su Salva.
Ora avrai il blocco disponibile nell'elenco dei blocchi riutilizzabili quando aggiungi un nuovo blocco al post.
Ora il blocco di layout funge da comodo modello per creare un sommario per il tuo post. Non dimenticare di convertire il blocco in un normale blocco di layout prima di personalizzarlo per un determinato post. Non vuoi modificare il blocco di layout riutilizzabile.
Per fare ciò, apri il menu Altre impostazioni del blocco di layout riutilizzabile e seleziona "Converti in blocco normale".
Pensieri finali
Spero che questo blocco di layout Divi del sommario si dimostri utile per quei post che sono abbastanza lunghi da averne bisogno. Se sei interessato a farlo per te in modo dinamico (come costruire automaticamente il sommario per te in base alle intestazioni di un post), ci sono plugin là fuori come Table of Contents Plus che fanno questo genere di cose per te. Questo post è per coloro a cui piace progettare con Divi e non si preoccupano di costruire il sommario post per post.
Non vedo l'ora di sentirti nei commenti.
Saluti!