Crearea de arhive frumoase și afișarea de pagini cu note pentru Podcastul dvs.

Ieri, am folosit constructorul vizual al lui Divi pentru a crea o pagină de pornire pentru podcast-ul tău care să-ți impresioneze absolut ascultătorii, dar dacă vor să se adâncească în emisiunea ta?

Se vor îndrepta către frumoasele arhive și vor afișa pagini cu note pe care o să vă învăț cum să le faceți astăzi.

Produsele finale de astăzi: Afișați paginile cu note și arhive

Paginile în sine sunt concepute pentru a completa pagina de pornire, dar nu pentru a oglindi direct elementele acesteia.

Pe pagina cu note de emisiune, am vrut să mă asigur că orice vizitator va putea asculta episodul direct în browserul său, să vadă cele mai importante momente și linkurile pentru episodul respectiv și să aibă posibilitatea să se înscrie la lista dvs. de e-mailuri.

Pagina de arhivă este la fel de simplă, dar funcțională, precum pagina de note de spectacol. Paginile arhive au un singur scop: ca utilizatorii să vă vadă rapid și ușor catalogul din spate. Exact asta face această pagină. Cu un fragment rapid despre emisiune, ascultătorii dvs. vor putea să scaneze prin emisiune pentru a găsi exact subiectul pe care doresc să îl asculte.

Bunuri de care aveți nevoie

Ca ieri, veți avea nevoie de câteva imagini de fundal de înaltă rezoluție. Cele două pe care le-am folosit sunt în această colecție de pe Unsplash (care include și fundalurile de pe pagina principală de ieri). Le-am editat pentru a fi în tonuri de gri în Previzualizare, dar orice software de editare a imaginii va putea fie să aplice un efect alb-negru / în tonuri de gri, fie să vă permită să mutați glisorul de saturație la 0.

Viața ta va fi, de asemenea, puțin mai ușoară dacă ai construit deja pagina de pornire, deoarece vei folosi unele dintre aceleași stiluri.

Gata, așa că hai să începem să construim!

Construirea paginii Afișare note

Notele spectacolului sunt doar „postări” în WordPress, deci navigați la tabloul de bord și accesați Postări -> Adăugați noi.

Veți face acest lucru de fiecare dată când doriți să creați o pagină cu note de spectacol pentru un episod individual al emisiunii dvs. Titlați-l după cum doriți și setați slug-ul URL la ceva simplu (astfel încât ascultătorii să-și amintească de acesta după încheierea episodului).

Mai întâi, asigurați-vă că dați clic pe „Utilizați Divi Builder”.

Aceasta ar trebui să deschidă următorul set de opțiuni de care avem nevoie. În partea dreaptă a paginii, setați postarea pe „Lățime totală”, deoarece nu vom folosi o bară laterală pentru notele noastre de spectacol. Și setați titlul postării la „Ascundeți”, astfel încât metadatele, cum ar fi autorul, comentariile și data postării în sine, să nu apară.

Apoi, veți dori să intrați în Visual Builder și să fiți prezentat de o pagină web încântătoare.

Primul lucru pe care doriți să-l faceți este să faceți clic pe pictograma roată din secțiunea albastră din colțul din stânga sus al paginii pentru a introduce setările secțiunii.

De acolo, încărcați imaginea de fundal. Derulați puțin mai jos în setări și activați Use Parallax Effect. Lăsați metoda Parallax la setarea implicită „True Parallax”.

Salvați aceste setări și ar trebui să vedeți așa ceva:

Nu exact ce era în produsul final de mai sus, nu-i așa? Va trebui să-l întindem puțin adăugând conținutul pe pagină.

Faceți clic pe + verde și introduceți un singur rând de coloană (cel din colțul din stânga sus).

În continuare, vă veți bucura că ați făcut deja pagina de pornire de ieri. De îndată ce vă alegeți rândul, veți fi întâmpinat de o fereastră care vă cere să alegeți un element. Veți selecta playerul podcast pe care l-am salvat ieri făcând clic pe „Adăugați din bibliotecă”.

Pe numele meu îl numisem pur și simplu „Podcast Episode”, dar dacă ai ales ceva diferit, asigură-te că îl alegi.

Badabing-badaboom, aveți un episod de podcast adăugat pe pagina de note de emisiune ca magia.

Rețineți că va trebui să editați titlul și conținutul media (și, eventual, arta episodului) pentru fiecare nouă pagină a notelor spectacolului. Ceea ce tocmai ați adăugat este o copie exactă a ceea ce ați salvat.

Notele dvs. reale de spectacol vor merge direct sub playerul podcast, așa că treceți mouse-ul peste player și apăsați + negru. Derulați în jos până când vedeți modulul text. Adăugați-l la pagină.

Sub fila Conținut din Setări text, introduceți notele în editorul WYSIWYG și mergeți la fila Proiectare.

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

Culoarea textului: deschis
Orientare text: stânga
Font text: Elită specială
Dimensiunea fontului textului: 20 px
Culoarea textului textului: #ffffff

Salvați-l și ar trebui să vedeți un nou bloc de text strălucitor și o pagină similară cu aceasta.

Ajungem la secțiunea de acasă pentru pagina cu notele spectacolului - mai avem doar două elemente. Faceți din nou clic pe + negru și adăugați șablonul de buton salvat ieri.

În loc să ducă utilizatorii la arhive așa cum va face cea de ieri, acesta îi va readuce la pagina principală. Navigați la pagina de setări a butonului și setați adresa URL la o bară inversă simplă.

De ce să nu îl duci la / acasă sau ceva similar? Ei bine, folosind doar o bară inversă, utilizatorul dvs. va duce oricare ar fi prima pagină a site-ului dvs. web, indiferent de ce. Și din moment ce vă aflați pe același site, chiar și domeniile în mișcare nu vor afecta butonul. Se va întoarce întotdeauna acasă. Care este exact ceea ce vrei să facă!

Parcurgeți și completați restul setărilor butonului. Lăsați-l să se deschidă în aceeași fereastră, schimbați textul butonului la „Întoarceți acasă” (sau orice doriți) și alinierea butonului la „Dreapta” (atât pentru a-l ține departe de conținut, cât și pentru a-l face să stea în picioare împotriva conținutului). Stilul filei Design ar fi trebuit să fie importat din Biblioteca Divi.

Veți avea acum un buton de navigare frumos și vă sugerez să îl adăugați în Biblioteca dvs., astfel încât să îl puteți utiliza pe mai multe pagini.

Și, în sfârșit, să configurăm înscrierea la e-mail, astfel încât să putem obține acele adrese de e-mail dulci și dulci pentru a ține utilizatorii la curent cu noutățile despre podcast.

Pentru aceasta, dorim un rând complet nou, cu o singură coloană. Deci, faceți clic pe + verde și puneți-l la locul său. Apoi adăugați un modul Email Optin din meniul derulant. La fel ca ieri, navigați la setările modulului și introduceți orice titlu doriți să afișați, precum și orice text de îndemn pe care îl doriți în editorul WYSIWYG.

De asemenea, adăugați orice text doriți pentru butonul în sine. Am ales totalul unic „Abonați-vă”.

Alegeți furnizorul de servicii de e-mail și lista (amintiți-vă de ieri că modulul complet nu va apărea pe pagină când este live dacă nu alegeți o listă).

Schimbați fundalul RGBA în transparent.

Sub fila Proiectare, setați Fontul antet la „Special Elite” și dimensiunea la 36 px.

De asemenea, veți seta Fontul corpului la „Special Elite” și dimensiunea la 16 px.

Spre deosebire de aproape orice altceva pentru acest site, vrem să folosim un chenar pentru modulul Optin de e-mail. Așadar, mutați „Bordura utilizatorului” la da și setați culoarea la #ffffff, iar Împletirea personalizată să fie de 15 px pe toate părțile.

Când ați terminat, mutați în fila Avansat și adăugați acest element la Elementul principal din CSS personalizat pentru a rotunji colțurile modulului:

border-radius:10px;

Salvați-vă munca și ați primit o opțiune de e-mail!

Singurul alt lucru pe care îl necesită pagina dvs. de note de emisiune este să salvați acest modul pentru a fi utilizat pe alte pagini. Deoarece doriți ca opțiunile dvs. de e-mail să fie coerente pe site, vom salva acest lucru ca un element global. Faceți clic pe butonul „Adăugați la bibliotecă” când treceți cu mouse-ul peste modul și asigurați-vă că bifați caseta „Faceți din acesta un element global”.

Acum aveți un singur element pe care îl puteți utiliza pe mai multe pagini. Și dacă faceți modificări la acesta, acestea vor fi reflectate în toate cazurile, spre deosebire de playerul podcast și butonul de mai sus, unde fiecare modul poate fi schimbat individual.

Și aici, prieteni, este șablonul dvs. de pagină Show Notes! De asemenea, vă sugerez să salvați întreaga pagină în biblioteca dvs., astfel încât să o puteți importa și să schimbați elementele de care aveți nevoie pentru fiecare episod.

Acum ... mai departe către Arhive! Linia de sosire este la vedere!

Construirea paginii dvs. de arhive

Accesați tabloul de bord WordPress și navigați la Adăugați o pagină nouă, denumiți-o (a mea este „Arhive”) și deschideți Divi Visual Builder. Ușor de țăran.

După ce ajungeți, adăugați un nou rând cu o singură coloană cu un modul text.

Navigați la setări și introduceți titlul paginii în editorul WYSIWYG.

În fila Proiectare, setați Culoarea textului la lumină și Orientarea la centru. Setați fontul la „Special Elite” și Dimensiunea fontului la 50 px.

Pentru a face textul să arate bine pe mobil, asigurați-vă că schimbați marginile de sus și de jos la 40 px.

Salvați-vă munca și, preparați-vă, pregătiți-vă să adăugați un fundal la Arhive! Deschideți setările în caseta albastră + și selectați imaginea de fundal și setați paralaxa așa cum ați făcut-o pentru Show Notes. Din nou, am realizat aceasta în tonuri de gri folosind Preview.

Sub fila Proiectare, setați căptușeala superioară și inferioară la 55 px și respectiv 176 px, astfel încât întreaga pagină să permită să se vadă efectul de paralaxă, indiferent de câte postări aveți în arhive.

De ce 176px în loc de 175? Pentru că sunt un rebel, de aceea.

Veți vedea acest lucru atunci când vă salvați munca:

Apoi, adăugați un nou rând cu o singură coloană, doar de această dată, introduceți un modul Blog. Aceasta va afișa orice buclă WordPress ați setat și vrem doar să fie extrase și titluri, astfel încât ascultătorii dvs. să știe la ce să se aștepte.

Accesați setările și actualizați opțiunile din fila Conținut după cum urmează:

Numărul postării: 10 (sau orice credeți că arată cel mai bine pentru site-ul dvs. - se va pagina după afișarea acestui număr)
Conținut: Afișați extras (pentru că dorim ca utilizatorul să facă clic și să asculte episodul din player)
Afișați imaginea prezentată: DA
Culoare fundal grilă: rgba (73,73,73,0.72)

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

Aspect: grilă
Font antet: Elită specială
Culoarea textului antetului: #ffffff
Font corp: Elită specială
Culoarea textului corpului: #ffffff
Meta Font: Special Elite
Culoare Meta Text: #ffffff
Utilizați Border: DA
Culoare margine: #ffffff
Lățimea chenarului: 1 px
Stilul chenarului: solid

Când totul este gata, aveți de făcut un ultim stil. Grila în sine are colțuri ascuțite și pătrate în fiecare cutie și dorim să obținem o rază de margine de 10 px, astfel încât să se potrivească cu restul site-ului.

Navigați la tabloul de bord WordPress -> Divi -> Opțiuni temă, apoi derulați până la CSS personalizat. Adăugați acest cod în casetă pentru a rotunji colțurile casetelor de extrase individuale:

.et_pb_post {
 border-radius: 10px;
}

Rețineți că „.et_pb_post” este clasa CSS pe care Divi o folosește pentru a regla acele casete în ansamblu.

După aceea, salvați-vă toată munca.

Singurul lucru rămas de făcut este să adăugați butonul Întoarcere acasă din biblioteca dvs. și veți termina. Faceți clic pe + negru pentru al adăuga la același rând cu modulul dvs. Blog.

Câine fierbinte, tocmai ai terminat de configurat pagina Arhive.

Felicitări! Tocmai ați terminat de configurat pagina Arhive. Salvați-vă pagina Arhive ca șablon făcând clic pe violetul + din partea de jos a ecranului și puteți verifica un alt element din lista dvs. de găleată - deoarece între ieri și astăzi tocmai ați creat un player de podcast complet funcțional, pagina de pornire, arhivă, și șablon pentru prezentările individuale.

In concluzie

Si asta e! Vă mulțumim că ați urmat împreună cu cele două tutoriale ale paginilor mele. Puteți vedea primul Cum să creați o pagină de podcast frumoasă cu Divi la acest link. Dacă aveți întrebări sau comentarii, nu ezitați să le lăsați mai jos și voi face tot posibilul să le răspund!