Cum să vă stilizați modulul audio Divi ca player Podcast

Această postare este partea 3 din 5 din mini seria noastră intitulată 5 moduri distractive de a modula modulul audio Divi . Rămâneți la curent săptămâna aceasta pentru toate cele cinci exemple unice ale modulului audio Divi, cu un tutorial despre cum să realizați fiecare!

---

Există tot felul de conținut audio pe care poate doriți să îl partajați pe site-ul dvs. web: cele mai recente versuri, instrumente sau podcast-uri, de exemplu. Modulul audio încorporat Divi face ca acestea să fie o briză! În tutorialul de astăzi vă arătăm cum să stilizați modulul audio Divi ca un podcast player. Înainte și după astăzi: modulul audio Divi ca player Podcast Înainte de a începe stilizarea modulului audio, să ne familiarizăm cu caracteristica implicită. Aspectul curat și minimalist ar fi cu siguranță suficient pentru a prezenta niște octeți de sunet, dar este întotdeauna o idee bună să personalizăm un design bazat pe context – care este exact ceea ce vom face astăzi.

Iată versiunea implicită a modulului audio Divi: Și iată conceptul de design pe care îl vom construi astăzi: Doar urmați pașii pe care îi descriu mai jos pentru a imita acest design, înlocuind elementele de imagine care vă comunică cel mai bine propria marcă. Cum să vă stilizați modulul audio Divi ca player Podcast Abonați-vă la canalul nostru Youtube Conceptul și inspirația Între mișcările crude, vegane și paleo, este clar că oamenii încep să acorde o atenție mai mare dietelor lor. În timp ce parcurgeam un site de fotografii de stoc, am dat peste această fotografie – care vorbea imediat cu acele inițiative, cu paleta sa de culori rustice și senzația crescută în casă. Chiar dacă afacerea dvs. sau site-ul dvs. web nu sunt axate pe alimentație, aspectul și compoziția acestui design funcționează la fel de bine cu alte elemente de imagine, așa că nu ezitați să o temați diferit.

Pregătirea elementelor de proiectare Deoarece realizăm o mare parte din acest design cu CSS, numărul activelor de imagine de care avem nevoie este limitat la două. Mai întâi este imaginea de fundal a secțiunii, pe care am descărcat-o de la Unsplash aici. Vă recomandăm să-l micșorați puțin; Unsplash oferă fotografii de înaltă rezoluție care încetinesc invariabil timpul de încărcare. Pentru a vă asigura că imaginea încă arată bine pe dispozitivele retina, vă recomand să o redimensionați la 1920 px cu 1280 px în Photoshop sau în alt software de editare a imaginilor. Apoi, am creat o imagine simplă de copertă podcast în Adobe Photoshop, proiectată la 600 px pe 600 px. Observați că o parte din design se bazează pe repetarea imaginilor, deci dacă utilizați o imagine de fundal diferită, asigurați-vă că o încorporați și în imaginea de copertă.

Pentru a obține fontul gratuit pe care l-am folosit în graficul de mai sus și a-l instala pe computerul dvs., urmați pașii următori:

• Descărcați Pacifico din Google Fonts
• Găsiți fișierul descărcat pe computer.
• Dezarhivați sau extindeți folderul.
• Faceți dublu clic pe „Pacifico.ttf” și instalați fontul.
• Localizați-l în software-ul de editare a fotografiilor ca opțiune de font. Este posibil să trebuiască să reporniți rapid și să reporniți aplicația de editare a fotografiilor înainte ca aceasta să apară.

Implementarea proiectării cu Divi Designul pe care îl vom crea astăzi este cel mai potrivit pentru un podcast despre gătit, grădinărit sau produse locale, dar poate fi refăcut pentru orice – de la inginerie software până la trekking pe glob – în funcție de imaginile pe care le alegeți. Caracteristica importantă de remarcat este proeminența imaginii de copertă podcast. Acest lucru le permite utilizatorilor să vă recunoască emisiunea data viitoare când navighează în App Store!

Acest design are o arhitectură de bază: este compus dintr-o singură secțiune, care găzduiește un rând cu o singură coloană care conține doar modulul audio. Setări secțiune Setările secțiunii sunt simple și implică doar încărcarea unei imagini de fundal. (Puteți găsi fotografia recoltei pe care am folosit-o aici.) În fila Setări generale a setărilor secțiunii dvs., selectați fotografia pe care doriți să o utilizați din folderul local de descărcări al computerului și încărcați-o. Setări rând Vă amintiți simplitatea arhitecturii acestui design? Acesta include un singur rând cu o singură coloană inserat în secțiunea a cărei imagine de fundal tocmai am setat-o.

Cu toate acestea, există câteva personalizări pe care vrem să le facem la acest rând. După ce deschideți fereastra Setări rând, comutați butonul de lângă „Utilizați lățimea personalizată” la „Da”. Apoi, setați unitatea la procent și trageți glisorul la 50%. Acest lucru va împiedica rândul să se întindă pe toată lățimea ferestrei. Acum, va ocupa doar 50% din cutia de conținut – în acest caz, secțiunea cu fundal vegetal pe care tocmai am personalizat-o. Setări modul audio Acum este timpul să ajungem la partea interesantă – jucătorul de podcast! După ce ați adăugat un modul audio la rând, încărcați un MP3 al episodului. Fără un fișier audio, butonul de redare și bara de progres nu se vor afișa.

Apoi, completați câmpurile de text din fila Setări generale. Deși titlurile câmpului text fac referire la muzică, putem deduce cum să introducem informațiile podcastului nostru: în câmpul Titlu, introduceți numele episodului; în câmpul Nume artist, introduceți numele gazdelor; în cele din urmă, în câmpul Album Name, introduceți numele podcastului – în cazul meu fictiv, Two Peas in a Podcast. În cele din urmă, derulați puțin mai jos și încărcați imaginea copertei podcast-ului dvs. Apoi, dorim să adăugăm un stil. Să începem mai întâi cu detaliile ușoare. Selectați fila Advanced Design Settings pentru a regla culoarea de fundal și opacitatea casetei care găzduiește playerul dvs. audio. Am folosit o valoare rgba de (126,193,32,0,82) pentru a obține acea culoare verde mazăre. Cu toate acestea, dacă utilizați diferite materiale, va trebui să selectați o paletă de culori mai personalizată. Simțiți-vă liber să comutați glisoarele de nuanță și opacitate până când veți găsi o culoare de fundal care să se potrivească mărcii dvs.

Ultima ajustare pe care o vom face în fila Advanced Design Settings este la font; tipografia este o oportunitate fantastică de a comunica estetica mărcii. Pentru Two Peas in a Podcast, am selectat fontul cultivat acasă, Pacifico. Din nou, nu ezitați să selectați orice font care rezonează cel mai bine cu elementele de imagine pe care le utilizați. Acum este timpul să adăugați câteva linii de cod sub fila CSS personalizat. În primul rând, vom adăuga o umbră subtilă în caseta verde care conține playerul nostru audio. Pentru aceasta, derulați în jos până la câmpul de text etichetat „Element principal” și lipiți următorul fragment:

box-shadow: 5px 5px 5px #2c2c2c; Puteți juca cu valorile pentru a regla dimensiunea, direcția, opacitatea și nuanța umbrei. În cele din urmă, vom personaliza forma imaginii „coperții albumului”. (Rețineți, în designul nostru, această imagine ar trebui să fie de fapt coperta podcastului dvs.). În fila CSS personalizată a playerului audio, derulați în jos până la câmpul de text intitulat „Audio Cover Art” și lipiți următoarele: -webkit-clip-path: circle(40% at 50% 50%);
clip-path: circle(40% at 50% 50%); Aceasta va dezvălui numai părțile imaginii care se încadrează în parametrii pe care i-am setat, făcându-l să arate ca un cerc.

Când ați terminat, faceți clic pe Salvați și ieșiți. Felicitări, cu câteva personalizări încorporate și câteva fragmente CSS, ați creat calea perfectă de a comercializa cele mai recente episoade de podcasturi! Mâine: Partea 4 – Blocarea culorilor cu modulul audio Divi Alăturați-vă mâine pentru următoarea instalare a seriei noastre, în care vă voi arăta cum să personalizați modulul audio pentru a crea un design cu contrast mediu, pe ecran divizat, prin care să împărtășiți atât muzică, cât și aprecieri ale criticilor. Asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să nu pierdeți niciodată un anunț mare, un sfat util sau un cadou gratuit Divi!