Cum să afișați/ascundeți un glisor video pe baza stării de conectare cu Divi

Glisoarele video sunt excelente pentru a prezenta o colecție de videoclipuri pentru un curs, o pagină de rețete sau tutoriale. Sunt, de asemenea, un bun candidat pentru prezentarea de conținut premium pentru membrii sau abonații site-ului dvs. De exemplu, un vizitator ar putea ajunge pe o pagină de rețetă și poate vedea instrucțiunile numai în format text. Cu toate acestea, odată ce devin un utilizator înregistrat, vor vedea un glisor video pe aceeași pagină ca conținut premium. În acest tutorial, vă vom arăta cât de ușor este să ascundeți/afișați un glisor video pe baza stării de conectare cu Divi. Acest lucru vă permite să oferiți conținut video utilizatorilor conectați ca o funcție premium.

Să ne scufundăm!

Privire pe furiș

Iată o privire rapidă asupra designului pe care îl vom construi în acest tutorial. Observați cum glisorul video este ascuns utilizatorilor până când aceștia se conectează folosind formularul de conectare.

Descărcați aspectul GRATUIT

Pentru a pune mâna pe modelele din acest tutorial, mai întâi va trebui să îl descărcați folosind butonul de mai jos. Pentru a obține acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily utilizând formularul de mai jos. Ca nou abonat, vei primi și mai multă bunătate 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 de mai jos și faceți clic pe descărcare. Nu veți fi „reabonat” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Alăturați-vă Newsletter-ului Divi și vă vom trimite prin e-mail o copie a pachetului Divi Landing Page Layout, plus o mulțime de alte resurse, sfaturi și trucuri Divi uimitoare și gratuite. Urmăriți-vă și veți deveni un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, introduceți mai jos adresa dvs. de e-mail și faceți clic pe descărcare pentru a accesa pachetul de layout.

DESCARCA

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

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.

Odată terminat, aspectul secțiunii va fi disponibil în Divi Builder.

Să trecem la tutorial, da?

Afișarea/Ascunderea unui slider video pe baza stării de conectare cu Divi

Creați o pagină nouă cu un aspect prefabricat

Să începem cu tutorialul nostru creând o pagină nouă și să ruleze cu unul dintre machetele noastre prefabricate.

Iată cum să o faci:

1. Creează o pagină nouă și dă-i un titlu
2. Faceți clic pentru a utiliza Divi Builder (în partea din față)
3. Selectați pentru a utiliza un aspect prestabilit
4. Căutați și selectați aspectul paginii de rețete pentru dietetician.
5. Pentru a încărca aspectul în pagină, faceți clic pe butonul „Utilizați acest aspect”.

Odată ce aspectul s-a încărcat în pagină, sunteți gata să adăugați glisorul video lipicios pe pagină.

Adăugarea glisorului video pe pagină

Pe pagina de rețete, veți vedea un videoclip pe lățime completă la rând chiar sub rând cu ingredientele și instrucțiunile. Vom înlocui videoclipul cu un modul slider video. Pentru a face asta, ștergeți modulul video.

Apoi adăugați un nou modul glisor video în locul său.

Adăugarea de videoclipuri în glisor

Pentru a adăuga videoclipuri la glisor, deschideți setările cursorului video. Sub fila de conținut, veți vedea un videoclip simulat deja pe loc. Deschideți setările pentru videoclipul existent.

Apoi, ștergeți videoclipul implicit și faceți clic pe pictograma Adăugare videoclip pentru a adăuga un nou videoclip la glisor.

Pentru acest exemplu, adaug un videoclip auto-găzduit. Este întotdeauna o idee bună să încărcați o versiune MP4 și o versiune Webm a fișierului video.

Apoi, putem adăuga o suprapunere de imagine la videoclip.

După ce ați terminat, salvați modificările.

Pentru a crea videoclipuri suplimentare, reveniți la setările glisorului video și duplicați videoclipul existent de 3 ori pentru a obține un total de 4 videoclipuri. Apoi, sub opțiunea de suprapunere, comutați pe DA pentru a afișa suprapunerile de imagini pe videoclipul principal.

Adăugarea opțiunii de afișare condiționată

Pentru acest tutorial, vom arăta acest slider video numai utilizatorilor care sunt autentificați. Pentru a face acest lucru, accesați fila avansată și faceți clic pentru a adăuga o nouă condiție în grupul de opțiuni de condiții.

În meniul derulant al condițiilor de afișare, selectați din listă Stare de conectare. Asigurați-vă că selectați să afișați numai dacă utilizatorul este conectat . Apoi salvați modificările.

Sfat bonus: creați un CTA sau un formular de conectare pentru utilizatorii care nu sunt autentificați

Pentru vizitatorii noi, probabil că veți dori să creați un fel de CTA pentru a vă înregistra sau un formular de autentificare pentru a le permite membrilor să se conecteze și să vadă videoclipurile. Pentru a face acest lucru, puteți crea un nou rând cu două coloane cu o imagine care arată ca un videoclip în coloana din stânga și un formular de conectare în coloana din dreapta, ca în captura de ecran de mai jos.

Apoi deschideți setările rândului și adăugați o condiție de afișare bazată pe starea de autentificare. Numai de această dată, selectați pentru a afișa numai dacă utilizatorul este deconectat . Acest lucru va afișa conținutul utilizatorilor numai dacă aceștia sunt deconectați.

Când adăugați formularul de autentificare, asigurați-vă că actualizați opțiunea de redirecționare pentru a redirecționa către pagina curentă . Acest lucru va îmbunătăți UX pentru utilizatorii care doresc să se autentifice și să vizualizeze videoclipurile pe aceeași pagină.

Pentru a afla cum să creați o secțiune CTA pentru utilizatorii deconectați de la zero, consultați postarea noastră despre cum să creați postări de blog exclusiv pentru membri cu opțiunile de stare Divi.

Rezultate finale

Iată o privire la glisoarele noastre video finale. Observați cum sunt ascunse utilizatorilor până când se conectează folosind formularul de conectare.

Problema cu videoclipurile/încorporarea YouTube folosind suprapunerile de imagini pe videoclipul principal

Dacă utilizați o adresă URL YouTube pentru a încorpora mai multe videoclipuri în glisorul video, cel mai bine este să nu utilizați opțiunea încorporată a Divi pentru „Afișați suprapuneri de imagini pe videoclipul principal”. Acest lucru va face ca sunetul video să fie redat automat de la început în starea lipicioasă, provocând redarea audio duplicată la intervale diferite.

Acesta nu este cazul videoclipurilor auto-găzduite în format de fișier mp4 sau webm. Puteți afișa suprapuneri de imagini pe videoclipul principal pentru videoclipurile auto-găzduite. Deci, dacă doriți să utilizați imaginea de suprapunere a Divi și pictograma de redare cu modulul video Divi, ar trebui să adăugați fișiere/URL-uri video MP4 și Webm.

Acestea fiind spuse, puteți adăuga în continuare suprapuneri de imagini personalizate la videoclipurile dvs. YouTube în glisorul video. Acestea vor apărea în continuare pe comenzile pentru miniaturi de sub videoclipul principal.

Gânduri finale

Abilitatea de a afișa/ascunde glisoarele video pe baza stării de autentificare poate fi utilă atunci când doriți să oferiți conținut premium membrilor sau abonaților.

Pentru mai multe, consultați o postare similară despre cum să creați postări de blog exclusiv pentru membri cu opțiunile de stare Divi.

Aștept cu nerăbdare vești de la tine în comentarii.

Noroc!