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!
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
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
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.
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.
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.
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
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
- 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
Hallo,
Heel erg bedankt voor deze tutorial. Ik moet bekennen dat ik volledig de weg kwijt ben en niet iets heb gedaan dat van bijbelse eenvoud zou moeten zijn:
verwijder een (of meer) extra dia in mijn divi-diavoorstelling
Ik heb natuurlijk gezien dat in de lijst met dia's van een gemaakte diavoorstelling, rechts van elke regel die overeenkomt met een dia, het pictogram van een "prullenbak" en drie kleine stippen vinden: maar klikken op de prullenbak... voegt een kopie van de huidige dia toe! en het contextmenu bevat geen enkele regel die verwijdering mogelijk maakt.
Ik ontdekte ergens (ik weet niet meer waar) dat ik "mezelf op de te verwijderen dia moest plaatsen" (zorg ervoor dat het op het scherm stond), maar dat veranderde niets.
Ik werk op Mac in Mojave-systeem. En ik probeerde verbinding te maken met WordPress in Firefox zoals in Chrome
Heel erg bedankt voor alle hulp die je kunt ... en sorry voor zo'n domme vraag
Dag
Bedankt voor deze tutorial, het is echt compleet!
Weet u of het mogelijk is om de animatie uit de tekst te wijzigen of zelfs te verwijderen? want niet standaard gaat het van onder naar boven op de achtergrondafbeeldingen en het is niet erg mooi vind ik.
Dankjewel
Hallo Olivier,
Kijk je in de instellingen van de betreffende tekst?
Hallo,
Is het mogelijk dat klikken op een schuifknop de URL-link omleidt naar een nieuw tabblad?
Bij voorbaat dank voor uw lichten!
Hallo ! bedankt voor je artikel. mijn probleem is dat de achtergrondvideo niet op mobiel wordt weergegeven, mijn klant wilde het absoluut. Ik dacht dat ik mijn antwoord had gevonden, want volgens uw artikel is er in "Geavanceerd" de mogelijkheid om de video's op mobiel te activeren die standaard gedeactiveerd zijn. maar ik vond deze mogelijkheid niet op mijn divi. Bedankt voor je antwoord…
Yanis
Hallo Yanis,
Is je Divi up-to-date?