Video toevoegen aan je website met Divi

Divi

Heb je een video van je bedrijf? Geweldig! Die hoort zeker ook op je website te staan. Een video geeft snel een indruk van de sfeer die jij klanten biedt. In deze handleiding leer je hoe je je video kunt toevoegen aan je Wordpress website met Divi.

De module toevoegen

Als er nog geen video module op je website staat moet je die eerst toevoegen. Heb je wel al een video module, dan kun je meteen door naar de volgende stap.

Klik via het grijze plus teken op Add new Module.

Video op je website afb1

Scroll naar de video module of gebruik de zoekbalk voor het toevoegen. Klik op Video en de module verschijnt op je pagina.

De video module opties

Open je video module door op het grijze tandwiel (module settings) te klikken.

Bovenin zie je 3 tabbladen. Content, Design en Advanced.

Start bij het tabblad content om je video toe te voegen.

Video op je website afb3

Video op je website afb4

Video url toevoegen

Klik op het tandwiel (in het videokader) om naar de mediabibliotheek te gaan.

video toevoegen divi module afb5

Nu kun je je video uploaden. Er zijn twee opties:

Video invoegen als MP4 File: Je upload je video bestand rechtstreeks naar je website. Dit vraagt wel veel ruimte op je website en kan je website traag maken. Het voordeel is dat je niet afhankelijk bent van een video platform. Ga naar bestand selecteren en upload video.

Video invoegen via URL: Staat je video op een platform zoals Youtube of Vimeo? Dan kun je de url (link) van de video plakken bij toevoegen via URL. Klik daarna op invoegen in bericht.

Zo vind je de url van je video:  Kopieer bovenin de adresbalk de link of klik onder de video op delen en kopieer de link daar.

Video op je website afb5

Video op je website afb6

Video op je website afb7

Klik op het groene vinkje om de video op te slaan.

Video op je website afb8

Tip: Staan er meerdere of lange video’s op je website? Voeg ze dan in via een video platform zoals Youtube of Vimeo. Op die manier kost het geen ruimte op je eigen website en wordt je website niet (te) traag.

Je video staat nu op je pagina. Wil je aanpassingen doen in de instellingen of het ontwerp? Lees dan nog even verder voor de opties.

De video settings module opties

Onder het tabblad content vind je na video (die we net hebben toegevoegd) ook het kopje overlay. Dit is een hele leuke mogelijkheid om je video een voorblad te geven. Upload een afbeelding die past bij je website en een link heeft met de video. Zo houd je je pagina rustig.

Zo doe je dat: Klik bij Overlay Image op het tandwiel om de mediabibliotheek te openen. Kies een afbeelding of upload een afbeelding van je computer en voeg die toe.

Bij Generate from video kun je er voor kiezen om een screenshot uit de video te kiezen als voorblad.

Video op je website afb9

Hier zie je de twee opties. 2 keer dezelfde video. Alleen in de tweede afbeelding is er een overlay toegevoegd.

Video op je website afb10

De video settings design opties

Hier kun je het ontwerp van de module aanpassen.

Video op je website afb11

Play Icon: Je kunt het afspeelicoon aanpassen bij Play Icon Color. Kies bijvoorbeeld de kleur die bij je huisstijl past. Door op het pennetje te klikken kun je jouw kleurcode erin plakken.

Ook kun je bij Icon het symbool instellen. Een driekhoek of pijltje is het meest gangbaar voor een video.

Tot slot kun je ervoor kiezen om het afspeelicoon groter of kleiner te maken bij Use Custom Icon Size. Gebruik daarvoor bij Play Icon Font Size de schuifregelaar of stel het aantal pixels in.

Video op je website afb12

Overlay: Hier kun je de achtergrondkleur van het icoon instellen wanneer je er met je muis overheen beweegt. In het voorbeeld hieronder wordt de video grijs doorzichtig als je er met je muis overheen beweegt. Met het pennetje kun je de kleur instellen. Om doorzichtigheid toe te voegen beweeg je de rechterschuifbalk op en neer.

Video op je website afb13

Video op je website afb14

Sizing: Je kunt hier de grote van het element aanpassen. De standaard waarde staan zo ingesteld dat ze automatisch worden aangepast aan bezoekers die met desktop, tablet of mobile kijken.

Spacing: Je kunt hier de marge en padding van de module aanpassen.

Border: Geef de video afgeronde hoeken als dit in je huisstijl past of maak een (gekleurde) rand om je video heen.

Video op je website afb15

Box Shadow: Hier kun je je video schaduw randen geven. Dit geeft het effect of video een beetje ‘zweeft’ op je pagina.

Video op je website afb16

Filters: Stel kleurfilters in voor je video.

Transform: Voeg grafische elementen toe zonder deze vooraf zelf te maken.

Animation: Laat de video naar binnen vliegen of draaien bijvoorbeeld als je erlangs scrolt.

De video settings Advanced opties

Hier kun je de o.a. de zichtbaarheid op verschillende apparaten instellen. Soms wil je bepaalde modules alleen laten zien op desktop of juist alleen op tablet en mobiele telefoon.

Video op je website afb17

In het tabblad Geavanceerd > Zichtbaarheid kun je instellen voor welk apparaat de module zichtbaar is. Standaard staat dit ingesteld op zichtbaar voor desktop, tablet en mobiel en hoef je hier dus niets aan te veranderen.

Je kunt dit ook gebruiken wanneer je nog niet klaar bent met een module maar je deze wel wil opslaan om er een volgende keer mee verder te gaan. Zet de Zichtbaarheid dan voor alle apparaten op niet zichtbaar en voilà, het staat er wel voor jou maar nog niet voor je bezoekers.

Tip: Bij iedere optie staat een ?, als je daarop klikt krijg je meer uitleg over de instellingen.

Gefeliciteerd! je hebt nu kennis gemaakt met Video toevoegen aan je website met Divi.

Kom je er toch niet uit? Neem gerust contact op.

Foutje gezien of een tip?

Laat het mij weten door een berichtje achter te laten.

7 + 12 =