Cum să creați o bară de conținut audio lipicioasă în Divi

Adăugarea unei bare de conținut audio lipicioase este o modalitate excelentă de a include un clip audio pentru un acces ușor, pe măsură ce un utilizator parcurge conținutul paginii. De exemplu, podcast-urile își pot „lipi” sunetul prezentat în partea de sus a unei pagini de episod, astfel încât utilizatorul să aibă întotdeauna acces la acele controale audio în timp ce ascultă și se interacționează cu restul conținutului paginii.

În acest tutorial, vom deveni puțin creativi cu opțiunile încorporate de poziție lipicioasă Divi pentru a construi o bară de conținut audio lipicioasă în Divi. Vă vom arăta cum să convertiți conținutul audio existent pe o pagină (cum ar fi un rând cu un modul audio) într-o bară de conținut audio lipicioasă care rămâne în partea de sus a ferestrei odată ce utilizatorul transmite conținutul audio în timp ce derulează. În plus, vă vom arăta, de asemenea, cum să schimbați conținutul, stilul și aspectul barei odată ce starea lipicioasă este activată (sau blocată în partea de sus a ferestrei). Tranziția lină și funcționalitatea acestui design oferă o soluție unică pentru prezentarea conținutului audio pe orice site web Divi.

Să ajungem la asta!

Trage cu ochiul

Iată o privire rapidă asupra designului pe care îl vom construi în acest tutorial.

Iată o privire asupra tranziției conținutului audio într-o bară de conținut audio lipicioasă.

Și aici este o privire la modul în care s-ar putea interacționa cu bara audio în timp ce derulați pagina.

Descărcați aspectul GRATUIT

Pentru a pune mâna pe desenele din acest tutorial, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Pentru a importa aspectul secțiunii în biblioteca Divi, navigați la biblioteca Divi.

Faceți clic pe butonul Import.

În fereastra pop-up de portabilitate, selectați fila de import și alegeți fișierul de descărcare de pe computer.

Apoi faceți clic pe butonul de import.

După ce ați terminat, aspectul secțiunii va fi disponibil în Divi Builder.

Să trecem la tutorial, nu-i așa?

Ce trebuie să începeți

Pentru a începe, va trebui să faceți următoarele:

1. Dacă nu ați făcut-o încă, instalați și activați tema Divi.
2. Creați o pagină nouă în WordPress și utilizați Divi Builder pentru a edita pagina din partea frontală (builder vizual).
3. Alegeți opțiunea „Build From Scratch”.

După aceea, veți avea o pânză goală pentru a începe să proiectați în Divi.

Partea 1: Încărcați pachetul de prezentare Podcast Premade Layout din Divi Builder

Pentru a începe proiectarea barei audio lipicioase din Divi, vom utiliza aspectul paginii de destinație podcast premade. Din meniul de setări, selectați pictograma „Încărcare din bibliotecă” plus. Apoi găsiți aspectul paginii de destinație podcast și încărcați-l în pagină.

Partea 2: Crearea rândului lipicios pentru a reține conținutul audio

În secțiunea superioară a aspectului premade, găsiți rândul din secțiunea superioară. Apoi adăugați un nou rând cu o singură coloană sub rândul existent.

Setări rând

Înainte de a adăuga module, deschideți setările pentru noul rând și actualizați următoarele:

• Lățimea jgheabului: 1
• Lățime: 100%
• Lățime maximă: 100%
• Căptușire (desktop): 10 px sus, 10 px, jos, 10% stânga, 10% dreapta
• Căptușeală (tabletă și telefon): 10 px sus, 10 px, jos, 10 px stânga, 10 px dreapta

Pentru a face rândul lipicios, accesați fila avansată și actualizați următoarele:

• Poziție lipicioasă: lipiți-vă de sus

Acest lucru va face ca rândul (în curând să fie bara noastră de conținut audio) să rămână în partea de sus a ferestrei browserului atunci când derulați pagina în jos.

Partea 3: Adăugarea conținutului audio

Adăugarea modulului audio la rând

Apoi, mutați / trageți modulul audio existent (pre-proiectat) din primul rând din secțiunea de sus în noul rând pe care tocmai l-ați creat. Acesta va servi drept sunet prezentat pe care îl vom include în playerul audio lipicios

Adăugarea unui CTA folosind un modul Blurb

Apoi, vom crea un CTA care va fi afișat în partea dreaptă a barei noastre de conținut audio lipicios.

Pentru a crea CTA, copiați modulul blurb cu pictograma de redare din secțiunea superioară a aspectului.

Apoi, lipiți modulul de copiere duplicat sub modulul audio din al doilea rând al secțiunii de sus.

Partea 4: Stilarea conținutului audio

Stilul modulului audio

Odată ce rândul moștenește poziția lipicioasă, dorim să avem un stil diferit pentru modulul nostru audio. Pentru aceasta, deschideți setările pentru modulul audio și actualizați următoarele opțiuni de stare lipicioasă:

• Dimensiune text titlu (lipicios): 14 px
• Înălțimea liniei de titlu (lipicioasă): 1.3em
• Înălțimea liniei subtitrării (lipicioasă): 1.3em

Tot ceea ce face este să micșoreze puțin textul și spațierea, astfel încât conținutul audio să nu ocupe mult spațiu vertical în bara noastră lipicioasă.

Apoi, vrem să schimbăm lățimea modulului audio în starea lipicioasă după cum urmează:

• Lățime (desktop): 80%
• Lățime (lipicioasă): 100%
• Lățime maximă (lipicioasă): 100%

În continuare, trebuie să ajustăm spațiul modulului audio după cum urmează:

• Marja: 0 px de sus, 0 px de jos
• Căptușeală: 0 px sus, 0 px jos, 0 px stânga, 20 px dreapta

În cele din urmă, trebuie să adăugăm câteva fragmente CSS personalizate sub setările avansate pentru a ne alinia textul la stânga și a adăuga culori unice butonului și glisorului playerului audio.

Adăugați următorul CSS la titlul audio numai sub fila lipicioasă :

text-align:left;

Adăugați următorul CSS la Meta Audio numai sub fila lipicioasă :

text-align:left !important;

Adăugați următoarele CSS la butoanele playerului numai sub fila lipicioasă :

color: #fe4943;

Adăugați următorul CSS la Player Sliders Current numai sub fila lipicioasă :

background: #2c4ca3;

Designul Blurb CTA

În continuare, vom stiliza modulul nostru de blurb, care va servi ca un simulator CTA pentru a vizualiza toate episoadele.

Mai întâi, adăugați textul „Toate episoadele” la conținutul corpului blurbului.

Sub fila Proiectare, actualizați următoarele:

• Font corp: Lato
• Greutatea fontului corpului: îndrăzneț
• Stilul fontului corpului: TT
• Dimensiunea textului corpului: 10 px
• Spațierea literelor corporale: 2 px
• Înălțimea liniei corpului: 1.3em

Apoi reglați dimensiunea pictogramei blurb:

• Pictogramă Dimensiune font: 50 px

Apoi reglați dimensiunea modulului după cum urmează:

• Lățimea conținutului: 100%
• Lățime: 20%

Acum reveniți la fila conținut și adăugați un fundal pentru blurb după cum urmează:

• Culoare fundal: # 1a1844
• Imagine de fundal: [adaugă imagine]
• Amestec de imagine de fundal: luminozitate

Vrem ca acest modul să fie ascuns inițial de vizualizare până când rândul ajunge la starea lipicioasă și bara de control audio este blocată în partea de sus a ferestrei. Pentru a face acest lucru, putem adăuga câteva fragmente de css care ascund modulul pe desktop și afișează modulul în stare lipicioasă.

Sub fila Avansat, actualizați următoarele CSS personalizate:

Element principal CSS (desktop):

display:none;

Element principal CSS (lipicios):

display:block;

Blurb Image CSS:

margin-bottom: 10px

Partea 5: Modificarea alinierii conținutului barei audio în starea lipicioasă

În acest moment rândul lipicios are o singură coloană cu două module stivuite una peste alta. Deci, bara lipicioasă ar afișa textul CTA sub modulul audio. Acest lucru ar ocupa prea mult spațiu vertical pentru o bară lipicioasă și nu ar arăta foarte frumos.

Pentru a ne asigura că totul este aliniat orizontal și vertical în coloană, noi. putem utiliza proprietatea CSS flex pentru a regla aspectul modulelor noastre în stare lipicioasă.

Pentru a face acest lucru, deschideți setările pentru coloana care conține ambele module.

Sub fila avansată, adăugați următorul CSS personalizat la Elementul principal

Element principal (desktop):

display:flex;
flex-direction:column;

Element principal (lipicios):

display:flex;
flex-direction: row;
align-items:center;
justify-content:center;

Asta e! Să trecem în revistă rezultatele.

Rezultat final

Iată designul de pe desktop după ce rândul este în stare lipicioasă.

Și iată designul pe mobil.

Iată câteva videoclipuri despre cum funcționează magia barei lipicioase a conținutului audio pe o pagină live.

Gânduri finale

Opțiunile de poziție lipicioasă ale lui Divi pot fi un instrument puternic pentru designerii de web. În acest tutorial, v-am arătat cum să creați o bară de conținut audio lipicios folosind opțiunile de stil lipicios ale Divi în moduri avansate și creative. Una dintre tehnicile unice prezentate în acest tutorial a fost cum să aliniați conținutul unui rând lipicios folosind proprietatea flex. Din fericire, Divi's are un mod convenabil de a adăuga fragmente de cod personalizate la starea lipicioasă folosind blocurile CSS personalizate avansate pentru a ne oferi flexibilitatea de proiectare de care aveam nevoie. Sperăm că acest lucru vă va oferi o sursă de inspirație pentru a crea unul pentru următorul dvs. proiect.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!