Apprenez à ajouter des widgets de composition dans Adobe Muse. Configurez des widgets de composition pour créer des sites interactifs.

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 composition vous permettent d’ajouter des éléments interactifs complexes à vos sites web. Qu’il s’agisse d’un site de photographies ou du site d’un restaurant, les widgets de composition s’avèrent quasiment indispensables pour tous les sites lorsque l’on souhaite afficher une grande variété de contenus. Vous pouvez utiliser ces widgets pour créer des expériences de navigation et de recherche uniques sans avoir à écrire une seule ligne de code.

Adobe Muse propose plusieurs types de widgets de composition qui vous permettent d’ajouter et de créer différents types de contenu pour votre site web. Par exemple, si vous créez un site de photographies, vous pouvez sélectionner un widget Cadre lumineux pour présenter une galerie de photos sur votre site web. Ce widget assombrit temporairement le reste de la page, attirant ainsi l’attention du visiteur sur la zone d’affichage active.

Il est également possible de créer des pages web intéressantes en imbriquant des widgets à l’intérieur d’un widget de composition. Par exemple, si vous concevez un catalogue, vous pouvez utiliser un widget de composition vierge pour créer un menu de hamburgers et imbriquer un widget de diaporama dans la zone cible du widget de composition vierge. Ces conceptions assurent une expérience unique aux utilisateurs qui visitent votre site.

Lisez la suite pour connaître les types de widgets de composition disponibles dans Adobe Muse.

Types de widgets de composition

Un widget de composition comporte deux conteneurs : le déclencheur et la cible. La zone de déclenchement est l’endroit sur lequel le visiteur du site clique et la zone cible est la zone correspondante qui s’affiche. Vous pouvez lier les zones de déclenchement et les zones cibles pour ajouter de la complexité et de l’interactivité à votre site.

Adobe Muse propose les types de widgets de composition suivants. En fonction de vos besoins de conception, vous pouvez utiliser l’un de ces widgets ou une combinaison de ces widgets en les imbriquant.

Vierge

Widgets de composition vierges dans Adobe Muse
Widgets de composition vierges dans Adobe Muse

Widget comportant de petites vignettes. Par défaut, ce widget ne possède aucun remplisseur. Vous pouvez lier manuellement ce widget à un conteneur cible.

Gros titres

Widget de composition Gros titres dans Adobe Muse
Widget de composition Gros titres dans Adobe Muse

Widget dont le comportement est similaire à celui d’un widget Accordéon. Vous pouvez ajouter du texte et des images dans la zone de conteneur du widget.

Cadre lumineux

Widget de composition Cadre lumineux dans Adobe Muse
Widget de composition Cadre lumineux dans Adobe Muse

Widget dont le contenu dans la zone cible devient actif lorsque vous cliquez sur le déclencheur. Le reste de la page est estompé lorsque la cible est affichée.

Présentation

Widget de composition Présentation dans Adobe Muse
Widget de composition Présentation dans Adobe Muse

Widget contenant de petites vignettes connectées à la zone de présentation cible. Par défaut, les diapositives glissent horizontalement dans ce widget.

Info-bulle

Widget de composition Info-bulle dans Adobe Muse
Widget de composition Info-bulle dans Adobe Muse

Widget contenant le texte d’une info-bulle. Lorsque l’utilisateur survole la zone de déclenchement, l’info-bulle s’affiche immédiatement.

Ajout et configuration de widgets de composition

Pour ajouter et utiliser un widget de composition dans Adobe Muse, sélectionnez le widget de composition à ajouter et faites-le glisser vers la vue Conception. Ces widgets étant responsive par défaut, vous pouvez déterminer si le widget est fluide dans les différents points d’arrêt. Si vous souhaitez changer la position ou le contenu d’un widget de composition, vous pouvez modifier, redimensionner et épingler les éléments du widget pour un point d’arrêt donné.

Suivez cette procédure pour ajouter un widget de composition à votre mise en page.

  1. Ouvrez Adobe Muse. Dans l’écran d’accueil, cliquez sur Créer pour créer un nouveau site ou ouvrez un site Adobe Muse existant à l’emplacement où vous souhaitez ajouter un widget de composition.

  2. Dans la vue Plan, double-cliquez sur la page à laquelle vous souhaitez ajouter le widget et ouvrez-la.

  3. Ouvrez la bibliothèque de widgets (Fenêtre > Bibliothèque de widgets) et cliquez sur l’option Compositions pour développer l’option. Sélectionnez l’un des widgets de composition, en fonction de vos besoins de conception.

    Par exemple, choisissez un cadre lumineux dans la bibliothèque de widgets.

    Remarque :

    Pour supprimer tout le contenu rempli par défaut dans un widget, cliquez avec le bouton droit sur le widget et sélectionnez Effacer le contenu du widget.

    Faites glisser un widget de composition depuis la bibliothèque de widgets dans Adobe Muse.
    Faites glisser un widget de composition depuis la bibliothèque de widgets.

    La version par défaut du widget Cadre lumineux comporte trois zones de déclenchement grises, plus petites, situées au-dessus du conteneur cible gris clair, de plus grande taille.

    Lorsque les visiteurs cliquent sur le conteneur de déclenchement, le conteneur cible du widget Cadre lumineux s’affiche. Vous pouvez incorporer des images, du texte et des vidéos, y compris des vidéos YouTube, comme cible.

  4. Sélectionnez le conteneur ou le déclencheur dans le widget de composition. Pour sélectionner l’ensemble du widget, sélectionnez le widget. L’indicateur de sélection situé dans l’angle supérieur gauche de l’application affiche le mot Composition.

    Pour sélectionner le déclencheur, double-cliquez et sélectionnez les petites cases dans le widget. Le mot Déclencheur s’affiche dans l’indicateur de sélection. Les petites cases sont les déclencheurs du widget. Ce sont les boutons qui correspondent à l’interaction de l’utilisateur.

    Affichage de l’indicateur de sélection dans l’angle supérieur gauche de la page Adobe Muse
    Affichage de l’indicateur de sélection dans l’angle supérieur gauche de la page

    Vous pouvez savoir qu’aucun autre élément n’est sélectionné lorsque l’indicateur de sélection dans l’angle supérieur gauche affiche le mot Page.

  5. Choisissez Fichier > Importer pour ouvrir la boîte de dialogue d’importation. Parcourez les fichiers pour sélectionner ceux à placer dans le widget. Cliquez sur Ouvrir pour les choisir et fermez la boîte de dialogue d’importation.

    Cliquez une fois n’importe où sur la page pour importer l’image à sa taille réelle.

  6. L’image étant toujours sélectionnée, cliquez avec le bouton droit de la souris et sélectionnez Couper dans le menu contextuel.

    Vous pouvez également utiliser le raccourci clavier pour couper l’image, ce qui la supprime de la page et la copie dans le Presse-papiers.

  7. Cliquez avec le bouton droit de la souris dans le bouton de déclenchement et choisissez Coller. Vous pouvez également utiliser le raccourci clavier pour coller l’image dans le déclencheur. Notez que le conteneur de déclenchement prend automatiquement la taille de l’image.

    Le collage d’un contenu dans un conteneur peut s’avérer délicat. Parfois, alors que vous pensez que le contenu est collé à l’intérieur, le contenu peut en fait être collé sur la page.

    Pour vérifier que l’image se trouve à l’intérieur du conteneur de déclenchement, appuyez une fois sur la touche Echap et observez l’indicateur de sélection. S’il affiche le mot Déclencheur, cela signifie que l’image se trouve dans le déclencheur. S’il affiche le mot Page, vous devez à nouveau couper et coller l’image dans le conteneur de déclenchement.

    Vous pouvez également ouvrir le panneau Calques (Fenêtre > Calques) pour vérifier où l’image est collée. Le panneau Calques affiche la hiérarchie des éléments dans une page.

  8. Pour ajouter des vignettes, cliquez sur le signe Plus (+) en regard des conteneurs de déclenchement.

    Clic sur + pour ajouter des vignettes à un cadre lumineux
    Clic sur + pour ajouter des vignettes
  9. Une fois le widget placé dans votre vue Conception, vous pouvez passer à sa configuration. Pour définir les options du widget de composition, sélectionnez ce dernier et cliquez sur la flèche bleue située dans son angle supérieur droit.

    Configuration des widgets de composition en utilisant le menu Options
    Configuration des widgets de composition à l’aide du panneau Options

    Vous pouvez définir les paramètres suivants depuis le panneau Options :

    • Position : indique la position de la zone cible sur la page. Sélectionnez l’option Empilement si vous souhaitez que vos cibles se chevauchent ou Dispersion si vous voulez que vos cibles soient placées à des emplacements différents. Sélectionnez Cadre lumineux si vous souhaitez assombrir le reste de la page.
    • Afficher la cible : définit le paramètre du comportement de la cible lorsque l’utilisateur clique sur le déclencheur. 
    • Masquer la cible : définit les paramètres de masquage d’une cible. Si l’utilisateur ne clique pas sur le déclencheur, la zone cible reste masquée. 
    • Transition : indique la manière dont le contenu change dans la zone cible lorsque l’utilisateur clique sur le déclencheur ou le survole. Choisissez Fondu pour exécuter un fondu dans la nouvelle cible, Horizontal pour ajouter les cibles en les faisant glisser horizontalement, Vertical pour les ajouter en les faisant glisser verticalement. 
    • Vitesse de transition : définit la vitesse de transition de votre widget de composition. Pour que la transition soit immédiate, sélectionnez Sans.
    • Lecture automatique : définissez cette option pour créer un diaporama dans le site web. Si vous sélectionnez cette option, les diapositives sont lues automatiquement sans aucune interaction de l’utilisateur.
    • Aléatoire : affiche les cibles dans un ordre aléatoire.
    • Déclencheurs au premier plan : sélectionnez cette option pour afficher le déclencheur au-dessus du conteneur cible. La même hiérarchie s’affiche également dans le panneau Calques.
    • Activer le glissement : active le glissement pour accéder à la cible suivante sur les appareils tactiles.
    • Tout masquer au début : masque toutes les options de cible lors du chargement initial du site web. Pour afficher la cible, l’utilisateur doit cliquer sur le déclencheur correspondant.
    • Cadre lumineux automatique : affiche automatiquement le cadre lumineux lors du chargement du site web.
    • Sous-composants : sélectionnez les options Préc. (Précédent), Suiv. ou Bouton de fermeture pour ajouter une interactivité supplémentaire au widget. Sur votre site web, les utilisateurs peuvent cliquer sur les options Suivant, Précédent et Fermer.
    • Modification : sélectionnez Afficher le cadre lumineux entier (Conception) pour afficher la zone cible dans la vue Conception lorsque vous modifiez le widget. Sélectionnez Tout afficher (Conception) pour afficher tous les conteneurs cibles simultanément dans la vue Conception.
    Configuration des paramètres des widgets de composition dans Adobe Muse
    Configuration des paramètres des widgets de composition

    Remarque :

    L’option Afficher le cadre lumineux entier (Conception) est désactivée lorsque vous avez sélectionné l’option Dispersion ou Empilement dans la liste déroulante Position.

    L’option Tout masquer au début est désactivée lorsque vous sélectionnez l’option Cadre lumineux automatique.

  10. Pour supprimer les déclencheurs inutiles, double-cliquez pour sélectionner le déclencheur à supprimer. Appuyez sur Supprimer (Mac) ou Retour arrière (Windows) pour supprimer le déclencheur sélectionné.

  11. Cliquez sur l’image principale dans le conteneur de déclenchement pour appeler l’effet de cadre lumineux.

    Clic sur une image à gauche (déclencheur) pour afficher le cadre lumineux
    Clic sur une image à gauche (déclencheur) pour afficher le cadre lumineux (comme illustré sur la droite)

    Appuyez sur la touche Echap pour fermer la fenêtre de cadre lumineux et revenir à la vue Conception pour poursuivre la modification de la page Adobe Muse.

  12. Après avoir configuré et importé le widget de composition dans la conception, testez-le dans la vue Aperçu.

Si vous utilisez un widget de composition dans une mise en page responsive, lisez la section suivante. Veillez à tester et prévisualiser votre widget à tous vos points d’arrêt.

Utilisation des widgets de composition dans une mise en page responsive

Par défaut, les widgets de composition sont variables ou responsive. Pour ajouter et utiliser des widgets de composition dans une mise en page responsive, procédez de l’une des manières suivantes :

  • Si vous créez un nouveau site responsive à l’aide de la dernière version d’Adobe Muse, dans le panneau Bibliothèque de widgets, faites glisser le widget de composition jusqu’à la vue Conception.
  • Si vous avez utilisé Adobe Muse 2017.0.3 ou des versions antérieures, votre widget de composition n’est pas responsive. Dans ce cas, ouvrez votre fichier .muse dans la dernière version d’Adobe Muse. Sélectionnez les éléments à l’intérieur du widget, puis sélectionnez l’option de redimensionnement Largeur responsive ou Largeur et hauteur responsive (selon ce qui s’applique).
Conversion de widgets de composition non responsive en widgets responsive
Conversion de widgets de composition non responsive en widgets responsive

Remarque :

Vous ne pouvez pas sélectionner tout le widget et modifier les propriétés de redimensionnement. Sélectionnez un ou plusieurs éléments individuels dans le widget pour rendre ce dernier responsive.

Configurez votre widget en suivant la procédure décrite à la section Ajout et configuration des widgets de composition. Après avoir configuré le widget et lui avoir attribué un style, vous pouvez le prévisualiser dans un navigateur ou utiliser la barre de défilement et le redimensionner. Vous remarquerez que les widgets sont automatiquement redimensionnés en fonction de la taille de l’écran.

Widgets de composition responsive dans Adobe Muse
Widgets de composition responsive dans Adobe Muse

Remarque :

Lorsque vous ajoutez des widgets de composition à une mise en page responsive, il est recommandé de commencer par disposer la conception dans le point d’arrêt le plus grand. Après avoir finalisé la position et la configuration du widget sur le plus grand point d’arrêt, ajoutez des points d’arrêt supplémentaires où vous le souhaitez.

Pour en savoir plus sur la conception d’un site pour une mise en page responsive, voir la section Positionner des objets lors de la conception de sites responsive.

Association d’un widget de composition avec d’autres widgets

Une des particularités d’un widget de composition est la prise en charge des widgets imbriqués à l’intérieur d’un widget de composition. Autrement dit, vous pouvez ajouter des widgets tels que des formulaires, des diaporamas ou des éléments de menu dans un widget de composition.

Par exemple, vous pouvez ajouter un widget de diaporama dans le conteneur cible d’un widget Gros titres sur un site web de cuisine. Lorsqu’un visiteur du site clique sur l’étiquette du menu (widget Gros titres), la zone cible contenant la galerie s’affiche sous forme de diaporama.

Vous pouvez également ajouter un formulaire de contact en tant que cible afin qu’un utilisateur cliquant sur l’étiquette Contact soit immédiatement redirigé vers formulaire de contact.

Il existe bien d’autres combinaisons et possibilités de conception que vous pouvez obtenir avec une imbrication. Toutefois, tenez compte des aspects suivants lorsque vous créez des widgets imbriqués dans une mise en page responsive :

  • L’épinglage n’est pas disponible pour les éléments responsive qui sont imbriqués dans un conteneur non responsive. 
  • Les objets ne seront pas responsive si vous les placez dans un conteneur non responsive.

Remarque :

Lorsque vous imbriquez des widgets dans des widgets de composition, il est recommandé de ne pas utiliser plus de trois niveaux d’imbrication.

La section suivante indique comment créer un sous-menu à l’aide d’un widget de composition. Lisez ce qui suit pour en savoir plus sur cet exemple de scénario pour créer un sous-menu caché pour la navigation sur votre site.

Création de sous-menus en utilisant des widgets de composition

Vous pouvez configurer des widgets de composition pour créer une navigation de site avec des sous-menus. Vous pouvez créer une option de menu qui affiche un sous-menu lorsque le visiteur survole la zone active, et le masque lorsque le visiteur sort le pointeur de la zone active qui a déclenché l’ouverture du sous-menu. Vous pouvez également configurer le widget pour qu’un sous-menu soit masqué si le visiteur ne clique pas sur les liens du sous-menu, et sort simplement le pointeur du sous-menu. La possibilité de créer ces types de sous-menus interactifs est très pratique lorsque vous créez une barre de navigation pour un site avec de nombreuses sous-sections. 

Les menus Afficher la cible et Masquer la cible sont pratiques pour répliquer un comportement de menu commun dans le site web. Le visiteur peut éventuellement cliquer sur les liens ou déplacer son curseur hors de la fenêtre pour la masquer. Il n’est pas nécessaire de cliquer sur un bouton de fermeture pour masquer un sous-menu lorsque cette option est activée.

Cette fonction est disponible avec les widgets de composition suivants :

  • Vierge
  • Gros titres
  • Info-bulle

Le panneau Options offre deux paramètres pour afficher le conteneur cible :

  • Clic : affiche la cible lorsqu’un utilisateur clique
  • Survol : affiche la cible lorsqu’un utilisateur survole le déclencheur

Vous pouvez également choisir de masquer le conteneur cible dans un widget de composition. Vous trouverez ci-après les quatre options permettant de masquer le conteneur cible :

  • Aucun
  • Clic
  • A l’envol
  • A l’envol du déclencheur et de la cible

Dans cette section, vous allez apprendre à utiliser le comportement de survol pour afficher le conteneur cible, et le comportement à l’envol du conteneur de déclenchement et du conteneur cible pour masquer ce dernier.

Suivez les étapes ci-dessous pour savoir comment activer les paramètres Masquer à l’envol pour que les widgets de composition créent une barre de menus qui masque et affiche des liens vers les sous-menus en fonction de l’interaction des visiteurs :

  1. Dans la vue Conception, ajoutez un widget Composition de cadre lumineux sur la page en le faisant glisser depuis la bibliothèque de widgets.

  2. Sélectionnez les conteneurs de déclenchement. A l’aide de l’outil de sélection, déplacez les trois conteneurs de déclenchement en haut, au-dessus du plus grand conteneur cible, puis espacez-les de manière régulière.

    Repositionner les conteneurs de déclenchement
    Repositionnez les conteneurs de déclenchement au-dessus de l’image principale supérieure.

  3. Utilisez l’outil Sélection pour faire glisser les poignées latérales de chaque conteneur de déclenchement. Développez la largeur pour créer un ensemble de trois « onglets » en haut, à l’instar d’un widget Panneau à onglets.

    Faire glisser les poignées à l’aide de l’outil Sélection
    Faites glisser les cadres de sélection pour étendre la largeur des trois boutons de déclenchement.

  4. Ajoutez le contenu requis à chacune des trois zones de déclenchement. Le contenu du déclencheur peut inclure du texte, des liens, des images, des rectangles, du contenu HTML incorporé, et bien plus encore. Pour cet exemple, utilisez l’outil Texte pour ajouter du texte à chaque déclencheur : Lien un, Lien deux et Lien trois.

    Ensuite, créez un lien à l’intérieur de la seconde zone de contenu cible.

  5. Cliquez sur un conteneur de déclenchement, puis sélectionnez le plus grand conteneur cible qui lui correspond. Ajoutez un lien à la seconde zone de contenu cible. Ensuite, cliquez sur la liste déroulante en regard de l’étiquette Hyperliens dans la partie droite du panneau Contrôle. Ajoutez un lien à l’adresse web à lier.

  6. Choisissez la commande Fichier > Prévisualiser la page dans le navigateur pour tester l’affichage du widget de composition.
    Interagissez avec le widget en cliquant sur les conteneurs de déclenchement appelés Lien un, Lien deux et Lien trois.

    Remarquez que, par défaut, le conteneur cible est toujours affiché et n’est jamais masqué. Vous pouvez cliquer entre les trois boutons de déclenchement pour afficher le conteneur cible correspondant, mais l’un des trois conteneurs cibles s’affiche toujours.

  7. Pour définir le paramètre Masquer à l’envol, sélectionnez le widget de composition. Cliquez sur la flèche bleue pour accéder au panneau Options et pour modifier les options de configuration du widget.

    Vérifiez que les paramètres suivants sont activés :

    • Position : empilement (par défaut)
    • Afficher la cible : survol
    • Masquer la cible : à l’envol du déclencheur et de la cible
    • Transition : fondu (par défaut)
    • Vitesse de transition : 0,5 seconde (par défaut)
    • Lecture automatique : désactivé (par défaut)
    • Aléatoire : désactivé (par défaut)
    • Tout masquer au début : activé
    Panneau Options de composition
    Mettez à jour les paramètres dans le panneau Options pour contrôler la façon dont le widget se comporte.

    Les principaux paramètres contrôlant la fonctionnalité afficher/masquer sont le menu Afficher la cible, le menu Masquer la cible et l’activation de l’option Tout masquer au début.

  8. Choisissez de nouveau la commande Fichier > Prévisualiser la page dans le navigateur pour tester les modifications récentes apportées au widget.

    Maintenant, lors du premier chargement du widget de composition, toutes les zones cibles sont masquées par défaut.

    Interagissez de nouveau avec le widget. Notez que lorsque vous placez le pointeur de la souris sur une zone de déclenchement, la zone cible correspondante s’affiche. Si le pointeur reste dans la zone de widget, vous pouvez interagir avec le contenu dans les zones cibles (par exemple en cliquant sur le lien d’accès à un site web dans le conteneur cible intermédiaire).

    Cependant, si vous placez le pointeur en dehors de la zone de déclenchement ou de la zone cible, les zones cibles sont masquées jusqu’à ce que vous replaciez le pointeur sur une autre zone de déclenchement.

    Cette fonction vous permet de configurer une navigation interactive beaucoup plus complexe sur le site, qui répond aux mouvements de souris des visiteurs.

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