Utilisation des widgets dans Adobe Muse

Vous pouvez ajouter des fonctions de site interactives et du contenu généré dynamiquement à l’aide des widgets dans Adobe Muse. Les widgets sont des composants configurables préfabriqués proposant des fonctionnalités web courantes telles que des menus, des formulaires, des diaporamas, etc. Adobe Muse fournit une gamme de widgets qui simplifient la conception de sites web. 

Les widgets d’Adobe Muse peuvent s’adapter au style de votre site, ce qui vous permet de les intégrer parfaitement à toutes vos pages web. La bibliothèque de widgets regroupe tous les composants de site prédéfinis (widgets) disponibles. Vous pouvez les faire glisser sur une page, les configurer de façon à contrôler leur comportement et personnaliser leur aspect.

Adobe Muse propose les types de widgets suivants :

• Widgets de composition : ces widgets vous permettent d’interagir avec une zone située sur la page web de façon à pouvoir modifier le contenu affiché dans une autre zone. Une animation défilante ou en fondu s’affiche en cas de modification. 
• Widgets de formulaire : ajoutez un formulaire à partir duquel les visiteurs de votre site peuvent vous contacter. Différents champs de formulaire sont disponibles en fonction du widget de formulaire que vous choisissez.
  
• Widgets de menu : créez une barre de menus remplie dynamiquement ou manuellement qui comprend des états pour chaque élément de menu. Sur chaque page, le lien de menu sera automatiquement défini à l’état « actif » pour indiquer qu’il s’agit de la page actuelle.
• Widgets de panneau : affichez un seul panneau de contenu à la fois, avec des liens de navigation intuitifs permettant de modifier le panneau actif. Choisissez entre une structure coulissante en accordéon et une structure à onglets traditionnelle.
• Widgets de diaporama : ces widgets vous permettent d’afficher facilement vos images dans une galerie à l’aide d’animations élégantes. Ils peuvent être utilisés pour créer des diaporamas simples basés sur des images. Pour les cas plus complexes, il est recommandé d’utiliser un widget de composition.
• Widgets sociaux : les widgets sociaux vous permettent de configurer votre propre code HTML et de l’intégrer dans vos pages Adobe Muse. La plupart des widgets web proposent des fonctionnalités qui sont également disponibles en incorporant du code HTML provenant de sites web tiers. Vous pouvez gagner du temps en ajoutant et en configurant le contenu web directement dans Adobe Muse, plutôt qu’en générant du code en dehors de l’application et de le coller dans Adobe Muse en tant que code HTML incorporé.

Ajoutez un widget à une page web Adobe Muse

Accédez à la Bibliothèque de widgets pour sélectionner et ajouter des widgets sur votre page web Adobe Muse. Pour ajouter un widget, procédez comme suit :

Configuration et personnalisation des widgets de

Adobe Muse vous permet de configurer les widgets via le panneau Options après les avoir placés sur vos pages web. Le panneau Options est un panneau contextuel permettant d’appliquer des modifications et de mettre à jour les paramètres propres au widget. Le panneau Options contient des paramètres permettant de définir la façon dont s’affiche le contenu.

Les options Fond et Contour vous permettent d’améliorer considérablement l’aspect d’un widget. Si le widget contient du texte, vous pouvez utiliser le panneau Texte (Fenêtre >Texte ou les options de texte dans le panneau de contrôle) pour modifier et personnaliser le texte en fonction de vos besoins.

Pour configurer un widget, procédez comme suit :

Sélection d’éléments imbriqués dans un widget

Lorsque vous faites glisser sur une page un widget de la Bibliothèque de widgets, vous importez essentiellement un ensemble imbriqué de conteneurs. Ces conteneurs peuvent être sélectionnés et modifiés en fonction de leur hiérarchie.

Lorsque vous utilisez des widgets, il est important de bien comprendre comment sélectionner le widget et ses conteneurs. Adobe Muse affiche votre sélection actuelle à l’aide de l’indicateur de sélection. L’indicateur de sélection, situé dans le coin supérieur gauche de l’application Adobe Muse, affiche votre sélection actuelle ainsi qu’un menu déroulant qui vous permet de prévisualiser un objet en fonction de son état.

Dans les exemples ci-dessous, l’indicateur de sélection affiche la sélection de la page (lorsqu’aucun objet de la page web n’est sélectionné), un widget de menu (lorsque vous sélectionnez un widget de menu) et un élément de menu (conteneur dans un widget de menu).

Lorsque vous cliquez une fois sur le widget entier, l’indicateur de sélection affiche le mot « Widget ». Si vous cliquez à nouveau, vous pouvez sélectionner un conteneur dans le widget et l’indicateur de sélection affiche le mot « Conteneur ». Vous pouvez continuer à cliquer plusieurs fois pour sélectionner les éléments (tels que les blocs de texte) qui sont imbriqués dans les conteneurs.

Lorsqu’un bloc de texte est sélectionné, l’indicateur de sélection affiche les mots « Bloc de texte ». Au fur et à mesure que vous cliquez sur un widget pour « effectuer une exploration en aval » à l’intérieur des éléments imbriqués, il est conseillé de noter les mots de l’indicateur de sélection pour savoir quel élément imbriqué est sélectionné. Vous allez sélectionner différents conteneurs (tels que les boutons individuels d’une navigation des menus) pour mettre à jour les états de ces boutons. Vous pouvez ainsi contrôler l’aspect des boutons lors du premier chargement de la page, lorsque le visiteur pointe sur les boutons et lorsque qu’il clique sur ceux-ci. Cela vous permet aussi de définir un état « actif » qui guide le visiteur en indiquant visuellement le bouton qui correspond à la page qu’il affiche actuellement.

Pour cliquer dans les conteneurs imbriqués dans un widget, vous pouvez cliquer plusieurs fois sur l’élément à modifier. Prenez note de l’indicateur de sélection et des options présentées dans le panneau Etats pour voir quand vous avez sélectionné l’élément imbriqué à modifier.

Une fois la mise à jour d’un widget terminée, vous pouvez soit cliquer en dehors (dans un autre endroit de la page) pour désélectionner le widget, soit appuyer sur la touche Echap à plusieurs reprises pour passer au niveau supérieur dans la hiérarchie du widget.

Configuration de widgets à l’aide du panneau Options

Une fois que vous avez fait glisser sur une page un widget de la Bibliothèque de widgets, une flèche bleue s’affiche dans le coin supérieur droit du widget, lorsque celui-ci est sélectionné. Cliquez sur cette flèche bleue pour ouvrir le menu Options.

Chaque widget dispose de différentes options. Ainsi, les options que vous pouvez définir dans l’interface du menu Options peuvent varier. Les paramètres permettent de contrôler le comportement du widget (par exemple, choisir si un diaporama est lu automatiquement ou si les visiteurs doivent cliquer sur les vignettes pour afficher chaque image en plus grand format) et son affichage (par exemple, spécifier le type de transition qui s’anime à l’affichage de chaque nouvelle image).

Lorsque vous concevez des sites web, vous avez l’occasion de spécifier ces paramètres et de travailler avec vos clients pour identifier les choix qui conviennent le mieux à un projet spécifique. N’oubliez pas qu’à tout moment, même une fois qu’un site est publié en ligne, vous pouvez revenir au fichier .muse, sélectionner un widget, cliquer sur la flèche bleue correspondante pour accéder au menu Options et définir de nouveaux paramètres pour modifier le widget. Ultérieurement, une fois que vous avez à nouveau publié le site, les modifications que vous avez apportées sont répercutées sur le site web en direct.

Avec les widgets de menu, vous pouvez faire en sorte que les widgets affichent dynamiquement les noms des pages du site et créent automatiquement les liens vers ces pages. Il est ainsi très facile d’ajouter des éléments de navigation à des pages en fonction de votre plan de site dans la vue Plan, sans avoir à vous préoccuper des liens rompus. Vous pouvez également désactiver des pages spécifiques pour qu’elles ne s’affichent pas dynamiquement dans les widgets de menu. Pour ce faire, cliquez avec le bouton droit de la souris sur la vignette de la page en vue Plan et désélectionnez l’option Inclure la page dans la navigation. Cette option est activée par défaut (et affiche une coche lorsqu’elle est activée).

Vous pouvez également choisir de configurer les widgets de menu manuellement, si vous préférez nommer les boutons vous-même et ajouter les liens à des pages spécifiques, plutôt que de laisser Adobe Muse créer les éléments de menu. Dans le menu Options, dans la section intitulée Type de menu, vous pouvez choisir l’option Manuelle.