De Divi volle Breedte slider Module

Met Divi kunt u schuifregelaars in secties over de volledige breedte plaatsen, zodat uw schuifregelaars zich over de volledige breedte van de browser uitstrekken. Divi-schuifregelaars ondersteunen parallax-achtergronden en video-achtergronden!

schuifbreedte module

BEKIJK EEN LIVE DEMO VAN DEZE MODULE

Hoe u een schuifregelaar met volledige breedte aan uw pagina kunt toevoegen

Voordat u een schuifregelaar met volledige breedte 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 gebruiken tijdens het browsen op uw website aan de voorkant als u bent aangemeld bij uw WordPress-dashboard.

schuifbreedte module

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.

schuifbreedte module

Zoek de schuifregelaarmodule over de volledige breedte 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 het woord “schuifregelaar voor de volledige breedte” kunt typen en vervolgens op enter kunt klikken om de schuifregelaar voor de volledige breedte 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 .

Gebruiksvoorbeeld: voeg een heldensectie over de volledige schuifregelaar toe aan uw startpagina

Een schuifknop voor de volledige breedte is een geweldige manier om meerdere CTA’s boven de vouw op uw startpagina weer te geven. De combinatie van afbeeldingen en inhoud kan uw heldensectie echt een professionele uitstraling geven die opvalt.

Voor dit voorbeeld ga ik een schuifregelaar voor de volledige breedte toevoegen om te dienen als het belangrijkste heldengedeelte van een startpagina.

schuifbreedte module

Voeg met behulp van Visual Builder een sectie met de volledige breedte toe bovenaan uw webpagina. Plaats vervolgens de schuifregelaar Fullwidth in uw nieuwe sectie. Klik op het tabblad Inhoud van de schuifregelaar voor de volledige breedte op + Nieuw item toevoegen om uw eerste dia te maken.

schuifbreedte module

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

Inhoud opties

Rubriek : [voer de kop van de dia in]
Knoptekst : [voer de knoptekst in]
Inhoud : [voer de inhoud van de hoofddia in]
Knop URL : [voer de bestemmings-URL in voor de knop Dia]
Achtergrondafbeelding : [voer de afbeelding in die zal dienen als achtergrond voor de dia]

Ontwerpopties

Achtergrondoverlay gebruiken : JA
Achtergrondoverlay Kleur : rgba (0,0,0,0.2) * deze overlay maakt de achtergrondafbeelding iets donkerder om de tekst leesbaarder te maken.

schuifbreedte module

Bewaar dia-instellingen

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

schuifbreedte module

Dat is het. Voor dit voorbeeld neem ik slechts twee dia’s op, maar het resultaat is een effectieve schuifregelaar voor de volledige breedte van de held met meerdere aansporingen waarmee de gebruiker wordt aangespoord om op de knop te klikken voor meer informatie. Aangezien dit uw belangrijkste oproep voor actie voor uw website is, raad ik aan splitstests uit te voeren op uw schuifregelaar over de volledige breedte met Divi Leads en kijk welke beter converteert.

schuifbreedte module

Opties voor schuifregelaar voor volledige breedte

Op het tabblad inhoud vindt u alle inhoudselementen van de module, zoals tekst, afbeeldingen en pictogrammen. Alles wat bepaalt wat er in uw module verschijnt, vindt u altijd op dit tabblad.

schuifbreedte module

pijlen

Kies of u de linker en rechter navigatiepijlen wilt weergeven.

controls

Kies of u de cirkelknoppen / dia-indicatoren onderaan de schuifregelaar wilt weergeven.

Beheerderslabel

Dit zal het label van de module in de bouwer veranderen voor gemakkelijke identificatie. Wanneer u de WireFrame-weergave in Visual Builder gebruikt, verschijnen deze labels in het moduleblok in de Divi Builder-interface.

Fullwidth schuifregelaar ontwerpopties

Op het ontwerptabblad vindt u alle stijlopties van de module, zoals lettertypen, kleuren, grootte en afstand. Dit is het tabblad dat u zult gebruiken om het uiterlijk van uw module te wijzigen. Elke Divi-module heeft een lange lijst met ontwerpinstellingen die u kunt gebruiken om vrijwel alles te wijzigen.

schuifbreedte module

Verwijder Inner Shadow

Standaard wordt een binnenschaduw weergegeven binnen de schuifregelaar. Als u deze schaduw wilt uitschakelen, kunt u dit doen met deze instelling.

Parallax-effect

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

Koptekst lettertype

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

Koptekst lettergrootte

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

Tekstkleur koptekst

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

Koptekst Letter Spacing

Letterspatiëring beïnvloedt 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 meeteenheden, wat betekent dat u “px” of “em” kunt invoeren volgens uw maatwaarde om het eenheidstype te wijzigen.

Hoogte koptekst

Lijnhoogte heeft invloed op de ruimte tussen elke regel van uw koptekst. Als u de ruimte tussen elke regel wilt vergroten, gebruikt u de schuifregelaar voor bereik om de ruimte aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende meeteenheden, wat betekent dat u “px” of “em” kunt invoeren volgens uw maatwaarde om het eenheidstype te wijzigen.

Hoofdlettertype

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

Lettergrootte lichaam

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

Tekstkleur hoofdtekst

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

Body Letter Spacing

Letterspatiëring beïnvloedt de ruimte tussen elke letter. Als u de ruimte tussen elke letter in uw hoofdtekst 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 meeteenheden, wat betekent dat u “px” of “em” kunt invoeren volgens uw maatwaarde om het eenheidstype te wijzigen.

Lichaamslijnhoogte

Lijnhoogte beïnvloedt de ruimte tussen elke regel van uw hoofdtekst. 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 rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende meeteenheden, wat betekent dat u “px” of “em” kunt invoeren volgens uw maatwaarde om het eenheidstype te wijzigen.

Top vulling

Deze instelling regelt de binnenruimte tussen de bovenkant van de module en de tekstinhoud in de module. Als u deze ruimte wilt vergroten of verkleinen, voert u hier de gewenste waarde in. Als u bijvoorbeeld de ruimte en de totale grootte van de schuifregelaar wilt verminderen, kunt u een waarde van 100 px invoeren. U kunt ook een procentuele waarde invoeren, zoals 10%, om de hoogte dynamischer te maken.

Vulling onderaan

Deze instelling regelt de binnenruimte tussen de onderkant van de module en de tekstinhoud in de module. Als u deze ruimte wilt vergroten of verkleinen, voert u hier de gewenste waarde in. Als u bijvoorbeeld de ruimte en de totale grootte van de schuifregelaar wilt verminderen, kunt u een waarde van 100 px invoeren. U kunt ook een procentuele waarde invoeren, zoals 10%, om de hoogte dynamischer te maken.

Gebruik aangepaste stijlen voor knop

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

Knop Tekstgrootte

Deze instelling kan worden gebruikt om de tekst binnen de knop te vergroten of te verkleinen. De knop wordt geschaald naarmate de tekst wordt vergroot en verkleind.

Tekstkleur knop

Standaard nemen knoppen uw themaaccentkleur aan zoals gedefinieerd in de Thema-aanpassing. Met deze optie kunt u een aangepaste tekstkleur toewijzen aan de knop in deze module. Selecteer uw aangepaste kleur met de kleurenkiezer om de kleur van de knop te wijzigen.

Knop Achtergrondkleur

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

Knoprandbreedte

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

Knoprandkleur

Standaard nemen knopranden de kleur van het themaaccent aan zoals gedefinieerd in de Thema-aanpassing. Met deze optie kunt u een aangepaste randkleur toewijzen aan de knop in deze module. Selecteer uw aangepaste kleur met de kleurenkiezer om de randkleur van de knop te wijzigen.

Knop Randradius

Randradius beïnvloedt hoe afgerond de hoeken van uw knoppen zijn. Standaard hebben knoppen in Divi een kleine randradius die de hoeken met 3 pixels rond maakt. U kunt dit verlagen tot 0 om een ​​vierkante knop te maken of aanzienlijk verhogen om knoppen met ronde randen te maken.

Knop Letterafstand

Letterspatiëring beïnvloedt 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 meeteenheden, wat betekent dat u “px” of “em” kunt invoeren volgens uw maatwaarde om het eenheidstype te wijzigen.

Knop lettertype

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

Knoppictogram toevoegen

Uitgeschakeld deze instelling verwijdert pictogrammen van uw knop. Standaard geven alle Divi-knoppen een pijlpictogram weer bij zweven.

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.

Knop pictogram kleur

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

Plaatsing van knoppictogrammen

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

Alleen pictogram weergeven bij aanwijzen voor knop

Standaard worden knoppictogrammen alleen weergegeven bij zweven. Als u wilt dat het pictogram altijd verschijnt, schakelt u deze instelling uit.

Knop Zweef tekstkleur

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

Knop Aanwijzer achtergrondkleur

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

Knop Zweef de randkleur

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

Knop Beweeg Border Radius

Wanneer de knop met de muis van een bezoeker wordt verplaatst, wordt deze waarde gebruikt. De waarde gaat over van de basiswaarde die in de vorige instellingen is gedefinieerd.

Knop Hover Letter Spacing

Wanneer de knop met de muis van een bezoeker wordt verplaatst, wordt deze waarde gebruikt. De waarde gaat over van de basiswaarde die in de vorige instellingen is gedefinieerd.

Fullwidth-schuifregelaar Geavanceerde opties

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 de vele elementen van de module. U kunt ook aangepaste CSS-klassen en ID’s toepassen op de module, die kunnen worden gebruikt om de module aan te passen in het style.css-bestand van uw kindthema.

schuifbreedte module

CSS ID

Voer een optionele CSS-ID in die voor deze module moet worden gebruikt. Een ID kan worden gebruikt om aangepaste CSS-stijlen te maken of om koppelingen naar bepaalde delen van uw pagina te maken.

CSS-klasse

Voer optionele CSS-klassen in die voor deze module moeten worden gebruikt. Een CSS-klasse kan worden gebruikt om aangepaste CSS-stijlen 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 die u toevoegt aan uw pagina of uw website met behulp van de Divi Theme Options of Divi Builder-pagina-instellingen.

Aangepaste CSS

Aangepaste CSS kan ook worden toegepast op de module en alle interne elementen van de module. In het gedeelte Aangepaste CSS vindt u een tekstveld waar u aangepaste CSS rechtstreeks aan elk element kunt toevoegen. CSS-invoer in deze instellingen is al ingepakt in stijltags, dus u hoeft alleen CSS-regels in te voeren gescheiden door puntkomma’s.

Automatische animatie

Als u wilt dat de schuifregelaar automatisch schuift, zonder dat de bezoeker op de volgende knop hoeft te klikken, schakelt u deze optie in en past u indien nodig de rotatiesnelheid hieronder aan.

Automatische animatiesnelheid (in ms)

Hier kunt u aangeven hoe snel de schuifregelaar tussen elke dia vervaagt, als de optie ‘Automatische animatie’ hierboven is ingeschakeld. Hoe hoger het nummer, hoe langer de pauze tussen elke rotatie.

Doorgaan Automatisch schuiven bij aanwijzen

Als u dit inschakelt, kan het automatisch schuiven doorgaan met de muisaanwijzer.

Inhoud verbergen op mobiel

Naarmate het scherm kleiner wordt op mobiele apparaten, wordt schermvastgoed kostbaarder. Soms is het een goed idee om enkele minder belangrijke schuifregelaarelementen uit te schakelen om de schuifregelaar kleiner te maken en leesbaarder te maken. Als u deze instelling inschakelt, wordt de tekstinhoud van de schuifregelaar op mobiel verborgen.

CTA verbergen op mobiel

Naarmate het scherm kleiner wordt op mobiele apparaten, wordt schermvastgoed kostbaarder. Soms is het een goed idee om enkele minder belangrijke schuifregelaarelementen uit te schakelen om de schuifregelaar kleiner te maken en leesbaarder te maken. Als u deze instelling inschakelt, wordt de oproep tot actieknoppen van de schuifregelaar op mobiel verborgen.

Toon afbeelding / video op mobiel

Naarmate het scherm kleiner wordt op mobiele apparaten, wordt schermvastgoed kostbaarder. Soms is het een goed idee om enkele minder belangrijke schuifregelaarelementen uit te schakelen om de schuifregelaar kleiner te maken en leesbaarder te maken. Als u deze instelling inschakelt, worden dia-afbeeldingen en video’s op mobiele apparaten weergegeven (ze zijn standaard uitgeschakeld).

Zichtbaarheid

Met deze optie kunt u bepalen op welke apparaten uw module wordt weergegeven. U kunt ervoor kiezen om uw module afzonderlijk uit te schakelen op tablets, smartphones of desktopcomputers. Dit is handig als u verschillende modules op verschillende apparaten wilt gebruiken of als u het mobiele ontwerp wilt vereenvoudigen door bepaalde elementen van de pagina te verwijderen.

Individuele opties voor schuifregelaar voor de volledige breedte

schuifbreedte module

Heading

Definieer hier de titeltekst voor uw schuifregelaar.

Knop tekst

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

Inhoud

Voer hier de inhoud van uw schuifregelaar 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 in dit veld een geldige web-URL in om de bestemmingslink te definiëren.

Schuif afbeelding

Als u een dia-afbeelding toevoegt, verschijnt deze links van uw dia-tekst bovenop uw dia-achtergrond. Als u geen diaafbeelding opgeeft, blijft er een gecentreerde dia met alleen tekst over. Omdat de hoogte van elke dia wordt bepaald door de tekst, zal deze, als uw diaafbeelding lang genoeg is, onder de onderkant van de dia vallen, waardoor de afbeelding onderaan wordt uitgelijnd. Bekijk een voorbeeld hiervan op de derde dia op deze pagina .

Merk op dat de hoogte van een dia met een dia-afbeelding kan worden bepaald door een langere dia in de schuifregelaar, dus zorg ervoor dat uw dia-afbeelding lang genoeg is om te passen als u een uitgelijnde afbeelding wilt hebben. Om leesbaarheidsredenen worden diaafbeeldingen alleen weergegeven in schuifregelaars in ⅔ kolom, ¾ kolom of 1 kolombreedte. Ook worden dia-afbeeldingen niet weergegeven op browserbreedtes van minder dan 768 pixels. De breedten van diaafbeeldingen worden hieronder gedefinieerd. We raden aan dat uw diaafbeeldingen minstens zo breed zijn.

Schuif video

Als u een dia-video toevoegt, wordt deze links van uw dia-tekst boven op uw dia-achtergrond weergegeven. Als u geen dia-video opgeeft, blijft er een gecentreerde dia met alleen tekst over. Omdat de hoogte van elke dia wordt bepaald door de tekst, zal deze, als uw diaafbeelding lang genoeg is, onder de onderkant van de dia vallen, waardoor de afbeelding onderaan wordt uitgelijnd. Bekijk een voorbeeld hiervan op de derde dia op deze pagina .

Video onderbreken

Laat video pauzeren door andere spelers wanneer ze beginnen met spelen

Achtergrond afbeelding

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

De hoogte van een dia wordt bepaald door de hoeveelheid tekstinhoud die u toevoegt. Als u meerdere dia’s hebt, neemt de schuifregelaar de hoogte van de hoogste dia aan.

De breedte van uw schuifregelaar wordt bepaald door de breedte van de browser. Op basis van standaardschermformaten adviseren wij dat uw afbeeldingen minimaal 1280px bij 768px zijn.

Achtergrondafbeelding Positie

Standaard worden achtergrondafbeeldingen in het midden van de dia weergegeven. U kunt deze instelling gebruiken om de positie te wijzigen naar boven, onder, links, rechts of een van de vier hoeken van de dia.

Achtergrondafbeeldingsgrootte

Standaard worden achtergrondafbeeldingen proportioneel opgeschaald om ervoor te zorgen dat ze de hele dia vullen. U kunt deze optie echter gebruiken om het standaardgedrag te wijzigen. “Omslag” is het standaardgedrag, waardoor de afbeelding wordt geschaald om het gehele diagebied te bedekken. Met “Aanpassen” wordt ook de afbeelding geforceerd om het hele gebied te bedekken, maar het dwingt de hoogte en breedte van de afbeelding om overeen te komen met de hoogte en breedte van de schuifregelaar. Dit kan resulteren in een scheef beeld, maar het voorkomt bijsnijden van het beeld. Met “Werkelijke grootte” wordt de afbeelding helemaal niet geschaald en wordt deze in de oorspronkelijke grootte weergegeven.

Achtergrond kleur

Als u gewoon een effen kleurachtergrond voor uw dia wilt gebruiken, gebruikt u de kleurenkiezer om een ​​achtergrondkleur te definiëren.

Achtergrondvideo MP4

Alle video’s moeten worden geüpload in beide .MP4 .WEBM-indelingen om maximale compatibiliteit in alle browsers te garanderen. Upload hier de .MP4-versie. 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 definiëren om de beste resultaten te garanderen.

Achtergrondvideo WEBM

Alle video’s moeten worden geüpload in beide .MP4 .WEBM-indelingen om maximale compatibiliteit in alle browsers te garanderen. Upload hier de .WEBM-versies. 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 definiëren om de beste resultaten te garanderen.

Breedte achtergrondvideo

Om ervoor te zorgen dat video’s de juiste grootte hebben, moet u hier de exacte breedte (in pixels) van uw video invoeren.

Hoogte achtergrondvideo

Om ervoor te zorgen dat video’s de juiste grootte hebben, moet u hier de exacte hoogte (in pixels) van uw video invoeren.

Individuele ontwerpopties voor de volledige schuifregelaar

schuifbreedte module

Gebruik achtergrondoverlay

Indien ingeschakeld, wordt een aangepaste overlay-kleur toegevoegd boven uw achtergrondafbeelding en achter de inhoud van uw schuifregelaar.

Achtergrond overlay kleur

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

Gebruik tekstoverlay

Indien ingeschakeld, wordt een achtergrondkleur achter de schuiftekst toegevoegd om deze beter leesbaar te maken boven op achtergrondafbeeldingen.

Tekst overlay kleur

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

Tekstoverlay Border Radius

Randradius beïnvloedt hoe afgerond de hoeken van het tekstoverlayvak zijn. Standaard hebben de hoeken een licht afgeronde rand van 3 pixels. U kunt deze waarde verlagen tot 0 om een ​​rechthoekig vak te maken of de waarde verhogen om de hoeken nog completer te maken.

Pijlen Aangepaste kleur

Wanneer u over een schuifmodule zweeft, verschijnen er pijlen waarmee de bezoeker door elke dia kan navigeren. Standaard nemen deze pijlen de hoofdtekstkleur van de dia over. Met deze instelling kunt u echter een aangepaste kleur voor deze pijlen definiëren.

Dot Nav Aangepaste kleur

Binnen elke schuifregelaar verschijnen puntnavigatie-elementen onder de schuifregelaarinhoud. Met deze items kan de gebruiker door de schuifregelaar navigeren. Met deze kleurkiezer kunt u een aangepaste kleur definiëren die voor deze elementen moet worden gebruikt.

Schuif afbeelding verticale uitlijning

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

Tekst kleur

Als de achtergrond van uw dia donker is, moet de tekstkleur worden ingesteld op ‘Licht’. Andersom, 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 in het vervolgkeuzemenu te selecteren. Divi wordt geleverd met tientallen geweldige lettertypen, mogelijk gemaakt door Google Fonts. Divi gebruikt standaard het lettertype Open Sans voor alle tekst op uw pagina. U kunt ook de stijl van uw tekst aanpassen met de opties vet, cursief, hoofdletters en onderstrepen.

Koptekst lettergrootte

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

Tekstkleur koptekst

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

Koptekst Letter Spacing

Letterspatiëring beïnvloedt 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 meeteenheden, wat betekent dat u “px” of “em” kunt invoeren volgens uw maatwaarde om het eenheidstype te wijzigen.

Hoogte koptekst

Lijnhoogte heeft invloed op de ruimte tussen elke regel van uw koptekst. Als u de ruimte tussen elke regel wilt vergroten, gebruikt u de schuifregelaar voor bereik om de ruimte aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende meeteenheden, wat betekent dat u “px” of “em” kunt invoeren volgens uw maatwaarde om het eenheidstype te wijzigen.

Hoofdlettertype

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

Lettergrootte lichaam

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

Tekstkleur hoofdtekst

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

Body Letter Spacing

Letterspatiëring beïnvloedt de ruimte tussen elke letter. Als u de ruimte tussen elke letter in uw hoofdtekst 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 meeteenheden, wat betekent dat u “px” of “em” kunt invoeren volgens uw maatwaarde om het eenheidstype te wijzigen.

Lichaamslijnhoogte

Lijnhoogte beïnvloedt de ruimte tussen elke regel van uw hoofdtekst. 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 rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende meeteenheden, wat betekent dat u “px” of “em” kunt invoeren volgens uw maatwaarde om het eenheidstype te wijzigen.

Gebruik aangepaste stijlen voor knop

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

Knop Tekstgrootte

Deze instelling kan worden gebruikt om de tekst binnen de knop te vergroten of te verkleinen. De knop wordt geschaald naarmate de tekst wordt vergroot en verkleind.

Tekstkleur knop

Standaard nemen knoppen uw themaaccentkleur aan zoals gedefinieerd in de Thema-aanpassing. Met deze optie kunt u een aangepaste tekstkleur toewijzen aan de knop in deze module. Selecteer uw aangepaste kleur met de kleurenkiezer om de kleur van de knop te wijzigen.

Knop Achtergrondkleur

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

Knoprandbreedte

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

Knoprandkleur

Standaard nemen knopranden de kleur van het themaaccent aan zoals gedefinieerd in de Thema-aanpassing. Met deze optie kunt u een aangepaste randkleur toewijzen aan de knop in deze module. Selecteer uw aangepaste kleur met de kleurenkiezer om de randkleur van de knop te wijzigen.

Knop Randradius

Randradius beïnvloedt hoe afgerond de hoeken van uw knoppen zijn. Standaard hebben knoppen in Divi een kleine randradius die de hoeken met 3 pixels rond maakt. U kunt dit verlagen tot 0 om een ​​vierkante knop te maken of aanzienlijk verhogen om knoppen met ronde randen te maken.

Knop Letterafstand

Letterspatiëring beïnvloedt 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 meeteenheden, wat betekent dat u “px” of “em” kunt invoeren volgens uw maatwaarde om het eenheidstype te wijzigen.

Knop lettertype

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

Knoppictogram toevoegen

Uitgeschakeld deze instelling verwijdert pictogrammen van uw knop. Standaard geven alle Divi-knoppen een pijlpictogram weer bij zweven.

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.

Knop pictogram kleur

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

Plaatsing van knoppictogrammen

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

Alleen pictogram weergeven bij aanwijzen voor knop

Standaard worden knoppictogrammen alleen weergegeven bij zweven. Als u wilt dat het pictogram altijd verschijnt, schakelt u deze instelling uit.

Knop Zweef tekstkleur

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

Knop Aanwijzer achtergrondkleur

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

Knop Zweef de randkleur

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

Knop Beweeg Border Radius

Wanneer de knop met de muis van een bezoeker wordt verplaatst, wordt deze waarde gebruikt. De waarde gaat over van de basiswaarde die in de vorige instellingen is gedefinieerd.

Knop Hover Letter Spacing

Wanneer de knop met de muis van een bezoeker wordt verplaatst, wordt deze waarde gebruikt. De waarde gaat over van de basiswaarde die in de vorige instellingen is gedefinieerd.

Individuele Fullwidth schuifregelaar Geavanceerde opties

schuifbreedte module

Aangepaste CSS

Aangepaste CSS kan ook worden toegepast op de module en alle interne elementen van de module. In het gedeelte Aangepaste CSS vindt u een tekstveld waar u aangepaste CSS rechtstreeks aan elk element kunt toevoegen. CSS-invoer in deze instellingen is al ingepakt in stijltags, dus u hoeft alleen CSS-regels in te voeren gescheiden door puntkomma’s.

Afbeelding Alt-tekst

Alternatieve tekst biedt alle nodige informatie als de afbeelding niet wordt geladen, niet correct wordt weergegeven of in een andere situatie waarin een gebruiker de afbeelding niet kan bekijken. Hiermee kan de afbeelding ook worden gelezen en herkend door zoekmachines.