Cum să creați o pagină de podcast frumoasă cu Divi

Ai un podcast minunat. Dar este posibil ca site-ul dvs. să aibă nevoie de ceva lucru. Își face treaba, dar nu iese în evidență. Nu vă temeți niciodată, podcaster! Te-am acoperit.

Vă voi învăța un mod simplu de a utiliza Divi pentru a crea nu numai o pagină de pornire ușor de actualizat pentru podcast-ul dvs., ci și o pagină elegantă de arhivă și un șablon pentru episoade individuale.

Produsul final de astăzi: Pagina principală Podcast în trei secțiuni

Am vrut să păstrez designul simplu și cât mai minimal, fără a pierde personalitatea pe care un podcast bun trebuie să o mențină. Acest design este destinat unui podcast fictiv indie numit You're An All-Star , al cărui accent este pantofii și fericirea. Am vrut ca designul să reflecte această temă.

Prima secțiune folosește o culoare strălucitoare pentru a atrage atenția utilizatorului, oferă o imagine rapidă despre ceea ce este podcastul din stânga și folosește modulul audio Divi pentru a prezenta un episod de podcast pentru ascultare imediată.

Pe măsură ce utilizatorul derulează în jos, estetica se deplasează ușor în secțiunea Episoade selectate, care folosește din nou modulul audio Divi pentru a prezenta conținut ușor accesibil, precum și o opțiune de a vizita arhivele emisiunii. Fundalul este paralela pentru a atrage atenția asupra episoadelor în sine.

Secțiunea finală este pur și simplu o înscriere prin e-mail. Fiecare marcă, podcast, blog și companie are nevoie de una și, pentru a o face să iasă în evidență, am schimbat această secțiune înapoi pe un fundal color și am făcut-o suficient de mică încât paralela din a doua secțiune să ajute să atragă o atenție suplimentară asupra acesteia.

Mai jos, vă voi oferi un tutorial pas cu pas despre modul în care am stilat și creat fiecare modul, secțiune și pagină a site-ului.

Bunuri de care aveți nevoie

Lucrul minunat al acestui design este că nu necesită o mulțime de resurse în afara lui Divi. Tot ce aveți nevoie sunt 5 imagini de înaltă rezoluție pe care să le utilizați pentru fundaluri și orice arta podcast-ului și miniaturile pe care le utilizați pentru episoadele dvs.

Toate imaginile mele au venit de la Unsplash (toate imaginile acestui site pot fi găsite în această colecție). Am folosit Preview pentru a converti unele dintre ele în alb-negru, dar puteți utiliza orice software de editare a imaginilor doriți. Aproape toate vă permit să selectați o opțiune în tonuri de gri / alb-negru sau să reduceți saturația la zero.

În afară de asta, toate resursele de care aveți nevoie sunt chiar în interiorul Divi. Să ajungem la asta, atunci!

Pagina principală a site-ului web Podcast: Prima secțiune

Începeți prin crearea unei noi pagini în tabloul de bord WordPress și setarea acesteia ca prima pagină a site-ului dvs. (Am numit-o în mod convenabil pe a mea „Acasă.)

Acum reveniți pentru a edita noua dvs. pagină. În caseta Atribute pagină din bara laterală dreaptă, schimbați șablonul implicit în șablonul paginii goale.

În primul rând, creăm un rând cu trei coloane.

În coloana din mijloc, dorim să inserăm un modul divizor Divi.

În interiorul setărilor separatorului, sub fila Proiectare, setați înălțimea la 600. Acest lucru nu numai că va menține cele două coloane exterioare (conținutul principal al secțiunii) separate, dar va menține, de asemenea, secțiunea suficient de înaltă pentru a permite spațiu alb adecvat pe un număr de rezoluții de vizualizare. (În timp ce rămâne ascuns în mod implicit pe mobil.)

Acum, în coloana din stânga, vom adăuga două module de text. Am decis că pentru acest proiect, un antet orizontal ar fi părut deplasat, așa că primul modul de text va fi pur și simplu un titlu.

Sub fila Conținut din Setările textului, adăugați titlul în caseta de conținut.

În fila Design, actualizați culoarea textului la „Light” și schimbați Orientarea textului la „Center”. Apoi reglați fontul și dimensiunea textului. Am ales fontul „Special Elite” datorită aspectului său stresat și apoi i-am setat dimensiunea la 60. De asemenea, setați Înălțimea liniei de text la 1em.

Odată ce ați avut grijă, este timpul să treceți la a doua casetă de text. Îl folosim ca pe un mesaj rapid pentru podcast.

În fila Conținut, actualizați următoarele opțiuni:

Conținut : introduceți textul pentru descriere (aș sugera o versiune trunchiată a descrierii pe care o utilizați pe iTunes și alte servicii)
Culoare fundal : rgba (0,0,0,0,4)

În fila Design, selectați „Light” pentru culoarea textului și selectați „Center” pentru orientarea textului, așa cum ați făcut în caseta anterioară. De asemenea, setați fontul textului la „Special Elite” la dimensiunea de 20 px.

În cele din urmă, adăugați 10 px de umplutură în jurul întregii casete de text.

După aceea, mergeți la fila Avansat și, sub CSS personalizat, introduceți acest lucru în câmpul Element principal pentru a rotunji colțurile casetei de text:

border-radius: 10px;

După ce ați făcut acest lucru, ați terminat cu primele două coloane ale noului site! Ura! Salvați-vă lucrarea făcând clic pe cercul violet din partea de jos a paginii și apăsând butonul verde de salvare.

Muncă excelentă!

Pentru a-l face puțin mai atrăgător din punct de vedere vizual, totuși, trebuie să setăm fundalul secțiunii, deci accesați setările casetei albastre (secțiune) și încărcați o imagine de fundal. Am tendința să le păstrez pe ale mele în jurul rezoluției 1920 × 1280.

Ar trebui să vedeți ceva care să arate astfel până acum:

Până acum, s-ar putea să vă întrebați: „Dar podcast-urile? Este un site de podcasturi și încă nu am făcut nimic cu un podcast! ” Ai perfectă dreptate. Așadar, să pornim un sunet selectând modulul audio (l-ați ghicit) din a treia coloană a rândului nostru.

Modulul audio implicit nu se potrivește exact temei cu care mergem pentru acest site, așa că hai să o luăm de aici:

La acest:

Deschideți setările modulului audio. Câmpul Audio este locul în care puteți încărca propriul fișier pe orice gazdă utilizați sau puteți să vă conectați direct la fișierul media al oricărui serviciu de podcasting pe care îl utilizați. Folosesc Libsyn pentru a mea, așa că am apucat URL-ul media și l-am lipit.

(Fapt distractiv: oricine face clic pe redare pe site-ul dvs. prin intermediul acestui modul este considerat, de asemenea, ca o descărcare în tabloul de bord Libsyn. Scor!)

Apoi, veți dori să puneți titlul episodului la care v-ați conectat sub Titlu și numele dvs. sub Nume artist (sau orice treceți în emisiunea dvs. Pentru podcastul nostru fictiv despre încălțăminte, cum aș putea alege altceva decât Chuck Taylor? ). Titlul albumului va fi numele podcastului dvs.

În continuare, să schimbăm acea culoare verde-verzui pe un fundal complet transparent. Culoarea nu contează. Glisați bara de transparență până la capăt sau până când ultima cifră a RGBA este 0.

Pentru imaginea de copertă, cel mai bine este să folosiți fie miniatura acestui episod special, fie podcast-ul pe care îl utilizați pe iTunes și în alte părți.

Odată ce detaliile podcast-ului sunt sortate, accesați fila Design pentru a putea face cu adevărat acest player.

Selectați „Light” pentru opțiunea Color Text. Setați fonturile la „Special Elite”, dimensiunea titlului la 50 px și dimensiunea subtitrării la 20 px.

De asemenea, am setat marja superioară a acestui jucător la 50 px, deoarece această marjă menține jucătorul centrat orizontal în secțiune și, atunci când treceți pe mobil, permite o distanță bună între elemente. (Setarea se aplică tuturor dimensiunilor ferestrei, atâta timp cât nu faceți clic pe pictograma smartphone-ului.)

Deoarece fundalul este transparent, nu este nevoie să rotunjiți colțurile pentru a se potrivi cu caseta de text din prima coloană, așa că apăsați pe Salvare.

Deoarece acest podcast player este vedeta spectacolului, nu vrem să fie necesar să îl recreăm de fiecare dată, așa că vom salva acest modul în biblioteca Divi, ceea ce ne va permite să îl duplicăm cu ușurință în jurul site-ului și editați după cum este necesar.

Introduceți numele șablonului dorit și NU bifați „Faceți din acesta un articol global”. Vom folosi această opțiune în partea 2 a acestei serii, dar nu chiar acum.

În regulă! Doar încă un element și prima secțiune este completă. (Nu vă faceți griji, totuși. Este cel mai implicat dintre toate.)

Majoritatea podcast-urilor păstrează un blog sau prezintă note pentru ca ascultătorii să se întoarcă și să revizuiască ceea ce s-a discutat în episod. Podcastul dvs. nu diferă, sunt sigur. Adăugarea unui link la prezentările podcast-ului dvs. este total nedureroasă.

Creați un bloc de text nou în a treia coloană, deschideți setările și tastați orice text de legătură doriți. Pentru acest exemplu, se explică de la sine „citiți notele spectacolului”.

Faceți clic pe pictograma din bara de instrumente pentru a adăuga un link și tastați / lipiți adresa URL pentru notele de emisiune. (Din nou, în partea 2, vă voi arăta cum să creați și să creați stiluri pentru postările de blog pentru notele spectacolului.) Deoarece am structura de permalink WordPress setată la „Numele postării”, tot ce trebuie să fac este să tastați slugul post pe care l-am scris pentru acest episod.

(Notă laterală: Dacă nu introduceți informațiile despre domeniu și doar slugul, îi spuneți WordPress să direcționeze utilizatorii către acea pagină, indiferent de informațiile despre domeniu. Acest lucru este foarte util în cazul în care schimbați vreodată domeniile și ajută la prevenirea legăturilor rupte!)

Salvați doar linkul și sunteți gata!

De asemenea, ar trebui să salvați acest modul în biblioteca dvs. în același mod în care ați făcut playerul podcast.

Voila! Al tău ... stai. Uh oh. Link-ul dvs. de note de spectacol este ... este ... urât!

Fără griji, totuși. Legăturile urâte sunt o soluție ușoară! Chiar dacă utilizați setările din modulul text pentru a schimba culoarea textului, acesta nu va afecta aceste cuvinte, deoarece acestea sunt un link.

Accesați câmpul CSS personalizat din Divi -> Opțiuni temă și introduceți acest lucru în partea de jos.

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

Ceea ce va face este să păstreze textul alb (în conformitate cu restul textului site-ului, asigurați-vă că este subliniat ca majoritatea celorlalte link-uri și transformați-l în bold atunci când treceți cu mouse-ul peste el).

Asigurați-vă că îl salvați și acum playerul dvs. de podcast este complet!

Și pentru ultimele modificări din această primă secțiune, faceți clic pe setările Row (casetă verde).

Selectați „Utilizați lățimea personalizată”. Asigurați-vă că unitățile sunt setate la procente și mutați glisorul peste 80. Dacă faceți acest lucru, rândul respectiv va ocupa 80% din dimensiunea oricărei ferestre pe care o are utilizatorul, ceea ce împiedică totul să se adune.

La fel și secțiunea de sus a noului site web al podcastului! Ar trebui să arate așa ceva până acum.

Salvați-l și, așa, cea mai mare parte a muncii este gata! Și datorită funcției de bibliotecă a lui Divi, următoarele secțiuni urmează să zboare! Doar priveste.

Pagina principală a site-ului web Podcast: Secțiunea a doua

Această secțiune va prezenta episoadele selectate ale podcast-ului nostru și va permite utilizatorilor să viziteze arhivele (care sunt, cum ar fi paginile cu notele spectacolului, care apar în partea 2).

Primul lucru pe care îl vom face este de fapt să creăm o nouă secțiune făcând clic pe albastrul + din partea de jos a secțiunii și adăugând o secțiune obișnuită. Dacă faceți acest lucru, se va crea o altă casetă albastră în generatorul vizual. Adăugați într-un rând cu o singură coloană.

Când avem acest lucru la locul său, să adăugăm un fundal la fel cum am făcut mai sus, doar că de data aceasta, dorim să selectăm „Utilizați opțiunea Parallax” în setările secțiunii. Păstrați meniul derulant pe „True Parallax” în loc de „CSS”.

Aceasta este singura secțiune pe care o vom folosi cu paralaxă pe pagina de pornire. Cred că utilizarea efectului cu ușurință atrage atenția asupra conținutului pe care doriți să-l evidențiați.

Salvați și apoi introduceți o nouă casetă de text în rând. Tastați „Episoade selectate”, centrați-l în editorul WYSIWYG și mergeți la setări pentru a face ca fontul textului să fie „Special Elite” și dimensiunea textului 50 px. Ar trebui să vedeți așa ceva acum:

Sub aceasta, creați un nou rând cu trei coloane făcând clic pe + verde și, în prima coloană, introduceți „Adăugați din fila Bibliotecă”. (Nu veți avea toate aceste opțiuni de bibliotecă chiar acum, dar veți avea mai târziu!)

Selectează „Podcast Episode” sau orice alt nume pe care l-ai numit mai sus. Apoi adăugați un alt modul sub acesta, navigați din nou la bibliotecă și adăugați modulul „Afișați linkul de note” salvat. Faceți acest lucru pentru toate cele trei coloane, până când vedeți acest lucru:

Continuați să faceți acest lucru până când ați adăugat toate episoadele dorite. Editați titlul, arta albumului și afișați link-uri pentru fiecare episod. Tocmai am adăugat un al doilea rând și am completat doar a doua coloană pentru ca designul să se potrivească cu fundalul ales de mine.

Singurul lucru rămas pentru această secțiune este adăugarea unui buton „Răsfoiți arhivele”. Creați un rând nou în partea de jos făcând clic pe + verde și utilizați un aspect cu o singură coloană. Introduceți un modul „Buton”. Acest lucru va crea un buton foarte greu de citit (în funcție de fundal, desigur), care va avea nevoie de un stil simplu.

Deschideți setările modulului Buton și introduceți slugul URL pentru pagina care va fi arhivele dvs. Am mers cu „/ arhivele” evidente, am folosit textul „Răsfoiți arhivele” și apoi am centrat butonul în sine.

În fila Setări, facem clic pe „Utilizați stiluri personalizate pentru buton” și vom seta culoarea de fundal la „#ffffff” și culoarea textului la „# 000000” (adică alb și negru, respectiv).

Apoi, vom dori să rotunjim colțurile butonului setând raza de margine la 10 px, să setăm fontul pe „Special Elite” și să schimbăm pictograma Buton Adăugare de la „Implicit” la „Nu”.

În cele din urmă, schimbați raza de frontieră a butonului la 10 px, astfel încât să fie rotunjită atunci când butonul are mouse-ul deasupra.

Am salvat acest lucru în biblioteca mea, astfel încât să pot folosi stilul în alte butoane pe măsură ce merg mai departe.

Și cu aceasta, a doua secțiune este gata. Aproape ai terminat, podcaster! Vei rotunji al treilea - la propriu!

Pagina principală a site-ului web Podcast: Secțiunea a treia

Acesta va fi doar un singur modul peste un fundal static.
Mai întâi, creați o nouă casetă albastră cu o coloană cu lățime dublă, așa cum am făcut pentru secțiunea a doua și selectați modulul „Email Optin” din meniu.

Veți vedea acest lucru aprins, care nu se potrivește deloc cu designul nostru. Totuși, este o soluție foarte ușoară.

Navigați în setările modulului și actualizați următoarele opțiuni:

Titlu: Am lăsat titlul necompletat intenționat
Conținut: adăugați mesajul Call to Action și centrați-l.
Furnizor de servicii: folosesc Mailchimp, deci asta am urmat aici.
Culoare fundal: transparent; acest lucru face ca butonul în sine să fie transparent.

Singurul lucru pe care ți-l mai rămâne de făcut este să te asiguri că serviciul tău de e-mail este furnizat sau formularul nu va apărea după ce ai salvat și ieșit din constructor. Dacă utilizați Mailchimp, există documentație excelentă despre găsirea cheii API în documentația lor de asistență.

După ce aveți cheia, accesați tabloul de bord WordPress, mergeți din nou la Divi -> Opțiuni temă și introduceți cheia Mailchimp API în câmpul numit „Cheia API Mailchimp”.

După ce este salvat, singurul pas pe care îl mai ai înainte de a avea o pagină frumoasă și terminată este să setezi un fundal pentru a treia secțiune. Produsul final ar trebui să arate cam așa:

Tu ai făcut-o! Ura! Acum aveți o pagină de pornire complet funcțională pentru podcast. E timpul să ajungem la record și să spunem lumii despre asta, nu?

Mâine: Crearea de arhive frumoase și afișarea de pagini cu note pentru Podcastul dvs.

Deoarece aveți o pagină de pornire excelentă acum, puteți prezenta cel mai minunat conținut pe care îl aveți. Dar dacă fanii tăi devin adevărați fanatici, vor dori să se scufunde adânc în spectacolul tău.

Mâine vă voi arăta cum să puneți împreună câteva pagini simple, dar frumoase, pentru întreaga dvs. arhivă de episoade de podcast, precum și pagini individuale pentru fiecare episod, care le spun cititorilor ce discutați în fiecare episod și le oferă șansa de a se înscrie. pentru lista super-uimitoare de e-mailuri.

Ne vedem mâine!

Afișați pagina notei:

Pagina arhivelor: