Come creare una bellissima pagina podcast con Divi

Hai un podcast fantastico. Ma il tuo sito web potrebbe aver bisogno di un po' di lavoro. Fa il suo dovere, ma non si fa notare. Niente paura, podcaster! Ti ho coperto.

Ti insegnerò un modo semplice per utilizzare Divi per creare non solo una homepage facilmente aggiornabile per il tuo podcast, ma anche una pagina di archivio elegante e un modello per i singoli episodi.

Prodotto finale di oggi: home page del podcast in tre sezioni

Volevo mantenere il design semplice e il più minimale possibile, senza perdere la personalità che un buon podcast deve mantenere. Questo design è per un podcast indipendente immaginario chiamato You're An All-Star , il cui obiettivo sono le scarpe e l'essere felici. Volevo che il design riflettesse quel tema.

La prima sezione utilizza un colore brillante per attirare l'attenzione dell'utente, fornisce una breve descrizione dell'argomento del podcast sulla sinistra e utilizza il modulo Divi Audio per presentare un episodio del podcast per l'ascolto immediato.

Mentre l'utente scorre verso il basso, l'estetica si sposta leggermente nella sezione Episodi selezionati, che utilizza nuovamente il modulo audio Divi per presentare contenuti facilmente accessibili, nonché un'opzione per visitare gli archivi dello spettacolo. Lo sfondo è parallasse per attirare l'attenzione sugli episodi stessi.

La sezione finale è semplicemente un'e-mail di attivazione. Ogni marchio, podcast, blog e azienda ne ha bisogno e, per farlo risaltare, ho riportato questa sezione su uno sfondo colorato e l'ho reso abbastanza piccolo da consentire alla parallasse della seconda sezione di attirare ulteriore attenzione su di esso.

Di seguito, ti darò un tutorial passo passo su come ho disegnato e creato ogni modulo, sezione e pagina del sito.

Risorse di cui avrai bisogno

La cosa grandiosa di questo design è che non richiede molte risorse al di fuori di Divi stesso. Tutto ciò di cui hai bisogno sono 5 immagini ad alta risoluzione da utilizzare per gli sfondi e qualsiasi arte e miniatura dei podcast che usi per i tuoi episodi.

Tutte le mie immagini provengono da Unsplash (tutte le immagini di questo sito possono essere trovate in questa raccolta). Ho usato Anteprima per convertirne alcuni in bianco e nero, ma puoi usare qualsiasi software di modifica delle immagini che desideri. Praticamente tutti ti consentono di selezionare un'opzione in scala di grigi / bianco e nero o di abbassare la saturazione a zero.

Oltre a questo, tutte le risorse di cui avrai bisogno sono proprio all'interno di Divi. Andiamoci, allora!

Sito Web Podcast Homepage: Prima Sezione

Inizia creando una nuova pagina nella dashboard di WordPress e impostandola come prima pagina del tuo sito. (Ho convenientemente chiamato il mio "Casa.)

Ora torna indietro per modificare la tua nuova pagina. All'interno della casella Attributi di pagina sulla barra laterale destra, cambia il modello predefinito nel modello di pagina vuota.

Per prima cosa, creiamo una riga a tre colonne.

All'interno della colonna centrale, vogliamo inserire un modulo divisore Divi.

All'interno delle impostazioni del divisore, nella scheda Design, imposta l'altezza su 600. Ciò non solo manterrà separate le due colonne esterne (il contenuto principale della sezione), ma manterrà anche la sezione abbastanza alta da consentire uno spazio bianco adeguato su un numero di risoluzioni di visualizzazione. (Pur rimanendo nascosto sul cellulare per impostazione predefinita.)

Ora, nella colonna di sinistra, aggiungeremo due moduli di testo. Ho deciso che per questo progetto un'intestazione orizzontale sarebbe sembrata fuori posto, quindi il primo modulo di testo sarà semplicemente un titolo.

Nella scheda contenuto delle Impostazioni testo, aggiungi il titolo alla casella del contenuto.

Nella scheda Design, aggiorna il Colore del testo su "Chiaro" e cambia l'Orientamento del testo su "Centro". Quindi regola il carattere e la dimensione del testo. Ho scelto il carattere "Special Elite" per il suo aspetto angosciato e quindi ho impostato la sua dimensione su 60. Imposta anche l'altezza della linea di testo su 1 em.

Fatto ciò, è il momento di passare alla seconda casella di testo. Stiamo usando questo come una breve descrizione per il podcast.

Nella scheda Contenuto, Aggiorna le seguenti opzioni:

Contenuto : inserisci il testo per la descrizione (suggerirei una versione troncata della descrizione che usi su iTunes e altri servizi)
Colore di sfondo : rgba(0,0,0,0,4)

Nella scheda Design, seleziona "Luce" per il colore del testo e seleziona "Centro" per l'orientamento del testo come hai fatto nella casella precedente. Imposta anche il carattere del testo su "Special Elite" con una dimensione di 20 px.

Infine, aggiungi 10 px di imbottitura attorno all'intera casella di testo.

Successivamente, vai alla scheda Avanzate e, in CSS personalizzato, inseriscilo nel campo Elemento principale per arrotondare gli angoli della casella di testo:

border-radius: 10px;

Fatto ciò, hai finito con le prime due colonne del tuo nuovo sito! Evviva! Salva il tuo lavoro facendo clic sul cerchio viola in fondo alla pagina e premendo il pulsante verde di salvataggio.

Lavoro eccellente!

Per renderlo un po' più accattivante, però, dobbiamo impostare lo sfondo della sezione, quindi vai nelle impostazioni della casella blu (sezione) e carica un'immagine di sfondo. Tendo a mantenere la mia risoluzione intorno a 1920 × 1280.

Dovresti vedere qualcosa che assomiglia a questo ormai:

A questo punto ti starai chiedendo: "E i podcast? È un sito di podcast e non abbiamo ancora fatto nulla con un podcast!” Hai perfettamente ragione. Quindi diamo un po' di audio selezionando il modulo audio (hai indovinato) nella terza colonna della nostra riga.

Il modulo audio predefinito non si adatta esattamente al tema con cui stiamo andando per questo sito, quindi prendiamolo da questo:

A questa:

Apri le impostazioni del modulo audio. Il campo Audio è dove puoi caricare il tuo file su qualsiasi host utilizzi, oppure puoi collegarti direttamente al file multimediale di qualsiasi servizio di podcasting che usi. Uso Libsyn per il mio, quindi ho appena preso l'URL del media e l'ho incollato.

(Fatto divertente: chiunque faccia clic su Riproduci sul tuo sito tramite questo modulo viene anche conteggiato come download nella dashboard di Libsyn. Punteggio!)

Quindi vorrai mettere il titolo dell'episodio a cui ti sei collegato sotto Titolo e il tuo nome sotto Nome artista (o qualunque cosa tu usi nel tuo show. Per il nostro podcast immaginario sulle scarpe, come potrei scegliere qualcosa di diverso da Chuck Taylor? ). Il titolo dell'album sarà il nome del tuo podcast.

Quindi cambiamo quel colore verde acqua in uno sfondo totalmente trasparente. Il colore non importa. Basta far scorrere la barra della trasparenza fino in fondo o fino a quando l'ultima cifra dell'RGBA è 0.

Per l'immagine di copertina, è meglio usare la miniatura di questo particolare episodio o la grafica del podcast che usi su iTunes e altrove.

Una volta che i dettagli del podcast sono stati ordinati, vai nella scheda Design in modo da poter davvero rendere tuo questo lettore.

Seleziona "Chiaro" per l'opzione Colore del testo. Imposta i caratteri su "Special Elite", la dimensione del titolo su 50 px e la dimensione della didascalia su 20 px.

Ho anche impostato il margine superiore su questo particolare player su 50px perché questo margine mantiene il player centrato orizzontalmente nella sezione e quando si passa al mobile, consente una buona spaziatura tra gli elementi. (L'impostazione si applica a tutte le dimensioni della finestra, a condizione che non si faccia clic sull'icona dello smartphone.)

Poiché lo sfondo è trasparente, non è necessario arrotondare gli angoli in modo che corrispondano alla casella di testo nella prima colonna, quindi premi Salva.

Poiché questo riproduttore di podcast è la stella dello spettacolo, non vogliamo doverlo ricreare ogni volta, quindi salveremo questo modulo nella libreria Divi, che ci consentirà di duplicarlo facilmente nel sito e modificare come necessario.

Inserisci il nome del modello che desideri e NON selezionare "Rendi questo un elemento globale". Useremo questa opzione nella parte 2 di questa serie, ma non adesso.

Va bene! Ancora un elemento e la prima sezione è completa. (Non preoccuparti, però. È il più coinvolto di tutti.)

La maggior parte dei podcast tiene un blog o mostra note per gli ascoltatori su cui tornare e rivisitare ciò che è stato discusso nell'episodio. Il tuo podcast non è diverso, ne sono sicuro. L'aggiunta di un collegamento alle note di programma del tuo podcast è totalmente indolore.

Crea un nuovo blocco di testo nella terza colonna, apri le impostazioni e digita il testo del collegamento che desideri. Per questo esempio, è l'autoesplicativo "leggi le note dello spettacolo".

Fare clic sull'icona nella barra degli strumenti per aggiungere un collegamento e digitare/incollare l'URL per le note dello spettacolo. (Ancora una volta, nella Parte 2, ti mostrerò come creare e modellare i post del blog per le note dello spettacolo.) Poiché la struttura del permalink di WordPress è impostata su "Nome post", tutto ciò che devo fare è digitare lo slug del post che ho scritto per questo episodio.

(Nota a margine: non inserendo le informazioni sul dominio e solo lo slug, stai dicendo a WordPress di indirizzare gli utenti a quella pagina, indipendentemente dalle informazioni sul dominio. Questo è davvero utile nel caso in cui cambi dominio e aiuta a prevenire i collegamenti interrotti!)

Basta salvare quel link e sei pronto per partire!

Dovresti anche salvare questo modulo nella tua libreria nello stesso modo in cui hai fatto il tuo lettore di podcast.

Ecco! Il tuo... aspetta. Uh Oh. Il tuo link alle note dello spettacolo è... è... brutto!

Nessun problema, però. I collegamenti brutti sono una soluzione facile! Anche se utilizzi le impostazioni nel modulo di testo per modificare il colore del testo, non influirà su queste parole perché sono un collegamento.

Vai al campo CSS personalizzato nel tuo Divi -> Opzioni del tema e inseriscilo in basso.

a:link, a:visited, a:active {
    color: #ffffff;
}
 
a:hover {
 color: #ffffff;
 font-weight: bold;
 text-decoration: underline;
}

Ciò che farà è mantenere il testo bianco (in linea con il resto del testo del sito, assicurati che sia sottolineato come la maggior parte degli altri collegamenti e trasformalo in grassetto quando ci passi sopra con il mouse).

Assicurati di salvarlo e ora il tuo lettore di podcast è completo!

E per l'ultima modifica in questa prima sezione, fai clic su Impostazioni riga (riquadro verde).

Seleziona "Usa larghezza personalizzata". Assicurati che le unità siano impostate su percentuali e sposta il cursore su 80. In questo modo, quella riga occuperà l'80% della finestra di qualsiasi dimensione dell'utente, il che impedisce a tutto di raggrupparsi.

E così è la sezione superiore del nuovo sito web del tuo podcast! Dovrebbe assomigliare a qualcosa del genere ormai.

Salvalo e così, la maggior parte del lavoro è fatta! E grazie alla funzione libreria di Divi, le prossime due sezioni voleranno! Sta 'a guardare.

Sito Web Podcast Homepage: Seconda Sezione

Questa sezione mostrerà episodi selezionati del nostro podcast e consentirà agli utenti di visitare gli archivi (che sono, come le pagine delle note dello spettacolo, nella seconda parte).

La prima cosa che faremo è effettivamente creare una nuova sezione facendo clic sul + blu nella parte inferiore della sezione e aggiungendo una sezione normale. In questo modo creerai un'altra casella blu nel visual builder. Aggiungi in una riga a colonna singola.

Quando lo abbiamo a posto, aggiungiamo uno sfondo nello stesso modo in cui abbiamo fatto sopra, solo che questa volta vogliamo selezionare "Usa opzione parallasse" nelle impostazioni della sezione. Mantieni il menu a discesa su "True Parallax" anziché su "CSS".

Questa è l'unica sezione che utilizzeremo con la parallasse nella home page. Penso che usare l'effetto con parsimonia richiami più attenzione sul contenuto che vuoi evidenziare.

Salva e quindi inserisci una nuova casella di testo nella riga. Digita "Episodi selezionati", centralo nell'editor WYSIWYG e vai alle impostazioni per impostare il carattere del testo su "Special Elite" e la dimensione del testo di 50 px. Dovresti vedere qualcosa del genere ora:

Sotto, crea una nuova riga a tre colonne facendo clic sul + verde e, nella prima colonna, inserisci "Aggiungi dalla scheda Libreria". (Non avrai tutte queste opzioni di libreria in questo momento, ma le avrai in seguito!)

Seleziona "Episodio podcast" o come hai chiamato il tuo giocatore sopra. Quindi aggiungi un altro modulo sotto di esso, vai di nuovo alla libreria e aggiungi il modulo "Mostra collegamento note" salvato. Fallo per tutte e tre le colonne, finché non vedi questo:

Continua a farlo finché non hai aggiunto tutti gli episodi che desideri. Modifica il titolo, la copertina dell'album e mostra i collegamenti alle note per ogni episodio. Ho appena aggiunto una seconda riga e riempito solo la seconda colonna per adattare il design allo sfondo scelto.

L'unica cosa rimasta per questa sezione è l'aggiunta di un pulsante "Sfoglia gli archivi". Crea una nuova riga in fondo facendo clic sul + verde e utilizza un layout a colonna singola. Inserisci un modulo "Pulsante". Questo creerà un pulsante molto difficile da leggere (a seconda del tuo background, ovviamente), che avrà bisogno di uno stile semplice.

Apri le impostazioni del modulo Button e inserisci lo slug dell'URL per la pagina che sarà il tuo archivio. Sono andato con l'ovvio "/ archivi", ho usato il testo "Sfoglia gli archivi" e poi ho centrato il pulsante stesso.

Nella scheda delle impostazioni, facciamo clic su "Usa stili personalizzati per pulsante" e imposteremo il colore di sfondo su "#ffffff" e il colore del testo su "#000000" (rispettivamente bianco e nero).

Quindi vorremmo arrotondare gli angoli del pulsante impostando il raggio del bordo su 10 px, impostare il carattere su "Special Elite" e modificare l'icona Aggiungi pulsante da "Predefinito" a "No".

Infine, cambia il raggio del bordo del passaggio del mouse del pulsante a 10 px in modo che sia arrotondato quando il pulsante è posizionato con il mouse su di esso.

L'ho salvato nella mia libreria in modo da poter utilizzare lo stile in altri pulsanti mentre procedo.

E con questo, la tua seconda sezione è finita. Hai quasi finito, podcaster! Stai arrotondando il terzo, letteralmente!

Sito Web Podcast Homepage: Terza Sezione

Questo sarà solo un singolo modulo su uno sfondo statico.
Innanzitutto, crea una nuova casella blu con una colonna a doppia larghezza come abbiamo fatto per la sezione due e seleziona il modulo "Opzione email" dal menu.

Vedrai questo acceso, che non si adatta affatto al nostro design. È una soluzione super facile, però.

Naviga nelle impostazioni del modulo e aggiorna le seguenti opzioni:

Titolo: ho lasciato il titolo intenzionalmente vuoto
Contenuto: aggiungi la tua call to action blurb e centrala.
Fornitore di servizi: io uso Mailchimp, quindi è quello che ho scelto qui.
Colore di sfondo: trasparente; questo rende anche il pulsante stesso trasparente.

L'unica cosa che ti resta da fare è assicurarti che il tuo servizio di posta elettronica sia fornito, altrimenti il ​​modulo non verrà visualizzato dopo aver salvato e chiuso il builder. Se usi Mailchimp, c'è un'ottima documentazione su come trovare la tua chiave API nella loro documentazione di supporto.

Una volta che hai la tua chiave, vai alla dashboard di WordPress, vai su Divi -> Opzioni tema ancora una volta e inserisci la tua chiave API Mailchimp nel campo "Chiave API Mailchimp".

Dopo che è stato salvato, l'unico passaggio che ti rimane prima di avere una bella pagina finita è impostare uno sfondo per la terza sezione. Il prodotto finale dovrebbe assomigliare a questo:

Ce l'hai fatta! Evviva! Ora hai una homepage completamente funzionale per il tuo podcast. È ora di battere il record e dirlo al mondo, giusto?

Domani: creare bellissimi archivi e mostrare pagine di note per il tuo podcast

Dato che ora hai una fantastica home page, puoi mostrare i contenuti più fantastici che hai. Ma se i tuoi fan diventano dei veri fanatici, vorranno tuffarsi a fondo nel tuo show.

Domani ti mostrerò come mettere insieme alcune pagine semplici ma belle per il tuo intero archivio di episodi podcast, nonché singole pagine per ogni episodio che raccontano ai lettori di cosa parli in ogni episodio e danno loro la possibilità di iscriversi per la tua fantastica mailing list.

Ci vediamo domani!

Mostra pagina nota:

Pagina degli archivi: