Cum să adăugați fundal video pe site-ul dvs. WordPress

Fundalul video este una dintre cele mai fabuloase caracteristici ale unui site web. Îți poate face site-ul web nu numai plin de viață și interesant, ci și să poată afișa mai multe imagini și informații. Cu toate acestea, pun pariu că nu mulți oameni știu cum să adauge un fundal video pe site-urile lor. Prin urmare, acest ghid final va fi util dacă doriți să adăugați un fundal video pe site-ul dvs. web.

Utilizați o temă WordPress care acceptă fundal video

Unele teme WordPress acceptă afișarea fundalului video, așa că trebuie doar să configurați tema pentru a o prezenta.

De exemplu, această temă Clean Blocks acceptă fundalul video în zona de acoperire a antetului. Apoi, aveți nevoie doar de câțiva pași simpli pentru a insera un videoclip în acesta, mergând la Customizer, găsind secțiunea Header Media și urmând cerințele temei.

Majoritatea temelor vă vor permite să încărcați un videoclip. În plus, mulți vor accepta linkuri încorporate de pe YouTube, așa cum am făcut mai sus. Acest lucru nu numai că va fi mai rapid, mai simplu, dar va ajuta și site-ul să fie mai ușor, optimizând astfel viteza site-ului. Fiecare temă va fi personalizată în moduri diferite, așa că trebuie să citiți cu atenție instrucțiunile.

Cu toate acestea, zona de fundal video poate fi restricționată atunci când utilizați teme, deoarece temele pot accepta doar videoclipuri care rulează într-o anumită zonă. Ce se întâmplă dacă doriți să adăugați un fundal video într-o altă zonă? Este timpul să utilizați un plugin pentru a adăuga un fundal video pe site-ul dvs. WordPress.

Utilizați un plugin pentru a adăuga fundal video pe site

Există multe plugin-uri care vă pot ajuta în acest sens. După ce am cercetat, am descoperit că pluginul Advanced WordPress Background (AWP) este super ușor de folosit pentru cei care nu știu prea multe despre tehnologie. De asemenea, ajută fundalul video să se afișeze frumos și oferă multe opțiuni de personalizare.

Rețineți că acest plugin funcționează numai pe versiunea WordPress 5.0 și editorul Gutenberg. Așa că nu uitați să vă actualizați versiunea WordPress și să utilizați acest editor.

Pasul 1: Instalați pluginul

Puteți descărca acest plugin de la wordpress.org, apoi accesați Dashboard > Plugin > Add New > Upload Plugin , încărcați, instalați și activați-l.

Sau în Dashboard > Plugin > Add New , găsiți pluginul și faceți clic pe Instalare > Activare .

Pasul 2: Adăugați un fundal video

Adăugarea unui fundal video este similară cu inserarea unui bloc în Gutenberg. Deci, dacă ești familiarizat cu Gutenberg, este ușor. Dacă nu, puteți citi instrucțiunile de utilizare a lui Gutenberg.

Accesați o pagină sau un articol în care doriți să adăugați un fundal video, adăugați un bloc nou și căutați cuvântul cheie „awb” pentru a găsi blocul de fundal al AWB.

După inserarea acestui bloc, în bara laterală din dreapta, selectați fila Bloc pentru a-l configura. Există 3 opțiuni pentru fundal, care sunt imagine, culoare și video. Alegeți Video pentru a insera fundalul video. Apoi, aveți 2 opțiuni: inserați videoclipul de pe URL-ul YouTube sau Vimeo sau încărcați videoclipuri auto-găzduite.

Dacă alegeți prima opțiune, trebuie doar să introduceți linkul în secțiunea URL video .

Pentru a doua opțiune, accesați secțiunea Self Hosted . Există 3 tipuri de formate video de încărcat:

Selectați formatul dorit, apoi alegeți un videoclip existent în bibliotecă sau încărcați unul nou. Asta e.

Pasul 3: Personalizați fundalul video

Afișați videoclipul cu înălțimea completă și adăugați un bloc pe videoclip

După introducerea videoclipului, cadrul acestuia este atât de mic ca acesta. Pentru a afișa videoclipul cu înălțimea completă, selectați secțiunea Full-height din bara de instrumente a blocului.

Mai jos este afișat fundalul video la înălțime completă cu texte. Puteți personaliza dimensiunea, culoarea, poziția etc. pentru texte în mod normal în fila Blocare din bara laterală. Acest lucru este util dacă doriți să puneți acest videoclip în coperta antetului sau în secțiunea de îndemn.

Puteți chiar înlocui textele cu orice bloc. Acest lucru este similar cu inserarea oricărui bloc Gutenberg.

Setari video

În fila Video , ar trebui să setați câteva secțiuni principale, ca mai jos, pentru a afișa comod fundalul video:

(1): puteți activa sau dezactiva videoclipurile de fundal pe dispozitivele mobile.
(2) și (3): introduceți ora de început și de sfârșit a videoclipului aici pentru a afișa partea dorită, mai ales când videoclipul original este prea lung.
(4): puteți repeta videoclipul când este terminat. Cred că ar trebui să activați această funcție pentru a menține redarea automată a videoclipului.

Setări imagine poster

Derulând în jos, veți vedea secțiunea Imagine poster . Fotografia pe care o alegeți aici va fi afișată cu 1 secundă înainte ca videoclipul să fie afișat. Opțiunile de mai jos vă permit să personalizați dimensiunea și stilul adecvat al imaginii.

Iată rezultatul după adăugarea imaginii afișului.

Instalați suprapunerea

(1) este culoarea suprapunerii pentru fundalul video și (2) este transparența suprapunerii. De exemplu, portocaliul este tonul principal al site-ului meu, așa că am ales această culoare pentru suprapunerea videoclipului pentru a se potrivi cu designul web.

În ceea ce privește paleta de culori , este o alternativă la videoclip. Cu alte cuvinte, treceți de la un fundal video la un fundal color. Pentru a elimina această culoare de fundal, alegeți butonul Ștergere.

Instalați efectele Parallax și Mouse Parallax

În fila Paralax , puteți activa sau dezactiva aceste efecte și puteți alege cu ușurință diferite tipuri de paralaxă. Acesta este un efect foarte frumos și interesant, așa că ar trebui să îl utilizați și să alegeți un stil potrivit pentru site-ul dvs.

Efectul de paralaxă vă poate fi familiar, în timp ce efectul de paralaxă al mouse-ului nu. Poate fi văzut cu ușurință când mutați mouse-ul peste videoclip, apoi scena din videoclip se va muta și ea.

Puteți utiliza acest efect accesând paralaxa mouse - ului > secțiunea Activare . Apoi puteți regla dimensiunea și viteza . Cu cât viteza este mai mică, cu atât videoclipul se mișcă mai repede. Cu cât dimensiunea este mai mică, cu atât videoclipul se mișcă mai mult, făcându-vă să simțiți că videoclipul este „sacadat” atunci când mutați mouse-ul pe el.

Iată un exemplu când aleg cea mai mică viteză și dimensiune.

Setări de spațiere

În fila Spațiere, personalizate distanța de la video la marginea paginii, introduceți parametrii de distanță în secțiunile Margin și barele. De exemplu, am introdus padding-ul de 10 și marja de 20 pentru toate cele 4 părți ale videoclipului.

Setari avansate

În CSS suplimentar din secțiunea Avansat , puteți adăuga cod personalizat pentru fundalul video. Și secțiunea de ancorare HTML vă permite să utilizați linkul de cuvinte cheie pentru titlul videoclipului. Dacă nu știți nimic despre shortcodes, puteți sări peste această parte.

Și acesta este rezultatul final. Videoclipul arata destul de frumos, nu-i asa?

Ultimele Cuvinte

Prin acest articol foarte detaliat, sper că puteți adăuga un fundal video site-ului dvs. WordPress pentru a atrage vizitatori. Despre pluginurile AWB, ar trebui să le utilizați cu o temă care sprijină puternic Gutenberg, cum ar fi eStar. Aici, am folosit tema eStar și pluginul AWB pentru a avea un fundal video atractiv pentru coperta antetului.

Această combinație perfectă poate face videoclipul să pară mai fascinant, nu? Dacă doriți să aflați mai multe sfaturi în WordPress, nu ezitați să comentați și să vă împărtășiți părerile sub acest articol.