Content Slider

Aan de slag met de Content Slider

De Content Slider is het ideale element om jouw content gegroepeerd en overzichtelijk op je pagina te plaatsen. Dit element zorgt ervoor dat je pagina compact blijft en werkt perfect voor content verdeeld in stappen of categorieën. De bezoeker heeft volledig zelf in de hand of de ‘volgende’ slide met content wordt bekeken. Natuurlijk ook perfect in te zetten als fotogalerij.

Wat is de Content Slider?

De Content Slider is een slider waarvan je de inhoud zelf kunt bepalen. Dit kan tekst zijn, afbeeldingen, video of een combinatie ervan. Het doel van de content slider hangt af van de inhoud. De slider toepassen als fotogalerij is gericht op sfeer en beleving, een invulling als stappenplan of uitleg van diverse features is erop gericht je bezoeker te informeren.

De Content Slider kun je zien als een soort Powerpoint presentatie, waarin je horizontaal door slides van je presentatie navigeert. Het aantal zichtbare slides op je pagina kun je zelf instellen.

Waarom is de Content Slider zo handig?

De slider is een zeer nuttig blok als je bezoekers heel specifiek wil informeren, maar je pagina niet zo lang wilt maken. Aangezien de inhoud van je slides deels verborgen is dien je goed na te denken over de toepassing. Gebruik de slider – bij informatieve toepassing – dan ook bij gecategoriseerde inhoud of een stappenplan, zodat al die informatie gebundeld staat. Is een bezoeker oprecht geïnteresseerd in de inhoud, dan kan de bezoeker zelf kiezen om meer slides te bekijken. Is de bezoeker niet geïnteresseerd in de inhoud, dan kan hij/zij snel verder scrollen naar secties op de pagina die wel waardevol zijn voor hem/haar.

De voordelen van Content Slider

Beperk de lengte van jouw pagina’s om de gebruikerservaring zo goed mogelijk te maken. Een bezoeker zal interacties uitvoeren op de onderdelen die hij/zij waardevol vindt en jouw pagina blijft beknopt.

Voor het toevoegen van een slider kies je het blok Content slider block. Na het plaatsen van dit blok zie je een overkoepelend Content Slider block met daarbinnen een kader genaamd Content slide. Een content slide is het gebied waarin je jouw eigen content kunt plaatsen. Enkel de inhoud van deze slide wordt (in de basis) als eerste slide getoond. We hebben de eerste slide vast gevuld met wat placeholder elementen. Heb je die niet nodig, dan kun je ze gewoon verwijderen.

Wat voor type sliders kan ik maken?

• Een slider met enkel tekst, vaak gecategoriseerd of verdeeld in stappen
• Een afbeelding- en/of videoslider, sfeervol en mooi om toe te passen als galerij
• Een combinatie van zowel tekst als afbeeldingen, met behulp van een kolomweergave of het Media & tekst blok
• Elke andere toepassing die je kunt bedenken waarin je je content wilt opdelen

Als je een keuze hebt gemaakt wat voor slider je wilt opzetten, is het handig te beginnen met de complete opmaak van één slide. Kies je voor een afbeeldingslider? Zorg dan dat je afbeeldingen hetzelfde formaat hebben of gebruik de optie Bijsnijden (in het menu van het Afbeelding blok) om ze allemaal te voorzien van dezelfde verhouding. De slider reageert namelijk automatisch op de hoogte van de geplaatst inhoud. Als de afbeeldingen allemaal hetzelfde van verhouding zijn zul je geen verspringing in je pagina zien.

Pas je de slider toe met teksten, eventueel in combinatie met afbeeldingen? Zorg ervoor dat je ook nu je eerste slide naar wens opzet. Op die manier heb je een goede basis om de volgende slides uit te werken.

Hoe voeg ik meerdere slides toe?

Als je de eerste slide hebt gevuld selecteer je het kader van je Content slide of je selecteert je Content slide in je document overzicht links. Open het menu van dit blok en kies voor dupliceren of gebruik de sneltoets ⌘⇧D (macOS) of Ctrl⇧D (Windows). Herhaal deze stap tot je het gewenste aantal slides hebt. Verander de content van elke slide naar wens.

Nu je de slider hebt opgemaakt en gevuld met het aantal gewenste slides is het tijd om de slider in te stellen. Automatische hoogte van de slider staat aan. Dit betekent dat de slider zich aanpast aan de hoogte van de inhoud van de slide. Je kunt alle slides op dezelfde hoogte opmaken of je vinkt deze optie uit en kunt zelf een hoogte instellen. Afhankelijk van je opmaak moet je er rekening mee houden dat sommige content in dat geval buiten het zichtbare gedeelte van je slide valt.

Slides per pagina

Je kunt het aantal slides dat direct zichtbaar is op je pagina instellen. In plaats van één slide kun je bijvoorbeeld twee of drie slides instellen. De breedte van de slides past zich automatisch aan aan de breedte van jouw slider. De ruimte tussen de slides, die standaard op 30px staat, zul je met name zien als je meer dan één slide hebt ingesteld. Wil je een slider met meer dan één zichtbare slide tegelijk? Lees dan de volgende alinea goed door.

Slider voor mobiel en desktop

De standaard instellingen van je slider gelden voor mobiel én desktop. Als je meer dan één slide per pagina hebt ingesteld geldt dit dus ook voor mobiel en dat is (meestal) niet wenselijk. Om je slider toch goed op te maken laat je de basisinstellingen staan op 1 slide per pagina. Voeg bij Breakpoints het aantal slides toe dat je zichtbaar wilt hebben voor verschillende devices. Het breakpoint is de breedte in pixels vanaf waar deze weergave wordt geactiveerd. De eerste ingevuld? Klik op Rij eronder om een volgend breakpoint in te stellen. Hieronder een voorbeeldschema voor je instellingen per device. De tussenruimte kun je naar eigen voorkeur instellen, maar laat geen velden leeg.

Breakpoint	Slides per pagina
Standaard	1
768 (tablet)	2
1024 (desktop)	3 tot 5

Overige instellingen

Zet Gecentreerde slides aan als je jouw active slide wilt centreren. Dit werkt enkel als je meer dan één slide per pagina hebt ingesteld. De volgende slide wordt dan deels zichtbaar, net als de vorige slide.

Wil je dat de slider automatisch naar de volgende slide gaat zonder handeling van je bezoeker? Zet Autoplay aan en voorzie deze van het aantal seconden waarop de slider naar de volgende zal gaan.

Tip! Klik altijd op Loop aanzetten, zodat je bezoeker bij de laatste slide automatisch terugkeert naar de eerste. Je hoeft dan niet op het pijltje links te klikken als je bij de laatste slide bent.

De laadsnelheid van je pagina optimaliseren? Activeer dan Lazy loading. Alleen de zichtbare content van je pagina zal worden ingeladen. Overige content wordt pas ingeladen op het moment dat je op de volgende slide klikt.

Als laatste kun je kiezen om Paginatie en Navigatie aan te zetten. Paginatie toont onder de slider een indicatie van het aantal slides en met navigatie zet je de knoppen aan de zijkant aan, zodat je zelf kunt kiezen om naar de volgende of vorige slide te gaan. Slepen is ook mogelijk binnen de slider, maar het is wel aan te raden om Navigatie altijd aan te zetten.