Dodavanje videozapisa na vašu stranicu u Diviu jednostavno je kada koristite modul Video. Ovaj modul omogućuje vam ugrađivanje videozapisa iz bilo kojeg izvora, ali i prilagodbu sličice i gumba za reprodukciju.

Kako dodati video modul na svoju stranicu

Prije nego što svojoj stranici možete dodati video modul, prvo morate uskočiti u Divi Builder. Jednom Divi tema instaliran na vašoj web stranici, primijetit ćete gumb Koristite Divi Builder iznad uređivača postova kad god izradite novu stranicu. Pritisnite ovaj gumb da biste aktivirali Divi Builder i pristupili svim modulima Divi Builder. Zatim kliknite na gumb Koristite Visual Builder za pokretanje generatora u vizualnom načinu. Također možete kliknuti gumb Koristite Visual Builder kada pregledavate web stranicu u prvom planu ako ste povezani na svoju WordPress nadzornu ploču.

divi graditelj

Nakon što uđete u Visual Builder, možete kliknuti sivi gumb plus da biste na svoju stranicu dodali novi modul. Novi moduli mogu se dodavati samo unutar redaka. Ako započinjete novu stranicu, ne zaboravite prvo dodati redak na svoju stranicu.

video modul divi.png

Pronađite video mod na popisu modova i kliknite ga da biste ga dodali na svoju stranicu. Popis modova je pretraživ, što znači da možete i utipkati riječ "video", a zatim kliknuti enter za automatsko pronalaženje i dodavanje video moda! Nakon dodavanja modula, dočekat će vas popis opcija modula. Te su opcije podijeljene u tri glavne skupine: Sadržaj , Začeće et napredan .

Primjer slučaja: Dodavanje videozapisa na vašu odredišnu stranicu

Dodavanje videozapisa na vašu odredišnu stranicu izvrstan je način da unaprijediti svoje proizvode i povećajte konverzije. U ovom primjeru pokazat ću vam kako pomoću video modula možete dodati video na svoju odredišnu stranicu. Stavio sam crveni kružić tamo gdje bi video trebao ići.

stvori video na divi primjeple.jpg

Koristeći Visual Builder, dodajem novi odjeljak s redom pune širine (1 stupac). U postavkama reda, na kartici Dizajn, odabirem opciju "Koristi prilagođenu širinu". Za opciju Prilagođena širina koja se pojavi unesem prilagođenu širinu od 767px. To osigurava da video modul koji ću dodati u ovom retku ne prelazi ovu širinu i da postane prevelik na većim veličinama zaslona.

koristite prilagođenu širinu divi.png

Zatim u red dodam video modul. Pod karticu Sadržaj postavke Video modula unosim URL videozapisa videozapisa koji želim ugraditi na svoju odredišnu stranicu. Za ovaj primjer koristim URL YouTube videozapisa.

dodajte video na divi.png

Zatim dodam url slike za svoj videozapis klikom na gumb "Generiraj video". Ovo automatski povlači kadar iz videozapisa kako bi poslužio kao prekrivač s novom prilagođenom ikonom videozapisa.

dodajte preklapanje divi video.jpg

Na kartici Dizajn mijenjam boju ikone za reprodukciju kako bi odgovarala mojoj odredišnoj stranici.

uredite ikonu igrača divi video.jpg

Sada imam videozapis za moju odredišnu stranicu koji izgleda čisto i odgovara mom dizajnu.

konačni dizajn sa sadržajem video.jpg

Sad kad ste vidjeli video mod u akciji, zaronite u sve njegove postavke u donjim odjeljcima. Pružili smo detaljan pregled onoga što ćete pronaći na svakoj kartici postavki modula i objašnjenje što svaki od njih radi.

Opcije sadržaja

parametarski modul divi.png

URL videozapisa

Modul Divi Video omogućuje vam dodavanje video zapisa pomoću dvije različite metode. Možete preuzeti vlastitu video datoteku s računala klikom na gumb "Preuzmi video" i odabirom željene datoteke ili možete unijeti bilo koji url videozapisa iz izvora video zapisa treće strane, kao što je Youtube ili Vimeo. Samo kopirajte i zalijepite URL iz svog preglednika i zalijepite ga u polje Video URL, a Divi će se pobrinuti za ostalo!

URL prekrivanja slike

Ako želite postaviti prilagođenu minijaturu videozapisa koja će se postaviti na standardno video sučelje s prilagođenim gumbom za reprodukciju radi stvaranja oštrijeg i stiliziranijeg izgleda, to možete odabrati pomoću polja Prekrivanje slike. Ova kontrola omogućuje vam prijenos vlastite personalizirane slike ili automatsko dopuštanje Diviu da je generira iz URL-a vašeg videozapisa. Većina pružatelja video usluga podržavaju ovu opciju, poput Youtubea i Vimea. Jednostavno kliknite gumb "Generiraj video" i prepustite se Diviju da se pobrine za ostalo!

Administratorska oznaka

Prema zadanim postavkama, vaš će se video modul u generatoru pojaviti s oznakom "Video". Administratorska oznaka omogućuje vam promjenu ove oznake radi lakše identifikacije.

Mogućnosti dizajna

promijeni boju ikone

Dizajn divi.png dizajn dijelova

Ako odredite prekrivač slike za video pod, prikazani videozapis sadrži ikonu za reprodukciju na videozapisu. Ovdje možete odrediti boju ove ikone kako bi odgovarala bojama na vašoj stranici.

Opcije Avancées

video modul Advanced section.png

CSS identifikator i klase

To se može koristiti za dodavanje CSS ID-a ili klase vašem modulu. Tada se mogu koristiti u vašem listu stilova ili u okviru Prilagođeni CSS okvira tema kako bi primijenili prilagođeni stil na modul. CSS ID-ovi također se mogu ciljati pomoću usidrenih veza koje vode do određenih područja vaše stranice.

Prilagođeni CSS

Ovdje možete dodati prilagođeni CSS u svoj video modul.

vidljivost

Ako želite sakriti svoj video modul na nekim uređajima, možete odabrati uređaje na kojima želite onemogućiti video modul.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]PREUZMI DIVI TEMU [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]PREUZMITE predlošci DIVI[/vcex_button][/vc_column][/vc_row]

Ostali Divi tutoriali