Cum să adăugați o bară audio „Ultimul episod” fixă ​​în antetul Divi

Dacă găzduiești un site de podcasturi cu Divi, sunt mari șanse să folosești deja modulul audio încorporat. Acum, dacă sunteți în căutarea unui mod special de a vă pune în evidență cel mai recent episod, vă va plăcea acest tutorial. Astăzi, vă vom arăta cum să includeți o bară audio fixă ​​pentru ultimul episod în antetul Divi. Vom include o animație de buclă Modul text pentru a atrage atenția asupra barei audio și veți putea descărca șablonul global de antet, inclusiv bara audio!

Să ajungem la asta.

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Descărcați gratuit șablonul antetului barei audio

Pentru a pune mâinile pe șablonul de antet al barei audio gratuite, 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!

Accesați Divi Theme Builder și începeți să creați un antet global

Accesați Divi Theme Builder

Începeți accesând Divi Theme Builder din backend-ul site-ului dvs. WordPress.

Începeți să creați antet global

Apoi, începeți să construiți un antet global.

Creați un antet global cu ultima bară audio pentru episod

Setări secțiune

Culoare de fundal

Odată ajuns în editorul de șabloane, veți observa o secțiune. Deschideți acea secțiune și schimbați culoarea de fundal. Potrivim acest antet global cu pachetul de aspect Podcast, dar nu ezitați să utilizați orice alt tip de stil de design la alegere.

• Culoare fundal: # 1a1844

Spațiere

Apoi, treceți la fila de proiectare și adăugați câteva valori de umplere personalizate pe diferite dimensiuni de ecran.

• Căptușeală superioară: 50 px (desktop), 80 px (tabletă și telefon)
• Căptușeală inferioară: 0 px

Box Shadow

Pentru a separa antetul de conținutul paginii / postării, vom adăuga o umbră de casetă și la secțiunea noastră.

• Puterea neclarității umbrei cutiei: 80 px
• Culoare umbră: rgba (0,0,0,0,3)

Adăugați rândul # 1

Structura coloanei

Continuați adăugând un prim rând în secțiunea dvs. utilizând următoarea structură de coloane:

Culoare de fundal

Întregul rând va fi dedicat celui mai recent bar audio al nostru episod. Dar, înainte de a ajunge la asta, deschideți setările rândului și schimbați culoarea de fundal.

• Culoare fundal: # fe4943

Dimensionare

Treceți la fila de proiectare a rândului și modificați setările de dimensionare în continuare.

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Lățime: 90%
• Lățime maximă: 100%

Spațiere

Adăugăm și niște căptușeli personalizate de sus și de jos.

• Căptușeală superioară: 10 px
• Căptușeală inferioară: 10 px

Frontieră

Apoi, vom merge la setările de margine și vom adăuga câteva colțuri rotunjite.

• În partea stângă jos: 10 px
• Jos dreapta: 10 px

Box Shadow

Includem și o umbră de cutie.

• Puterea neclarității umbrei cutiei: 50 px
• Culoare umbră: rgba (0,0,0,0,3)

Poziţie

Apoi, vom merge la fila avansată și vom rezolva întregul rând. Vom crește și indicele z al rândului pentru a ne asigura că se suprapune celui de-al doilea rând pe care îl vom adăuga la secțiunea noastră.

• Poziție: Fix
• Locație: Centrul de sus
• Indicele Z: 11

Coloana 1 Vizibilitate

Completați setările rândului setând coloana 1 deversări la ascuns. Acest lucru vă va ajuta cu animația de text pe care ați putut să o observați în previzualizarea acestei postări. Setând revărsările la ascuns, ne vom asigura că animația este ascunsă dincolo de containerul coloanei.

• Overflow orizontal: Ascuns
• Vertical Overflow: Ascuns

Adăugați un modul de text în coloana 1

Adauga continut

Este timpul să adăugați module, începând cu un modul de text în coloana 1. Adăugați o copie la alegere.

Setări text

Treceți la fila de proiectare a modulului și modificați setările de text în consecință:

• Font text: Deschideți Sans
• Stil de text text: majuscule
• Culoarea textului: #ffffff
• Dimensiune Txt: 15 px
• Spațiere scrisoare text: 3 px

Spațiere

Vom adăuga și o marjă stângă negativă la modulul nostru. Acest lucru vă va ajuta cu animația noastră de buclă.

• Marja stângă: -190%

Animaţie

Nu în ultimul rând, adăugați următoarea animație de buclă la modulul dvs. text:

• Stil de animație: Slide
• Direcția animației: Stânga
• Durata animației: 9000ms
• Intensitatea animației: 30%
• Animație Opacitate de pornire: 100%
• Curba de viteză a animației: liniară
• Repetați animația: buclă

Adăugați un modul audio în coloana 2

Eliminați tot conținutul

În coloana 2, singurul modul de care avem nevoie este un modul audio. Asigurați-vă că conținutul este eliminat.

Încărcați fișier audio

Apoi, încărcați un fișier audio care conține cel mai recent episod.

Eliminați culoarea de fundal

Eliminați culoarea de fundal a modulului în continuare.

Spațiere

Apoi, treceți la fila de proiectare și eliminați unele valori implicite de umplere adăugând „0px” la ele.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px
• Garnitura stânga: 0 px

Adăugați rândul # 2

Structura coloanei

Trecem la rândul următor. Acest rând va conține logo-ul nostru, meniul și pictogramele de pe rețelele sociale. Alegeți următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și modificați setările de dimensionare în consecință:

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Lățime maximă: 100%

Spațiere

Eliminați toate umpluturile implicite de sus și de jos în continuare.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Adăugați un modul de meniu în coloana 1

Selectați Meniu

Apoi, adăugați un modul de meniu în coloana 1 și selectați un meniu la alegere.

Încărcați sigla

Încărcați o siglă în continuare.

Eliminați culoarea de fundal

Apoi, eliminați culoarea de fundal albă implicită.

Setări text meniu

Treceți la fila de proiectare și modificați setările pentru textul meniului după cum urmează:

• Font meniu: Deschideți Sans
• Culoarea textului meniului: #ffffff (Desktop), # 1a1844 (Tabletă și telefon)
• Dimensiune text meniu: 15 px
• Alinierea textului: dreapta

Setări text din meniul drop-down

Schimbăm culoarea liniei meniului drop-down și în setările meniului drop-down.

• Meniu drop-down Culoare linie: #ffffff

Setări pictograme

Împreună cu culoarea pictogramei meniului hamburger din setările pictogramei.

• Culoare pictogramă meniu hamburger: # fe4943

Dimensionare

Și vom completa setările modulului prin atribuirea unei lățimi maxime a logo-ului în setările de dimensionare.

• Lățimea maximă a logo-ului: 65%

Adăugați modulul Social Media Follow în coloana 2

Adăugați rețele sociale

În a doua coloană a celui de-al doilea rând al nostru, vom avea nevoie de un modul de urmărire pe rețelele sociale. Adăugați rețelele sociale la alegere.

Aliniere

Treceți la fila de proiectare a modulului și schimbați alinierea modulului.

• Alinierea modulului: centru

Spațiere

Adăugați câteva valori de marjă personalizate în continuare.

• Marja superioară: 20 px
• Marja inferioară: -4% (numai tabletă și telefon)

Frontieră

Și completați antetul adăugând câteva colțuri rotunjite la setările de margine ale modulului. După ce ați finalizat antetul global, asigurați-vă că salvați toate modificările Divi Theme Builder și vizualizați rezultatul pe site-ul dvs. web!

• Toate colțurile: 50vw

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Gânduri finale

În această postare, ți-am arătat cum să devii creativ cu modulul audio încorporat Divi. Mai precis, v-am arătat cum să includeți o bară audio fixă ​​în antetul global personalizat. Acesta este un mod excelent de a sublinia cel mai recent episod al podcastului. Ați putut descărca gratuit fișierul JSON! Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.