Muse CC 2017 : Les nouveautés

Convertir les widgets des anciennes versions

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Dans cette vidéo, vous allez voir qu'il est inutile de recréer ses widgets existants pour les rendre responsives. Une toute simple opération vous permet en effet de convertir vos widgets existants en responsives.

Transcription

La nouveauté principale de cette nouvelle version de Muse, ce sont donc les widgets qui sont devenus entièrement responsive. Mais qu'en est-il de vos sites existants qui contiennent des widgets non responsive ? Et bien j'ai une bonne nouvelle pour vous. Dans cette vidéo, je vais vous montrer que vous n'avez pas besoin de recréer tous ces widgets puisque vous pouvez les rendre responsive très simplement. Regardez, je suis ici dans un site que j'ai réalisé précédemment dans les anciennes versions de Muse et je vais me rendre ici sur cette page Contact, cette page qui contient un formulaire de contact simple. Ce formulaire a été créé dans les anciennes versions de Muse donc regardez, il n'est pas du tout responsive et d'ailleurs vous voyez qu'il se comporte un petit peu bizarrement dans cette version de Muse. Comment rendre cet élément responsive ? Tout d'abord rappelez-vous que quand je sélectionne ici un formulaire, regardez, c'est bien le mot Formulaire qui apparaît ici dans le coin supérieur gauche de Muse, et bien l'outil de redimensionnement n'est pas disponible. En effet, dans le cas d'un formulaire, ce n'est pas le formulaire en lui-même qui est responsive mais ce sont les différents éléments, les différents champs de ce formulaire. Alors avant de rendre ce formulaire responsive vous montrer dans ces options que j'ai ici l'option Modifier ensemble qui est cochée et donc il me suffit de rendre responsive l'un des champs de ce formulaire, par exemple ici le premier. Regardez c'est bien le mot maintenant Champ de formulaire qui est visible ici dans le coin supérieur gauche de Muse et donc maintenant je peux accéder à cet outil de redimensionnement. Constatez que le champ de formulaire sélectionné est pour le moment épinglé ici sur la gauche. C'est ça qui rendait le comportement de ce champ un petit peu bizarre plus tôt dans cette vidéo donc. Je vais rendre ce champ de formulaire responsive, voilà, et constatez que du coup et bien l'outil d'épinglage ici n'est plus disponible, ce qui est finalement tout à fait logique. Je vais sélectionner le deuxième champ de formulaire et vous montrer que lui aussi est automatiquement devenu largeur responsive, puisque nous éditons ces choses ensemble. Même chose ici pour le troisième champ de ce formulaire, il est également en largeur responsive. Mon bouton Envoyer ici lui il n'est pas en largeur responsive, c'est normal, c'est pas un champ de formulaire donc il n'a pas été modifié avec le reste. Par contre, vous voyez qu'il est épinglé ici sur la gauche. Alors je vais laisser ce bouton comme ça, je n'ai pas envie qu'il soit redimensionné puisque si mon écran devient vraiment trop petit, et bien ce bouton deviendra également trop étroit pour qu'on puisse cliquer dessus confortablement. Par contre, je vais sélectionner ici les différents messages et je vais également rendre ces éléments responsive. Que se passe-t-il maintenant avec mon formulaire ? Et bien regardez, il est complètement responsive mais attention uniquement dans ce point d'arrêt. Effectivement, dans le point d'arrêt suivant il a gardé ses propriétés précédentes et donc je dois refaire ce travail dans chacun de mes points d'arrêt. Ici mon champ de formulaire, et bien il est épinglé, je vais le rendre responsive. Du coup l'outil d'épinglage n'est plus disponible, je vais faire de même ici avec mon message. Voilà, donc il est maintenant responsive ce formulaire dans ce point d'arrêt. Par contre dans le point d'arrêt suivant, je peux refaire encore une fois le travail. Ça va aller très très vite donc hop ici responsive, même chose avec mon message. Par contre mon bouton lui il va rester en largeur fixe, je peux même éventuellement me permettre de l'agrandir un petit peu, afin d'être capable de taper dessus avec facilité sur un appareil de type smartphone ou tablette. Voilà donc pour la mise en responsive de ces éléments. Alors comme cet élément est maintenant responsive, je n'ai plus besoin d'avoir ces grands espaces blancs ici sur le côté, donc rien ne m'empêche bien évidemment de redimensionner ici mes différents champs de formulaire comme ceci. Voilà pour que ce formulaire prenne un peu plus de place sur l'écran, ce sera d'autant plus confortable à utiliser de replacer maintenant le formulaire voilà au milieu de la page comme ceci et voilà comment j'ai mis à jour en quelques minutes et bien ce formulaire. Je l'ai transformé en formulaire responsive grâce à cette nouveauté de Muse CC 2017.1.

Muse CC 2017 : Les nouveautés

Appréhendez les nouveautés de Muse. Utilisez le Power Zoom, comprenez le fonctionnement du bouton Partager, utilisez les nouveaux reCaptcha, fusionnez les modifications, etc.

33 min (8 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Muse Muse CC 2017
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :2 nov. 2016
Mis à jour le:30 août 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !