Creare bellissimi archivi e mostrare pagine di note per il tuo podcast

Ieri abbiamo utilizzato il visual builder di Divi per creare una home page per il tuo podcast che impressionerà assolutamente i tuoi ascoltatori, ma cosa succede se vogliono approfondire il tuo spettacolo?

Andranno nei bellissimi archivi e mostreranno le pagine di note che ti insegnerò a fare oggi.

Prodotti finali di oggi: mostra note e pagine di archivio

Le pagine stesse sono progettate per completare la home page, ma non rispecchiare direttamente i suoi elementi.

Nella pagina delle note dello spettacolo, volevo assicurarmi che qualsiasi visitatore fosse in grado di ascoltare l'episodio direttamente nel proprio browser, vedere i punti salienti e i collegamenti per quel particolare episodio e avere l'opportunità di iscriversi alla tua lista di e-mail.

La pagina dell'archivio è altrettanto semplice ma funzionale della pagina delle note dello spettacolo. Le pagine degli archivi hanno uno scopo: consentire ai tuoi utenti di visualizzare rapidamente e facilmente il tuo catalogo arretrato. Questo è esattamente ciò che fa questa pagina. Con un breve estratto sullo spettacolo, i tuoi ascoltatori saranno in grado di scansionare il tuo spettacolo per trovare esattamente l'argomento che vogliono ascoltare.

Risorse di cui avrai bisogno

Come ieri, avrai bisogno di alcune immagini di sfondo ad alta risoluzione. I due che ho usato sono in questa raccolta su Unsplash (che include anche gli sfondi della homepage di ieri). Li ho modificati in scala di grigi in Anteprima, ma qualsiasi software di modifica delle immagini sarà in grado di applicare un effetto in bianco e nero/scala di grigi o di spostare il cursore della saturazione su 0.

La tua vita sarà anche un po' più semplice se hai già creato la homepage perché utilizzerai lo stesso stile.

Questo è tutto, quindi passiamo alla costruzione!

Costruire la pagina delle note dello spettacolo

Le note dello spettacolo sono solo "post" in WordPress, quindi vai alla dashboard e vai su Post -> Aggiungi nuovo.

Lo farai ogni volta che vorrai creare una pagina di note dello spettacolo per un singolo episodio del tuo spettacolo. Intitolalo come vuoi e imposta lo slug dell'URL su qualcosa di semplice (in modo che i tuoi ascoltatori lo ricordino dopo la fine dell'episodio).

Innanzitutto, assicurati di fare clic su "Usa Divi Builder".

Questo dovrebbe aprire la prossima serie di opzioni di cui abbiamo bisogno. Nella parte destra della pagina, imposta il post su "Larghezza intera" perché non utilizzeremo una barra laterale per le note dello spettacolo. E imposta il titolo del post su "Nascondi" in modo che i metadati come autore, commenti e data per il post stesso non vengano visualizzati.

Quindi vorrai entrare nel Visual Builder e essere presentato da una pagina web deliziosamente vuota.

La prima cosa che vorrai fare è fare clic sull'icona a forma di ingranaggio nella sezione blu nell'angolo in alto a sinistra della pagina per accedere alle impostazioni della sezione.

Da lì, carica la tua immagine di sfondo. Scorri un po' più in basso nelle impostazioni e attiva Usa effetto parallasse. Lascia il metodo Parallax sul valore predefinito "True Parallax".

Salva queste impostazioni e dovresti vedere qualcosa del genere:

Non è esattamente quello che c'era nel prodotto finale sopra, vero? Dovremo allungarlo un po' aggiungendo il contenuto alla pagina.

Fare clic sul + verde e inserire una riga di una singola colonna (quella nell'angolo in alto a sinistra).

Successivamente, sarai contento di aver già fatto la home page di ieri. Non appena scegli la tua riga, sarai accolto da una finestra che ti chiederà di scegliere un elemento. Selezionerai il riproduttore di podcast che abbiamo salvato ieri facendo clic su "Aggiungi dalla libreria".

Avevo chiamato il mio semplicemente "Podcast Episode", ma se hai scelto qualcosa di diverso, assicurati di sceglierlo.

Badabing-badaboom, hai aggiunto un episodio podcast alla pagina delle note dello spettacolo come per magia.

Tieni presente che dovrai modificare il titolo e i media (e potenzialmente la grafica dell'episodio) per ogni nuova pagina delle note dello spettacolo. Quello che hai appena aggiunto è una copia esatta di ciò che hai salvato.

Le note dello spettacolo effettive andranno direttamente sotto il lettore del podcast, quindi passa il mouse sul lettore e premi il + nero. Scorri verso il basso fino a visualizzare il modulo di testo. Aggiungilo alla pagina.

Nella scheda Contenuto in Impostazioni testo, inserisci le tue note nell'editor WYSIWYG e vai alla scheda Progettazione.

Nella scheda Progettazione, aggiorna le seguenti opzioni:

Colore del testo: chiaro
Orientamento del testo: a sinistra
Carattere del testo: Special Elite
Dimensione carattere del testo: 20px
Colore del testo del testo: #ffffff

Salvalo e dovresti vedere un nuovo blocco di testo brillante e una pagina simile a questa.

Stiamo raggiungendo il traguardo per la pagina delle note dello spettacolo: mancano solo due elementi. Fai di nuovo clic sul + nero e aggiungi il modello di pulsante che hai salvato ieri.

Invece di portare gli utenti agli archivi come farà quello di ieri, questo li riporterà alla home page. Vai alla pagina delle impostazioni del pulsante e imposta l'URL su una semplice barra rovesciata.

Perché non farlo andare su /home o qualcosa di simile? Bene, l'uso solo di una barra rovesciata porterà il tuo utente a qualunque sia la prima pagina del tuo sito Web, non importa quale. E poiché sei sullo stesso sito, anche lo spostamento dei domini non influirà sul pulsante. Tornerà sempre a casa. Che è esattamente quello che vuoi che faccia!

Scorri e compila il resto delle impostazioni del pulsante. Fallo aprire nella stessa finestra, cambia il testo del pulsante in "Torna a casa" (o quello che preferisci) e l'allineamento del pulsante in "Destra" (sia per tenerlo lontano dal contenuto, sia per farlo stare in piedi contro il contenuto). Lo stile della scheda Design dovrebbe essere stato importato dalla libreria Divi.

Avrai un bel pulsante di navigazione ora e ti suggerisco di aggiungerlo alla tua libreria in modo da poterlo utilizzare su più pagine.

E infine, impostiamo la registrazione e-mail in modo da poter ottenere quegli indirizzi e-mail dolci e dolci per mantenere gli utenti aggiornati con le notizie sul podcast.

Per questo, vogliamo un'intera nuova riga a colonna singola. Quindi fai clic sul + verde e mettilo a posto. Quindi aggiungi un modulo Email Optin dal menu a discesa. Proprio come ieri, vai alle impostazioni del modulo e inserisci il titolo che desideri visualizzare e il testo di invito all'azione che desideri nell'editor WYSIWYG.

Inoltre, aggiungi il testo che desideri per il pulsante stesso. Ho scelto l'esclusivo "Sottoscrivi".

Scegli il tuo provider di servizi di posta elettronica e l'elenco (ricorda da ieri che il modulo completo non verrà visualizzato sulla pagina quando è attivo se non scegli un elenco).

Cambia lo sfondo RGBA in trasparente.

Nella scheda Design, imposta il carattere dell'intestazione su "Special Elite" e la dimensione su 36 px.

Imposterai anche il carattere del corpo su "Special Elite" e le dimensioni su 16 px.

A differenza di quasi tutto il resto per questo sito, vogliamo usare un bordo per il modulo Email Optin. Quindi sposta "Bordo utente" su sì e imposta il colore su #ffffff e l'imbottitura personalizzata su 15 px su tutti i lati.

Al termine, spostati nella scheda Avanzate e aggiungi questo all'Elemento principale in CSS personalizzato per arrotondare gli angoli del modulo:

border-radius:10px;

Salva il tuo lavoro e hai un'email di attivazione!

L'unica altra cosa richiesta dalla pagina delle note dello spettacolo è salvare questo modulo per l'uso su altre pagine. Poiché desideri che le tue opzioni di posta elettronica siano coerenti in tutto il sito, lo salveremo come elemento globale. Fai clic sul pulsante "Aggiungi alla libreria" quando passi il mouse sul modulo e assicurati di selezionare la casella "Rendi questo un elemento globale".

Ora hai un singolo elemento che puoi utilizzare su più pagine. E se apporti modifiche, si rifletteranno in tutte le istanze, a differenza del lettore podcast e del pulsante sopra in cui ogni modulo può essere modificato individualmente.

E lì, amici miei, c'è il modello di pagina Mostra note! Suggerisco anche di salvare l'intera pagina nella tua libreria in modo che tu possa semplicemente importarla e modificare gli elementi necessari per ogni episodio.

Ora... avanti agli Archivi! Il traguardo è in vista!

Costruisci la tua pagina degli archivi

Vai alla dashboard di WordPress e vai su Aggiungi nuova pagina, chiamalo (il mio è "Archivi") e apri Divi Visual Builder. Vai tranquillo.

Una volta che sei lì, aggiungi una nuova riga a colonna singola con un modulo di testo.

Vai alle impostazioni e inserisci il titolo della pagina nell'editor WYSIWYG.

Nella scheda Design, imposta il Colore del testo su Luce e Orientamento su Centro. Imposta il carattere su "Special Elite" e la dimensione del carattere su 50 px.

Per fare in modo che il testo abbia un bell'aspetto sui dispositivi mobili, assicurati di modificare i margini superiore e inferiore a 40 px.

Salva il tuo lavoro e, tieniti forte, preparati ad aggiungere uno sfondo agli Archivi! Apri le impostazioni nella casella blu + e seleziona l'immagine di sfondo e imposta la parallasse come hai fatto per Mostra note. Ancora una volta, ho creato questa scala di grigi usando Anteprima.

Nella scheda Design, imposta il padding superiore e inferiore rispettivamente a 55 px e 176 px in modo che l'intera pagina consenta di visualizzare l'effetto di parallasse indipendentemente dal numero di post che hai nei tuoi archivi.

Perché 176px invece di 175? Perché sono un ribelle, ecco perché.

Vedrai questo quando salvi il tuo lavoro:

Quindi, aggiungi una nuova riga a colonna singola, solo che questa volta inserisci un modulo Blog. Questo mostrerà qualunque ciclo di WordPress che hai impostato e vogliamo solo che siano estratti e titoli in modo che i tuoi ascoltatori sappiano cosa aspettarsi.

Vai alle impostazioni e aggiorna le opzioni nella scheda Contenuto come segue:

Numero post: 10 (o qualunque cosa pensi sia la migliore per il tuo sito: verrà impaginata dopo la visualizzazione di questo numero)
Contenuto: Mostra estratto (perché vogliamo che l'utente faccia clic e ascolti l'episodio nel lettore)
Mostra immagine in primo piano: S
Colore di sfondo delle mattonelle della griglia: rgba (73,73,73,0.72)

Nella scheda Progettazione, aggiorna le seguenti opzioni:

Layout: Griglia
Carattere intestazione: Special Elite
Colore del testo dell'intestazione: #ffffff
Carattere del corpo: Special Elite
Colore del corpo del testo: #ffffff
Meta Font: Special Elite
Colore meta testo: #ffffff
Usa bordo: S
Colore bordo: #ffffff
Larghezza bordo: 1px
Stile bordo: solido

Quando tutto è pronto, hai un ultimo pezzo di styling da fare. La griglia stessa ha angoli acuti e quadrati in ogni casella e vogliamo ottenere un raggio di bordo di 10 px in modo che corrisponda al resto del sito.

Vai alla dashboard di WordPress -> Divi -> Opzioni tema, quindi scorri fino a CSS personalizzato. Aggiungi questo codice nella casella per arrotondare gli angoli delle singole caselle di estratto:

.et_pb_post {
 border-radius: 10px;
}

Tieni presente che ".et_pb_post" è la classe CSS che Divi utilizza per regolare tutte le caselle.

Dopodiché, salva tutto il tuo lavoro.

L'unica cosa che resta da fare è aggiungere il pulsante Torna a casa dalla tua libreria e il gioco è fatto. Fai clic sul + nero per aggiungerlo alla stessa riga del modulo Blog.

Hot Diggity Dog, hai appena finito di impostare la tua pagina Archivi.

Congratulazioni! Hai appena finito di configurare la tua pagina Archivi. Salva la tua pagina Archivi come modello facendo clic sul + viola nella parte inferiore dello schermo e puoi selezionare un altro elemento dalla tua lista dei desideri, perché tra ieri e oggi hai appena creato un riproduttore di podcast, una home page, un archivio, e modello per le singole note di presentazione.

In conclusione

E questo è tutto! Grazie per aver seguito i miei due tutorial sulla pagina dei podcast. Puoi prendere il primo Come creare una bellissima pagina di podcast con Divi a questo link. Se hai domande o commenti sentiti libero di lasciarli qui sotto e farò del mio meglio per rispondere!