De Divi Video Slider Module

Divi maakt het gemakkelijk om een ​​videoslider aan uw pagina toe te voegen. Dit is een geweldige manier om verzamelingen video’s te organiseren vanuit vrijwel elke bron. Met de videogalerij kunt u ook videominiatuurafbeeldingen aanpassen en de afspeelknop gebruiken om een ​​duidelijke, aangepaste stijl toe te voegen aan uw embeds.

Hoe u een videoslider-module aan uw pagina kunt toevoegen

Voordat u een videoslider-module aan uw pagina kunt toevoegen, moet u eerst in Divi Builder springen. Nadat het Divi-thema op uw website is geïnstalleerd, ziet u elke keer dat u een nieuwe pagina bouwt een knop Divi Builder gebruiken boven de berichteditor. Als u op deze knop klikt, wordt Divi Builder ingeschakeld en hebt u toegang tot alle modules van Divi Builder. Klik vervolgens op de knop Visual Builder gebruiken om de builder in Visual Mode te starten. U kunt ook klikken op de knop Visual Builder inschakelen tijdens het browsen op uw website aan de voorkant als u bent aangemeld bij uw WordPress-dashboard.

Nadat u Visual Builder hebt ingevoerd, kunt u op de grijze plusknop klikken om een ​​nieuwe module aan uw pagina toe te voegen. Nieuwe modules kunnen alleen binnen Rijen worden toegevoegd. Als u een nieuwe pagina start, vergeet dan niet eerst een rij aan uw pagina toe te voegen. We hebben een aantal geweldige tutorials over het gebruik van Divi’s rij- en sectie- elementen.

divi-video-slider-1.5-1

Zoek de videoslider-module in de lijst met modules en klik erop om deze aan uw pagina toe te voegen. De modulelijst kan worden doorzocht, wat betekent dat u ook ‘videoslider’ kunt typen en vervolgens op enter kunt drukken om de videoslidermodule automatisch te zoeken en toe te voegen! Nadat de module is toegevoegd, wordt u begroet met de lijst met opties van de module. Deze opties zijn onderverdeeld in drie hoofdgroepen: Inhoud , Ontwerp en Geavanceerd .

De videoslider vullen met inhoud

divi-video-slider-2-1

Voordat u te veel instellingen aanpast, is het waarschijnlijk een goed idee om door te gaan en uw videoslider te vullen met videodia’s. Op die manier kunt u, wanneer u wijzigingen aanbrengt, daadwerkelijk zien hoe deze het eindresultaat beïnvloeden. Om een ​​nieuwe videodia toe te voegen, moet u op de link + Nieuw item toevoegen klikken.

divi-video-slider-4

Hier kunt u een .mp4- of Webm-bestand uploaden. Je kunt ook een video-URL van YouTube invoegen. Wanneer je je bestand hebt geüpload of de YouTube-link hebt toegevoegd, klik je op de groene knop in de rechterbenedenhoek en ga je terug naar het hoofdtabblad van de videoslider-module. Herhaal dit proces voor elke video die je wilt toevoegen.

Instellingen video slider module-inhoud

Nu uw inhoud is toegevoegd, zijn er nog een paar andere gebieden om te verkennen. De drie vervolgkeuzemenu’s op het tabblad Inhoud waar instellingen zijn gegroepeerd die de hele module beïnvloeden.

Elements

Onder elementen kun je de instelling voor de pijlen en schuifregelaars van de videoslider-module aanpassen.

bedekking

Hier kunt u ervoor kiezen om video-overlays op de hoofdvideo weer te geven of te verbergen. Dit kan door een overlay aan elke videodia toe te voegen of automatisch gegenereerd door Divi.

Beheerderslabel

In deze vervolgkeuzelijst kunt u een admin-label toevoegen dat wordt weergegeven in de back-endbuilder en in de skeletweergave van de visuele builder.

Video Slider Module Design Instellingen

divi-video-slider-5

Op dit tabblad is er slechts één groep instellingen genaamd Besturingskleuren . Hier kunt u de kleur van de schuifregelaar van licht naar donker wijzigen, de kleur van het afspeelpictogram wijzigen en de kleur van de miniatuuroverlay aanpassen.

Video Slider Module Geavanceerde instellingen

divi-video-slider-6

Op het tabblad Geavanceerd van uw videoslider-module kunt u een unieke CSS-ID en -klasse toevoegen. U kunt ook aangepaste CSS toevoegen aan verschillende vooraf gedefinieerde (en vooraf geselecteerde) CSS-selectors binnen de videoslider-module in de vervolgkeuzelijst CSS. En ten slotte kunt u in de vervolgkeuzelijst voor zichtbaarheid de zichtbaarheid van uw module aanpassen op telefoons, tablets en desktops.

Individuele instellingen voor video-inhoud

divi-video-slider-3

Als u specifieke instellingen voor afzonderlijke dia’s wilt maken, moeten deze worden geconfigureerd in de videodia’s zelf. Klik eenvoudig op het tandwielpictogram van die dia om de unieke instellingen te openen.

Video

Zoals hierboven aangetoond, kunt u hier uw video-inhoud toevoegen.

bedekking

In de vervolgkeuzelijst kunt u een afbeelding uploaden om uw videodia te bedekken of ervoor kiezen om Divi er automatisch een te laten genereren.

Individuele video-ontwerpinstellingen

divi-video-slider-7

Op het ontwerptabblad van uw videodia kunt u de kleur van uw schuifpijl wijzigen van licht naar donker.

Gebruiksvoorbeeld: een videoslider toevoegen om zelfstudievideo’s voor een cursuspagina te tonen

Voor dit voorbeeld ga ik je laten zien hoe je een videoslider kunt gebruiken om een ​​reeks zelfstudievideo’s te presenteren voor een online cursuspagina ..

Laten we beginnen.

Gebruik de visuele builder om een ​​normale sectie met een rij met volledige breedte (1 kolom) toe te voegen. Voeg vervolgens een Video Slider-module toe aan de rij.

Het eerste wat u moet doen wanneer het venster Modus Video Slider verschijnt, is selecteren + Nieuw item toevoegen om uw eerste video aan de module toe te voegen.

Werk de individuele video-instellingen als volgt bij:

Tabblad Inhoud
Video MP4 / URL: [voer URL in of upload video]
Video Webm: [voer URL in of upload video]
URL voor beeldoverlay: [voeg een aangepaste afbeelding in om te dienen als overlay]

Ontwerp tabblad

Schuifpijlen Kleur: Licht

Instellingen opslaan

Herhaal deze stap om de rest van de video’s toe te voegen die nodig zijn voor het apparaat.

Nadat alle video’s en aangepaste beeldoverlays zijn toegevoegd, gaat u terug naar de instellingen van de videoslider en werkt u de opties als volgt bij:

Tabblad Inhoud

Pijlen: Pijlen tonen
Schuifregelaars: Gebruik Thumbnail Track
Beeldoverlays weergeven op hoofdvideo: Show

Ontwerp tabblad

Schuifregelaar Kleur: Licht
Play Pictogram Kleur: #ffffff

Dat is het!