Het toevoegen van video's aan uw pagina in Divi is eenvoudig wanneer u de videomodule gebruikt. Met deze module kun je video's van elke bron insluiten, maar ook de miniatuurafbeelding en de afspeelknop aanpassen.
Hoe een videomodule aan uw pagina toe te voegen
Voordat u een videomodule aan uw pagina kunt toevoegen, moet u eerst naar Divi Builder springen. Zodra de Divi-thema geïnstalleerd op uw website, ziet u een knop Gebruik Divi Builder boven de berichteditor wanneer u een nieuwe pagina maakt. Klik op deze knop om Divi Builder te activeren en toegang te krijgen tot alle Divi Builder-modules. Klik vervolgens op de knop Gebruik Visual Builder om de generator in visuele modus te starten. U kunt ook op de knop klikken Gebruik Visual Builder wanneer u door uw website op de voorgrond bladert en u bent verbonden met uw WordPress-dashboard.
Nadat u Visual Builder heeft geopend, 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 begint, vergeet dan niet om eerst een rij aan uw pagina toe te voegen.
Zoek de videomod in de lijst met mods en klik erop om deze aan je pagina toe te voegen. De lijst met mods is doorzoekbaar, wat betekent dat je ook het woord "video" kunt typen en vervolgens op enter kunt klikken om automatisch de videomod te zoeken en toe te voegen! Zodra de module is toegevoegd, wordt u begroet door de lijst met moduleopties. Deze opties zijn onderverdeeld in drie hoofdgroepen: Inhoud , Ontwerpfase et vergevorderd .
Gebruiksvoorbeeld: een video toevoegen aan uw bestemmingspagina
Het toevoegen van een video aan uw landingspagina is een geweldige manier om dat te doen bevorderen uw producten en verhoog de conversies. In dit voorbeeld laat ik u zien hoe u de videomodule kunt gebruiken om een video aan uw landingspagina toe te voegen. Ik heb een rode cirkel geplaatst waar de video moet komen.
Met Visual Builder voeg ik een nieuwe sectie toe met een rij over de volledige breedte (1 kolom). In de rij-instellingen, onder het tabblad Ontwerpen, selecteer ik de optie "Aangepaste breedte gebruiken". Voor de optie Aangepaste breedte die verschijnt, voer ik een aangepaste breedte in van 767 px. Dit zorgt ervoor dat de videomodule die ik in deze rij ga toevoegen, deze breedte niet overschrijdt en te groot wordt op grotere schermformaten.
Vervolgens voeg ik de videomodule toe aan de rij. Op het tabblad Inhoud van de instelling Videomodule voer ik de video-URL in van de video die ik wil insluiten op mijn bestemmingspagina. Ik gebruik voor dit voorbeeld de URL van een YouTube-video.
Vervolgens voeg ik een afbeeldings-overlay-URL voor mijn video toe door op de knop "Video genereren" te klikken. Hierdoor wordt automatisch een frame uit de video gehaald om als overlay met een nieuw aangepast videopictogram te dienen.
Op het tabblad Ontwerpen verander ik de kleur van het afspeelpictogram zodat het overeenkomt met mijn bestemmingspagina.
Nu heb ik een video voor mijn landingspagina die er strak uitziet en past bij mijn ontwerp.
Nu je de videomod in actie hebt gezien, duik je in alle instellingen in de onderstaande secties. We hebben een gedetailleerd overzicht gegeven van wat u op elk tabblad van de module-instellingen kunt vinden en een uitleg van wat elk doet.
Inhoud opties
URL van de video
Met de Divi Video-module kunt u video toevoegen op twee verschillende manieren. U kunt uw eigen videobestand van uw computer downloaden door op de knop "Video downloaden" te klikken en het gewenste bestand te selecteren, of u kunt een video-url invoeren van een videobron van derden, zoals YouTube of Vimeo. Kopieer en plak de URL vanuit uw browser en plak deze in het veld Video URL en Divi zorgt voor de rest!
URL voor beeldoverlay
Als u een aangepaste videominiatuurafbeelding wilt instellen, die op de standaard video-interface wordt geplaatst met een aangepaste afspeelknop om een scherper en meer gestileerd uiterlijk te creëren, kunt u ervoor kiezen om dit te doen met behulp van het veld Beeldoverlay. Met dit besturingselement kunt u uw eigen gepersonaliseerde afbeelding uploaden of Divi automatisch een afbeelding laten genereren op basis van de URL van uw video. De meeste videoproviders ondersteunen deze optie, zoals YouTube en Vimeo. Klik gewoon op de knop "Video genereren" en laat Divi voor de rest zorgen!
Admin-label
Standaard verschijnt uw videomodule met een 'Video'-label in de generator. Met de Admin-tag kunt u deze tag wijzigen voor eenvoudige identificatie.
Ontwerpopties
verander de kleur van het pictogram
Als u een beeldoverlay voor uw videopod aanwijst, bevat de weergegeven video een afspeelpictogram op de video. U kunt hier de kleur van dit pictogram aangeven, zodat deze overeenkomt met de kleuren op uw pagina.
Opties AVANCEES
CSS-id en klassen
Dit kan worden gebruikt om een CSS-ID of een klasse aan uw module toe te voegen. Deze kunnen vervolgens worden gebruikt in uw stylesheet of in het vak Thema-opties Aangepaste CSS om een aangepaste stijl op de module toe te passen. CSS-ID's kunnen ook worden getarget met ankerkoppelingen om naar bepaalde delen van uw pagina te linken.
Aangepaste CSS
Hier kunt u aangepaste CSS toevoegen aan uw videomodule.
zichtbaarheid
Als u uw videomodule op sommige apparaten wilt verbergen, kunt u de apparaten selecteren waarop u de videomodule wilt uitschakelen.
[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD DIVI THEMA [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD DE TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]
Andere Divi-zelfstudies
- 5 websites voor restaurant gebruik Divi thema
- Tekst toevoegen aan een Divi WooCommerce-product
- Hoe de menukleur tussen Divi-pagina's te veranderen
- Hoe de rasters van een blog personaliseren met Divi
- Hoe de rol Divi editor op WordPress
- Een Divi-schuifregelaar op volledig scherm maken
- Hoe de kleur van menu's tussen Divi-pagina's te veranderen
- Functies die u waarschijnlijk niet kent over Divi
- Divi Builder gebruiken op WordPress
- Hoe de Divi-scrolmodule video te gebruiken
- Hoe de Divi Builder Flip-module te gebruiken
- Hoe een getuigenismodule op Divi Builder toe te voegen
- Hoe de Divi-tekstmodule te gebruiken
- Hoe maak je een schuifregelaar op Divi
- Hoe u een Divi-gebruikersrol kunt bewerken
- Hoe de Divi Social Media-module te gebruiken
- Hoe de shopmodule te gebruiken met het thema WordPress Divi
- Hoe de Divi zijbalkmodule te gebruiken
- Hoe de Divi Price Table-module te gebruiken
- Hoe de titelmodule van Divi-publicaties te gebruiken
- Hoe een videomodule van Divi toe te voegen
- Hoe de artikelnavigatiemodule te gebruiken
- Hoe de Divi-zoekmodule te gebruiken
- Hoe de Divi wallet-module te gebruiken
- Hoe de persoonsmodule op Divi Builder te gebruiken
- De walletmodule gebruiken met Divi-filter
- De schuifregelaarmodule op de volledige breedte gebruiken
- Hoe de Divi Builder-beeldmodule te gebruiken
- De navigatiemodule op de volledige breedte van Divi Builder gebruiken
- Hoe de afbeeldingengalerij-module te gebruiken
- Hoe de Divi Builder kaartmodule met volledige breedte te gebruiken
- Hoe de Divi Full Width Portfolio Module te gebruiken
- Hoe de Divi header-module over de volle breedte te gebruiken
- Hoe de Divi Counter-module te gebruiken
- De schuifregelaar voor artikelen gebruiken in Divi Builder
- Hoe de Divi Email Optin-module te gebruiken