Utilisation des widgets de composition dans Adobe Muse

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.

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 :

• 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.

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.

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 :

• 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é

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.