Lisez cet article pour découvrir comment ajouter, configurer et tester les widgets Diaporama plein écran et Diaporama de vignettes dans Adobe Muse.

Remarque :

Aucune nouvelle fonctionnalité n’est plus ajoutée à Adobe Muse et le support prendra fin le 26 mars 2020. Pour plus d’informations et pour obtenir de l’aide, reportez-vous à la page de fin de service Adobe Muse.

Dans Adobe Muse, les widgets de diaporama sont des widgets interactifs qui fonctionnent exclusivement avec des images. Comme avec le widget Panneau à onglets, lorsque l’utilisateur clique sur un Conteneur de vignettes, la version de l’image principale correspondante est affichée dans un autre conteneur plus grand sur la page.

Adobe Muse prend en charge les types de widgets de diaporama suivants :

  • Standard : ce widget se compose d’un grand conteneur dans lequel vous pouvez ajouter des images, sous lesquelles vous pouvez ajouter une légende. Le bouton Précédent, le bouton Suivant et le numéro de la diapositive actuelle sont également disponibles dans la zone de la légende.
  • Vierge : widget similaire au diaporama Standard. Cependant, dans ce widget, les conteneurs sont vides.
  • Plein écran : ce widget s’affiche en mode plein écran lorsque vous le faites glisser pour le déposer dans la zone de travail Conception. Par défaut, un petit conteneur dans le coin supérieur gauche de la page affiche le bouton Précédent, le bouton Suivant et le numéro de la diapositive en cours.
  • Cadre lumineux : ce widget estompe le reste de la page, à l’exception de l’élément du diaporama ou de la galerie affiché sur la page. Le widget Cadre lumineux est l’un des widgets de diaporama les plus utilisés, car l’attention de l’utilisateur est immédiatement portée sur la galerie active.
  • Vignettes : ce widget est semblable à un widget de composition, avec des vignettes situées sur la gauche de la galerie. Lorsqu’un utilisateur clique sur la vignette, l’image correspondante s’affiche dans la galerie.

Dans l’article suivant, nous allons créer une galerie de photos qui affiche plusieurs vignettes le long de la partie supérieure avec une seule image plus grande affichée en dessous. A l’aide du panneau Options, vous pouvez contrôler la façon dont la galerie de photos se comporte et s’affiche. Vous pouvez également appliquer des paramètres dans le panneau de configuration, afin de définir l’aspect du diaporama.

Ajout d’un diaporama de largeur de 100 % : découvrez comment ajouter un diaporama d’une largeur de 100 % à la conception de votre site web dans Adobe Muse. Le diaporama plein écran de largeur 100 % est disponible dans la bibliothèque de widgets.
Danielle Beaumont

Ajout d’un widget Diaporama de vignettes à une page

Les diaporamas peuvent également être directement ajoutés à des pages, mais dans cet exemple, vous allez insérer un widget Diaporama de vignettes dans la zone de contenu d’un widget Panneau à onglets. Pour ajouter des diaporamas directement, procédez comme suit :

  1. Ouvrez Adobe Muse. Dans l’écran de bienvenue, effectuez l’une des opérations suivantes :

    • Cliquez sur Créer pour ajouter un widget de diaporama à un nouveau site que vous créez.
    • Cliquez sur Ouvrir, puis ouvrez le fichier .muse existant dans lequel vous voulez ajouter le widget. Double-cliquez sur la page dans laquelle vous souhaitez ajouter le widget Diaporama pour l’ouvrir.
  2. Ouvrez le panneau Bibliothèque de widgets (Fenêtre > Bibliothèque de widgets) et développez la section Diaporamas. Sélectionnez le widget souhaité dans cette liste. Par exemple, sélectionnez le widget Diaporama de vignettes dans la liste, puis faites-le glisser dans la vue Conception.

    Diaporama de vignettes dans Adobe Muse, la bibliothèque de widgets
    Faites glisser le widget Diaporama de vignettes sur la page.

    Notez la présence d’un Conteneur de vignettes sur la gauche, d’un conteneur pour l’image principale et du conteneur de légende sous l’image.

    Remarque :

    Pour supprimer le contenu par défaut à l’intérieur d’un widget, cliquez avec le bouton droit sur le widget et sélectionnez Effacer le contenu du widget.

  3. Pour supprimer des vignettes, sélectionnez le contenu de l’espace réservé (le cadre de l’image et le bloc de texte à l’intérieur de la zone de contenu) et supprimez-le.

Configuration du widget Diaporama de vignettes à partir du panneau Options

Vous pouvez configurer les paramètres d’un widget Diaporama en utilisant le panneau Options associé à ce widget. Lisez la suite pour savoir comment activer la lecture automatique, les effets de transition, le glissement pour les appareils tactiles, etc.

  1. Sélectionnez le widget et cliquez sur l’icône représentant une flèche bleue pour accéder au panneau Options. Dans cet exemple, vous n’avez pas besoin d’utiliser les flèches Suivant et Précédent. Vous pouvez donc décocher les options Précédent et Suivant pour les désactiver. Notez que les boutons disparaissent lorsque vous désactivez les cases à cocher correspondantes.

    Décochez les options Légendes et Compteur, de sorte qu’il ne reste plus que les boutons de déclenchement des vignettes et le conteneur cible plus grand. Parcourez les options et mettez-les à jour afin qu’elles correspondent aux réglages ci-dessous :

    • Nouvelle image principale : remplir le bloc proportionnellement
    • Nouvelle vignette : remplir le bloc proportionnellement
    • Transition : fondu
    • Vitesse de transition : 0,5 secondes
    • Lecture auto. : désactivé
    • Reprendre après : activé
    • Lire une fois : désactivé
    • Aléatoire : désactivé
    • Activer le glissement : activé
    • Cadre lumineux : activé
    • Plein écran : activé
    • Cadre lumineux auto. : désactivé
    • Vignettes de forme libre : activé
    • Premier : désactivé
    • Précédent : activé
    • Suivant : activé
    • Dernier : désactivé
    • Légendes : activées
    • Compteur : activé
    • Bouton de fermeture : désactivé
    • Vignettes : activé
    • Afficher le cadre lumineux entier (Conception) : activé
    • Modifier ensemble : activé
    Panneau Options de diaporama
    Mettez à jour les paramètres du widget Diaporama de vignettes dans le panneau Options.

  2. Les différents widgets offrent différentes options et certains sont plus complexes que d’autres. Prenez quelques instants pour vérifier les options de menu afin de déterminer les paramètres disponibles. Voici un bref aperçu :

    Ajouter des images : cliquez sur l’icône de dossier pour rechercher et sélectionner les images que vous voulez afficher.

    Nouvelle image principale : définit la manière dont un contenu de photo de plus grande taille s’affiche dans le conteneur cible.

    • Ajuster le contenu proportionnellement : le fichier d’image photo reste à sa taille d’origine, même si cette taille ne correspond pas au conteneur cible ; une partie du conteneur peut être vide et l’image peut ne pas s’adapter à cet espace.
    • Remplir le bloc proportionnellement : le fichier d’image photo est redimensionné pour remplir le conteneur cible ; certaines parties de la photo peuvent être recadrées.

    Nouvelle vignette : définit la manière dont un contenu de vignette photo de plus petite taille s’affiche dans le conteneur de déclenchement.

    • Ajuster le contenu proportionnellement : le fichier d’image photo reste à sa taille d’origine, même si cette taille ne correspond pas au conteneur cible ; une partie du conteneur peut être vide et l’image peut ne pas s’adapter à cet espace.
    • Remplir le bloc proportionnellement : le fichier d’image photo est redimensionné pour remplir le conteneur cible ; certaines parties de la photo peuvent être recadrées.

    Transition : méthode d’animation utilisée lorsque le contenu d’un conteneur cible est en train d’être remplacé par un autre conteneur cible. Ces options sont également activées pour les écrans tactiles, de sorte que si vous créez des sites pour les appareils mobiles, les visiteurs peuvent faire glisser leur écran pour voir la transition s’effectuer tandis que l’autre élément de contenu apparaît.

    • Fondu : l’opacité du nouveau conteneur augmente au fur et à mesure que le conteneur existant disparaît.
    • Horizontal : le nouveau conteneur glisse sur le côté à l’horizontale, recouvrant le conteneur existant.
    • Vertical : le nouveau conteneur glisse sur le côté à la verticale, recouvrant le conteneur existant.

    Vitesse de transition : durée de l’animation, en secondes.

    Lecture automatique : lorsque cette option est activée, le diaporama est automatiquement lu, plutôt que laisser place à une expérience interactive (qui demande au visiteur de cliquer sur chaque déclencheur pour afficher la cible correspondante dans la séquence). Définissez la durée en secondes pendant laquelle vous souhaitez que chaque image s’affiche avant le passage à l’image suivante.

    Aléatoire : lorsque cette option est activée, les images sont affichées dans un ordre aléatoire, plutôt que séquentiellement.

    Cadre lumineux : lorsque cette option est activée, le diaporama estompe le reste de la page en superposition lorsque le contenu du conteneur cible est affiché.  Lorsque la fenêtre du cadre lumineux est fermée, l’intégralité de la page est à nouveau affichée.

    Activer le glissement : lorsque cette option est activée et que le site comprend une mise en page de type Tablette ou Téléphone pour afficher le contenu web sur un appareil mobile, les parties interactives du widget prennent en charge les mouvements sur l’écran tactile.

    Section Sous-composants :

    • Premier : lorsque cette option est activée, le bouton de navigation Premier est affiché.
    • Précédent : lorsque cette option est activée, le bouton de navigation Précédent est affiché.
    • Suivant : lorsque cette option est activée, le bouton de navigation Suivant est affiché.
    • Dernier : lorsque cette option est activée, le bouton de navigation Dernier est affiché.
    • Légendes : lorsque cette option est activée, les légendes de la galerie de photos sont affichées.
    • Compteur : lorsque cette option est activée, le compteur de la galerie de photos est affiché.
    • Bouton de fermeture : lorsque cette option est activée, le bouton de fermeture est affiché.

    Vignettes : lorsque cette option est activée, les boutons de déclenchement des vignettes sont affichés.

    Section Modification :

    • Afficher le cadre lumineux entier (Conception) : lorsque l’option Cadre lumineux est activée, chaque zone cible est uniquement affichée par défaut lorsque le déclencheur correspondant est sélectionné dans la page. Lors de la conception de la mise en page, vous trouverez sans doute utile d’activer cette option afin de voir les cibles pendant que vous travaillez. Ce paramètre n’affecte pas l’affichage du diaporama lorsque la page est prévisualisée ou affichée dans un navigateur. Si l’option Cadre lumineux n’est pas activée, cette option apparaît en grisé. 

    Notez que l’option Afficher le cadre lumineux entier (Conception) est activée uniquement lorsque vous sélectionnez le widget de diaporama Cadre lumineux.

    • Modifier ensemble : cette option est activée par défaut, afin de permettre une édition plus rapide des widgets. Sauf si vous avez besoin de définir l’aspect de chaque déclencheur différemment, laissez cette option activée afin que toute modification apportée à l’un des éléments soit automatiquement appliquée aux autres.

    Après avoir vérifié les paramètres disponibles, cliquez sur une zone de la page en dehors du menu Options pour le fermer.

    Remarque :

    Les options Cadre lumineux et Plein écran sont désactivées pour les diaporamas en plein écran.

    Vous ne pouvez pas activer l’option Plein écran pour les widgets de diaporama, hormis Plein écran.

Redimensionnement et alignement des éléments d’un widget Diaporama de vignettes

  1. Cliquez sur le widget Diaporama et sélectionnez-le. Utilisez l’outil de sélection pour faire glisser les poignées afin de redimensionner l’ensemble du widget Diaporama de vignettes, jusqu’à ce qu’il occupe environ 790 pixels de large sur 490 pixels de haut. Vous pouvez examiner le panneau Transformation ou les champs Transformation du panneau de configuration pour vérifier les dimensions.

  2. Le diaporama étant toujours sélectionné, cliquez à nouveau sur le conteneur de vignettes, pour sélectionner le conteneur qui inclut les trois vignettes. Utilisez les poignées de transformation latérales pour l’élargir, puis utilisez l’outil de sélection pour faire glisser les vignettes vers le haut jusqu’à ce qu’elles soient placées au-dessus et verticalement alignées par rapport au centre du plus grand conteneur de l’image principale.

    Conteneur avec cinq vignettes
    Sélectionnez le conteneur de déclenchement des vignettes et repositionnez-le au-dessus du plus grand conteneur cible.

    Vous pouvez déterminer si le conteneur de vignettes est aligné par rapport au centre du conteneur de l’image principale, car un repère dynamique bleu est temporairement affiché lorsque vous faites glisser l’élément.

    Procédez comme suit pour ajouter les graphiques à la galerie de photos tout en générant automatiquement les conteneurs de vignette et d’image principale correspondants :

  3. Cliquez sur la flèche bleue pour ouvrir le menu Options. Cliquez sur l’icône de dossier située en regard des mots Ajouter des images... et naviguez jusqu’au dossier où sont enregistrés vos fichiers.

  4. Sélectionnez les fichiers d’images requis. Cliquez sur Ouvrir pour fermer la boîte de dialogue d’importation.

    Boîte de dialogue d’importation
    Sélectionnez l’ensemble des cinq photos de galerie situées dans le sous-dossier Galerie.

    Lorsque vous sélectionnez plusieurs fichiers d’image, vous chargez le widget Diaporama de vignettes. Cette stratégie vous permet de sélectionner plusieurs fichiers d’image et de générer un bouton de conteneur de vignettes pour chaque nouveau fichier d’image de plus grande taille dans le conteneur d’image principale.

    Les nouvelles images sont ajoutées aux boutons de vignette existants.

  5. Double-cliquez sur la vignette qui s’affiche par défaut lors du premier ajout du diaporama et sélectionnez-la. Appuyez sur la touche Supprimer (Mac) ou Retour arrière (Windows) pour supprimer chaque vignette lorsque vous la sélectionnez, jusqu’à ce qu’il ne reste plus que les nouvelles vignettes.

    Image et vignettes de diaporama
    Examinez les vignettes, sélectionnez chacune des vignettes en noir et blanc par défaut, puis appuyez sur la touche Supprimer ou Retour arrière pour les supprimer, une par une.

    Veillez à ne pas supprimer l’ensemble des vignettes. Dans ce cas, annulez la dernière opération en choisissant Edition > Annuler, puis assurez-vous que vous cliquez dans chaque vignette (l’indicateur de sélection affiche le mot : Vignette) avant d’appuyer sur Supprimer ou Retour arrière.

  6. Sélectionnez le conteneur qui contient l’ensemble des cinq vignettes. Utilisez les poignées de transformation pour le redimensionner, afin que les vignettes restantes soient centrées au-dessus du conteneur de l’image principale.

    Image et vignettes de diaporama
    Redimensionnez le Conteneur de vignettes sur le centre de l’image principale.

Utilisation de widgets de diaporamas adaptatifs

Par défaut, les diaporamas sont adaptatifs ou fluides. Pour utiliser un widget de diaporama adaptatif dans votre site web Adobe Muse, effectuez l’une des opérations suivantes :

  • Si vous créez un nouveau site, ouvrez le nouveau site, puis faites glisser le widget de diaporama à partir du panneau Bibliothèque de widgets et placez-le où vous le souhaitez. Remarquez que par défaut, le widget est adaptatif.
  • Si vous disposez déjà d’un fichier .muse, ouvrez ce fichier à l’aide de la dernière version d’Adobe Muse. Sélectionnez le widget. Pour le rendre adaptatif, sélectionnez les éléments du widget et choisissez soit l’option Hauteur et largeur adaptative, soit l’option Largeur adaptative dans la liste déroulante Redimensionner du menu contextuel.
Sélection de l’option Redimensionner pour rendre le widget de diaporama adaptatif
Sélection de l’option Redimensionner pour rendre le widget de diaporama adaptatif

Si vous ajoutez le widget de diaporama à un site adaptatif, vérifiez la position et la taille du widget à tous vos points d’arrêt. Vous pouvez modifier le contenu et la taille des différents éléments d’un widget de diaporama. Vous pouvez également activer les paramètres adaptatifs pour des éléments individuels tels que le bouton Précédent, le bouton Suivant ou les légendes aux différents points d’arrêt.

Affichage du widget Diaporama de vignettes

Après avoir repositionné les éléments du diaporama et supprimé les vignettes d’espace réservé, vous pouvez tester le diaporama pour voir comment il s’affiche.

  1. Testez d’abord la galerie de photos dans la vue Conception en cliquant sur les boutons de vignettes dans la partie supérieure, et observez l’affichage de chacune des images principales correspondantes dans le plus grand conteneur au-dessous.

  2. Cliquez sur Aperçu pour voir comment la galerie apparaît dans un navigateur. Interagissez avec le diaporama pour voir comment les images de plus grande taille s’affichent lorsque vous cliquez sur la vignette correspondante.

    Test de la miniature et du diaporama
    Positionnez la galerie afin qu’elle soit centrée dans le conteneur de la zone de contenu du widget Panneau à onglets.

  3. Choisissez Fichier > Prévisualiser la page dans le navigateur pour afficher la page d’à propos dans une nouvelle fenêtre de navigateur.

    Redimensionnez le navigateur et affichez un aperçu du widget Diaporama dans différentes tailles d’écran. Vous pouvez voir que les widgets Diaporama sont responsive par défaut. Autrement dit, ils se redimensionnent et s’adaptent à la taille de l’écran. 

    Vous pouvez également utiliser la barre de défilement de la vue Conception pour prévisualiser les widgets. Si vous souhaitez modifier ou repositionner le widget à n’importe quel point, ajoutez un point d’arrêt et réalignez le widget. 

  4. Testez le fonctionnement du widget Panneau à onglets. Cliquez sur les onglets pour afficher les contenus correspondants dans les conteneurs de la zone de contenu. Testez ensuite le diaporama de l’onglet Galerie en cliquant sur les boutons de vignettes, pour afficher les images principales de plus grande taille correspondantes.

Création d’une présentation sous forme de diaporama à l’aide du widget Diaporama

Le widget Diaporama est une autre fonction de site que vous pouvez ajouter à vos pages. Vous pouvez configurer un diaporama qui nécessite que les visiteurs cliquent sur les vignettes pour voir une version plus grande de la photo, ou vous pouvez créer des diaporamas dont la lecture est automatique au chargement de la page. Les diaporamas de lecture automatique sont un excellent moyen d’ajouter du contenu attractif à votre site en présentant une série de photos. Vous pouvez déterminer la manière dont le diaporama est lu en définissant le type de transition pour définir la manière dont les diapositives s’animent.

Dans la sous-section suivante, vous allez ajouter un diaporama de lecture automatique à la page d’accueil du site.

Dans la vue Plan, double-cliquez sur la vignette Accueil pour la modifier dans le mode Conception.

Configuration d’un widget Diaporama à lecture automatique

Suivez ces étapes pour créer une présentation qui affiche en boucle un ensemble d’images :

  1. Dans la bibliothèque de widgets, cliquez sur Diaporamas.

  2. Sélectionnez le widget de diaporama Standard et faites-le glisser sur la page.

  3. Par défaut, le widget de diaporama de base contient un rectangle gris foncé (espace réservé pour l’image), un espace réservé pour la légende, le numéro de l’image (1 - 1) et deux boutons de direction (page suivante et page précédente) sur lesquels les visiteurs peuvent cliquer pour naviguer dans un ensemble d’images.

  4. Cliquez sur la flèche bleue pour accéder au menu des options. Vérifiez et définissez les options suivantes :

    • Transition : fondu
    • Lecture auto. : lente
    • Nouvelle image principale : remplir le bloc proportionnellement
    • Nouvelle vignette : remplir le bloc proportionnellement
    • Cadre lumineux : désélectionné
    • Sous-composants : désélectionnez toutes les options pour masquer les légendes, le compteur, et les boutons Suivant et Précédent.

    Remarque :

    Ce diaporama est lu automatiquement lors du chargement de la page, sans aucune action de la part du visiteur. Si vous souhaitez créer un diaporama contrôlé par les clics du visiteur, définissez Lecture automatique sur Aucun et laissez les coches sélectionnées pour Suivant ou Précédent dans la section Sous-composants du menu Options.

  5. Cliquez en dehors du menu Options pour le fermer. Remarquez qu’après avoir effectué ces modifications, seul le rectangle gris foncé reste visible. A tout moment, vous pouvez changer la configuration des widgets en modifiant les paramètres dans le menu Options.

  6. Double-cliquez et sélectionnez le cadre de l’image (le rectangle gris foncé), puis faites glisser les poignées latérales pour agrandir le diaporama à toute la largeur de la page.

    Cadre d’image du diaporama
    Faites glisser les poignées latérales du cadre d’image du diaporama pour l’adapter à la taille de la page.

  7. Utilisez les flèches vers le haut et vers le bas pour étendre la hauteur du cadre d’image pour remplir les dimensions entières de la page d’accueil. Dans la partie inférieure, étendez le cadre de l’image jusqu’à ce qu’il s’arrête juste au-dessus de l’image de zigzags mosaïquée qui s’affiche dans la partie supérieure du pied de page. Pour l’instant, peu importe le fait que l’espace réservé gris foncé couvre l’image d’écoulement marron sur le côté droit de la barre de navigation.

  8. Cliquez sur la flèche bleue pour accéder à nouveau au menu Options. Cette fois, cliquez sur l’icône de dossier située en haut, en regard du texte « Ajouter des images ».

  9. Dans la boîte de dialogue Importer, naviguez jusqu’au dossier de ressources et ouvrez les ressources. Cliquez sur Sélectionner pour ajouter les images au diaporama.

  10. Cliquez sur Aperçu pour visionner la lecture du diaporama. Celle-ci s’effectue en vitesse lente en lecture automatique, mais vous pouvez modifier le paramètre dans le menu Options si vous préférez que les images défilent plus rapidement. Remarquez qu’après l’affichage de la dernière photo, le diaporama effectue une boucle et recommence à lire la première image du jeu. Le diaporama fonctionne indéfiniment en boucle lorsque la lecture automatique est activée.

A ce stade, le diaporama est terminé. Toutefois, si vous souhaitez corriger l’écoulement sur le côté droit de la barre de navigation, il vous reste une autre chose à faire.

  1. Dans la vue Plan, double-cliquez sur la vignette du Gabarit A pour l’ouvrir en mode Conception.

  2. Utilisez l’outil de sélection pour sélectionner l’écoulement marron dans la partie supérieure droite du graphique de navigation.

  3. Cliquez avec le bouton droit de la souris sur l’image d’écoulement et choisissez Disposition > Premier plan dans le menu contextuel qui s’affiche.

  4. Cliquez sur la croix (X) de l’onglet Gabarit A pour le fermer. Ouvrez la page dans laquelle vous avez ajouté le widget Standard. Cliquez sur Aperçu et notez que maintenant l’image d’écoulement s’affiche au-dessus du diaporama de lecture automatique. Après avoir passé en revue le diaporama, revenez à la vue Conception.

    Remarque :

    Comme la barre de navigation a été créée sur la page Gabarit A, toute modification que vous apportez pour contrôler la navigation (et d’autres éléments communs) impliquent l’ouverture de la page Gabarit A dans le mode Conception pour la modifier. Bien que vous puissiez voir les éléments d’un gabarit sur les pages que vous modifiez, vous ne pouvez pas modifier le contenu de l’en-tête et du pied de page sur les autres pages du site.

Ajout de widgets Diaporama plein écran

Vous pouvez configurer des diaporamas qui s’affichent en plein écran avec le widget de diaporama en plein écran. Lorsqu’un visiteur clique sur le diaporama en plein écran, le contenu se met à l’échelle pour remplir toute la fenêtre du navigateur sur l’écran de l’ordinateur ou de l’appareil, masquant temporairement le reste du contenu du site. Si vous le souhaitez, le diaporama peut être configuré pour être lu automatiquement, de sorte que les images commencent à défiler au chargement de la page. Les visiteurs peuvent quitter le diaporama en appuyant sur Echap.

Suivez ces étapes pour ajouter un widget de diaporama plein écran à un site :

  1. Lancez Adobe Muse. Double-cliquez sur une page pour l’ouvrir dans la vue Conception.

  2. Sélectionnez Fenêtre > Bibliothèque de widgets pour accéder à la bibliothèque de widgets, ou cliquez sur l’onglet Bibliothèque de widgets dans l’ensemble de panneaux pour l’activer.

  3. Développez la section Diaporamas dans la liste des widgets. Sélectionnez le widget appelé Plein écran dans la section Diaporamas.

    Bibliothèque de widgets
    Recherchez et sélectionnez le widget de diaporama plein écran dans la bibliothèque de widgets.

Configuration de widgets de diaporama plein écran

Le widget de diaporama plein écran se comporte différemment des autres widgets dans Adobe Muse. Prenez un peu de temps pour découvrir son fonctionnement.

  1. Faites glisser le widget de diaporama plein écran de la bibliothèque de widgets sur la page.

    Notez que le contenu par défaut est mis à l’échelle pour correspondre à la hauteur et à la largeur de la fenêtre de navigateur.

    Widget de diaporama plein écran
    Le widget de diaporama plein écran s’agrandit pour recouvrir la zone visible du site et remplir la fenêtre du navigateur.

    Par défaut, lorsque vous ajoutez un widget de diaporama plein écran, les boutons Précédent, Suivant et un champ de compteur sont affichés dans le coin supérieur droit.

  2. Cliquez sur la flèche bleue pour vérifier les paramètres dans le panneau Options.

    Panneau Options de diaporama
    Le panneau Options affiche les paramètres par défaut appliqués au widget de diaporama plein écran.

    L’option Remplir le bloc proportionnellement est automatiquement appliquée à la nouvelle image principale (grandes images) et aux nouvelles vignettes pour faciliter l’affichage plein écran.

  3. Sélectionnez le type de transition que vous souhaitez appliquer. Utilisez le menu Transition pour choisir entre Fondu, Horizontal et Vertical. Par défaut, la vitesse de transition est définie sur 0,5 seconde, mais vous pouvez modifier cette vitesse selon vos besoins.

    Lorsque la lecture automatique est activée, le diaporama commence dès que la page se charge et le contenu défile en fonction du nombre de secondes défini. Par défaut, chaque image s’affiche pendant 3,5 secondes lorsque la lecture automatique est activée.

    Lors de la configuration du widget de diaporama plein écran, il est courant d’activer les boutons Suivant et Précédent pour la navigation, afin que les vignettes soient masquées par défaut. Toutefois, vous pouvez activer l’option Vignettes si vous souhaitez qu’elles s’affichent en haut de l’image principale du diaporama.

    Si les vignettes sont masquées, assurez-vous que les boutons Suivant et Précédent restent activés. Le compteur est facultatif ; il permet aux visiteurs de savoir quelle image de l’ensemble est actuellement affichée.

  4. Si vous souhaitez afficher les interfaces Suivant, Précédent, et Compteur dans une partie spécifique de la page, utilisez l’outil de sélection pour les déplacer vers l’emplacement souhaité puis pour épingler les contrôles. Si vous souhaitez également que les vignettes restent dans la même position sur la page, placez l’ensemble de vignettes et épinglez-le. Si vous souhaitez afficher les interfaces Suivant, Précédent, et Compteur dans une partie spécifique de la page, utilisez l’outil Sélection pour les déplacer vers l’emplacement souhaité puis pour épingler les contrôles. Si vous souhaitez également que les vignettes restent dans la même position sur la page, placez l’ensemble de vignettes et épinglez-le.

    Vous pouvez modifier les paramètres de redimensionnement et d’épinglage sur différents points d’arrêt lorsque vous ajoutez ce widget à un site responsive.

Ajout d’images à des diaporamas en plein écran

Ensuite, vous allez ajouter des images au widget de diaporama plein écran. Procédez comme suit :

  1. Sélectionnez Fichier > Importer.

  2. Dans la fenêtre d’importation qui s’affiche, cliquez en maintenant la touche Maj enfoncée pour sélectionner plusieurs images contiguës sur votre ordinateur. Ou si vous préférez, maintenez enfoncée la touche Command (Mac) ou la touche Ctrl (Windows) tout en sélectionnant plusieurs images non contiguës dans un dossier de ressources.

  3. Cliquez sur Ouvrir pour charger les fichiers sélectionnés dans le Pistolet de placement.

    Remarque :

    Même si les images que vous avez sélectionnées sont de dimensions et de proportions différentes, l’option Remplir le bloc proportionnellement les met à l’échelle pour qu’elles s’adaptent parfaitement aux dimensions de la page.

  4. Cliquez sur le diaporama une fois pour ajouter les images sélectionnées. Notez que les images par défaut du diaporama sont supprimées automatiquement dès que vous ajoutez de nouvelles images.

  5. Choisissez Fichier > Prévisualiser la page dans le navigateur. Redimensionnez la fenêtre du navigateur et remarquez la manière dont le contenu du diaporama est mis à l’échelle et recadré pour remplir toute la fenêtre du navigateur. Cliquez sur les boutons Suivant et Précédent pour faire défiler la série d’images ou laissez simplement la lecture des images continuer si la lecture automatique est activée.

  6. Fermez la fenêtre du navigateur et revenez à Adobe Muse. 

Configuration de vignettes de forme libre dans les widgets de Diaporama

L’option Vignette de forme libre vous permet de contrôler la façon dont les vignettes s’affichent dans un diaporama. Au lieu d’aligner les vignettes sur une ligne ou un ensemble de lignes, vous pouvez placer chaque vignette à n’importe quel emplacement de votre choix.

  1. Dans le mode Conception, ouvrez la bibliothèque de widgets et développez la section Diaporama. Faites glisser l’un des widgets de diaporama sur une page.

  2. Sélectionnez toute la page, double-cliquez sur la vignette et sélectionnez-la. Vous pouvez déterminer l’élément sélectionné en regardant l’indicateur de sélection dans le coin supérieur gauche du panneau Contrôle.

    Conteneur de vignettes
    Un cadre de sélection entoure le Conteneur de vignettes lorsqu’il est sélectionné.

    Par défaut, les vignettes affichées dans les widgets de diaporama sont stockées dans un conteneur nommé conteneur de vignette. Ce conteneur externe garantit que les vignettes s’alignent en colonnes ou en lignes droites, selon la façon dont vous redimensionnez le conteneur externe. L’ensemble des vignettes est imbriqué dans un conteneur de vignette pour tous les diaporamas où des vignettes sont activées, jusqu’à ce que vous activiez l’option Vignettes de forme libre.

Configuration des paramètres d’affichage pour les vignettes de forme libre

Si vous préférez afficher les vignettes de manière aléatoire ou non alignée, vous pouvez supprimer le conteneur externe et placer chaque vignette à l’emplacement souhaité sur la page. Procédez comme suit :

  1. Pendant que le widget de diaporama est sélectionné, cliquez sur la flèche bleue pour accéder au menu Options.

  2. Activez la case en regard de l’option Vignettes de forme libre. Le cadre de sélection entourant le conteneur de vignette dans le mode Conception disparaît immédiatement et l’indicateur de sélection affiche le mot : Diaporama.

    Panneau d’options du conteneur de vignettes
    L’activation de l’option Vignettes de forme libre supprime le conteneur qui assimile les vignettes.

  3. Cliquez n’importe où sur la page pour fermer le menu Options.

    Maintenant que vous avez supprimé le conteneur externe pour les vignettes, vous pouvez repositionner chaque vignette pour correspondre à votre conception de page.

  4. Utilisez l’outil Sélection pour sélectionner une vignette. Lorsqu’elle est sélectionnée, l’indicateur de sélection affiche le mot : Vignette. Déplacez la vignette sélectionnée à l’emplacement souhaité. Répétez cette étape pour repositionner toutes les vignettes. Si vous souhaitez que chaque vignette reste à sa place lorsque l’utilisateur fait défiler le navigateur ou le redimensionne, vous pouvez épingler chaque vignette.

    Remarque :

    Si vous souhaitez redimensionner les conteneurs de vignettes pour avoir des dimensions différentes, désactivez l’option Modifier ensemble dans le menu Options et utilisez l’outil Sélection pour faire glisser individuellement les coins de chaque vignette pour les adapter à vos besoins.

    Dans un site responsive, vous pouvez également réaligner, redimensionner et configurer les options d’épinglage des vignettes.

  5. Choisissez Fichier > Prévisualiser la page dans le navigateur. Les vignettes du diaporama sont dispersées sur la page. Cliquez sur les vignettes pour afficher l’image correspondante dans le diaporama.

  6. Fermez le navigateur et revenez à Adobe Muse.

Configuration de l’option Cadre lumineux pour les widgets de diaporama

Lors de l’affichage d’un contenu dans un cadre lumineux, une fenêtre modale devient la zone active et met en surbrillance son contenu tout en assombrissant le reste de la page. Les visiteurs interagissent avec le cadre lumineux en cliquant sur une vignette ou sur les boutons Suivant ou Précédent. Pour quitter le cadre lumineux et revenir au mode normal du site, les visiteurs cliquent sur le bouton Fermer ou appuient sur Echap.

Tous les widgets de diaporama dans Adobe Muse disposent de l’option Cadre lumineux. En outre, un widget dans la section Diaporama est préconfiguré pour utiliser le comportement de cadre lumineux. Dans le widget de diaporama Cadre lumineux, l’option Cadre lumineux est activée par défaut.

Pour créer un diaporama qui affiche les images dans un cadre lumineux, procédez comme suit :

  1. Dans le mode Conception, développez la section Diaporama dans la bibliothèque de widgets. Faites glisser l’un des widgets de diaporama sur une page.

  2. Dans le menu Options, recherchez l’option Cadre lumineux dans la section Mise en page et vérifiez qu’elle est sélectionnée.

    Option Cadre lumineux
    Cochez la case en regard de l’option Cadre lumineux, si ce n’est pas déjà fait.

  3. Alors que le menu Options est encore ouvert, apportez les modifications nécessaires pour configurer le widget comme vous le souhaitez. Par exemple, vous pouvez afficher ou masquer le bouton Précédent, le bouton Suivant, les légendes et le compteur. Pour l’affichage du cadre lumineux, il est utile d’activer le bouton de fermeture. Cochez la case en regard de l’option Bouton de fermeture.

    Bouton de fermeture
    Un bouton de fermeture (contenant un X) apparaît dans le coin supérieur droit du diaporama.

    Si vous le souhaitez, vous pouvez utiliser l’outil Sélection pour déplacer le bouton de fermeture à un autre endroit. Lorsque les visiteurs souhaitent quitter l’affichage du cadre lumineux et fermer la fenêtre modale, ils peuvent cliquer sur le bouton Fermer ou appuyer sur Echap.

    Remarque :

    Si vous souhaitez modifier la largeur de la bordure entourant la fenêtre du cadre lumineux, sélectionnez le widget de diaporama Cadre lumineux et mettez à jour les paramètres de marge intérieure dans le panneau Espacement.

  4. Choisissez la commande Fichier > Prévisualiser la page dans le navigateur pour tester le widget de diaporama. Cliquez sur l’une des vignettes pour appeler l’effet de cadre lumineux et pour afficher l’image principale correspondante dans une fenêtre modale alors que le reste de la page est grisé.

  5. Cliquez sur les boutons Suivant et Précédent pour faire défiler les images dans le diaporama.

  6. Après avoir testé le diaporama, quittez la vue Cadre lumineux en cliquant sur le bouton Fermer. Le cadre lumineux se ferme et le reste du contenu de la page s’affiche.

  7. Fermez le navigateur et revenez à Adobe Muse.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne