[Adobe Muse] Menu hamburger avec Lightbox et effets de textes





Personnalisez votre propre menu hamburger  avec l'effet Lightbox grâce aux widgets intégrés de Adobe Muse. Pour ce tutoriel le seul widget qui va nous être utile est "Lightbox Display" que vous trouverez dans votre bibliothèque Widget, dans le dossier Composition.


L'outil de texte sera aussi utiliser pour formater le texte dans différents états 
(Normal, Passerelle, Souris vers le bas et Actif). Il sera différent en fonction du type de texte que vous voulais utiliser. Si c'est une police non standard Muse va l'exporter en tant qu'image. Si vous voulez avoir le même effet que dans ce tutoriel, je vous recommande d'utiliser une police standard ou de convertir votre police en une police web. Pour savoir comment faire regardez ici 

1. Ouvrez votre bibliothèque de widgets et faite glisser le widget Lightbox display. 
Supprimez tous les déclencheurs sauf un. Supprimez tous les autres éléments, barres latérales, textes... Vous avez juste besoin d'une boite de déclenchement, du contenu, de la cible et du bouton de fermeture.





2.Déplacez le déclencheur en haut à droite de votre site Web et fixez-le. Assurez-vous que celui-ci soit en état normal et remplissez-le avec votre icône de hamburger. Ajoutez de la couleur au contenu (ce sera la couleur de la boîte lumineuse ou Lightbox).



3.Ajouter des cadres de texte dans la cible. Chaque cadre de texte correspond à une page Muse ou à une page externe. Utilisez la police souhaitée et modifiez-la comme vous le souhaitez dans l'état normal.

4.Cliquez sur l'état de survoltage et formatez le nouveau comportement du texte. Ici nous allons augmenter le suivi et la vitesse de transition. Faites de même avec l'état actif.

Regardez le tutoriel pour plus d'informations. 




Commentaires

Posts les plus consultés de ce blog

5 Conseils utiles pour vous améliorer sur Adobe Muse

[Adobe Muse] Créer un menu fixe

Comment créer un menu hamburger avec un effet fondu