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.
Apprenez à ajouter des widgets de composition dans Adobe Muse. Configurez des widgets de composition pour créer des sites interactifs.
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.
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.
Widget comportant de petites vignettes. Par défaut, ce widget ne possède aucun remplisseur. Vous pouvez lier manuellement ce widget à un conteneur cible.
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.
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.
Widget contenant de petites vignettes connectées à la zone de présentation cible. Par défaut, les diapositives glissent horizontalement dans ce widget.
Widget contenant le texte d’une info-bulle. Lorsque l’utilisateur survole la zone de déclenchement, l’info-bulle s’affiche immédiatement.
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.
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.
Dans la vue Plan, double-cliquez sur la page à laquelle vous souhaitez ajouter le widget et ouvrez-la.
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.
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.
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.
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.
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.
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.
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.
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.
Pour ajouter des vignettes, cliquez sur le signe Plus (+) en regard des conteneurs de déclenchement.
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.
Vous pouvez définir les paramètres suivants depuis le panneau Options :
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.
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é.
Cliquez sur l’image principale dans le conteneur de déclenchement pour appeler l’effet de cadre lumineux.
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.
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.
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 :
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.
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.
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 :
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.
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 :
Le panneau Options offre deux paramètres pour afficher le conteneur cible :
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 :
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 :
Dans la vue Conception, ajoutez un widget Composition de cadre lumineux sur la page en le faisant glisser depuis la bibliothèque de widgets.
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.
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.
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.
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.
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.
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 :
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.
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.
Accéder à votre compte