Cum să adăugați un fundal video pe un site WordPress

Publicat: 2022-05-12

Căutați cel mai simplu mod de a adăuga un fundal video WordPress?

Fundalurile video bine realizate captează atenția și fac mărcile să arate cool încă de la început. Dar atunci când este făcut prost, un fundal video încetinește site-ul dvs., ocupă spațiu și derutează noii vizitatori. De aceea, am creat acest ghid, astfel încât să puteți evita toate capcanele și, în schimb, să aflați cum să adăugați un fundal video WordPress în mod corect.

Continuați să citiți pentru a afla despre cele mai bune practici și pași pentru a adăuga un fundal video pe site-ul dvs. WordPress, totul fără cunoștințe tehnice speciale.

Cele mai bune practici pentru adăugarea unui fundal video WordPress

  • Păstrați dimensiunile fișierelor scăzute, dar rezoluția ridicată: nimic nu împiedică performanța site-ului dvs. mai mult decât videoclipurile și imaginile mari; totuși, este de preferat să se mențină rezoluția în timpul compresiei.
  • Nu exagerați: prea multe videoclipuri vă încurcă interfața; folosiți-le doar pentru a face o idee sau pentru a prezenta ceva relevant.
  • Includeți un îndemn cu informații suplimentare: nu lăsați spectatorii să dorească mai mult, apoi uitați un link care duce la detalii suplimentare.
  • Evitați audio cu orice preț: este șocant când toți oamenii vor doar să vă vadă site-ul.
  • Dacă audio este necesar, nu îl aveți în redare automată: oferiți utilizatorilor o opțiune de a reda audio.
  • Luați în considerare subtitrări pentru videoclipurile cu sunet: nu toată lumea vă poate asculta audio, indiferent dacă este din cauza locației lor sau a deficiențelor de auz.
  • Găzduiește extern: probabil că gazda site-ului dvs. nu este concepută pentru a difuza videoclipuri, așa că alegeți site-uri precum Vimeo și YouTube pentru a menține performanța sau luați în considerare un site de găzduire video specializat.
  • Respectați cele mai bune formate/rezoluții: vorbim doar de MP4; minim 720p; codec h264.

Și amintiți-vă, nu toate site-urile au nevoie de videoclipuri; uneori, doar face interfața aglomerată, lentă și nefocalată. Un avocat, de exemplu, ar trebui să se țină de fotografii profesionale, mai degrabă decât de videoclipuri banale de strângere de mână, care sunt obligate să-și încetinească site-ul.

Cum să adăugați un fundal video WordPress

Există mai multe metode care activează funcțiile de fundal video în WordPress.

Ne vom concentra pe patru soluții diferite fără cod:

  1. Blocul de acoperire încorporat
  2. Un plugin de fundal/antet
  3. Pluginul dvs. favorit pentru crearea paginii
  4. Folosind o temă care acceptă fundaluri sau anteturi video

Urmați pașii pentru fiecare metodă de mai jos.

Opțiunea 1: Bloc de acoperire încorporat

Editorul nativ WordPress oferă ceea ce se numește un bloc Cover pentru a insera imagini de fundal în spatele altui conținut, cum ar fi text și butoane.

Ceea ce mulți utilizatori WordPress nu realizează este că blocul Cover acceptă și fundaluri video.

Pasul 1: Adăugați blocul Cover

Pentru a începe, accesați orice pagină doriți să adăugați fundal și adăugați blocul Coperta .

alege blocul de acoperire pentru a insera fundalul video WordPress

Pasul 2: Încărcați videoclipul

Pentru Coperta , alegeți butonul Încărcare sau Biblioteca media , oricare dintre acestea intenționați să îl utilizați pentru a adăuga videoclip.

încărcați blocul de copertă

Blocul Cover nu spune nimic despre suportarea videoclipurilor, așa că trebuie doar să vă asigurați că alegeți un videoclip (precum un MP4) din Media Library . Faceți clic pe butonul Selectați după ce ați bifat un videoclip.

adăugați încărcare video

Pasul 3: inserați conținutul din prim-plan suprapus

Ar trebui să vedeți acum o previzualizare a videoclipului de fundal. Sunteți binevenit să adăugați blocuri din prim-plan pe Copertă , cum ar fi text sau butoane.

conținut în prim plan

Pasul 4: Editați setările Copertei după cum este necesar

Setările copertei includ:

  • Suprapuneri de culoare: ideale pentru a facilita citirea textului
  • Opacitate: util și pentru dezvăluirea conținutului din prim-plan
  • Înălțimea minimă a acoperirii: uneori este necesară pentru a face ca fundalul video WordPress să aibă mai mult spațiu
opacitatea suprapunerii

Pasul 5: Vizualizați fundalul video WordPress în acțiune

După ce ați terminat, salvați pagina și accesați interfața pentru a vedea fundalul video WordPress!

Există destul de multe plugin-uri pentru adăugarea de fundaluri video WordPress, dintre care unele oferă fundaluri complete ale site-ului, în timp ce altele sunt concepute pentru a vă oferi un antet video.

Acestea sunt cele mai bune pluginuri pentru fundal video:

️ Preferatul nostru este pluginul Advanced WordPress Backgrounds; vă vom arăta cum să adăugați un fundal video WordPress cu acel plugin în doar câțiva pași.

Pasul 1: Instalați AWB și adăugați blocul său de conținut

Pentru a începe, instalați Advanced WordPress Backgrounds (AWB).

Accesați pagina în care doriți să adăugați videoclipul de fundal.

Folosind editorul WordPress, faceți clic pentru a adăuga un bloc de conținut. Căutați și selectați blocul Fundal (AWB) .

Bloc de plugin AWB

Pasul 2: Adăugați videoclipul dvs

Acest lucru vă oferă opțiuni pentru a adăuga culoare, imagini sau fundaluri video elementului.

Alegeți videoclip , apoi inserați o adresă URL a videoclipului de pe YouTube sau Vimeo. Ca alternativă, pluginul are o filă Self Hosted pentru încărcarea videoclipurilor locale.

adăugați link video la fundal video YouTube sau WordPress local

Pasul 3: extindeți înălțimea și lățimea fundalului video

În mod implicit, blocul de conținut nu se întinde pentru a acoperi o mare parte din zona paginii. Trebuie să faceți clic pe butonul Înălțime completă din editor. Există, de asemenea, un buton pentru a extinde fundalul video la lățime completă.

De asemenea, puteți trage sau insera conținut, cum ar fi text, butoane sau imagini, deasupra videoclipului de fundal.

inaltime maxima

Pasul 4: Modificați setările de fundal video WordPress

Ajustați orice setare doriți în fila Blocare : ora de începere, ora de încheiere, buclă, redare permanentă, opacitate video.

setări suplimentare pentru fundalul video WordPress

Este înțelept să adăugați o suprapunere de culoare de fundal cu opacitate scăzută; acest lucru face textul suprapus mai ușor de citit.

Faceți acest lucru accesând fila Blocare și schimbând culoarea în alb sau negru sub Culoare de fundal . Deplasați glisorul Opacitate în jos pentru a vă asigura că fundalul este încă afișat.

ajusta opacitatea

Pasul 5: Vedeți rezultatele

Rezultatul este un videoclip care se redă în fața altui conținut, în mod ideal unul care se difuzează în buclă, nu are sunet și păstrează în continuare cea mai mare parte a concentrației pe conținutul din prim-plan.

Opțiunea 3: pluginul dvs. favorit pentru generarea paginii

Majoritatea creatorilor de pagini, cum ar fi Elementor, WPBakery și Divi, oferă funcții de fundal pentru a adăuga o imagine sau un fundal video la aproape orice modul de conținut.

️ Simțiți-vă liber să alegeți generatorul de pagini care vă place, dar vă recomandăm Elementor datorită ușurinței sale de utilizare.

Asigurați-vă că instalați Elementor sau orice constructor pe care intenționați să îl utilizați înainte de a începe.

Pasul 1: Deschideți o pagină cu editorul Elementor

Accesați Pagini pe WordPress și selectați pagina desemnată ca pagină de pornire . Faceți clic pe butonul Editare cu Elementor .

editați cu elementor

Pasul 2: Adăugați un bloc de conținut Secțiune

Majoritatea modulelor de conținut din Elementor oferă setări de fundal, dar vă recomandăm să inserați o secțiune. În acest fel, puteți adăuga mai multe elemente în secțiune, cum ar fi text, imagini și butoane. Apoi, adăugați un fundal video la secțiune, astfel încât să fie în spatele tot ce este în prim-plan.

Am adăugat ceva text și un buton la o secțiune din tutorialul nostru. Continuați și selectați pictograma Editați secțiunea , apoi selectați fila Stil .

stil pentru secțiune

Pasul 3: Introduceți fundalul video

Aici, veți vedea o zonă derulantă Fundal . Alegeți opțiunea Video de lângă Tip de fundal . Apoi inserați o adresă URL de pe YouTube, Vimeo sau un fișier local în câmpul Link video .

adăugați fundal video WordPress

Pasul 4: Editați setările de fundal video

Poate fi necesar să extindeți fundalul video pentru a ocupa mai mult ecran. Pentru a face acest lucru, comutați la fila Aspect și ajustați Înălțimea și Înălțimea minimă .

înălțimea minimă pentru fundalul video WordPress

Înapoi în fila Stil , luați în considerare modificarea setărilor pentru videoclipul de fundal:

  • Timpul de începere
  • Sfârșitul timpului
  • Joacă o dată
  • Joacă pe mobil
  • Modul de confidențialitate
setări

Mai mult, gândiți-vă să adăugați o suprapunere de fundal - de obicei o culoare neutră, cum ar fi negru sau alb, și unele modificări de opacitate - pentru a face textul, butoanele și imaginile din prim-plan mai vizibile.

schimbați suprapunerea de culoare pentru fundalul video WordPress

Pasul 5: Vizualizați fundalul video WordPress pe front-end

Când ați terminat, videoclipul este redat în spatele întregului conținut din secțiune!

Opțiunea 4: Utilizați o temă WordPress care acceptă fundaluri/anteturi video

Diverse teme WordPress oferă antet, glisor și setări media pentru întreaga pagină; acestea vă permit să încărcați o imagine, un GIF sau un videoclip pentru a ocupa întregul ecran, cel mai adesea folosit ca antet pe pagina dvs. de pornire.

Pentru a găsi teme cu funcții de fundal video, căutați „fondul video” pe piețele populare:

️ Asigurați-vă că scanați listele de funcții sau chiar întrebați dezvoltatorul înainte de a descărca/a cumpăra, pentru a vă asigura că o temă are funcționalitate de fundal video.

De exemplu, tema Colibri WP oferă fundaluri video.

Pasul 1: Instalați și activați tema

Pentru a activa un fundal video, instalați tema Colibri WP, apoi accesați Aspect > Setări Colibri > Începeți . Aici, puteți activa funcția Colibri Page Builder.

adăugarea funcției de generare a paginii

Pasul 2: Adăugați un site demonstrativ

Faceți clic pe fila Site-uri demo și importați șablonul demo pe care îl alegeți.

site-uri demo

Pasul 3: Personalizați imaginea Hero

Navigați la Aspect > Personalizare și selectați pictograma roată Setări de lângă modulul Hero .

setări pentru imaginea eroului

Pasul 4: Adăugați un fundal video

Selectați fila Stil și comutați Fundalul la Video .

faceți clic pe stil și videoclip pentru a adăuga fundalul video WordPress

În cele din urmă, fie alegeți YouTube pentru a lipi într-o adresă URL a videoclipului extern , fie găzduit pe cont propriu pentru a încărca un videoclip local.

Ca rezultat, veți vedea fundalul video în mișcare în previzualizarea Personalizatorului.

Începeți cu fundalul video perfect

Nu este întotdeauna recomandat să adăugați un fundal video WordPress, dar ar trebui să îl luați în considerare dacă aveți conținut video de înaltă calitate, care reflectă marca dvs. și nu va împiedica performanța site-ului dvs.

În această postare, ați învățat patru metode diferite, dintre care cel puțin una ar trebui să funcționeze pentru situația dvs.

️ Pentru alte modalități de a vă îmbunătăți site-ul, consultați postarea noastră cu 10 elemente ale unui design de succes al paginii de pornire.

Pentru orice întrebări despre fundalurile video WordPress, împărtășiți-vă gândurile în comentariile de mai jos.

Ghid gratuit

5 sfaturi esențiale pentru a accelera
Site-ul dvs. WordPress

Reduceți timpul de încărcare chiar și cu 50-80%
doar urmând sfaturi simple.