Come creare una barra delle informazioni sui post dinamici per il tuo modello di post sul blog Divi
Pubblicato: 2020-07-08L'aggiunta di contenuti dinamici al modello di post del tuo blog è essenziale per fornire elementi come il titolo del post, i metadati, l'immagine in primo piano, ecc. Normalmente, questi elementi dinamici vengono posizionati come normali elementi statici all'interno del design del layout. Tuttavia, potrebbe essere utile mantenere alcuni di questi elementi dinamici in primo piano per i tuoi lettori. È qui che torna utile una barra dinamica delle informazioni sui post. Una barra delle informazioni sui post dinamici rimane fissa nella parte superiore del browser (come farebbe un'intestazione fissa) e include elementi utili di contenuto dinamico e altri CTA. Ad esempio, puoi utilizzare questa barra per ricordare ai lettori il post che stanno leggendo, un link per lasciare un commento o un link a una categoria correlata.
In questo tutorial, ti mostreremo come creare una barra delle informazioni di post dinamica e aggiungerla al modello di post del tuo blog utilizzando Divi Theme Builder. Una volta fatto, questa barra funzionerà perfettamente per tutti i post del blog in tutto il sito.
Iniziamo!
Sbirciata
Ecco una rapida occhiata al design che costruiremo in questo tutorial. Nota come i link di ancoraggio ("Lascia un commento" e "Iscriviti") indirizzano gli utenti all'area corrispondente del post.
Scarica il layout GRATUITAMENTE
Per mettere le mani sui disegni di questo tutorial, dovrai prima scaricarlo 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!
Per importare il layout della sezione nel tuo Divi Theme Builder, vai a Divi Theme Builder.
Fare clic sull'icona della portabilità.
Nel popup della portabilità, seleziona la scheda di importazione e scegli il file di download dal tuo computer.
Quindi fare clic sul pulsante di importazione.
Una volta fatto, il modello di sezione apparirà nel Divi Theme Builder.
Passiamo al tutorial, vero?
Parte 1: importazione dei modelli predefiniti
Per questo tutorial, utilizzeremo un paio di modelli predefiniti dal nostro sesto pacchetto di creazione di temi. Importeremo il modello di sito Web predefinito che ci fornirà un'intestazione globale funzionante in cui aggiungeremo la barra delle informazioni del post. E importeremo il modello di post del blog per testare i nostri risultati su un post dal vivo.
IMPORTANTE: sarebbe meglio importare questi modelli su un sito di prova in modo da non rovinare un sito live.
Importa il modello di sito Web predefinito
Innanzitutto, dovrai scaricare il sesto pacchetto di creazione di temi GRATUITO per Divi. Quindi decomprimere il file.
Dal dashboard di WordPress, vai a Divi > Generatore di temi. Quindi fai clic sull'icona della portabilità in alto a destra. Nel popup della portabilità, seleziona la scheda di importazione. Quindi scegli il file json del modello di sito Web predefinito dalla cartella scaricata e fai clic sul pulsante di importazione. Verrà importato un nuovo modello di sito Web predefinito con un'intestazione e un piè di pagina globali.
Importa il modello di post
Ripeti questo processo per importare il modello di post dalla stessa cartella scaricata. Apri il popup di portabilità, scegli il file json del modello di post e fai clic sul pulsante di importazione. Questo ti darà un modello di post assegnato a tutti i post del tuo sito, insieme all'intestazione predefinita e un piè di pagina.
Disabilita Global nell'intestazione del modello di post
Aggiungeremo la nostra barra delle informazioni sui post dinamici all'intestazione del modello di post. Tuttavia, poiché vogliamo la barra delle informazioni del post solo sul modello del post, dobbiamo disabilitare il globale sull'intestazione in modo che la nostra barra non venga aggiunta a tutte le intestazioni a livello di sito. Per disabilitare il globale sull'intestazione globale, apri il menu delle impostazioni sull'intestazione globale e seleziona "Disabilita globale".
Ora l'intestazione dovrebbe essere grigia con l'etichetta "Intestazione personalizzata". Una volta pronto, fai clic sull'icona di modifica per modificare il modello di layout dell'intestazione.
Costruire la barra delle informazioni dei post dinamici
Aggiunta della sezione e della riga
All'interno dell'editor del layout dell'intestazione, crea una nuova sezione regolare sotto la sezione corrente che contiene l'intestazione.
Quindi aggiungere alla sezione una riga di una metà, un quarto, un quarto di colonna.
Impostazioni della sezione
Apri le impostazioni della sezione e aggiorna quanto segue:
- Colore di sfondo: #eceffe
- Imbottitura: 10px in alto, 10px in basso
Impostazioni riga
Dopo aver aggiunto le impostazioni della sezione, apri le impostazioni per la riga e aggiorna quanto segue:
- Larghezza grondaia: 1
- Imbottitura: 0px in alto, 0px in basso
Nella scheda Avanzate, aggiungi il seguente CSS personalizzato all'Elemento principale:
display:flex !important; flex-wrap: nowrap; align-items: center;
Ciò assicurerà che le colonne vengano impilate sul dispositivo mobile.
Aggiungi contenuto dinamico del titolo del post
Il primo contenuto dinamico che aggiungeremo alla barra è il titolo del post. Questo servirà come utile promemoria per il lettore del titolo del post che sta attualmente leggendo.
Modulo Aggiungi testo
Per creare il titolo del post come contenuto dinamico, crea un nuovo modulo di testo all'interno della colonna all'estrema sinistra.
Aggiungi titolo di post/archivio come contenuto dinamico
Quindi, fai clic sull'icona "Usa contenuto dinamico" mentre passi con il mouse sull'area del corpo delle impostazioni del testo. Seleziona "Pubblica/Archivia titolo" dall'elenco.
Apri le impostazioni del contenuto dinamico per il titolo del post/archivio e aggiungi quanto segue nella casella di input prima:
You're Reading:
Quindi salvare le modifiche.
Impostazioni di progettazione
Nella scheda Design, personalizza lo stile del titolo dinamico come segue:
- Carattere del testo: Ubuntu
- Peso del carattere del testo: medio
- Colore del testo del testo: #121212
- Testo Dimensioni testo: 14 px (desktop), 12 px (tablet), 11 px (telefono)
Aggiungi informazioni sulle categorie di post dinamici
Per creare le informazioni sulle categorie di post, duplica il modulo di testo che contiene il titolo del post.
Quindi apri le impostazioni del modulo di testo duplicato e aggiungi le categorie di post come contenuto dinamico al corpo.
Apri le Impostazioni contenuto dinamico delle categorie di post e aggiorna quanto segue:
- Prima: In
- Separatore di categorie: &
Aggiorna il colore del collegamento
Nella scheda Design, aggiorna il colore del collegamento come segue:
- Colore del testo del collegamento: #4160fd
Aggiunta delle informazioni sul conteggio dei commenti dinamici
Un'altra informazione utile che aggiungeremo alla barra delle informazioni del post è il conteggio dei commenti che ricorda all'utente di interagire con i propri commenti se lo desidera. Il conteggio dei commenti includerà anche un collegamento ai commenti del post.
Per creare le informazioni sul conteggio dei commenti dinamici, duplica il modulo di testo con le categorie e trascinalo nella colonna centrale.
Quindi aggiungi il commento del post come contenuto dinamico al corpo del testo.
Apri le impostazioni del conteggio dei commenti ai post e aggiungi quanto segue:
- Dopo: commento/i
Aggiunta dell'invito all'azione "Lascia un commento"
Oltre al conteggio dei commenti, aggiungeremo un semplice invito all'azione per lasciare un commento. Il collegamento sarà un collegamento di ancoraggio che scorre fino alla sezione dei commenti in fondo al post.
Per creare il CTA, duplica il modulo Testo nella colonna 2 tenendo il conteggio dei commenti.
Quindi apri le impostazioni del testo per il duplicato e aggiungi il seguente link html al corpo:
<a href="#respond">Leave a Comment</a>
Aggiunta del pulsante Iscriviti
L'ultima cosa che aggiungeremo alla barra delle informazioni sui post è un pulsante di iscrizione. Questo sarà anche un collegamento di ancoraggio che porta l'utente alla sezione del modello di post che include un modulo di attivazione e-mail.
Per fare ciò, aggiungi un modulo pulsante nella colonna all'estrema destra.
Nella scheda Design, aggiorna gli stili dei pulsanti come segue:
- Dimensioni del testo del pulsante: 14 pixel (desktop), 12 pixel (tablet), 11 pixel (telefono)
- Colore del testo del pulsante: #ffffff
- Colore sfondo sfumato a sinistra del pulsante: #7e5ce6
- Colore sfondo sfumato a destra pulsante: #25b8ee
- Larghezza bordo pulsante: 0px
- Raggio del bordo del pulsante: 100 px
- Spaziatura delle lettere dei pulsanti: 2px
- Carattere del pulsante: Ubuntu
- Peso del carattere del pulsante: grassetto
- Stile carattere pulsante: TT
- Imbottitura (desktop): 10px in alto, 10px in basso, 20px a sinistra, 20px a destra
- Imbottitura (tablet): 6px in alto, 6px in basso, 14px a sinistra, 14px a destra
Per aggiungere il link di ancoraggio al pulsante, vai alla scheda contenuto e aggiungi il seguente URL di collegamento al pulsante:
- URL collegamento pulsante: #subscribe
Questo collegamento non funzionerà finché non aggiungeremo un ID CSS corrispondente alla sezione contenente il modulo di attivazione dell'email nel corpo del modello di post.
Disabilita la colonna 1 sul cellulare
C'è solo così tanto spazio sul cellulare per un bar fisso. Ecco perché dovremo prendere decisioni su quali informazioni includere. Per questo esempio, lasceremo le due colonne con i CTA sui dispositivi mobili e disabiliteremo la colonna con il titolo e le categorie del post.
Per fare ciò, apri le impostazioni per la colonna 1. Nella scheda Avanzate, disabilita la visibilità su telefono e tablet.
Dare alla sezione una posizione fissa e un indice Z alto
Una volta terminato il disegno, possiamo ora dare alla sezione una posizione fissa. L'idea è di nascondere inizialmente la barra dietro la sezione con l'intestazione. Quindi, mentre l'utente scorre, la barra delle informazioni del post fisso verrà rivelata da sotto l'intestazione.
Apri le impostazioni della sezione e aggiorna quanto segue:
- Posizione: fissa
- Indice Z: 998
Nota che l'indice z è 998 perché voglio che la barra fissa si trovi sopra il resto del contenuto del post.
Aggiorna l'indice Z dell'intestazione della sezione
Poiché la sezione della barra delle informazioni del post ha un indice z più alto, verrà mostrata sopra la sezione con l'intestazione. Per risolvere questo problema, apri le impostazioni della sezione per la sezione con l'intestazione e aggiungi quanto segue:
- Indice Z: 999 (uno in più della sezione con la barra)
Salva le modifiche nell'editor di layout.
Aggiungi l'ID CSS alla riga di attivazione dell'email sul modello del corpo
Il pulsante di iscrizione CTA che aggiungiamo alla barra ha ancora bisogno di un'ancora o di un punto in cui "saltare" sul modello di post. Poiché il CTA è per "iscriverti", ne abbiamo bisogno per passare al modulo di opi-in via e-mail.
Per fare ciò, apri l'area "corpo personalizzato" del modello di post nel generatore di temi.
Trova la riga con il modulo di attivazione dell'email nella parte inferiore del layout e aggiungi il seguente ID CSS:
- ID CSS: iscriviti
Ciò consentirà al link di ancoraggio del pulsante di iscrizione di scorrere fino a quest'area specifica del modello.
Una volta fatto, salva le modifiche al layout e al generatore di temi.
Risultato finale
Per vedere il risultato finale, apri semplicemente e visualizza un post in diretta sul sito. Nota come i link di ancoraggio ("Lascia un commento" e "Iscriviti") indirizzano gli utenti all'area corrispondente del post.
Pensieri finali
Si spera che questa barra dinamica delle informazioni sui post sia utile per potenziare l'esperienza utente dei post del tuo blog Divi. Sentiti libero di sperimentare anche con altre informazioni. Sono sicuro che c'è un modo per presentare un post correlato con un modulo blog.
Non vedo l'ora di sentirti nei commenti.
Saluti!