Cum să creați un videoclip promoțional lipicios cu un comutator Afișare / ascundere în Divi

Un videoclip promoțional este un instrument de marketing minunat pentru a vă promova produsele și serviciile către toți acei vizitatori care ar prefera doar să vizioneze un videoclip decât să vă exploreze pagina pentru informații. Și, dacă aveți încredere că videoclipul dvs. va contribui la creșterea conversiilor, este o idee bună să păstrați videoclipul la dispoziția utilizatorilor cât mai mult posibil. Având în vedere acest lucru, un videoclip promoțional lipicios (un videoclip care rămâne fix în partea de sus a paginii) ar putea fi un avantaj valoros pentru site-ul dvs. web.

În acest tutorial, vă vom arăta cum să creați un videoclip promoțional lipicios cu o comutare de tip show / hide în Divi. Ideea este să afișați versiunea full-size a videoclipului inițial deasupra paginii. Apoi, pe măsură ce utilizatorul derulează pagina în jos, videoclipul rămâne în partea de sus a paginii pentru acces și / sau vizualizare ușoară în timp ce utilizatorul explorează restul conținutului din pagină. Desigur, acest lucru poate fi un pic intruziv pentru unii vizitatori. Deci, vă vom arăta, de asemenea, cum să adăugați un buton de comutare pentru a oferi utilizatorilor posibilitatea de a afișa sau ascunde videoclipul ori de câte ori doresc.

Să începem!

Trage cu ochiul

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

Acesta este videoclipul lipicios fără comutare.

Iată același videoclip lipicios cu butonul de comutare.

Iată o privire mai atentă asupra funcționalității de comutare.

Iată cum arată pe mobil.

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. Selectați opțiunea „Alegeți un aspect premade”.
   
4. Încărcați aspectul paginii Servicii de marketing digital.
   

Cum să creați un videoclip promoțional lipicios cu o afișare / ascundere pentru pagina dvs. de vânzări

Adăugarea rândului pentru videoclipul lipicios

Pentru a începe, vom șterge cel de-al doilea modul de text din rândul primei / secțiunilor superioare ale aspectului.

Sub rândul existent din secțiunea de sus, adăugați un nou rând cu o singură coloană.

Deschideți setările de rând pentru noul rând și, în fila Advanced, actualizați indexul Z după cum urmează:

• Indicele Z: 14

Acest lucru se va asigura că videoclipul pe care îl adăugăm pe rând va rămâne deasupra celuilalt conținut de pe pagină atunci când este blocat în timpul derulării paginii.

Adăugarea videoclipului

În coloana rândului, adăugați un nou modul video.

Deschideți setările video și încărcați formatele mp4 și webm pentru videoclipul la alegere.

Dacă doriți, adăugați o imagine suprapusă la videoclip.

Sub fila Proiectare, actualizați următoarele opțiuni de dimensionare:

• Lățime maximă: 900 px
• Alinierea modulului: centru

• Colțuri rotunjite: 8 px
• Box Shadow: vezi captura de ecran

Făcând coloana lipicioasă

Deschideți setările pentru coloana care conține videoclipul și adăugați următoarea clasă CSS în fila Advanced:

• Clasa CSS: et-sticky-video

Apoi actualizați poziția stick-ului după cum urmează:

• Poziție lipicioasă: lipiți-vă de sus
• Stiluri implicite de tranziție și lipicioase: NU

Acum că poziția lipicioasă este în vigoare, adăugați următorul CSS personalizat la elementul principal pentru starea lipicioasă:

width: 300px !important;
right: 0px !important;
left: auto !important;
top: 0px;

Actualizați dimensiunea pictogramei de redare video în stare lipicioasă

Apoi, deschideți din nou setările video și actualizați dimensiunea fontului pictogramei de redare în starea lipicioasă după cum urmează:

• Utilizați dimensiunea pictogramei personalizate: DA
• Pictogramă redare Dimensiune font (lipicios): 50 px

Rezultatul de până acum

Crearea butonului Toggle Video Sticky

Pentru a crea butonul de comutare video lipicios, creați un nou modul de buton sub modulul video.

Apoi mutați butonul de deasupra modulului video.

Deschideți setările butonului și actualizați textul butonului după cum urmează:

• Text buton: Ascundeți

(NOTĂ: Acest text va fi înlocuit / comutat cu cuvântul „Afișare” atunci când facem clic pe buton atunci când adăugăm codul nostru mai târziu.)

Sub fila Proiectare, actualizați următoarele:

• Folosiți stiluri personalizate pentru butonul: DA
• Stiluri de text pentru butoane: 14 px
• Culoarea textului butonului: # fa50a9
• Buton Font Greutate: Semi Bold
• Stil Font Buton: TT
• Pictogramă buton: săgeată dreapta
• Afișați pictograma doar pe cursor pentru buton: NU

(NOTĂ: pictograma butonului pe care o alegeți va fi rotită cu 180 de grade când faceți clic pe buton atunci când adăugăm aspectul codului pentru o experiență mai intuitivă a utilizatorului.

Actualizați și spațiul pentru buton:

• Căptușeală: 0,5em sus, 0,5em jos, 1em stânga, 1,7em dreapta

Sub fila Advanced, adăugați următoarea clasă CSS la buton:

• Clasa CSS: et-sticky-video-toggle

Sub fila Advanced, actualizați opțiunea de poziție:

• Poziție: Absolută
• Locație: stânga jos

Acum mutați butonul în afara coloanei / videoclipului spre stânga actualizând opțiunea de traducere a transformării în starea lipicioasă după cum urmează:

• Transformă axa X tradusă (lipicios): -100%

Pentru a finaliza designul butonului de comutare, trebuie să ascundem butonul până când acesta ajunge la starea lipicioasă. Pentru a face acest lucru, actualizați CSS personalizat la elementul principal pentru desktop și starea lipicioasă după cum urmează:

Pentru elementul principal de pe desktop ...

display:none !important;

Pentru elementul principal de pe Sticky ...

display:block !important;

Adăugarea codului personalizat pentru funcționalitatea de comutare

Pentru ca comutatorul să funcționeze cum trebuie, va trebui să adăugăm un modul de cod sub modulul video.

CSS personalizat

În fila conținut, treceți de următorul CSS personalizat, asigurându-vă că îl înfășurați în etichetele de stil .

.et-sticky-video-toggle.et_pb_button:after, .et_pb_sticky.et-sticky-video {
transition: all 200ms;
}
.et_pb_sticky.et-sticky-video-active {
transform: translate(100%, 0%);
}
.et-sticky-video-toggle:hover {
cursor: pointer;
}
.et-sticky-video-hidden:after {
transform: rotate(180deg) !important;
}

JQuery personalizat

Apoi, sub CSS cu etichetele de stil, adăugați următorul JQuery înfășurat în etichetele de script .

(function($) {
$(document).ready(function(){
var $stickyVideoToggle = $('.et-sticky-video-toggle');

$stickyVideoToggle.on('click',function(e) {
e.preventDefault();

$(e.target).closest('.et-sticky-video').toggleClass('et-sticky-video-active');

$(this).toggleClass('et-sticky-video-hidden');
if ($(this).hasClass('et-sticky-video-hidden')) {
$stickyVideoToggle.text('show');
} else {
$stickyVideoToggle.text('hide');
}
});
});
})(jQuery);

Asta e!

Rezultat final

Vizualizați acum versiunea live a paginii pentru a vedea rezultatele dvs.

Acesta este videoclipul lipicios fără comutare.

Iată același videoclip lipicios cu butonul de comutare.

Iată o privire mai atentă asupra funcționalității de comutare.

Iată cum arată pe mobil.

Adăugați cu ușurință module suplimentare la coloana Sticky pentru a completa video

Deoarece poziția lipicioasă este adăugată la coloană (nu la videoclip), nu ezitați să adăugați module / conținut suplimentar pentru a complimenta videoclipul.

De exemplu, puteți include un buton în partea de jos a videoclipului în aceeași coloană lipicioasă.

Apoi va rămâne sub videoclip în starea lipicioasă a coloanei.

Adăugați cu ușurință propriile opțiuni video personalizate cu acest aspect video Sticky

Aplicarea poziției lipicioase pe coloană (nu pe videoclip) este utilă pentru adăugarea de încorporări video personalizate sau HTML (folosind un modul text sau cod) în coloană. Funcționalitatea video lipicioasă va funcționa în continuare.

De exemplu, puteți adăuga un videoclip HTML5 la un modul de cod din aceeași coloană.

Schimbați ușor și structurile coloanei!

De asemenea, puteți schimba cu ușurință rândul în orice structură de coloană pe care doriți să o afișați cu conținut adiacent. De exemplu, puteți avea un aspect cu două coloane, cu videoclipul lipicios inițial în coloana din dreapta sau din stânga. Doar asigurați-vă că coloana care conține conținutul video va avea aceeași clasă CSS și stilul lipicios, așa cum este explicat în acest tutorial. Funcționalitatea lipicioasă va funcționa la fel.

De exemplu, folosind designul nostru existent, putem adăuga o nouă coloană folosind vizualizarea straturilor și umple acea nouă coloană cu textul principal al antetului.

Coloana lipicioasă va funcționa în continuare perfect, în timp ce coloana / conținutul adiacent rămâne în fluxul normal al documentului.

Problemă cu videoclipurile / încorporările YouTube Utilizând opțiunea Divi Overlay Image

Dacă utilizați o adresă URL YouTube pentru a încorpora un videoclip cu modulul video, ca în acest design, este mai bine să nu utilizați opțiunea de imagine suprapusă încorporată Divi (cu pictogramă redare). Acest lucru va determina redarea automată a sunetului video de la început, în stare lipicioasă, provocând redarea sunetului duplicat la intervale diferite. Deci, dacă doriți să utilizați imaginea suprapusă a Divi și pictograma de redare cu modulul video Divi, ar trebui să adăugați în schimb fișierele / adresele URL mp4 și WebM.

Gânduri finale

Construirea unui videoclip promoțional lipicios cu un comutator de afișare / ascundere pentru pagina dvs. deschide ușa pentru noi modalități de a vă promova produsele și serviciile. Nu numai că puteți menține aceste videoclipuri cu conversie ridicată în prim plan, dar puteți include cu ușurință informații complementare sau CTA-uri deasupra sau dedesubtul videoclipului doar adăugându-le în aceeași coloană din Divi.

De fapt, nici nu trebuie să includeți deloc un videoclip, trebuie doar să completați coloana lipicioasă cu orice informații pe care doriți să le lipiți în partea de sus a paginii pe scroll!

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

Noroc!