Het visuele aspect van een website bepaalt voor een groot deel de eerste indruk die een bezoeker krijgt. Wanneer je een statische pagina wilt transformeren naar een dynamische ervaring, is het gebruik van bewegend beeld een van de meest effectieve methoden. In dit artikel duiken we diep in de wereld van de divi builder en leggen we je precies uit hoe je een indrukwekkende video-achtergrond aan een specifieke rij kunt toevoegen. Of je nu een sfeerimpressie wilt geven van je kantoor of een product in actie wilt laten zien, de mogelijkheden zijn eindeloos als je weet aan welke knoppen je moet draaien.

Waarom kiezen voor een video-achtergrond in een rij?

Een video-achtergrond in een rij geeft je website direct een moderne en professionele uitstraling. In tegenstelling tot een volledige sectie-achtergrond, stelt een rij je in staat om de video binnen een specifiek kader te houden, waardoor je meer controle hebt over de lay-out en de witruimte op je pagina. Dit is vooral handig wanneer je tekst of knoppen over de video wilt plaatsen zonder dat de hele pagina te druk wordt. Het gebruik van video kan de gebruikerservaring aanzienlijk verbeteren, mits het op de juiste manier wordt toegepast.

Veel website-eigenaren vragen zich af of een video de laadtijd van hun pagina niet negatief beïnvloedt. Hoewel video-bestanden zwaarder zijn dan afbeeldingen, biedt de divi builder geavanceerde instellingen om dit proces te optimaliseren. Door de video alleen in een specifieke rij te laden, beperk je de impact op de algehele prestaties van je wordpress website. Het is een balans tussen visuele pracht en technische efficiëntie waar we in dit artikel uitgebreid bij stilstaan.

De voorbereiding van je videobestand

Voordat je begint met het uploaden van beelden naar je wordpress mediabibliotheek, is het essentieel dat het bestand aan bepaalde eisen voldoet. Een video die rechtstreeks uit een camera komt, is vaak veel te groot voor het web. Dit kan leiden tot vertragingen of zelfs tot een divi visual builder wit scherm als de server de verwerking niet aankan. Zorg er daarom voor dat je video is gecomprimeerd.

Gebruik bij voorkeur het mp4-formaat, omdat dit door vrijwel alle moderne browsers wordt ondersteund. De resolutie hoeft meestal niet hoger te zijn dan 1920 bij 1080 pixels (full hd), en vaak is 1280 bij 720 pixels al ruim voldoende voor een achtergrondrol. Vergeet ook niet om het geluid uit de video te verwijderen of te dempen in een videobewerkingsprogramma; achtergrondvideo’s op websites spelen namelijk standaard zonder geluid af om de bezoeker niet te laten schrikken.

Stap voor stap een video toevoegen aan een divi rij

Nu je videobestand klaar is voor gebruik, kunnen we aan de slag in de divi builder. Volg deze stappen nauwkeurig om het gewenste resultaat te bereiken:

• Activeer de visual builder op de pagina waar je de video wilt toevoegen.
• Zoek de rij (de groene omlijning) waarin je de video wilt plaatsen en klik op het tandwiel-icoon om de rij-instellingen te openen.
• Ga in het instellingenmenu naar het tabblad inhoud en scrol naar beneden naar de sectie achtergrond.
• Je ziet hier verschillende iconen voor kleur, verloop, afbeelding en video. Klik op het video-icoon (het vierde icoontje van links).
• Klik op het plus-teken bij achtergrond video mp4 om een bestand uit je mediabibliotheek te selecteren of een nieuw bestand te uploaden.
• Zodra de video is geüpload, verschijnt deze direct in de preview van je divi ontwerp.

Het is belangrijk om te onthouden dat een video-achtergrond altijd onder de modules in je rij komt te staan. Dit betekent dat je tekstmodules, knoppen of afbeeldingen bovenop de video kunt plaatsen. Om de leesbaarheid van je tekst te garanderen, kun je overwegen om een achtergrondoverlay toe te voegen. Dit doe je door een semi-transparante kleur over de video heen te leggen in de instellingen van de rij.

Optimalisatie voor mobiele apparaten

Een veelgemaakte fout is het vergeten van de mobiele gebruikers. Veel mobiele browsers blokkeren het automatisch afspelen van video’s om data te besparen voor de gebruiker. Daarom is het cruciaal om een fallback afbeelding in te stellen. Dit is een statische afbeelding die wordt getoond op apparaten die de video niet kunnen of willen laden.

In de achtergrondinstellingen van de rij vind je een optie genaamd achtergrond video afbeelding. Upload hier een screenshot van het eerste frame van je video of een vergelijkbare afbeelding van hoge kwaliteit. Voor het beste resultaat kun je deze afbeelding eerst omzetten naar een modern formaat, zoals je kunt lezen in onze gids over divi afbeeldingen optimaliseren voor webp formaat. Hierdoor blijft je website razendsnel, ook op een mobiele verbinding.

Geavanceerde instellingen en effecten

De divi builder biedt nog meer opties om je video-achtergrond te verfijnen. Onder de video-instellingen kun je bijvoorbeeld de video-pauze optie inschakelen wanneer de video niet in beeld is. Dit bespaart rekenkracht van de computer van je bezoeker. Ook kun je spelen met de aspect ratio om te zorgen dat de video de rij altijd volledig vult, ongeacht de schermgrootte.

Wil je de presentatie nog dynamischer maken? Je kunt de rij met de video-achtergrond combineren met andere visuele elementen. Denk bijvoorbeeld aan het toevoegen van subtiele bewegingen aan de modules die bovenop de video staan. Voor meer inspiratie hierover kun je kijken naar onze handleiding over divi scroll effecten instellen voor animaties. Hiermee creëer je een diepte-effect dat je bezoekers zeker zal bijblijven.

Tips voor een professionele uitstraling

Bij het toevoegen van een video aan een rij is minder vaak meer. Een te drukke video kan de aandacht afleiden van de belangrijkste boodschap op je pagina. Kies voor beelden met rustige bewegingen en vermijd flitsende overgangen. Als je tekst over de video plaatst, zorg dan voor voldoende contrast. Een donkere overlay over een lichte video werkt vaak erg goed om witte tekst eruit te laten springen.

Let ook op de compositie van je video. Omdat een rij in divi van vorm verandert afhankelijk van de schermgrootte (responsiviteit), kan het zijn dat de zijkanten of de boven- en onderkant van je video worden afgesneden. Zorg er dus voor dat het belangrijkste onderwerp van je video zich in het midden bevindt. Zo weet je zeker dat de essentie van je beeldmateriaal altijd zichtbaar blijft voor elke bezoeker.

Conclusie

Het toevoegen van een video-achtergrond aan een rij in de divi builder is een krachtige manier om je website tot leven te wekken. Door de juiste technische voorbereidingen te treffen, zoals compressie en het instellen van een fallback afbeelding, zorg je ervoor dat deze visuele upgrade niet ten koste gaat van de snelheid van je site. Met de stappen uit deze gids kun je nu zelf aan de slag om je wordpress pagina’s te voorzien van die extra professionele touch.

Mocht je tijdens het bouwen tegen problemen aanlopen of hulp nodig hebben bij het optimaliseren van je vtigercrm koppelingen of andere technische aspecten van je website, dan staan de experts van prospects4u altijd voor je klaar. Een goed ontworpen website is immers de basis van je online succes.