Cum se afișează butoane (sau CTA-uri) la anumite momente când redați un videoclip HTML în Divi

Videoclipurile sunt instrumente de marketing eficiente pentru un site web. Și dacă un videoclip încearcă să promoveze și să vândă produse sau servicii online, acesta ar trebui să includă un îndemn clar la acțiune pentru potențialii clienți. O modalitate simplă de a oferi un îndemn la acțiune este să includeți un buton lângă videoclip pe care să poată face clic. Cu toate acestea, unele butoane (sau CTA-uri) au mai mult sens să apară la un anumit moment în care utilizatorul urmărește videoclipul. De exemplu, poate exista un segment al videoclipului (cum ar fi 20 de secunde în) în care este menționată o anumită reducere sau promoție. Apariția unui buton „Obțineți acum” la acel moment specific poate fi mai eficientă.

În acest tutorial, vă vom arăta cum să faceți ca butoanele (sau CTA-urile) să apară la anumite momente când redați un videoclip HTML în Divi. Această tehnică vă va permite să utilizați videoclipuri și butoane proiectate cu Divi Builder și apoi să afișați acele butoane atunci când videoclipul ajunge la un anumit moment, când utilizatorul întrerupe videoclipul sau când videoclipul se termină. Este nevoie doar de câteva fragmente de JQuery. Nu este necesar niciun plugin pentru acesta.

Să începem!

Trage cu ochiul

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

Observați cum apare butonul de sus când timpul curent al videoclipului ajunge la 5 secunde și butonul de jos apare când videoclipul se termină.

Aici apare același buton de sus când timpul curent al videoclipului ajunge la 5 secunde și butonul de jos apare când videoclipul este întrerupt.

De asemenea, puteți verifica acest codepen pentru o demonstrație live a acestei funcționalități.

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.

Cum se afișează un buton la anumite momente când redați un videoclip în Divi

Încărcați aspectul paginii de destinație Soccer Club

Pentru a începe în mod repetat în proiectare, vom folosi aspectul paginii de destinație Soccer Club din pachetul de layout Soccer Club.

Pentru a face acest lucru, deschideți meniul de setări, faceți clic pe pictograma Adăugați din aspect și găsiți și utilizați aspectul paginii de destinație Soccer Club.

Actualizați modulul video

În secțiunea de sus a paginii, veți găsi un videoclip cu două butoane în coloana din dreapta. Vom folosi aceste elemente pentru a demonstra funcționalitatea afișării acelor butoane în timpul redării unui videoclip.

Deschideți setările video și încărcați / adăugați un videoclip în format de fișier MP4. De asemenea, puteți include un fișier WEBM.

Sub fila avansată, dați videoclipului un ID CSS personalizat:

• CSS ID: divi-video-container

Actualizați butonul de sus

Apoi, deschideți setările pentru modulul buton de deasupra videoclipului și actualizați opțiunea de transformare astfel încât să deplaseze butonul în spatele videoclipului după cum urmează:

• Transformă axa Y tradusă: 100%

Apoi dați butonului următoarea clasă CSS:

• Clasa CSS: divi-delayed-button-1

Actualizați butonul inferior

Apoi, deschideți setările pentru modulul buton de sub videoclip și actualizați opțiunea de transformare astfel încât să deplaseze butonul în sus, după cum urmează:

• Transformă axa Y tradusă: -100%

Apoi dați butonului următorul ID CSS:

• ID CSS: divi-delayed-button-2

Deoarece nu avem nevoie de animațiile care au fost adăugate butoanelor din aspectul premade, le putem scoate. Utilizați multiselectarea pentru a selecta ambele module de butoane (în modul de vizualizare a straturilor). Apoi deschideți setările oricărui modul de buton și setați stilul de animație la nici unul.

• Stil de animație: Nici unul

Adăugați codul

Pentru pasul final, trebuie să adăugăm codul cust0m. Pentru a face acest lucru, adăugați un modul de cod sub butonul de jos.

În caseta de cod pentru setările de cod, lipiți următorul CSS asigurându-vă că înfășurați codul în etichetele de stil .

.divi-delayed-button-1,
.divi-delayed-button-2 {
  visibility: hidden;
  transition: all 400ms ease !important;
}
.divi-delayed-button-1.show-button,
.divi-delayed-button-2.show-button {
  visibility: visible;
  transform: none;
}

Apoi, lipiți următorul cod JQuery după CSS, asigurându-vă că înfășurați codul în etichetele de script .

(function ($) {
  $(document).ready(function () {
    //items
    $diviVideo = $("#divi-video-container video");
    videoElement = $("#divi-video-container video")[0];
    $delayedButton1 = $(".divi-delayed-button-1");
    $delayedButton2 = $(".divi-delayed-button-2");

    //add timeupdate event on video with a function.
    $diviVideo.on("timeupdate", function (e) {
      //add class to show button1 when specified currentTime is reached.
      if (e.target.currentTime >= 5) {
        $delayedButton1.addClass("show-button");
      }

      //add class to show button2 when video is paused or has ended
      if (videoElement.paused || videoElement.ended) {
        $delayedButton2.addClass("show-button");
      }
    });
  });
})(jQuery);

Despre Cod

CSS

Mai întâi, ascundem butoanele și stabilim durata de tranziție a animației butoanelor.

.divi-delayed-button-1,
.divi-delayed-button-2 {
  visibility: hidden;
  transition: all 400ms ease !important;
}

Apoi afișăm butonul atunci când clasa „show-button” este activată prin intermediul JQuery și setăm transformarea la none, astfel încât butonul să revină la plasarea inițială pe pagină.

.divi-delayed-button-1.show-button,
.divi-delayed-button-2.show-button {
  visibility: visible;
  transform: none;
}

JQuery

Primul lucru pe care îl facem este să definim variabilele pe care le vom folosi.

    //items
    $diviVideo = $("#divi-video-container video");
    videoElement = $("#divi-video-container video")[0];
    $delayedButton1 = $(".divi-delayed-button-1");
    $delayedButton2 = $(".divi-delayed-button-2");

Apoi, adăugăm evenimentul timeupdate pe videoclip cu o funcție, astfel încât să putem determina dinamic ora curentă a videoclipului în timpul redării. Pentru mai multe informații, citiți despre evenimentul de actualizare aici.

    //add timeupdate event on video with a function.
    $diviVideo.on("timeupdate", function (e) {

    });

În interiorul funcției, folosim o declarație if pentru a afișa butonul 1 (butonul de sus) ori de câte ori atributul currentTime al videoclipului este egal sau mai mare de 5 secunde.

    //add timeupdate event on video with a function.
    $diviVideo.on("timeupdate", function (e) {

      //add class to show button1 when specified currentTime is reached.
      if (e.target.currentTime >= 5) {
        $delayedButton1.addClass("show-button");
      }

    });

NOTĂ: Condiția instrucțiunii if este e.target.currentTime> = 5 , dar puteți schimba acest lucru pentru a arăta butonul într - un moment diferit la redarea video. De exemplu, dacă ai vrut să arate butonul când currentTime video ajunge la 20 de secunde, puteți înlocui cu condiția e.target.currentTime> = 20.

Apoi folosim o altă instrucțiune if pentru a afișa butonul 2 (butonul de jos) ori de câte ori videoclipul este întrerupt sau s-a încheiat (folosind proprietățile HTMLMediaElement întrerupte și încheiate.

    //add timeupdate event on video with a function.
    $diviVideo.on("timeupdate", function (e) {
      //add class to show button1 when specified currentTime is reached.
      if (e.target.currentTime >= 5) {
        $delayedButton1.addClass("show-button");
      }

      //add class to show button2 when video is paused or has ended
      if (videoElement.paused || videoElement.ended) {
        $delayedButton2.addClass("show-button");
      }
    });

Rezultat final

Observați cum apare butonul de sus când timpul curent al videoclipului ajunge la 5 secunde și butonul de jos apare când videoclipul se termină.

Aici apare același buton de sus când timpul curent al videoclipului ajunge la 5 secunde și butonul de jos apare când videoclipul este întrerupt.

De asemenea, puteți verifica acest codepen pentru o demonstrație live a acestei funcționalități.

Gânduri finale

Afișarea unui buton bazat pe ora curentă a unui videoclip poate fi utilă pentru comercializarea produselor și serviciilor dvs. Orice videoclip promoțional de succes merită oricum un îndemn convingător. Sperăm că acest tutorial vă va oferi o mai bună înțelegere a modului de a utiliza funcționalitatea videoclipurilor HTML pentru a servi acele CTA-uri puternice când și unde doriți.

Dacă sunteți interesat de alte moduri creative de a utiliza videoclipuri HTML în Divi, iată câteva articole care vă pot plăcea:

• Cum se creează comenzi video HTML personalizate în Divi
• Adăugarea de efecte 3D la videoclipurile HTML5 pentru a afișa animații de produs unice în Divi
• Cum să creați un videoclip promoțional lipicios cu un comutator Afișare / ascundere în Divi

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

Noroc!