De Divi Post Slider Module

Een postschuifmodule aan uw pagina toevoegen

Voordat je een berichtschuifmodule aan je pagina kunt toevoegen, moet je 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.

module schuifregelaar

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.

module schuifregelaar

Zoek de postschuifmodule 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 ‘berichtschuifregelaar’ kunt typen en vervolgens op enter kunt klikken om de module voor de schuifregelaar 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 berichtschuif toe aan een blogpagina om recente berichten te tonen

Voor dit voorbeeld ga ik een postslider toevoegen om de drie meest recente posts bovenaan een blogpagina te tonen. Elke dia toont de aanbevolen afbeelding van het bericht als een achtergrondafbeelding, de titel van het bericht en de meta van het bericht, evenals een knop Meer lezen.

module schuifregelaar

Voeg met Visual Builder een nieuwe standaardsectie toe aan de bovenkant van de blogpagina met een rij met volledige breedte (1 kolom). Plaats vervolgens de module Postschuif in uw nieuwe rij.

module schuifregelaar

Update onder Instellingen schuifregelaar de volgende opties:

Inhoud opties

Berichten nummer: 3

Ontwerpopties

Koptekstlettertype: Roboto (hoofdletters)
koptekst Lettertypegrootte: 50 px Tekstkleur
koptekst: # edef5d
Koptekst Letter Spacing: 1 px
Lichaamslettergrootte: 16
Body Letter Spacing: 1 px
Body Line Hoogte: 1,4 m
Meta Font: Open Sans, Cursief, Hoofdletter
Meta Font grootte: 18px
Meta tekst Kleur: #cccccc
Meta Line Lengte: 2em
Met aangepaste stijlen voor button: JA
toets Tekstgrootte: 26px
knoptekst color: # edef5d
button Border Breedte: 0px
button Icon:>
Only Show Icon op Hover voor button: NO

module schuifregelaar

Instellingen opslaan

Dat is het!

module schuifregelaar

Opties voor schuifregelaar na inhoud

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.

module schuifregelaar

Berichten nummer

Kies hoeveel berichten je in de schuifregelaar wilt weergeven.

Categorieën opnemen

Kies welke categorieën u in de schuifregelaar wilt opnemen.

Bestel bij

Hier kunt u de volgorde aanpassen waarin berichten worden weergegeven.

Knop tekst

Definieer de tekst die wordt weergegeven op de knop “Meer lezen”. standaard leeg laten (meer lezen)

Inhoudsweergave

Als u de volledige inhoud weergeeft, worden uw berichten in de schuifregelaar niet afgekapt. Als het fragment wordt weergegeven, wordt alleen de fragmenttekst weergegeven.

Gebruik na uittreksel indien gedefinieerd

Schakel deze optie uit als u handmatig gedefinieerde fragmenten wilt negeren en altijd automatisch wilt genereren.

Automatische uittrekslengte

Definieer de lengte van automatisch gegenereerde fragmenten. Standaard leeg laten (270)

Pijlen tonen

Met deze instelling worden de navigatiepijlen in- en uitgeschakeld.

Besturingselementen tonen

Met deze instelling worden de cirkelknoppen onder aan de schuifregelaar in- en uitgeschakeld.

Knop Meer weergeven weergeven

Met deze instelling wordt de knop Meer lezen in- en uitgeschakeld.

Post weergeven Meta

Met deze instelling wordt het metagedeelte in- en uitgeschakeld.

Toon uitgelichte afbeelding

Met deze instelling wordt de aanbevolen afbeelding in de schuifregelaar in- en uitgeschakeld.

Afbeelding plaatsing

Selecteer hoe u de aanbevolen afbeelding in dia’s wilt weergeven

Achtergrond kleur

Gebruik de kleurenkiezer om een ​​achtergrondkleur voor deze module te kiezen.

Achtergrond afbeelding

Upload de gewenste afbeelding of typ de URL in van de afbeelding die u als achtergrond voor de schuifregelaar wilt gebruiken.

Achtergrondafbeelding Positie

Kies de CSS-positionering van de achtergrondafbeelding voor elke dia.

Achtergrondafbeeldingsgrootte

Kies de CSS-achtergrondafbeeldingsgrootte die voor elke dia wordt gebruikt.

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.

Opties voor ontwerp van schuifregelaar

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.

module schuifregelaar

Verwijder Inner Shadow

Hiermee verwijdert u de CSS-binnenschaduw die standaard op alle dia’s is toegepast.

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.

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.

Gebruik Parallax-effect

Als u deze optie inschakelt, krijgen uw achtergrondafbeeldingen een vaste positie terwijl u bladert.

Parallax-methode

Hier kunt u de methode definiëren die wordt gebruikt voor het parallax-effect – CSS of True Parallax.

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.

Tekst kleur

Hier kunt u kiezen of uw tekst licht of donker is. Als u een dia met een donkere achtergrond hebt, kiest u lichte tekst. Als je
een lichte achtergrond hebt, gebruik dan donkere tekst.

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.

Meta-lettertype

U kunt het lettertype van uw metatekst 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.

Meta-lettergrootte

Hier kunt u de grootte van uw metatekst 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.

Meta-tekstkleur

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

Meta Letter Spacing

Letterspatiëring beïnvloedt de ruimte tussen elke letter. Als u de ruimte tussen elke letter in uw metatekst 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.

Meta Line Hoogte

Lijnhoogte heeft invloed op de ruimte tussen elke regel van uw metatekst. 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.

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.

Post Slider 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.

module schuifregelaar

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).

Uitschakelen Aan

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.