Een nieuwe fotoslider toevoegen of foto's in de slider aanpassen
Ga naar de pagina waarop je de fotoslider wilt toevoegen of aanpassen en zorg dat de pagina in bewerk-modus staat. Bovenin de paarse balk kun je klikken op TERUG NAAR BEWERKEN om de pagina in bewerk-modus te zetten. Je ziet nu de hulplijnen van de secties op de pagina. Rechts van elk content-blok wordt de bewerk-knop zichtbaar wanneer je met de muis over het betreffende blok gaat.
Een contentblok staat altijd in een sectie. Als je begonnen bent met een lege pagina voeg dan eerst een sectie toe om daarna een fotoslider toe te kunnen voegen. Lees hier meer over secties en hoe je die toevoegt.
Slick slider
Klik binnen de sectie op + Add block en kies Slick slider
Bij een bestaande fotoslider klik je op en dan op instellen
Open de tab met de gewenste fotoverhouding of open de juiste tab om bestaande foto's te vervangen. In onderstaand voorbeeld kiezen we voor een 16:6 verhouding, de foto's die je toevoegt worden in deze verhouding getoond in de slider.
Onder de tab met de gewenste fotoverhouding klik je op de paarse knop Media toevoegen
De Media manager wordt geopend, kies een bestaand beeld of upload nieuw beeld in de Media manager
Meer weten over de Media manager en het uploaden en instellen van nieuw beeld? Kijk op de pagina Media manager
De geüploade foto's zullen in de gekozen fotoverhouding worden getoond, je hoeft ze niet zelf op de juiste maat te maken
Bij een een fotoverhouding die breed en heel laag is zal een deel van de foto aan de boven- en onderkant wegvallen
Als de foto's zijn toegevoegd kun je de instellingen van de slider instellen of aanpassen onder de tab Slider details.
Instellen van de slider details
SlidesToShow / Slides weergeven: hoeveel slides wil je tegelijk op de pagina zien? Dit kan 1 foto zijn (bekijk voorbeeld), maar ook bijv. 3 naast elkaar (bekijk voorbeeld)
SlidesToScroll / Slides scroll per keer: hoeveel slides wil je per keer laten opschuiven. Wanneer je maar 1 foto tegelijk weergeeft zal je ook maar 1 foto willen opschuiven. Als je kiest voor 3 foto's tegelijk weergeven kun je ook 1 foto opschuiven dan verdwijnt er steeds 1 foto en komt er 1 nieuwe foto bij. Als je per keer 3 foto's opschuift worden in een keer 3 nieuwe foto's getoond.
Slider breedte
Volle breedte: Laat Slider breedte op 100% staan als je de foto op volle breedte wilt tonen. (kan met en zonder optie fade aangevinkt).
Witruimte aan de zijkant: wil je de slider smaller met ruimte aan de zijkanten, stel dit dan in onder de tab Instellingen bij marge links en marge rechts (kan met en zonder optie fade aangevinkt).
Gecentreerd met preview: Gebruik je een minder brede Slider breedte, bijv. 96%, vink dan Center Modus aan om de slider te centreren. Door de kleinere afmeting zie je nu aan de zijkanten een kleine stukje van de volgende foto. (kan niet met optie fade aangevinkt).)
Meerdere foto's met kleine tussenruimte: Heb je bij SlidesToShow ingesteld dat je meerdere foto's naast elkaar wilt tonen dan kun je de Slider breedte op bijv. 99% zetten om een kleine witruimte tussen de foto's te creeëren. (kan niet met optie fade aangevinkt).
Slider breedte 100% - fade aan- of uitgevinkt
Slider breedte 100% - fade aan- of uitgevinkt - Bij tab Instellingen margin links en rechts 10%
Slider hoogte- Laat dit op auto staan dan blijven de foto's in verhouding.
Speed - de snelheid van het overgangs-effect naar de volgende foto
Dots of pijlen - navigeer je liever door de foto's met de pijlen links en rechts of door onder de foto's op de bolletjes te klikken? Beide tonen kan ook. Je kunt ook geen van beide tonen, zorg dan dat autoplay aangevinkt staat.
Center modus - dit centreert de slider wanneer je bij Slider breedte minder dan 100% hebt ingevuld en toont een stukje van de vorige en volgende foto aan de zijkanten
Autoplay - laat de slider automatisch naar de volgende foto overgaan. Wanneer je dit uitvinkt heb je de pijlen of de dots nodig om door de foto's te navigeren.
Autoplay speed- de tijd voordat de volgende foto getoond wordt wanneer Autoplay is ingeschakeld
Fade - met deze optie aangevinkt vloeien de foto's in elkaar over - fade effect
met de optie uitgevinkt schuift de nieuwe foto vanaf de rechterkant in beeld - slide effect.
Het fade effect (fade aangevinkt) is alleen mogelijk met SlidesToShow 1, met meerdere foto's gebruikt je het slide-effect (fade uitgevinkt)
Infinite - aangevinkt zorgt dit dat na de laatste de eerste weer wordt getoond.
Uitgevinkt wordt na de laatste foto de een na laatste getoond en gaat zo terug tot de eerste foto.
Slider onderschrift - de tekst die in de media manager bij de alternatieve tekst in ingevuld wordt onder de foto getoond
Blok instellingen
De instellingen in de tabs Instellingen, Animatie en Geavanceerd zijn hetzelfde als in de andere contentblokken. Kijk voor meer informatie over deze blok instellingen op de pagina Pagina bewerken
Responsive instellingen
Als je bij de slider details hebt ingesteld dat je meerdere foto's wilt tonen bijv. 3 naast elkaar, dan zijn de 3 foto's op desktop formaat goed te zien, maar op het scherm van een mobiele telefoon worden de foto's erg klein. Je kunt dan instellen dat je er ipv 3 maar 2 of 1 naast elkaar getoond wilt hebben.
In het editscherm onder de tab Geavanceerd kun je aanpassingen doen voor het aantal foto's dat in responsive weergave wordt getoond.
Je kunt per schermbreedte aangeven hoeveel afbeeldingen er getoond moeten worden, voor de verschillende breedtes heb je steeds de opties:
SlidesRoShow: / hoeveel foto's moeten getoond worden
SlidesRoScroll: / hoeveel foto's wil je tegelijk verplaatsen
Masonry
Een masonry is een raster waarin foto's worden geplaatst. Het raster heeft geen gelijke indeling maar past zich aan aan de inhoud. De foto's hoeven niet van dezelfde afmeting te zijn, het maakt het zelfs speelser door het gebruik van verschillende formaten. Je kunt aangeven hoeveel foto's je horizontaal wilt tonen, vervolgens vult het systeem de beschikbare ruimte met de foto's. (Bekijk voorbeeld).
Door op een foto te klikken wordt een vergroting geopend. Wil je een onderschrift bij een foto zorg dan dat bij het uploaden van de foto in de Media manager een alternatieve tekst is ingevuld, deze wordt gebruikt als onderschrift. Lees op deze pagina meer over de alternatieve tekst in de Media manager
Masonry foto collage
Een nieuwe masonry toevoegen of foto's in een bestaande masonry aanpassen
Zet de pagina in bewerk-modus en zorg dat er een sectie op de pagina staat waarin je de masonry toe kunt voegen. Lees aan het begin van deze pagina meer hierover als je hier nog niet bekend mee bent.
Klik binnen de sectie op + Add block en kies Masonry
Bij een bestaande Masonry klik je op en dan op instellen
Kies hoeveel foto's je horizontaal naast elkaar wilt tonen op verschillende schermformaten; op een klein scherm wil je er waarschijnlijk minder als op een groot scherm
Voeg een afbeelding toe via de paarse knop Media toevoegen.
Via de Media manager kies je bestaand beeld of upload nieuw beeld.
Meer weten over de Media manager en het uploaden en instellen van nieuw beeld? Kijk op de pagina Media manager
Blok instellingen
De instellingen in de tabs Instellingen, Animatie en Geavanceerd zijn hetzelfde als in de andere content-blokken. Kijk voor meer informatie over deze blok instellingen op de pagina Pagina bewerken
Masonry met 1 foto
Het kan soms goed zijn als je een kleine afbeelding op de pagina kunt vergroten om deze beter te kunnen bekijken. Omdat de foto in een masonry aanklikbaar is voor een vergroting kun je ook een masonry maken met maar 1 foto erin.
Voeg een masonry blok toe zoals hierboven beschreven
Zet de instellingen voor het aantal foto's op alle schermen op 1
Voeg eventueel een teksblok toe met een uitlegtekstje onder de foto, zie voorbeeld hiernaast.