EverWeb heeft vier manieren om foto's na elkaar te tonen. Voor een diavoorstelling die vanzelf afspeelt over de breedte van een pagina gebruikt u de widget Afbeeldingsschuifregelaar (Image Slider). Voor dia's met een mix van foto's, tekst, knoppen of video op een responsieve pagina gebruikt u de widget Carrousel. Wilt u foto's laten wisselen achter uw tekst of in een willekeurig vak, gebruik dan Diavoorstelling vullen (Slide Show Fill). Moeten bezoekers al uw foto's als miniaturen zien en op een ervan klikken om een diavoorstelling op volledig scherm te openen, gebruik dan een galerij.
Wanneer u dit gebruikt
- Een hotel wil op de startpagina foto's van zijn kamers laten rouleren, die elk naar de pagina van die kamer linken: Afbeeldingsschuifregelaar.
- Een café wil een rij kaarten, elk met een foto, een regel tekst en een knop Bestellen, waar bezoekers doorheen kunnen vegen: Carrousel.
- Een schilder die overstapt van iWeb wil elke serie op een eigen pagina, met een diavoorstelling die start wanneer iemand op een schilderij klikt: een galerij.
Welke gebruikt u?
| Afbeeldingsschuifregelaar | Carrousel | Diavoorstelling vullen | Responsieve afbeeldingengalerij / Afbeeldingen gallerij | |
|---|---|---|---|---|
| Hoe het eruitziet | Eén foto tegelijk, eventueel met miniaturen eronder | Dia's met van alles: foto's, tekst, knoppen, video. Kan er meerdere tegelijk tonen | Foto's die wisselen achter een tekstvak, vorm, afbeelding of Container | Een raster van miniaturen. Een klik op een miniatuur opent een grote diavoorstelling over de pagina |
| Paginatype | Responsief en Gecentreerd | Gemaakt voor responsieve pagina's | Responsief en Gecentreerd | Responsieve afbeeldingengalerij voor responsieve pagina's, Afbeeldingen gallerij voor pagina's met Gecentreerd |
| Bijschriften | Een Ondertiteling bij elke foto | Voeg een tekstvak toe aan de dia | Tekst die u typt, blijft boven op elke foto staan | Een Ondertiteling bij elke foto |
| Een link op elke dia | Ja, URL: bij elke foto | Ja, elk object kan een eigen link hebben | Nee, het vak wisselt van foto, niet van link | Nee, een klik opent de grote foto |
| Speelt vanzelf af | Ja, staat standaard aan | Alleen als u Automatisch afspelen aanvinkt | Ja, met Automatisch dia's wijzigen | Zodra de diavoorstelling geopend is |
| Op telefoons | Wordt kleiner om te passen als Volle breedte aan staat | Wordt kleiner om te passen als Volle breedte aan staat | Volgt het formaat van het vak | Kolommen schikken zich opnieuw om te passen (Responsieve afbeeldingengalerij) |
Een Afbeeldingsschuifregelaar toevoegen
- Klik op het tabblad Widgets en sleep Afbeeldingsschuifregelaar naar de pagina. Zet hem op een responsieve pagina direct op de pagina of in een Container, niet in een responsieve rij.
- Wilt u hem van rand tot rand laten lopen, ga dan naar Details > Formaten en vink Volle breedte aan.
- Ga naar Details > Widget instellingen en voeg uw foto's toe met Kies….
- Selecteer elke foto in de lijst om de Ondertiteling te typen, de ALT tekst (een beschrijving voor zoekmachines en schermlezers) en eventueel een URL: waarnaar de foto linkt.
- Laat onder Opties voor diavoorstelling het vakje Diavoorstelling automatisch afspelen aangevinkt en stel Diavoorstellingsnelheid: in, in duizendsten van een seconde (4000 is 4 seconden). Kies een Overgang:, zoals fade of slide.
- Vink onder Verschijning het vakje Miniaturen weergeven uit voor een strakke banner, en kies een optie bij Afbeelding bijsnijden:. Fill (vullen) vult het kader en kan de randen afsnijden. Fit (passend maken) toont de hele foto.
- Vink onder Gedrag desgewenst Pauzeren bij zweven (pauzeren als de muis erboven is) of Klik om de afbeelding te vergroten aan.
Een Carrousel toevoegen
- Sleep Carrousel vanaf het tabblad Widgets naar een responsieve pagina.
- Sleep foto's, tekstvakken of containers erin. Elk daarvan is een dia. Voor een foto met tekst en een knop zet u die eerst samen in een containerkolom.
- Stel in Details > Widget instellingen, onder Slideropties, het volgende in: Slides per weergave (bij 0 bepaalt de Carrousel het zelf), een Slide-animatie zoals Fade, Coverflow of Cards, en Lus.
- Vink onder Instellingen automatisch afspelen het vakje Automatisch afspelen aan, stel Snelheid in (3000 is 3 seconden) en vink Stop on mouseover (stoppen als de muis erboven is) aan als u wilt dat hij pauzeert.
Diavoorstelling vullen gebruiken
- Selecteer een tekstvak, een rechthoekige vorm, een afbeelding of een Container.
- Ga naar Details > Vorm opties en kies in het menu Vulling de optie Diavoorstelling.
- Klik op Kies… en kies uw foto's. Bij een afbeelding voegt u ook de oorspronkelijke foto toe aan de lijst.
- Stel Animatie, Snelheid van diavoorstelling (ms) en Automatisch dia's wijzigen in. Laat Pijlen weergeven tijdens het werken op Altijd staan, zodat u door de dia's kunt bladeren. Zet het op Nooit als u klaar bent en geen pijlen wilt.
Galerijen
Sleep Responsieve afbeeldingengalerij (responsieve pagina's) of Afbeeldingen gallerij (pagina's met Gecentreerd) naar de pagina en voeg uw foto's toe. Een klik op een miniatuur opent een diavoorstelling die vanzelf kan afspelen, zoals "Play Slideshow" in iWeb. Zie Hoe open ik een pop-upvenster of vergroot ik een foto wanneer iemand klikt?
Uw foto's voorbereiden
- Maak ze allemaal even groot en met dezelfde verhouding, bijvoorbeeld allemaal 1600 x 900 pixels. Foto's met verschillende verhoudingen laten witte ruimtes achter of laten de diavoorstelling van hoogte veranderen.
- Houd elke foto onder 500KB, anders laadt de diavoorstelling traag op telefoons. Met een gratis hulpmiddel zoals squoosh.app maakt u ze kleiner.
- Vink Geoptimaliseerde afbeeldingen exporteren aan in File > Bewerk publicatie instellingen (menu Archief), zodat EverWeb kleinere WebP-versies publiceert.
Veelvoorkomende problemen
| Wat u ziet | Wat u doet |
|---|---|
| Foto's veranderen van formaat of laten witte ruimte achter | Maak ze allemaal even groot in pixels. Zet in een Afbeeldingsschuifregelaar Afbeelding bijsnijden: op Fill |
| Een rij kleine foto's onder de slider | Vink Miniaturen weergeven uit |
| De Carrousel beweegt niet vanzelf | Automatisch afspelen staat standaard uit. Vink het aan onder Instellingen automatisch afspelen |
| U wilt foto's zonder te stoppen voorbij laten schuiven | Geen van de ingebouwde diavoorstellingen doet dit: elke diavoorstelling pauzeert bij elke dia |
| Andere foto's zijn zichtbaar achter de grote foto in een galerij | Gebruik de Responsieve afbeeldingengalerij en stel Achtergrondkleur diavoorstelling in |
| Te breed op een telefoon | Vink Volle breedte aan in Details > Formaten, en haal hem uit een eventuele responsieve rij |
Gerelateerde artikelen
- Hoe open ik een pop-upvenster of vergroot ik een foto wanneer iemand klikt?
- Een portfoliowebsite voor fotografie of kunst bouwen met EverWeb
- Een responsieve pagina bouwen met Containers, zodat alles netjes onder elkaar komt op een telefoon
- Tekst leesbaar maken op een foto: overlays, maskers en opties voor afbeeldingsvulling