Cum să recreezi procedura video Click a lui ET cu Divi

Partajarea previzualizărilor video pe site-ul dvs. web poate spori interactivitatea și îi poate ajuta pe vizitatori să înțeleagă mai bine și mai rapid produsele și / sau serviciile dvs. Acum, pe site-ul web Elegant Themes, am adoptat această abordare pentru noi înșine și am creat un design video direct cu clic direct care permite oamenilor să navigheze prin unele dintre cele mai populare caracteristici ale noastre. Am recreat acest design în interiorul Divi și astăzi vă vom arăta cum să îl recreați de la zero. Veți putea descărca gratuit fișierul JSON!

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 Layout-ul Click Video Walkthrough

Pentru a vă pune mâna pe aspectul prezentării video cu clic gratuit, 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!

Abonați-vă la canalul nostru Youtube

Să începem să recreăm!

Adăugați o nouă secțiune regulată

Începeți prin adăugarea unei noi secțiuni obișnuite la pagina la care lucrați.

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou folosind următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și aplicați următoarele setări de dimensionare:

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 2
• Lățime: 85vw (desktop), 90% (tabletă și telefon)
• Lățime maximă: 100%

Setări coloana 1

Deschideți apoi setările coloanei 1.

Spațiere

Accesați setările de spațiere și adăugați câteva umpluturi de top pe desktop.

• Căptușeală superioară: 5vw (desktop), 0vw (tabletă și telefon)

Clasa CSS

Treceți la fila avansată și adăugați o clasă CSS. Mai târziu în postare, vom folosi această clasă CSS pentru a crea un efect de grilă pe tabletă și mobil.

• Clasa CSS: item-responsive-grid

Adăugați Blurb Module la coloana 1

Adauga titlu

Să începem să adăugăm module! Pentru fiecare element care poate fi făcut clic, vom folosi un modul Blurb. Vom începe cu primul și îl vom reutiliza pentru elementele de clic rămase. Adăugați un nou modul Blurb în coloana 1 și introduceți un titlu la alegere.

Selectați pictograma

Selectați o pictogramă în continuare.

Setări implicite pentru pictograme

Treceți la design și modificați setările pictogramei în consecință:

• Culoare pictogramă: # e8e9ea
• Plasarea pictogramelor: stânga
• Utilizați pictograma Dimensiune font: Da
• Pictogramă Dimensiune font: 2vw (desktop), 4,5vw (tabletă), 7vw (telefon)

Plasați cursorul pe setările pictogramei

Modificați culoarea pictogramei la cursor.

• Culoare pictogramă: # b0c8ff

Setări text titlu

Treceți la setările pentru textul titlului și faceți și câteva modificări acolo.

• Titlu Font: Lato
• Greutatea fontului titlului: Bold
• Stilul fontului titlului: majuscule
• Dimensiune text titlu: 0,8vw (desktop), 1,7vw (tabletă), 2,5vw (telefon)
• Înălțimea liniei de titlu: 2vw (desktop), 4,5vw (tabletă), 7vw (telefon)

Spațiere implicită

Vom modela modulul Blurb folosind câteva valori de umplere personalizate pe diferite dimensiuni de ecran.

• Căptușeală superioară: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
• Căptușeală inferioară: 0,5vw (desktop), 1,5vw (tabletă și telefon)
• Căptușeală stângă: 1.2vw (desktop și tabletă), 5vw (telefon)
• Căptușeală dreaptă: 1.2vw (desktop și tabletă), 5vw (telefon)

Distanța cu mouse-ul

Creați un efect de trecere în evidență prin modificarea valorilor marjei de deplasare.

• Marja stângă: -0,5vw
• Marja dreaptă: -0,5vw

Frontieră

Adăugați și câteva colțuri rotunjite.

Default Box Shadow

Împreună cu o umbră de cutie subtilă.

• Box Shadow Vertical Position: 10 px
• Puterea neclarității umbrei cutiei: 70 px
• Culoare umbră: rgba (0,0,0,0.11)

Hover Box Shadow

Schimbați culoarea umbrei casetei la cursor.

• Culoare umbră: rgba (103,151,255,0,22)

ID și clasă CSS

Nu în ultimul rând, accesați fila avansată a modulului Blurb și adăugați un ID CSS și o clasă.

• ID CSS: video-walkthrough-item-1
• Clasa CSS: video-item-cursor

Modul Clona Blurb de trei ori

După ce ați finalizat primul modul Blurb, îl puteți clona de trei ori.

Schimbați conținutul

Schimbați conținutul fiecărui modul Blurb duplicat.

Schimbați toate ID-urile CSS ale modulului Blurb duplicat

Împreună cu ID-urile CSS.

• 1) Construiți vizual: video-walkthrough-item-1
• 2) Efecte: video-walkthrough-item-2
• 3) Divizoare de formă: video-prezentare-element-3
• 4) Editare în bloc: video-walkthrough-item-4

Reutilizați coloana 1

Eliminați coloana 3

După ce ați completat prima coloană, puteți deschide setările rândului și puteți elimina a treia coloană.

Clonați coloana 1 și plasați în partea de jos

Clonați prima coloană (care conține modulele Blurb) și plasați coloana duplicat în partea de jos.

Schimbați structura coloanei din spate

Schimbați înapoi structura coloanei cu cea selectată la începutul acestui tutorial.

Schimbați tot conținutul modulului Blurb al coloanei 3

Modificați titlul modulului Blurb al fiecărui duplicat din coloana 3.

Schimbați toate ID-urile CSS ale modulului Blurb 3

Împreună cu ID-urile CSS.

• 5) Biblioteca de aspect: video-walkthrough-item-5
• 6) Transformări: video-walkthrough-item-6
• 7) Hover States: video-walkthrough-item-7
• 8) Găsiți și înlocuiți: video-walkthrough-item-8

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

Lăsați caseta de conținut goală

E timpul să începeți să adăugați diferite previzualizări ale videoclipului! Există două modalități de abordare; folosind un modul video sau un modul text. Modulul video solicită vizitatorilor să apese pe redare. Pe de altă parte, utilizarea unui modul text cu fundal video redă videoclipul automat, dar fără sunet. Pentru acest tutorial, vom folosi un modul de text, dar nu ezitați să utilizați în schimb un modul video. Asigurați-vă că caseta de conținut a modulului de text rămâne goală.

Fundal video

Accesați setările de fundal și încărcați un videoclip la alegere.

• Întrerupeți videoclipul în timp ce nu este vizionat: Da

Dimensionare

Treceți la fila de proiectare și adăugați „100%” la lățime.

• Lățime: 100%

Spațiere

În continuare, vom permite ca fundalul video să se afișeze prin adăugarea unor valori personalizate de umplere, sus și jos, pe diferite dimensiuni ale ecranului. Notă: valorile pe care le adăugați trebuie să fie ajustate la setul de dimensiuni al videoclipului dvs.

• Căptușeală superioară: 15vw (desktop), 24vw (tabletă), 26vw (telefon)
• Căptușeală inferioară: 15vw (desktop), 24vw (tabletă), 26vw (telefon)

Frontieră

Continuați adăugând „10 px” la fiecare dintre colțuri.

Box Shadow

Împreună cu o umbră de cutie subtilă.

• Puterea neclarității umbrei cutiei: 30 px
• Puterea răspândirii umbrei cutiei: -5 px
• Culoare umbră: rgba (0,0,0,0.11)

ID CSS

Nu în ultimul rând, adăugați un ID CSS.

• ID CSS: video-walkthrough-1

Clonează modulul de text de 7 ori

După ce ați terminat modulul text, îl puteți clona de șapte ori (unul pentru fiecare modul Blurb).

Schimbați toate fundalurile video ale modulului de text duplicat

Încărcați un fundal video diferit pentru fiecare dintre duplicate.

Schimbați toate ID-urile CSS ale modulului de text duplicat și adăugați clasa CSS la toate modulele de text duplicat

Schimbați și ID-urile CSS. Asigurați-vă că conectați fiecare modul de text la modulul Blurb din dreapta utilizând același număr la sfârșitul ID-ului CSS. De asemenea, ascundem fiecare modul de text, pe lângă modulul de text original, folosind o clasă CSS.

• Modulul text 1: video-prezentare-1
• Modulul text 2: video-walkthrough-2
• Modulul text 3: video-walkthrough-3
• Modulul text 4: video-walkthrough-4
• Modulul text 5: video-walkthrough-5
• Modulul text 6: video-walkthrough-6
• Modulul text 7: video-walkthrough-7
• Modulul de text 8: video-walkthrough-8
• Clasa CSS: video-not-first

Adăugați modulul de cod # 1 în coloana 1

După ce ați finalizat al doilea rând, este timpul să începeți să adăugați codul. Pentru ca funcția de clic să funcționeze, vom folosi câteva coduri CSS și JQuery. Vom plasa codul în două module de cod separate. Începeți prin adăugarea primului modul de cod în coloana 1.

Introduceți codul CSS al paginii

Adăugați următoarele linii de cod CSS:

<style>
.video-not-first {
display: none;
}
.video-item-cursor {
cursor: pointer;
}

@media all and (max-width: 980px) {
.item-responsive-grid {
display: grid;
grid-template-columns: 50% 50%;
grid-column-gap: 2vw;
}
}
.video-walkthrough-active {
background-color:#fff;
margin-right:-0.5vw;
margin-left:-0.5vw;
box-shadow:0 10px 70px 0 rgba(103,151,255,.22),0 15px 105px 0 rgba(103,151,255,.22) !important;
}

.video-walkthrough-active .et-pb-icon{
color: #b0c8ff !important;
}
</style>

Adăugați modulul de cod # 2 în coloana 3

Continuați adăugând un alt modul de cod în a treia coloană.

Introduceți clic pe funcție Cod JQuery

Introduceți următoarele linii de cod JQuery:

<script>
jQuery(function($){

$('[id*="video-walkthrough-item"]').click(function() {
	var selector1 = $(this).attr('id').replace('-item', '');
  var $video   = $('#' + selector1);
  
  $video.show().siblings().hide();
  $video.addClass('play-video');
  $(".play-video .et_pb_section_video_bg video").trigger('play');
  $video.removeClass('play-video');

  $('[id*="video-walkthrough-item"]').removeClass("video-walkthrough-active");
  $(this).addClass('video-walkthrough-active');

});
});
</script>

După ce ați parcurs acest pas, vă puteți salva pagina și ieși din Visual Builder!

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, v-am arătat cum să recreați prezentarea video a clicurilor Elegant Themes cu Divi. Vă oferim gratuit descărcarea JSON! Simțiți-vă liber să utilizați acest design pentru orice fel de site web pe care îl creați. Este o modalitate excelentă de a prezenta videoclipuri și de a atrage atenția vizitatorilor. 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.