Hur man använder videobakgrund på din webbplats – på rätt sätt!

Jag undrar vad du’tittar på?

hur du använder videobakgrund på din webbplatsKälla: 11coffee.co.uk


Jag slår vad om att din uppmärksamhet automatiskt stämts in på videobakgrunden, eller hur? den’är nästan omöjligt att ignorera det när det rör sig.

där’Det är inget fel med dig – det’är bara mänsklig natur och hur vi medvetet beslutar var vi ska uppmärksamma oss på.

Vi blir lätt distraherade av allt som rör sig – precis som den hunden som ignorerar allt i sin värld för att jaga den irriterande lilla ekorren!

“Okej, du fick mig att titta på din dumma video, vad har det att göra med min webbdesign?”

Vilken fantastisk fråga och jag’Jag är glad att du frågade.

En videobakgrund på din webbplats, om den används korrekt, kan hjälpa dig att fånga dina besökare på webbplatsen’ uppmärksamhet också!

Videobakgrund är en av de mest populära trenden för webbdesign som verkar vara här för att stanna.

Marknadsförare älskar videobakgrunder eftersom de får webbplatser att se moderna ut och skapa en känsla av konstnärskap som statiska bakgrundsbilder helt enkelt kan’t matchar upp till.

Många experter på webbkonvertering och vanliga människor ser att deras besökare stannar kvar på sina webbplatser och är mer benägna att registrera sig eller välja in sina produkter / tjänster..

138% förbättring i konvertering när du byter till videobakgrund på en hemsida.

Källa: FoodBloggerPro

jag’Jag måste erkänna – en förbättring av 138% låter extraordinärt och utmanande att uppnå varannan dag.

Tänk på att en sådan hög siffra kommer från tester som drivs av professionella konverterings- / affärsoptimeringsföretag som gör detta för att leva. Så det’Det är rimligt att säga att inte alla som driver en DIY-webbplats kommer att se liknande förbättringar, bara genom att lägga till en videobakgrund till deras webbplats.

Även en förbättring på 10 – 20% i engagemang och konvertering är emellertid inte orimligt för även en första gången webbplatsägare utan professionell hjälp – om du använder videobakgrund på din hemsida på rätt sätt!

Föreställ dig om du samlade prenumeranter på nyhetsbrev så att du kan följa upp med specialerbjudanden eller dela intressanta diskussioner för att bygga ditt varumärke.

Överväg vad en 20% ökning av prenumeranter kan göra för ditt företag? Detta kan innebära mer försäljning och / eller högre varumärkesmedvetenhet!

Allt detta kan göras om du kan fånga dina besökare’ uppmärksamhet mer effektivt – genom att använda en videobakgrund.

Detta är inte bara en hypotetisk idé. Många fallstudier i verkliga livet har visat hur många företag som har lyckats genom att använda videobakgrunder för att förbättra försäljningen.

Liksom alla saker i livet finns det ett rätt sätt och ett fel sätt att göra saker.

Även med något så banbrytande som en videobakgrund kan du fortfarande skruva upp det och i slutändan skada din övergripande webbplatsdesign och upplevelse – om du inte’t följa några grundläggande regler.

Så att förstå hur du undviker grundläggande misstag när du använder en videobakgrund på din hemsida kan ge dig en mycket högre chans att lyckas med att förbättra din webbdesign.

I den här guiden visar vi dig alla steg och bästa praxis du bör vidta för att använda videobakgrund effektivt:

  1. Hur man använder videobakgrund på rätt sätt?
  2. Var hittar du videor för din webbplats?
  3. Så lägger du till en videobakgrund till din webbplats?

Låta’s komma igång….

Hur man använder en videobakgrund – rätt sätt

“Jag behöver bara fästa en slumpmässig video på min webbplatsbakgrund och jag’Jag får bättre konverteringsresultat!”

Om detta är vad du tänker, så lycka till eftersom du’Jag behöver det.

Vi på WBE don’Jag tror inte på tur.

Vi tror att alla med lite till noll kompetens för att bygga webbplatser också kan lyckas utforma en professionell webbplats – om du bara följer några enkla regler (precis som dessa andra designguider vi’har skapats speciellt för dem som inte var det’t född med en god känsla av design).

Vi är tro mot våra övertygelser’Vi har skapat en färdplan som du enkelt kan följa för att få fantastiska resultat.

Del 1: När ska du använda videobakgrund på din webbplats?

Videobakgrund är mest effektiv när du använder den för att (1) skapa en vibe, (2) för att ställa in en ton eller (3) för att framkalla en känslomässig reaktion.

Låta’s kolla in några exempel:

Exempel 1: Företag, tjänster, organisationer

Videobakgrunder fungerar för de flesta professionella webbplatser, oavsett om du driver en klinik, konsultföretag eller designbyrå.

Du kan använda en videobakgrund för att visa klipp från personals liv eller till och med processen att hjälpa en kund. Detta ger dina potentiella kunder en chans att lära känna dig innan du ens pratar med dig. Det målar också en mycket livlig visuell representation av vad de kan förvänta sig att uppleva från ditt företag.

hur du använder videobakgrund på din webbplatsKlicka för att spela – Källa: Premisehealth.com

Premise Health är en privat vårdgivare. Lägg märke till hur de blandar videoklipp av människor som springer och gör yoga, med klipp av människor som pratar med läkarna.

Detta hjälper dig att skapa en känsla av hälsa och välbefinnande – i princip hur Premise Health kan förbättra ditt liv.

hur du använder videobakgrund på din webbplatsKlicka för att spela – Källa: Grainandmortar.com

Spannmål & Mortel är en designbyrå. Detta exempel är intressant eftersom det visar att du inte gör det’t måste alltid ha en fullsidig videobakgrund för att få en liknande fördel. De visar bara en video i rubrikavsnittet på sidan som tar högst hälften av skärmens fastigheter.

Videon visar personalens dagliga samarbete (strategisessioner) och hur de skapar designlösningar för sina kunder.

Exempel 2: Fysiska eller digitala produkter

Videobakgrunder fungerar också mycket bra om du säljer produkter.

Skapa en video som visar personer som använder din produkt så att de visuellt kan uppleva det att använda den.

Nyckeln här är att inspirera den typ av liv som dina kunder kan ha om de köpte och använde din produkt. Genom att visa dem en viss livsstil får du dem att vilja det du visar dem. Klassisk marknadsföring 101 grejer.

I grund och botten du’är redan övertygande för dem innan de läser ett signalord på din webbplats!

hur du använder videobakgrund på din webbplatsKlicka för att spela – Källa: Fitradio.com

Fit Radio är en musikapp för träning. Videon är mycket effektiv för att visa sina potentiella kunder hur roligare det är att träna med appen.

Du kan använda den här idén för att visa hur livet kan vara med när du använder fysiska produkter eller digitala / pedagogiska produkter (t.ex. lära sig ett andraspråk och resa).

Exempel 3: Upplevelser (evenemang, turer, gästfrihet)

Videobakgrund är särskilt effektiv för att skapa en känsla av spänning eller vibe, så varför inte använda den för att ta din publik på ett äventyr?

Detta fungerar riktigt bra om du är en evenemangsplanerare, använd en B&B eller hotell, reseguide eller något som handlar om destinationsupplevelser.

hur du använder videobakgrund på din webbplatsKlicka för att spela – Källa: Visithumboldt.com

Webbplatsexemplet visar en av mina favoritanvändningar av videobakgrunder när de främjar turism i Kalifornien’s Redwood Coast.

Videon tar dig med på en resa i regionen och skapar en berättelse eller upplevelse som liknar Alice i Underlandet. Detta är så effektivt som får mig att vilja planera en resa dit!

Exempel 4: Fysiska platser (restauranger, hotell, gallerier, butiker)

Restauranger, kaféer, hotell, butiker eller fysiska inställningar kan använda videobakgrunder för att visa sin plats och ge sina kunder en visuell guidad tur.

Du får kontrollera deras visuella upplevelser på skärmen och är en mycket enkel men effektiv metod för att skapa en önskan om att vilja besöka din fysiska plats!

hur du använder videobakgrund på din webbplatsKlicka för att spela – Källa: Vandalnewyork.com

Vandal är en restaurang i New York. De använder en videobakgrund för att visa upp sin trendiga inredning för att locka dig att besöka.

hur du använder videobakgrund på din webbplatsKlicka för att spela – Källa: Wix.com

Det här är en videobakgrundsmall från Wix och inte en “leva” webbplats, videon är mycket bra (klicka på den för att se själv).

Den visar kocken som pläterar mat färsk ur pannan. Din mun börjar vattna bara genom att titta på den – åtminstone gjorde det för mig när jag har tillflyktsort’Jag hade min lunch ännu (vid den tiden jag’Jag skriver det ändå!) Den här videon är mycket effektiv!

Vi skrapar bara i ytan vad företag eller webbplatser kan använda videobakgrunder:

  • Spa – Du kan skapa en känsla av lyx, lugn och avkoppling genom att visa klipp av populära behandlingar och glada gäster som använder anläggningarna.
  • Hotell / B&B / Semesteruthyrning – Du kan visa en video av boendet, tjänster du tillhandahåller och aktiviteter i närheten för att skapa spänning och en känsla av äventyr.
  • Företag / Produkter – du kan skapa ett starkare märke genom att använda en video som uttrycker essensen i din produkt. Om du till exempel säljer atletiska redskap kan du visa klipp av personer som tränar och ha det bra – inspirera dina webbplatsbesökare att vilja ha liknande erfarenheter och resultat.

Listan fortsätter och du kan nästan dra nytta av en videobakgrund oavsett vad din webbplats handlar om.

Titta nu på din egen webbplats och föreställ dig hur en videobakgrund kan hjälpa dig att förändra din design och ta ditt varumärke och användarengagemang till nästa nivå.

Om du inte gör det’Jag har inte skapat en webbplats ännu, vi’Jag visar dig några alternativ nedan där du kan hitta en webbplatsbyggare som erbjuder videobakgrundsfunktioner.

Vi bedriver vår egen forskning för att bestämma vilken webbplatsbyggare som är bäst för olika ändamål. Ta vår frågesport för att få en rekommendation om det’s anpassade efter dina behov.

Del 2: När du INTE ska använda videobakgrund på din webbplats?

Även om en videobakgrund är mycket effektiv när det gäller att fånga uppmärksamhet, kan det hålla tillbaka om du vill att din publik ska fokusera på mycket specifikt innehåll på din webbplats.

Varför? Eftersom en video potentiellt kan fånga för mycket uppmärksamhet och så om den användes för aggressivt, kan den överträffa andra innehåll som du vill att dina besökare ska fokusera på.

Det är därför en videobakgrund generellt sett inte är bra om du har en komplex tjänst eller produkt som behöver en detaljerad förklaring för att din publik ska förstå.

I dessa situationer kan videobakgrunden distrahera din besökare från att fokusera på specifika, viktiga punkter.

Så granska din webbplats och ditt företag och se om du passar den här profilen. Designverktyg som videobakgrunder är avsedda att förbättra upplevelsen. Om det inte gör det’t gör din webbplats bättre, don’t känner mig pressad att använda den.

Videobakgrund är ett verktyg för att förbättra din webbplatsupplevelse. Om det här verktyget inte gör det’passar inte din webbplats eller företagsprofil – om du är osäker, lämna den ut!

Del 3: 5 gyllene regler att följa när du använder en videobakgrund

Även om olika videoinnehåll fungerar bra för olika webbplatser, finns det några “dummisäkra regler” som kan användas för att hjälpa dig skapa den bästa upplevelsen för din webbplats.

Detta är inte listan som slutar alla listor, men det är en bra utgångspunkt att leda dig ner på rätt väg så att du kan undvika några mycket vanliga men dödliga misstag.

Regel 1: Använd bara en video med ett syfte

Video med ett syfte hjälper till att stärka ditt varumärke eller meddelandet du försöker kommunicera.

Om du till exempel är revisor bör du inte göra det’t visa en video som belyser ett vackert landskap från de schweiziska Alperna! Även om det kan se vackert, gör det förmodligen inte’Det har mycket att göra med din verksamhet eller representera vem du är. Med andra ord, videon kan vara irrelevant och misslyckas med att lyfta fram ditt företag.

Dessutom kan det förvirra dina potentiella kunder: “Är detta en utomhusutrustning butik? Eller säljer den här webbplatsen ett semesterpaket till Schweiz?“

Se till att videon du väljer för din bakgrund kompletterar vad din hemsida försöker uppnå.

Regel 2: Don’låt din video tävla med ditt innehåll

Du kommer mycket troligt att ha text eller något slags innehåll ovanpå din videobakgrund. Så se till att videon inte skadar läsbarheten för ditt innehåll ovanför videon.

Om det gör det kommer din besökare att ha det svårt att läsa informationen.

Hur gör man det?

Alternativ 1: Välj kontrastinnehållsfärg

Se till att färgen på ditt innehåll (som text, knapp) står i kontrast till din video.

Om du till exempel har en mörkare video, använd vitt i din logotyp, knapp och vilken text som helst. Detta kommer att göra det pop.

Om du använder en ljusare video kan du använda mer färgglada eller mörkare färger i ditt innehåll.

Den här tekniken kan hjälpa dig att skapa den kontrast du behöver så att ditt innehåll inte smälter in i videobakgrunden.

hur man använder videobakgrund på webbplatsenKälla: Fitradio.com

Fit Radio gör ett bra jobb med att markera innehållet med vitt och gult. De poppar verkligen från den mörkare videobakgrunden.

Alternativ 2: Överlägg din videobakgrund med mörk eller ljus skärm

Om du använder en mycket livlig videobakgrund med många detaljer kan det göra ditt innehåll svårt att läsa även om du använder rätt kontrastfärg i ditt innehåll.

Detta är när du vill minska intensiteten på din videobakgrund med en mörk eller ljus överlägg.

Detta kommer att göra din videobakgrund mörkare eller ljusare än originalet och göra alla detaljer som gör ditt innehåll svåra att läsa mer.

hur man använder videobakgrund på webbplatsenhur man använder videobakgrund på webbplatsenDark Overlay Exempel – FortyLight Overlay Exempel – Cobble Hill

Alternativ 3: Överlägg din videobakgrund med färg

Du kan också överlägga din video med färg. Det ger dig en liknande effekt som alternativ 2 ovan, med den ytterligare fördelen att skapa ett starkare varumärke när du använder din märkesfärg som ditt överlägg.

I de flesta fall fungerar vitinnehållsfärg bäst med nästan alla färgöverlägg.

hur man använder videobakgrund på webbplatsenKälla: Focus Labhur man använder videobakgrund på webbplatsenKälla: Harbrhur man använder videobakgrund på webbplatsenKälla: Sudio Wolf

Regel 3: Använd korta videoklipp som slingrar

Laddningshastigheten på din webbplats är ett stort problem när du använder en videobakgrund, eftersom videofiler kan vara stora och det kan ta längre tid att ladda.

Forskning har visat att dålig webbplatshastighet kan göra att dina besökare lämnar din webbplats för tidigt och eventuellt sänker din sökmotors ranking.

Nyckeln till att förbättra din webbplatshastighet när du använder en videobakgrund är att hålla videon kort och videofilen liten.

Tommelfingerregel: Försök begränsa videon till 5-10 sekunder lång och videofilstorleken till 6 MB eller mindre. Du kan slinga din video kontinuerligt för att ge intrycket att videon är längre än den verkligen är.

Du’gör inte någon större film här, så om din videofilstorlek är för stor, se till att du förkortar den och / eller minskar videokvaliteten.

Om du behöver hjälp med att redigera dina videor till exakt längd och storlek men inte’Jag vet inte hur du gör detta själv, Fiverr.com är ett bra alternativ där du kan hitta professionell hjälp med mindre redigering till mycket rimliga kostnader.

Regel 4: Använd video utan ljud

Ljud som spelas upp automatiskt när en webbsida laddas rankas som en av de mest irriterande sakerna när det gäller webbplatsupplevelser – särskilt om det börjar sprängas när du är på kontoret!

Videobakgrund spelas automatiskt när du laddar in webbplatsen. Så om din video har ljud spelas den också automatiskt.

Så om ditt videoklipp kommer med ljud, antingen ta bort det (använd Fiverr.com) eller stäng av ljudet.

Regel 5: Visa aldrig videokontroller

jag’Vi har sett gång på gång människor vill lägga till eller visa videokontroller i en videohuvud eller bakgrund.

En viktig sak för dig att komma ihåg är att det bara är en videobakgrund. Don’t behandla det på samma sätt som en videospelare på en sida.

Om du lägger till videokontroller kommer det att strida mot syftet med en videobakgrund och ändra den från att bara vara en bakgrund till huvudvideoobjektet, utom utan ljud och spelas kontinuerligt i en slinga.

Om du vill infoga en instruktions- eller informationsvideo till din webbsida, gör det inte’t använder det som din bakgrund. Använd bara en normal sidlayout och lägg till en videospelare för att spela den videon.

När du försöker en ny designtrend (till exempel en videobakgrund) är nyckeln att förbättra användarnas engagemang – inte att minska den. De fem reglerna ovan hjälper dig att uppnå det.

Nu när du vet hur du använder videobakgrund på rätt sätt, låt’se hur du kan lägga till videobakgrund på din webbplats.

Var hittar du videor för din webbplats

Din första utmaning är att hitta den perfekta videon för din webbplats.

Tänk på regel 1 ovanifrån och se till att videon du väljer hjälper till att kommunicera dina värden och stärker ditt varumärke.

Några av de bästa videobakgrunderna vi’vi har sett är skräddarsydda. Med teknik nuförtiden kan du filma detta själv med en digitalkamera eller till och med din iPhone. Kom ihåg att det inte gör det’Det måste vara perfekt, det gäller särskilt om du använder en mörk, ljus eller färgöverlägg på din video.

Om du behöver lite hjälp med videoredigering kan du hitta massor av frilansande proffs:

  • Upparbetning (tidigare oDesk & Elance)
  • Fiverr

Om du inte gör det’t känner dig bekväm att skapa dina egna videor, du kan använda gratis eller betalda lagervideo.

Dessa lagervideor är bra för att skapa specifika stämningar. Skillnaderna mellan gratis och betald aktievideo är kvaliteten och urvalet. Så vi föreslår att du kolla in både betalda och gratis källor.

  1. VideoHive: Vi’Vi har använt detta vid flera tillfällen när vi letade efter videobakgrunder och vi hittade också några bra klipp när vi skapade företagsfilmer. Videorna är ganska prisvärda med de flesta av dem från $ 5 till $ 35. De har ett brett urval så du’Jag har en anständig chans att hitta vad du’letar efter där.
  2. Gratis videokällor: Digital Video Magazine har ett bra inlägg om de 25 bästa gratisresurserna. Det här är också ett bra ställe att börja söka.

Så lägger du till en videobakgrund till din webbplats

Allt hittills har varit relativt enkelt – vilka regler att följa för att undvika vanliga misstag och var du hittar din video.

Nu kommer den svårare delen – hur ställer du in videon som bakgrund på din sida?

Detta kan vara så enkelt som att klicka på en knapp eller det kan vara lika svårt som att skriva om koderna till din webbplats.

Hur utmanande det är att lägga till en videobakgrund på din webbplats beror på vilken webbplatsbyggare du använder!

Om du använder WordPress

Om du använder WordPress har du två alternativ för att lägga till en videobakgrund:

  1. Använd ett tema som stöder videobakgrund; eller
  2. Använd en video-bakgrunds plugin.

Om du bestämmer dig för att använda ett videobakgrundstillägg, du’Jag måste testa det först för att se hur bra det fungerar. Se också till att det är helt kompatibelt med ditt nuvarande WordPress-tema så att det vann’t orsakar eventuella konflikter “ha sönder” din sida.

Kontrollera alternativt om ditt tema har en videobakgrundsfunktion som redan är en del av designen. Om det gör det, så är det’är lätt att aktivera det.

Om ditt tema inte gör det’t har en inbyggd videobakgrundsfunktion, du kanske behöver hitta ett tema som har funktionen inbyggd. Nackdelen är att du’Jag måste ändra din webbplatsdesign med ett helt nytt tema. Så väga dina alternativ och se vilken som passar ditt behov.

Om du använder en dra & Släpp webbplatsbyggare

Vad händer om du inte använder WordPress utan en dra & släpp webbplatsbyggare som Wix, Squarespace, Weebly eller en webbutikbyggare som Shopify?

Om du använder Weebly är det inte så enkelt att lägga till en videobakgrund utan att veta hur man kodar.

Trots att Weebly är känt för att vara en av de enklaste webbplatsbyggarna att använda, och ger dig möjlighet att lägga till en videobakgrund med anpassad kodning, gör de inte’Jag har en inbyggd videobakgrund inbyggd.

En lösning är att använda en animerad GIF-bild som din bakgrundsbild. Du får inte samma bildkvalitet som en riktig video, men du får en rörelsebakgrund.

Så, vilken webbplatsbyggare låter dig enkelt lägga till videobakgrunder?

Wix, Squarespace och Shopify kan!

# 1 Wix Video Bakgrund

Använder sig av Wix är händerna ner det enklaste sättet att lägga till och hantera en videobakgrund med nollkodningsförmåga. Du kan läsa vår detaljerade recension om dem här.

Att lägga till en videobakgrund är lika enkelt som att lägga till en bild med Wix. Här är en video som visar hur det här fungerar:

(Klicka på bilden för att spela upp video)

Wix-videobakgrundsteman:

Här är några Wix-teman som du kan prova gratis för att visa en videobakgrund på din webbplats. Det tar bara några klick för att ladda upp din video – ingen teknisk kodning krävs.

Vidare ger Wix dig vissa videobakgrundsredigeringsfunktioner, till exempel möjligheten att konfigurera eventuella överläggsmönster eller färger för din videobakgrund, eller justera videoslingningsfunktionen.

De gör det väldigt enkelt för dig att få din videobakgrund att fungera på några minuter.

video bakgrund webbplats temamall wixvideo bakgrund webbplats temamall wixvideo bakgrund webbplats temamall wixvideo bakgrund webbplats temamall wixvideo bakgrund webbplats temamall wixvideo bakgrund webbplats temamall wix

(Klicka på någon av bilderna ovan för att se de faktiska teman med videobakgrund)

# 2 Squarespace Video Bakgrund

För det första, Squarespace är en av de bästa designorienterade webbplatsbyggarna på marknaden idag.

Så det’Det är inte en överraskning att de gör att en videobakgrund till din webbplats är enkel och elegant. Du kan läsa vår detaljerade recension om dem här.

Squarespace Video Bakgrund

Du kan ladda upp din video till YouTube eller Vimeo, sedan sätta in webbadressen för videon i Squarespace-redigeraren, och det’s om det.

Observera att inte alla Squarespace-mallar stöder videobakgrunder. Du’Jag hittar en lista med mallar som stöder den här funktionen här (tillsammans med handledning om hur videobakgrunden kommer igång).

Squarespace låter dig också redigera utseendet och känslan på videobakgrunden med redigeringsverktyg som stiliserade filter, överläggsfärger och uppspelningshastigheter. Detta ger dig möjligheten att lägga till lite anpassning till din design.

# 3 Shopify Video Bakgrund

Shopify låter dig lägga till videobakgrund på liknande sätt som en WordPress-webbplats. Så du kan antingen göra detta genom att använda ett tema som stöder videobakgrund eller så kan du använda en video-bakgrunds plugin som finns i Shopify’s app store.

Jämfört med Wix och Squarespace kommer det att ta lite mer arbete att lägga till en videobakgrund i Shopify. Men detta är ett bättre alternativ för dig om du driver ett e-handelsföretag (Shopify är en av de bästa e-handelsbyggarna på marknaden idag. Du kan se vår recension om dem här).

Shopify-videobakgrundKlicka på bilden för att se Shopify-teman

För närvarande är videobakgrundstema något begränsade i Shopify’s Temaaffär. Du får mer urval om du söker efter Shopify-videobakgrundsteman hos tredjepartsleverantörer som Themeforest.

Kom ihåg alla tillgängliga teman i Shopify’s Theme Store visas, godkänns och stöds av Shopify.

Som jämförelse genomgår Shopify-teman från tredjepartsleverantörer inte Shopify’s direkt screening process. Även om jag inte säger att tredje partens teman inte är lika bra, vill jag bara att du ska bli informerad om du funderar på om du ska köpa från en tredjepartsleverantör.

Slutsats – Takeaway

Att använda en videobakgrund kan vara en stor designtillgång om du vet hur du använder den på rätt sätt. Genom att följa våra 5 gyllene regler ovan kommer du att gå före spelet!

Kom ihåg att olika människor reagerar olika på olika videor. Så överväg att testa några videor för att se vilken som fungerar bäst för din webbplats och besökare!

Hittade den här guiden användbar?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map