Met Divi kunt u schuifregelaars in secties over de volledige breedte plaatsen, waardoor uw schuifregelaars de volledige breedte van de browser beslaan. Divi-schuifregelaars (schuifregelaars) ondersteunen parallax-achtergronden, evenals video-achtergronden!

gebruik een schuifknop op divi.png

Hoe een Diapo-module op volledige breedte van Divi toe te voegen

Voordat u een schuifregelaarmodule over de volledige breedte aan uw pagina kunt toevoegen, moet u eerst in Divi Builder springen. Zodra de Divi-thema geïnstalleerd op uw Site web, je ziet een knop Gebruik Divi Builderboven 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 bladert Site web op de voorgrond als u bent ingelogd op uw WordPress-dashboard.

gebruik visual builder divi.png

Als u zich eenmaal in Visual Builder bevindt, 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.

maak een dia divi tutorial wordpress.png

Zoek de schuifregelaar met volledige breedte in de lijst met modules en klik erop om deze aan uw pagina toe te voegen. De lijst met mods is doorzoekbaar, wat betekent dat je ook het woord "Slide" kunt typen en vervolgens op Enter kunt klikken om automatisch de schuifregelaar met volledige breedte 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 heldensectie met schuifregelaar over de volledige breedte aan uw startpagina toevoegen

Een schuifregelaar met volledige breedte is een geweldige manier om meerdere CTA's boven de drempel van uw startpagina te laten zien. De combinatie van afbeeldingen en inhoud kan uw sectie echt een professionele uitstraling geven die opvalt.

Voor dit voorbeeld zal ik een dia over de volledige breedte toevoegen om als hoofdgedeelte op een startpagina te dienen.

maak een dia met volledige breedte example.jpg

Voeg met Visual Builder een sectie Volledige breedte toe aan de bovenkant van uw webpagina. Voeg vervolgens de Fullwidth Slider-module in uw nieuwe sectie in. Klik op het tabblad Inhoud van de dia-instellingen op volledige breedte op + Voeg een nieuw item toe om je eerste dia te maken.

maak een dia divi.png

Werk in de dia-instellingen van uw eerste dia de volgende opties bij:

Inhoud opties

En-tête : [voer de titel van de dia in]
Knoptekst : [voer de knoptekst in]
Inhoud : [voer de tekstinhoud van de dia in]
Knop-URL : [voer de bestemmings-URL van de schuifknop in]
Achtergrond afbeelding : [voer de afbeelding in die als achtergrond voor de dia zal dienen]

Ontwerpopties

Gebruik achtergrondoverlay : JA
Achtergrond overlay-kleur : rgba (0,0,0,0.2) deze overlay maakt de achtergrondafbeelding iets donkerder om de tekst beter leesbaar te maken.

slide divi blogpascher.png

Sla dia-instellingen op

Dupliceer nu de dia die u zojuist hebt gemaakt en werk de nieuwe dia indien nodig bij met nieuwe inhoud. Herhaal dit voor alle dia's die u wilt toevoegen.

dupliceer een divi.png dia

Dat is alles. Voor dit voorbeeld neem ik slechts twee dia's op, maar het resultaat is een effectieve hero-schuifregelaar over de volledige breedte met meerdere call-to-actions die de gebruiker ertoe aanzet op de knop te klikken voor meer informatie. Omdat dit uw belangrijkste call-to-action is voor uw Site web, Ik stel voor om split-tests uit te voeren op uw dia over de volledige breedte met behulp van Divi Leads en te kijken welke het beste converteert.

voorbeeld dia divi dem.gif

Slide Full Content Options

Op het inhoudstabblad vind je alle inhoudselementen van de module, zoals tekst, afbeeldingen en iconen. Dat alles controleert wat verschijnt in uw module, vindt u altijd op dit tabblad.

slide divi section content.png

pijlen

Kies of u de linker en rechter navigatiepijlen wilt weergeven.

Contrôles

Kies of de cirkelknoppen / schuifaanduidingen onder aan de cursor moeten worden weergegeven.

Beheerderlabel

Hierdoor wordt het modulelabel in de constructor gewijzigd voor gemakkelijke identificatie. Wanneer u de WireFrame-weergave in Visual Builder gebruikt, verschijnen deze labels in het moduleblok van de Divi Builder-interface.

Slide Module Design Options

Op het tabblad Ontwerpen vindt u alle stijlopties voor de module, zoals lettertypen, kleuren, grootte en spatiëring. Dit is het tabblad dat u gaat gebruiken om het uiterlijk van uw module te wijzigen. Elke Divi-module heeft een lange lijst met ontwerpinstellingen die u kunt gebruiken om alles te wijzigen.

diasectie ontwerp divi.png

Verwijder binnenschaduw

Standaard wordt een interne schaduw weergegeven in de cursor. Als u deze schaduw wilt uitschakelen, kunt u dit doen met deze instelling.

Effect van parallax

Als u deze optie inschakelt, krijgen uw achtergrondafbeeldingen een vaste positie terwijl u scrolt. Houd er rekening mee dat wanneer deze instelling is ingeschakeld, uw afbeeldingen uw afbeeldingen schalen naar browserhoogte.

Header lettertype

U kunt het lettertype van uw koptekst wijzigen door het gewenste lettertype te selecteren in het vervolgkeuzemenu. Divi wordt geleverd met tientallen geweldige lettertypen, mogelijk gemaakt door Google Fonts. Divi gebruikt standaard het Open Sans-lettertype voor alle tekst op uw pagina. U kunt ook de stijl van uw tekst aanpassen met opties voor vet, cursief, hoofdletters en onderstrepen.

diasectie lettertype ontwerp van lentete.png

Lettergrootte koptekst

Hier kunt u de grootte van uw koptekst aanpassen. U kunt de bereikschuifregelaar slepen om de grootte van uw tekst te vergroten of verkleinen, of u kunt de gewenste waarde voor de tekstgrootte rechtstreeks invoeren in het invoerveld rechts van de schuifregelaar. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.

Kleur koptekst

Standaard worden alle tekstkleuren in Divi weergegeven in wit of donkergrijs. Als u de kleur van uw koptekst wilt wijzigen, kiest u met deze optie de gewenste kleur uit de kleurkiezer.

Tussenruimte koptekst

Letterafstand is van invloed op de ruimte tussen elke letter. Als u de ruimte tussen elke letter in uw koptekst wilt vergroten, gebruikt u de bereikschuifregelaar om de spatie aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.

Hoogte koprij

Rijhoogte is van invloed op de ruimte tussen elke rij van uw koptekst.Als u de ruimte tussen elke rij wilt vergroten, gebruikt u de bereikschuifregelaar om de ruimte aan te passen of voert u de gewenste afstand in het veld in. invoerveld rechts van de cursor. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.

Lichaamspolitie

U kunt uw hoofdlettertype wijzigen door het gewenste lettertype te selecteren in het vervolgkeuzemenu. Divi wordt geleverd met tientallen geweldige lettertypen, mogelijk gemaakt door Google Fonts. Divi gebruikt standaard het Open Sans-lettertype voor alle tekst op uw pagina. U kunt ook de stijl van uw tekst aanpassen met opties voor vet, cursief, hoofdletters en onderstrepen.

Tekst lettergrootte

Hier kunt u de grootte van uw hoofdtekst aanpassen. U kunt de bereikschuifregelaar slepen om de grootte van uw tekst te vergroten of verkleinen, of u kunt de gewenste waarde voor de tekstgrootte rechtstreeks invoeren in het invoerveld rechts van de schuifregelaar. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.

sectie ontwerp slide module divi.png

Tekstkleur hoofdtekst

Standaard worden alle tekstkleuren in Divi weergegeven in wit of donkergrijs. Als u de kleur van uw tekst wilt wijzigen, kiest u met deze optie de gewenste kleur uit de kleurenkiezer.

Afstand van hoofdletters

Letterafstand is van invloed op de ruimte tussen elke letter. Als u de ruimte tussen elke letter in uw tekst wilt vergroten, gebruikt u de bereikschuifregelaar om de spatie aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.

Hoogte van de lichaamslijn

De regelhoogte is van invloed op de ruimte tussen elke regel tekst in uw lichaam.Als u de ruimte tussen elke regel wilt vergroten, gebruikt u de bereikschuifregelaar om de ruimte aan te passen of voert u de gewenste afstand in het invoerveld in rechts van de cursor. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.

Bovenste vulling

Deze parameter bepaalt de interne ruimte tussen de bovenkant van de module en de tekstinhoud in de module. Als u deze ruimte wilt vergroten of verkleinen, voert u hier uw gewenste waarde in. Als u bijvoorbeeld de ruimte en de totale grootte van de cursor wilt verkleinen, kunt u een waarde van 100px invoeren. U kunt ook een percentage invoeren, bijvoorbeeld 10%, om de hoogte dynamischer te maken.

Vulling onderaan

Deze parameter bepaalt de interne ruimte tussen de onderkant van de module en de tekstinhoud in de module. Als u deze ruimte wilt vergroten of verkleinen, voert u hier uw gewenste waarde in. Als u bijvoorbeeld de ruimte en de totale grootte van de cursor wilt verkleinen, kunt u een waarde van 100px invoeren. U kunt ook een percentage invoeren, bijvoorbeeld 10%, om de hoogte dynamischer te maken.

Gebruik aangepaste stijlen voor de knop

Als u deze optie inschakelt, worden verschillende instellingen voor het aanpassen van knoppen weergegeven die u kunt gebruiken om het uiterlijk van de knop van uw module te wijzigen.

Knop tekstgrootte

Deze instelling kan worden gebruikt om de grootte van de tekst in de knop te vergroten of te verkleinen. De knop past zich aan naarmate de tekst groter en kleiner wordt.

Knop tekstkleur

Standaard nemen de knoppen de accentkleur van uw thema aan, zoals gedefinieerd in de Theme Customizer. Met deze optie kunt u een aangepaste tekstkleur toewijzen aan de knop van deze module. Selecteer uw aangepaste kleur met behulp van de kleurkiezer om de knopkleur te wijzigen.

divi.png knop kleur

Knop achtergrondkleur

Standaard hebben de knoppen een transparante achtergrondkleur. Dit kan worden gewijzigd door de gewenste achtergrondkleur te selecteren in de kleurenkiezer.

Breedte van de knoprand

Alle Divi-knoppen hebben standaard een rand van 2 px. Met deze instelling kan deze rand worden vergroot of verkleind. Randen kunnen worden verwijderd door de waarde 0 in te voeren.

Knooprandkleur

Standaard nemen de knopranden de accentkleur van uw thema over, zoals gedefinieerd in de Theme Customizer. Met deze optie kunt u een aangepaste randkleur toewijzen aan de knop van deze module. Selecteer uw aangepaste kleur met behulp van de kleurkiezer om de kleur van de knoprand te wijzigen.

Knoop de randradius

De straal van de rand heeft invloed op de rondheid van de hoeken van uw knoppen. Standaard hebben de knoppen in Divi een kleine randradius die de hoeken met 3 pixels rond maakt. U kunt deze waarde verlagen tot 0 om een ​​vierkante knop te maken of aanzienlijk verhogen om knoppen met ronde randen te maken.

Afstand van de letters van de knop

Letterafstand is van invloed op de ruimte tussen elke letter. Als u de ruimte tussen elke letter in uw knoptekst wilt vergroten, gebruikt u de bereikschuifregelaar om de spatie aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.

Knop lettertype

U kunt het lettertype van uw knoptekst wijzigen door het gewenste lettertype te selecteren in het vervolgkeuzemenu. Divi wordt geleverd met tientallen geweldige lettertypen, mogelijk gemaakt door Google Fonts. Divi gebruikt standaard het Open Sans-lettertype voor alle tekst op uw pagina. U kunt ook de stijl van uw tekst aanpassen met opties voor vet, cursief, hoofdletters en onderstrepen.

Voeg een knoppictogram toe

Uitgeschakeld, deze instelling verwijdert pictogrammen van uw knop. Standaard geven alle Divi-knoppen een pijlpictogram weer op de muisaanwijzer.

Knop pictogram

Als pictogrammen zijn ingeschakeld, kunt u deze instelling gebruiken om te kiezen welk pictogram u in uw knop wilt gebruiken. Divi heeft verschillende pictogrammen om uit te kiezen.

Kleur pictogram knop

Als u deze instelling aanpast, verandert de kleur van het pictogram dat op uw knop verschijnt. Standaard is de kleur van het pictogram hetzelfde als de tekstkleur van uw knop, maar met deze instelling kunt u de kleur onafhankelijk aanpassen.

Pictogramplaatsingstoets

U kunt ervoor kiezen om het pictogram van uw knop links of rechts van uw knop weer te geven.

Alleen pictogram weergeven wanneer u over de knop beweegt

Standaard worden de knoppictogrammen alleen weergegeven tijdens het zweven. Schakel deze instelling uit als u wilt dat het pictogram altijd wordt weergegeven.

Tekstkleur van de knop aanwijzen

Wanneer de knop door de muis van een bezoeker wordt bewogen, wordt deze kleur gebruikt. De kleur verandert van de basiskleur die is gedefinieerd in de vorige instellingen.

Knop achter achtergrondkleur

Wanneer de knop door de muis van een bezoeker wordt bewogen, wordt deze kleur gebruikt. De kleur verandert van de basiskleur die is gedefinieerd in de vorige instellingen.

Kleur op de randknop

Wanneer de knop door de muis van een bezoeker wordt bewogen, wordt deze kleur gebruikt. De kleur verandert van de basiskleur die is gedefinieerd in de vorige instellingen.

Knop Randstraal zweven

Wanneer de knop met de muis van een bezoeker wordt bewogen, wordt deze waarde gebruikt. De waarde zal veranderen van de basiswaarde die is gedefinieerd in de vorige instellingen.

Knop voor het markeren van afstanden van notities

Wanneer de knop met de muis van een bezoeker wordt bewogen, wordt deze waarde gebruikt. De waarde zal veranderen van de basiswaarde die is gedefinieerd in de vorige instellingen.

Geavanceerde opties schuifmodule over de volle breedte

Op het tabblad Geavanceerd vindt u opties die meer ervaren webontwerpers nuttig kunnen vinden, zoals aangepaste CSS- en HTML-kenmerken. Hier kunt u aangepaste CSS toepassen op elk van de vele elementen van de module. U kunt ook aangepaste CSS-klassen en ID's op de module toepassen, die kunnen worden gebruikt om de module aan te passen in het style.css-bestand van uw child-thema.

module voor vooraf geschaalde dia's divi.png

CSS ID

Voer een optionele CSS-ID in om voor deze module te gebruiken. Een ID kan worden gebruikt om een ​​aangepaste CSS-stijl te maken of om naar bepaalde secties van uw pagina te linken.

CSS-klasse

Voer de optionele CSS-klassen in die voor deze module moeten worden gebruikt. Een CSS-klasse kan worden gebruikt om een ​​aangepaste CSS-stijl te maken. U kunt meerdere klassen toevoegen, gescheiden door een spatie. Deze klassen kunnen worden gebruikt in uw Divi-child-thema of in de aangepaste CSS-stylesheet die u aan uw pagina of aan uw website toevoegt met behulp van de Divi-thema-opties of de instellingen op de Divi Builder-pagina.

Aangepaste CSS

Aangepaste CSS kan ook worden toegepast op de module en elk van de interne onderdelen van de module. In de sectie Aangepaste CSS vindt u een tekstveld waar u aangepaste CSS-stijlpagina's rechtstreeks aan elk element kunt toevoegen. CSS-vermeldingen in deze instellingen zijn al verpakt in stijltags. Voer dus gewoon de CSS-regels in, gescheiden door puntkomma's.

Automatische animatie

Als u wilt dat de cursor automatisch schuift, zonder dat de bezoeker op de volgende knop hoeft te klikken, schakelt u deze optie in en past u vervolgens de rotatiesnelheid hieronder aan als u dat wenst.

Automatische animatiesnelheid (in ms)

Hier kunt u aangeven hoe snel de cursor tussen elke dia vervaagt, als de optie 'Auto-animeren' hierboven is ingeschakeld. Hoe hoger het nummer, hoe langer de pauze tussen elke rotatie.

Ga verder Auto slide on Hover

Als u dit inschakelt, kan automatisch schuiven met de zweeftekst van de muis worden voortgezet.

Verberg inhoud op mobiel

Naarmate de schermgrootte op mobiele apparaten kleiner wordt, wordt schermruimte waardevoller. Soms is het een goed idee om enkele minder belangrijke cursorelementen uit te schakelen om de cursorgrootte te verkleinen en beter leesbaar te maken. Als u deze instelling inschakelt, wordt de cursortekstinhoud op de mobiele telefoon verborgen.

CTA op mobiel verbergen

Naarmate de schermgrootte op mobiele apparaten kleiner wordt, wordt schermruimte waardevoller. Soms is het een goed idee om enkele minder belangrijke cursorelementen uit te schakelen om de cursorgrootte te verkleinen en beter leesbaar te maken. Als u deze instelling inschakelt, worden de call-to-action-knoppen op de mobiele telefoon verborgen.

Bekijk afbeelding / video op mobiel

Naarmate de schermgrootte kleiner wordt op mobiele apparaten, wordt schermruimte waardevoller. Soms is het een goed idee om enkele minder belangrijke cursorelementen uit te schakelen om de cursorgrootte te verkleinen en beter leesbaar te maken. Als u deze instelling inschakelt, worden dia-afbeeldingen en video's op mobiele apparaten weergegeven (deze zijn standaard uitgeschakeld).

zichtbaarheid

Met deze optie kunt u de apparaten bedienen waarop uw module verschijnt. U kunt ervoor kiezen om uw module afzonderlijk op tablets, smartphones of desktops te deactiveren. Dit is handig als u verschillende mods op verschillende apparaten wilt gebruiken, of als u het mobiele ontwerp wilt vereenvoudigen door bepaalde elementen van de pagina te verwijderen.

Inhoudsopties voor schuifmodule-elementen over de volledige breedte

individuele elementmodule divi diapo.png

Titel

Plaats hier de tekst van uw cursortitel.

Knoptekst

Als u een knop onder uw dia-inhoud wilt weergeven, voert u hier de knoptekst in. Laat dit veld leeg als u geen knop wilt weergeven.

Inhoud

Voer hier de inhoud van uw cursor in. Merk op dat de hoeveelheid tekst die u hier invoert, de hoogte van uw dia's bepaalt.

Knop-URL

Als u een knop weergeeft, voert u een geldige web-URL in dit veld in om de bestemmingslink in te stellen.

Sleep de afbeelding

Als u een dia-afbeelding toevoegt, wordt deze links van uw diatekst boven uw dia-achtergrond weergegeven. Als u geen dia-afbeelding specificeert, bevindt u zich aan de linkerkant met een gecentreerde dia met alleen tekst. Aangezien de hoogte van elke dia wordt bepaald door de tekst, valt deze onder de onderkant van de dia als je dia-afbeelding lang genoeg is, waardoor er onderaan een uitgelijnde afbeelding ontstaat.

sleep een afbeelding met divi.png

Merk op dat de hoogte van een dia met een dia-afbeelding kan worden bepaald door een grotere dia in de schuifregelaar. Zorg ervoor dat uw dia-afbeelding groot genoeg is om te passen als u een afbeelding onderaan wilt uitlijnen. Om leesbaarheidsredenen worden dia-afbeeldingen alleen weergegeven in schuifregelaars voor kolom-, kolom- of 1 kolombreedte. Evenzo worden dia-afbeeldingen niet weergegeven in browserbreedtes die kleiner zijn dan 768 pixels. De breedte van de dia-afbeelding wordt hieronder gedefinieerd. We raden aan dat uw dia-afbeeldingen minstens zo breed zijn.

Video dia

Als u een diavideo toevoegt, wordt deze links van uw diatekst boven uw dia-achtergrond weergegeven. Als u geen diavideo specificeert, bevindt u zich aan de linkerkant met een gecentreerde dia met alleen tekst. Omdat de hoogte van elke dia wordt bepaald door de tekst, valt deze onder de onderkant van de dia, als je dia-afbeelding lang genoeg is, waardoor er onderaan een uitgelijnde afbeelding ontstaat.

Video pauzeren

Sta toe dat video wordt gepauzeerd door andere spelers wanneer ze beginnen met spelen

Achtergrond afbeelding

Indien ingesteld, wordt deze afbeelding gebruikt als achtergrond voor deze module. Om een ​​achtergrondafbeelding te verwijderen, verwijdert u gewoon de URL uit het instellingenveld.

De hoogte van een dia wordt bepaald door de hoeveelheid tekst die u toevoegt. Als u meerdere dia's heeft, neemt de schuifregelaar de hoogte van de hoogste dia aan.

De breedte van uw cursor wordt bepaald door de breedte van de browser. Op basis van standaard schermformaten raden we aan dat uw afbeeldingen minimaal 1280 x 768 pixels zijn.

Positie van de achtergrondafbeelding

Achtergrondafbeeldingen worden standaard in het midden van de dia weergegeven. U kunt deze instelling gebruiken om de plaatsing boven, onder, links, rechts of in een van de vier hoeken van de dia te wijzigen.

Grootte van de achtergrondafbeelding

Standaard worden de achtergrondafbeeldingen proportioneel vergroot om ervoor te zorgen dat ze de hele dia vullen. U kunt deze optie echter gebruiken om het standaardgedrag te wijzigen. "Dekking" is het standaardgedrag, waarbij de afbeelding wordt geschaald om het hele dia-gebied te bedekken. "Aanpassen" zal de afbeelding ook dwingen om het hele gebied te bedekken, maar het zal de hoogte en breedte van de afbeelding dwingen om overeen te komen met de hoogte en breedte van de cursor. Dit kan resulteren in een vervormd beeld, maar het voorkomt dat de afbeelding wordt bijgesneden. "Werkelijke grootte" schaalt de afbeelding niet en geeft deze weer op de oorspronkelijke grootte.

Achtergrondkleur

Als u alleen een effen achtergrondkleur voor uw dia wilt gebruiken, gebruikt u de kleurkiezer om een ​​achtergrondkleur in te stellen.

MP4 achtergrondvideo

Alle video's moeten worden gedownload in beide .MP4 .WEBM-indelingen om maximale compatibiliteit in alle browsers te garanderen. Download de .MP4-versie hier. Belangrijke opmerking: video-achtergronden zijn uitgeschakeld vanaf mobiele apparaten. In plaats daarvan wordt uw bkacground-afbeelding gebruikt. Om deze reden moet u zowel een achtergrondafbeelding als een achtergrondvideo instellen om betere resultaten te krijgen.

WEBM-achtergrondvideo

Alle video's moeten worden gedownload in beide .MP4 .WEBM-indelingen om maximale compatibiliteit in alle browsers te garanderen. Download de .WEBM-versies hier. Belangrijke opmerking: video-achtergronden zijn uitgeschakeld vanaf mobiele apparaten. In plaats daarvan wordt uw bkacground-afbeelding gebruikt. Om deze reden moet u zowel een achtergrondafbeelding als een achtergrondvideo instellen om betere resultaten te krijgen.

Breedte achtergrondvideo

Als u wilt dat video's de juiste grootte hebben, moet u hier de exacte breedte (in pixels) van uw video invoeren.

Video hoogte achtergrond

Om video's de juiste grootte te geven, moet u hier de exacte hoogte (in pixels) van uw video invoeren.

Ontwerpopties voor elementen met schuifelementen

sectie stijl module divi.png

Gebruik achtergrondoverlay

Indien ingeschakeld, wordt een aangepaste overlay-kleur toegevoegd boven uw achtergrondafbeelding en achter uw schuifregelaarinhoud.

Achtergrond overlay kleur

Gebruik de kleurenkiezer om een ​​kleur voor de achtergrond te kiezen.

Gebruik tekst-overlay

Als deze optie is ingeschakeld, wordt een achtergrondkleur toegevoegd achter de cursortekst om deze beter leesbaar te maken op achtergrondafbeeldingen.

Tekst overlay kleur

Gebruik de kleurenkiezer om een ​​kleur te kiezen voor de tekstoverlay.

Tekst overlay Randradius

De straal van de rand is van invloed op de ronding van de hoeken van het tekstoverlaygebied. Standaard hebben de hoeken een licht afgeronde rand van 3 pixels. U kunt deze waarde verlagen tot 0 om een ​​rechthoekig kader te maken of de waarde verhogen om de hoeken nog ronder te maken.

Aangepaste kleurpijlen

Wanneer u de muisaanwijzer over een schuifregelaar beweegt, verschijnen er pijlen waarmee de bezoeker door elke dia kan navigeren. Deze pijlen nemen standaard de kleur van de hoofdtekst van de dia over. U kunt met deze instelling echter een aangepaste kleur voor deze pijlen definiëren.

Dot Nav Aangepaste kleur

In elke cursor verschijnen puntnavigatie-items onder de cursorinhoud. Met deze elementen kan de gebruiker door de cursor navigeren. U kunt een aangepaste kleur definiëren om voor deze elementen te gebruiken met behulp van de kleurkiezer in deze instelling.

Verticale uitlijning van het dia-beeld

Deze instelling bepaalt de verticale uitlijning van uw dia-afbeelding. Uw afbeelding kan verticaal worden gecentreerd of onder aan uw dia worden uitgelijnd.

Tekstkleur

Als de achtergrond van uw dia donker is, moet de tekstkleur worden ingesteld op "Licht". Omgekeerd, als de achtergrond van de dia licht is, moet de tekstkleur worden ingesteld op "Donker".

Koptekst lettertype

U kunt het lettertype van uw koptekst wijzigen door het gewenste lettertype te selecteren in het vervolgkeuzemenu. Divi wordt geleverd met tientallen geweldige lettertypen, mogelijk gemaakt door Google Fonts. Divi gebruikt standaard het Open Sans-lettertype voor alle tekst op uw pagina. U kunt ook de stijl van uw tekst aanpassen met opties voor vet, cursief, hoofdletters en onderstrepen.

Lettergrootte koptekst

Hier kunt u de grootte van uw koptekst aanpassen. U kunt de bereikschuifregelaar slepen om de grootte van uw tekst te vergroten of verkleinen, of u kunt de gewenste waarde voor de tekstgrootte rechtstreeks invoeren in het invoerveld rechts van de schuifregelaar. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.

Kleur koptekst

Standaard worden alle tekstkleuren in Divi weergegeven in wit of donkergrijs. Als u de kleur van uw koptekst wilt wijzigen, kiest u met deze optie de gewenste kleur uit de kleurkiezer.

kleur van de ontwerpmodule header sectie dispo divi.png

Tussenruimte koptekst

Letterafstand is van invloed op de ruimte tussen elke letter. Als u de ruimte tussen elke letter in uw koptekst wilt vergroten, gebruikt u de bereikschuifregelaar om de spatie aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.

Hoogte koprij

Rijhoogte is van invloed op de ruimte tussen elke rij van uw koptekst.Als u de ruimte tussen elke rij wilt vergroten, gebruikt u de bereikschuifregelaar om de ruimte aan te passen of voert u de gewenste afstand in het veld in. invoerveld rechts van de cursor. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.

Body Font

U kunt uw hoofdlettertype wijzigen door het gewenste lettertype te selecteren in het vervolgkeuzemenu. Divi wordt geleverd met tientallen geweldige lettertypen, mogelijk gemaakt door Google Fonts. Divi gebruikt standaard het Open Sans-lettertype voor alle tekst op uw pagina. U kunt ook de stijl van uw tekst aanpassen met opties voor vet, cursief, hoofdletters en onderstrepen.

Tekst lettergrootte

Hier kunt u de grootte van uw hoofdtekst aanpassen. U kunt de bereikschuifregelaar slepen om de grootte van uw tekst te vergroten of verkleinen, of u kunt de gewenste waarde voor de tekstgrootte rechtstreeks invoeren in het invoerveld rechts van de schuifregelaar. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.

Tekstkleur hoofdtekst

Standaard worden alle tekstkleuren in Divi weergegeven in wit of donkergrijs. Als u de kleur van uw tekst wilt wijzigen, kiest u met deze optie de gewenste kleur uit de kleurenkiezer.

Afstand van hoofdletters

Letterafstand is van invloed op de ruimte tussen elke letter. Als u de ruimte tussen elke letter in uw tekst wilt vergroten, gebruikt u de bereikschuifregelaar om de spatie aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.

body line divi module diapo.png

Hoogte van de lichaamslijn

De regelhoogte is van invloed op de ruimte tussen elke regel tekst in uw lichaam.Als u de ruimte tussen elke regel wilt vergroten, gebruikt u de bereikschuifregelaar om de ruimte aan te passen of voert u de gewenste afstand in het invoerveld in rechts van de cursor. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.

Gebruik aangepaste stijlen voor de knop

Als u deze optie inschakelt, worden verschillende instellingen voor het aanpassen van knoppen weergegeven die u kunt gebruiken om het uiterlijk van de knop van uw module te wijzigen.

Knop tekstgrootte

Deze instelling kan worden gebruikt om de grootte van de tekst in de knop te vergroten of te verkleinen. De knop past zich aan naarmate de tekst groter en kleiner wordt.

Knop tekstkleur

Standaard nemen de knoppen de accentkleur van uw thema aan, zoals gedefinieerd in de Theme Customizer. Met deze optie kunt u een aangepaste tekstkleur toewijzen aan de knop van deze module. Selecteer uw aangepaste kleur met behulp van de kleurkiezer om de knopkleur te wijzigen.

Knop achtergrondkleur

Standaard hebben de knoppen een transparante achtergrondkleur. Dit kan worden gewijzigd door de gewenste achtergrondkleur te selecteren in de kleurenkiezer.

Randbreedte-knop

Alle Divi-knoppen hebben standaard een rand van 2 px. Met deze instelling kan deze rand worden vergroot of verkleind. Randen kunnen worden verwijderd door de waarde 0 in te voeren.

Knooprandkleur

Standaard nemen de knopranden de accentkleur van uw thema over, zoals gedefinieerd in de Theme Customizer. Met deze optie kunt u een aangepaste randkleur toewijzen aan de knop van deze module. Selecteer uw aangepaste kleur met behulp van de kleurkiezer om de kleur van de knoprand te wijzigen.

Knoop de randradius

De straal van de rand heeft invloed op de rondheid van de hoeken van uw knoppen. Standaard hebben de knoppen in Divi een kleine randradius die de hoeken met 3 pixels rond maakt. U kunt deze waarde verlagen tot 0 om een ​​vierkante knop te maken of aanzienlijk verhogen om knoppen met ronde randen te maken.

configuratieknoppenmodule divi.png

Afstand van de letters van de knop

Letterafstand is van invloed op de ruimte tussen elke letter. Als u de ruimte tussen elke letter in uw knoptekst wilt vergroten, gebruikt u de bereikschuifregelaar om de spatie aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.

Knop lettertype

U kunt het lettertype van uw knoptekst wijzigen door het gewenste lettertype te selecteren in het vervolgkeuzemenu. Divi wordt geleverd met tientallen geweldige lettertypen, mogelijk gemaakt door Google Fonts. Divi gebruikt standaard het Open Sans-lettertype voor alle tekst op uw pagina. U kunt ook de stijl van uw tekst aanpassen met opties voor vet, cursief, hoofdletters en onderstrepen.

Voeg een knoppictogram toe

Uitgeschakeld, deze instelling verwijdert pictogrammen van uw knop. Standaard geven alle Divi-knoppen een pijlpictogram weer op de muisaanwijzer.

Knop pictogram

Als pictogrammen zijn ingeschakeld, kunt u deze instelling gebruiken om te kiezen welk pictogram u in uw knop wilt gebruiken. Divi heeft verschillende pictogrammen om uit te kiezen.

Kleur pictogram knop

Als u deze instelling aanpast, verandert de kleur van het pictogram dat op uw knop verschijnt. Standaard is de kleur van het pictogram hetzelfde als de tekstkleur van uw knop, maar met deze instelling kunt u de kleur onafhankelijk aanpassen.

Pictogramplaatsingstoets

U kunt ervoor kiezen om het pictogram van uw knop links of rechts van uw knop weer te geven.

Alleen pictogram weergeven wanneer u over de knop beweegt

Standaard worden de knoppictogrammen alleen weergegeven tijdens het zweven. Schakel deze instelling uit als u wilt dat het pictogram altijd wordt weergegeven.

Tekstkleur van de knop aanwijzen

Wanneer de knop door de muis van een bezoeker wordt bewogen, wordt deze kleur gebruikt. De kleur verandert van de basiskleur die is gedefinieerd in de vorige instellingen.

Knop achter achtergrondkleur

Wanneer de knop door de muis van een bezoeker wordt bewogen, wordt deze kleur gebruikt. De kleur verandert van de basiskleur die is gedefinieerd in de vorige instellingen.

Kleur op de randknop

Wanneer de knop door de muis van een bezoeker wordt bewogen, wordt deze kleur gebruikt. De kleur verandert van de basiskleur die is gedefinieerd in de vorige instellingen.

Knop Randstraal zweven

Wanneer de knop met de muis van een bezoeker wordt bewogen, wordt deze waarde gebruikt. De waarde zal veranderen van de basiswaarde die is gedefinieerd in de vorige instellingen.

Knop voor het markeren van afstanden van notities

Wanneer de knop met de muis van een bezoeker wordt bewogen, wordt deze waarde gebruikt. De waarde zal veranderen van de basiswaarde die is gedefinieerd in de vorige instellingen.

Geavanceerde cursoropties Fullwidth

doorloop sectie schuifmodule individueel element divi.png

Aangepaste CSS

Aangepaste CSS kan ook worden toegepast op de module en elk van de interne onderdelen van de module. In de sectie Aangepaste CSS vindt u een tekstveld waar u aangepaste CSS-stijlpagina's rechtstreeks aan elk element kunt toevoegen. CSS-vermeldingen in deze instellingen zijn al verpakt in stijltags. Voer dus gewoon de CSS-regels in, gescheiden door puntkomma's.

Alternatieve afbeeldingstekst

De alt-tekst biedt alle benodigde informatie als de afbeelding niet wordt geladen, niet correct wordt weergegeven of in een andere situatie waarin een gebruiker de afbeelding niet kan zien. Het maakt het ook mogelijk dat de afbeelding wordt gelezen en herkend door zoekmachines.

[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