EverWeb propose quatre façons de montrer des photos les unes après les autres. Pour un diaporama qui défile tout seul sur toute une page, utilisez le widget Curseur d'images (Image Slider). Pour des diapositives qui mélangent photos, texte, boutons ou vidéo sur une page adaptative, utilisez le widget Carrousel. Pour que des photos changent derrière votre texte ou à l'intérieur d'un cadre, utilisez un Remplissage de diaporama. Si les visiteurs doivent voir toutes vos photos sous forme de miniatures et cliquer sur l'une d'elles pour ouvrir un diaporama en plein écran, utilisez une galerie.
Quand l'utiliser
- Un hôtel veut que sa page d'accueil fasse défiler des photos de ses chambres, chacune menant à la page de la chambre : Curseur d'images.
- Un café veut une rangée de cartes, chacune avec une photo, une ligne de texte et un bouton Commander, que les visiteurs peuvent faire défiler du doigt : Carrousel.
- Un peintre qui quitte iWeb veut chaque série sur sa propre page, avec un diaporama qui démarre quand quelqu'un clique sur un tableau : une galerie.
Lequel utiliser
| Curseur d'images | Carrousel | Remplissage de diaporama | Galerie d'images réactives / Galerie d'images | |
|---|---|---|---|---|
| Aspect | Une photo à la fois, avec des miniatures en option en dessous | Des diapositives de tout type : photos, texte, boutons, vidéo. Peut en afficher plusieurs à la fois | Des photos qui changent derrière une zone de texte, une forme, une image ou un conteneur | Une grille de miniatures. Un clic sur l'une d'elles ouvre un grand diaporama par-dessus la page |
| Type de page | Adaptative et Mise en page centrée | Conçu pour les pages adaptatives | Adaptative et Mise en page centrée | Galerie d'images réactives pour les pages adaptatives, Galerie d'images pour la Mise en page centrée |
| Légendes | Une Légende pour chaque photo | Ajoutez une zone de texte à la diapositive | Le texte que vous tapez reste au-dessus de chaque photo | Une Légende pour chaque photo |
| Un lien sur chaque diapositive | Oui, une URL : pour chaque photo | Oui, chaque objet peut avoir son propre lien | Non, le cadre change de photo, pas de lien | Non, un clic ouvre la photo en grand |
| Défile tout seul | Oui, activé au départ | Seulement si vous cochez Lecture automatique | Oui, avec Changer les diapositives automatiquement | Une fois le diaporama ouvert |
| Sur les téléphones | Se réduit pour tenir dans l'écran avec Pleine largeur | Se réduit pour tenir dans l'écran avec Pleine largeur | Suit la taille du cadre | Les colonnes se réorganisent pour tenir dans l'écran (Galerie d'images réactives) |
Ajouter un Curseur d'images
- Cliquez sur l'onglet Widgets et faites glisser Curseur d'images sur la page. Sur une page adaptative, placez-le directement sur la page ou dans un conteneur, pas dans une ligne dynamique.
- Pour qu'il s'étende d'un bord à l'autre, allez dans Inspecteur > Mesures et cochez Pleine largeur.
- Allez dans Inspecteur > Réglages des widgets et ajoutez vos photos avec Choisir….
- Sélectionnez chaque photo dans la liste pour saisir sa Légende, son Texte ALT (une description pour les moteurs de recherche et les lecteurs d'écran) et, si vous le souhaitez, une URL : vers laquelle elle renvoie.
- Sous Options du diaporama, laissez Lecture automatique du diaporama cochée et réglez Vitesse du diaporama : en millièmes de seconde (4000 correspond à 4 secondes). Choisissez une Transition :, par exemple un fondu ou un glissement.
- Sous Apparence, décochez Afficher les miniatures pour une bannière épurée, et choisissez une option dans Recadrage de l'image :. Fill (remplir) remplit le cadre et peut rogner les bords. Fit (ajuster) affiche la photo entière.
- Sous Comportement, cochez Pause au survol ou Cliquez pour agrandir l'image si vous le souhaitez.
Ajouter un Carrousel
- Faites glisser Carrousel depuis l'onglet Widgets sur une page adaptative.
- Faites-y glisser des photos, des zones de texte ou des conteneurs. Chacun devient une diapositive. Pour une photo accompagnée de texte et d'un bouton, placez-les d'abord dans une colonne de conteneur.
- Dans Inspecteur > Réglages des widgets, sous Options du carrousel, réglez Diapositives par vue (0 laisse le Carrousel décider), une Animation de diapositive comme Fade, Coverflow ou Cards, et Boucle.
- Sous Réglages de lecture automatique, cochez Lecture automatique, réglez Vitesse (3000 correspond à 3 secondes) et cochez Stop on mouseover (arrêter au survol de la souris) si vous voulez qu'il fasse une pause.
Utiliser un Remplissage de diaporama
- Sélectionnez une zone de texte, un rectangle, une image ou un conteneur.
- Allez dans Inspecteur > Options de forme, et dans le menu Remplissage, choisissez Diaporama.
- Cliquez sur Choisir… et sélectionnez vos photos. Sur une image, ajoutez aussi la photo d'origine à la liste.
- Réglez Animation, Vitesse du diaporama (ms) et Changer les diapositives automatiquement. Pendant que vous travaillez, laissez Afficher les flèches sur Toujours pour pouvoir passer d'une diapositive à l'autre. Une fois terminé, réglez-le sur Jamais si vous ne voulez pas de flèches.
Galeries
Faites glisser Galerie d'images réactives (pages adaptatives) ou Galerie d'images (pages en Mise en page centrée) sur la page et ajoutez vos photos. Un clic sur une miniature ouvre un diaporama qui peut défiler tout seul, comme le « Play Slideshow » d'iWeb. Consultez Comment ouvrir une fenêtre popup ou agrandir une photo quand on clique dessus ?
Préparer vos photos
- Donnez-leur toutes la même forme et la même taille, par exemple 1600 x 900 pixels. Des photos de formes différentes laissent des espaces blancs ou font changer la hauteur du diaporama.
- Gardez chacune sous les 500 Ko, sinon le diaporama se charge lentement sur les téléphones. Un outil gratuit comme squoosh.app permet de les alléger.
- Cochez Exporter des images optimisées dans Fichier > Modifier les paramètres de publication pour qu'EverWeb publie des copies WebP plus légères.
Problèmes fréquents
| Ce que vous voyez | Que faire |
|---|---|
| Les photos changent de taille ou laissent des espaces blancs | Donnez-leur toutes la même taille en pixels. Dans un Curseur d'images, réglez Recadrage de l'image : sur Fill |
| Une rangée de petites photos sous le curseur | Décochez Afficher les miniatures |
| Le Carrousel ne défile pas tout seul | Lecture automatique est désactivée au départ. Cochez-la sous Réglages de lecture automatique |
| Vous voulez que les photos défilent sans s'arrêter | Aucun des diaporamas intégrés ne le fait : chacun marque une pause sur chaque diapositive |
| D'autres photos apparaissent derrière la grande photo dans une galerie | Utilisez la Galerie d'images réactives et réglez Couleur d'arrière-plan du diaporama |
| Trop large sur un téléphone | Cochez Pleine largeur dans Inspecteur > Mesures, et sortez-le de toute ligne dynamique |
Articles connexes
- Comment ouvrir une fenêtre popup ou agrandir une photo quand on clique dessus ?
- Créer un site Web de portfolio de photographie ou d'art avec EverWeb
- Créer une page adaptative avec des conteneurs pour qu'elle s'empile proprement sur un téléphone
- Rendre un texte lisible sur une photo : superpositions, masques et options de remplissage d'image