Lisez cet article pour en savoir plus sur les points d’arrêt. Découvrez comment épingler les objets, les redimensionner pour une conception responsive et formater le texte dans les points d’arrêt.

Remarque :

Aucune nouvelle fonctionnalité n’est plus ajoutée à Adobe Muse et le support prendra fin le 26 mars 2020. Pour plus d’informations et pour obtenir de l’aide, reportez-vous à la page de fin de service Adobe Muse.

Dans une conception responsive, une seule mise en page des objets et du texte ne sera peut-être pas adaptée à toutes les tailles d’écran. Les images, le texte, les widgets et les formulaires peuvent être repositionnés dans différents points d’arrêt. Les images peuvent dépasser de la largeur de la page, les objets peuvent se superposer les uns aux autres ou la clarté du texte peut être réduite. Les images, le texte, les widgets et les formulaires doivent être repositionnés dans différents points d’arrêt. Ainsi, il est impératif de soigneusement positionner les objets et formater le texte afin qu’ils s’affichent correctement quelle que soit la taille de l’écran. 

Après avoir conçu votre page, vous pouvez utiliser la barre de défilement pour prévisualiser votre mise en page dans différentes tailles d’écran. Si vous ressentez le besoin de modifier la mise en page de vos objets en fonction de largeurs de navigateur spécifiques, vous pouvez ajouter des points d’arrêt.

Lisez ce qui suit pour en savoir plus sur les points d’arrêt et voir comment concevoir une mise en page responsive de façon efficace dans Adobe Muse.

Qu’est-ce qu’un point d’arrêt ?

Dans une mise en page adaptative, les points d’arrêt représentent les différentes largeurs de navigateur en pixels. Les points d’arrêt vous permettent de visualiser votre design dans différentes largeurs de navigateur et de tester la manière dont les objets d’une page réagiront aux variations de largeur de navigateur.

Ajout de points d’arrêt

Par défaut, un nouveau site dans Adobe Muse contient un point d’arrêt pour les postes de travail (960 pixels de largeur). Vous pouvez commencer à concevoir votre mise en page pour cette largeur. Une fois la conception terminée, vous pouvez prévisualiser la mise en page à différentes largeurs à l’aide de la barre de défilement. Lorsque vous procédez de la sorte, vous pouvez voir et enregistrer la largeur à laquelle la conception se « divise ». Par exemple, une ligne de texte se divise en deux, ou encore, des images sur une ligne horizontale se retrouvent empilées verticalement. Ce problème survient car il manque des points d’arrêt aux largeurs. Après avoir ajouté les points d’arrêt nécessaires, vous pouvez adapter la conception pour améliorer la disposition des objets.

pour chaque point d’arrêt, Adobe Muse ajoute en arrière-plan une déclaration de requêtes multimédias correspondant à votre page web. Les requêtes multimédias sont regroupées dans un module CSS3 qui permet de restituer le contenu de manière à l’adapter aux différents formats d’écran. La plupart des navigateurs modernes sont capables d’interpréter les requêtes multimédias correspondant à ces points d’arrêt. Lorsque les utilisateurs consultent votre page web, les navigateurs sélectionnent et affiche la requête multimédia la plus pertinente et la mise en page de conception correspondante, en fonction des appareils utilisés.

  1. Faites glisser la barre de défilement sur la barre des points d’arrêt et placez-la à l’endroit où vous souhaitez ajouter le point d’arrêt.

  2. Cliquez sur dans la barre des points d’arrêt. Un nouveau point d’arrêt est ajouté dans la barre des points d’arrêt. Vous pouvez également afficher la largeur du navigateur du point d’arrêt.

    De la même manière, vous pouvez ajouter si besoin des points d’arrêt sur la barre des points d’arrêt pour définir des largeurs de navigateur spécifiques.

    lorsque vous cliquez sur un point d’arrêt, le point d’arrêt actuel s’affiche en couleur. Les autres points d’arrêt sont grisés.

    Remarque :

    Vous pouvez également ajouter des points d’arrêt en plaçant des éléments de bibliothèque avec des points d’arrêt dans votre vue Conception. Ouvrez le panneau Bibliothèque, sélectionnez l’objet que vous souhaitez placer, cliquez sur le signe plus (+) en regard de l’objet et faites glisser l’objet dans la vue Conception.

Où dois-je ajouter mes points d’arrêt ?

Vous pouvez ajouter des points d’arrêt aux gabarits ainsi qu’à des pages individuelles. Lorsque vous ajoutez des points d’arrêt sur une page, les valeurs des points d’arrêt sont appliquées uniquement à cette page spécifique.

Lorsque vous ajoutez des points d’arrêt à un gabarit, vous pouvez choisir d’appliquer les points d’arrêt dont vous avez besoin sur les pages individuelles. Les points d’arrêt des gabarits s’affichent sous la forme de petits triangles sur les pages individuelles. Il suffit de cliquer sur le signe plus (+) pour activer ces points d’arrêt sur les pages individuelles.

Points d’arrêt du gabarit
Cliquez sur + pour ajouter des points d’arrêt au gabarit.

Tenez compte du scénario ci-après. Lorsque vous mettez en page votre site, vous pouvez ajouter des points d’arrêt spécifiques pour les téléphones si vous le souhaitez. Vous pouvez ajouter les points d’arrêt adaptés sur le gabarit, de sorte qu’ils soient disponibles sur les pages individuelles. Lorsque vous concevez ensuite les pages individuelles, vous pouvez obtenir ces points d’arrêt sur ces pages en un seul clic.

Remarque :

Lorsque vous appliquez un autre gabarit sur une page individuelle, les points d’arrêt du gabarit précédent sont remplacés par les points d’arrêt du nouveau gabarit.

Modification de points d’arrêt

  1. Sur la barre des points d’arrêt, déplacez la barre de défilement vers la valeur de point d’arrêt souhaitée. Il s’agit de l’emplacement de modification du point d’arrêt.

  2. Si vous souhaitez afficher ou modifier la couleur du point d’arrêt, cliquez avec le bouton droit de la souris sur le point d’arrêt et sélectionnez Propriétés du point d’arrêt ou cliquez deux fois sur le point d’arrêt.

    Vous pouvez également utiliser cette fenêtre pour modifier la couleur du point d’arrêt, la largeur, la hauteur et les marges de la page.

    Propriétés du point d’arrêt pour l’affichage et la modification des valeurs de couleur et de marge du point d’arrêt
    Modifiez la couleur et les valeurs de marge du point d’arrêt à l’aide de la boîte de dialogue Propriétés du point d’arrêt.

  3. Cliquez sur OK pour enregistrer vos paramètres.

Remarque :

Vous ne pouvez pas modifier les points d’arrêt du gabarit à partir des pages individuelles.

Suppression de points d’arrêt

  1. Pour supprimer un point d’arrêt, procédez de l’une des manières suivantes :

    • Cliquez sur X sur le côté gauche du point d’arrêt actuel.
    • Cliquez avec le bouton droit de la souris sur la barre des points d’arrêt, puis sélectionnez Supprimer le point d’arrêt.

    Lorsque vous supprimez un point d’arrêt, les modifications de mise en page correspondantes et les paramètres de texte du point d’arrêt seront également supprimés.

    Suppression de points d’arrêt
    Cliquez sur le symbole x pour supprimer le point d’arrêt.

    Suppression d’un point d’arrêt par un clic droit
    Cliquez avec le bouton droit de la souris pour supprimer les points d’arrêt.

    Remarque :

    Vous ne pouvez pas supprimer un point d’arrêt de gabarit d’une page individuelle.

Décalage entre les points d’arrêt

De votre point d’arrêt actuel, vous pouvez décaler jusqu’au point d’arrêt suivant ou précédent. Pour accéder au point d’arrêt suivant ou précédent, procédez comme suit :

  • Utilisateurs de Windows : 
    • Point d’arrêt précédent : appuyez sur Ctrl + maj + 5
    • Point d’arrêt suivant : appuyez sur Ctrl + maj + 6
  • Utilisateurs de Mac OS :
    • Point d’arrêt précédent : appuyez sur Cmnd + maj + 5
    • Point d’arrêt suivant : appuyez sur Cmnd + maj + 6

Utilisation d’objets dans un site responsive

Vous pouvez utiliser les options suivantes pour vous assurer que votre mise en page est correcte dans tous les points d’arrêt :

  • Afficher/masquer des objets : vous pouvez également masquer un objet dans un point d’arrêt lorsque vous choisissez de l’afficher dans un autre. Pour plus d’informations, voir Afficher ou masquer des objets.
  • Positionner des objets différemment dans différents points d’arrêt : vous pouvez placer un même objet à des positions différentes dans différents points d’arrêt. Pour plus d’informations, voir Positionner les objets lors de la conception de sites web adaptatifs.
  • Utiliser l’épinglage adaptatif : vous pouvez décider quels objets doivent être statiques et lesquels doivent être fluides. Vous pouvez épingler les objets statiques afin qu’ils restent à la même position dans tous les points d’arrêt. Pour plus d’informations, voir Epinglage adaptatif.
  • Redimensionnement d’objets : vous pouvez redimensionner un objet différemment à chaque point d’arrêt. Vous pouvez également activer le redimensionnement automatique des objets en fonction de la largeur de la page. Pour plus d’informations sur le redimensionnement des objets, voir Redimensionnement d’objets.
  • Formatage de texte pour différents points d’arrêt : vous pouvez formater le texte différemment dans différents points d’arrêt afin d’augmenter sa clarté et sa lisibilité pour les différentes largeurs de navigateur. Pour plus d’informations, voir Formatage de texte dans les mises en page adaptatives.

Afficher ou masquer des objets

Imaginez le scénario suivant : vous avez inséré un menu traditionnel pour postes de travail, mais ce menu prend beaucoup trop de place sur les écrans de tablette. Un menu en sandwich ou en accordéon est davantage adapté aux tablettes.

Il est très simple de faire face à ce type de situations lors de la conception de sites web adaptatifs dans Adobe Muse. Vous pouvez choisir d’afficher un menu standard sur les postes de travail et un menu en sandwich sur les tablettes, comme dans les images ci-après.

Affichage ou masquage des objets d’une mise en page adaptative
Affichez le menu standard et masquez le menu en sandwich sur les postes de travail.

Affichage ou masquage des objets d’une mise en page adaptative
Affichez le menu en sandwich sur les appareils mobiles et masquez le menu standard.

Pour afficher ou masquer des objets dans votre projet Adobe Muse :

  1. Insérez tous les objets dont vous avez besoin, y compris ceux que vous souhaitez masquer dans certains points d’arrêt.

  2. Faites glisser la barre de défilement pour accéder à une vue de point d’arrêt spécifique.

  3. Cliquez avec le bouton droit de la souris sur l’objet que vous souhaitez masquer, puis cliquez sur Masquer dans les points d’arrêt.

    L’objet est masqué dans la vue de point d’arrêt actuelle, mais est visible dans les autres points d’arrêt. Si vous souhaitez plutôt masquer l’objet dans tous les autres points d’arrêt, cliquez sur Masquer dans Autres points d’arrêt. Vous pouvez ensuite afficher l’objet dans des points d’arrêt spécifiques à l’aide du panneau Calques.

    Masquage des objets dans les points d’arrêt
    Masquage des objets dans les points d’arrêt

    Positionnez maintenant les objets visibles dans la vue de point d’arrêt.

  4. Accédez à la vue de point d’arrêt dans laquelle vous souhaitez afficher l’objet que vous avez précédemment masqué. Pour ce faire, vous pouvez faire glisser la barre de défilement.

  5. Cliquez sur le panneau Calques et recherchez le calque de l’objet que vous souhaitez afficher. Vous devrez peut-être passer en revue plusieurs calques pour trouver votre calque d’objet.

    Affichage ou masquage des objets à partir du panneau Calques
    Utilisation du panneau Calques pour afficher/masquer des objets

  6. Cliquez sur la première colonne correspondant au calque d’objet. Un petit point noir s’affiche pour indiquer que l’objet est désormais visible dans la vue de point d’arrêt actuelle.

    Clic pour afficher ou masquer des objets
    Cliquez sur la première colonne pour afficher ou masquer des objets.

    Pour afficher l’objet dans tous les points d’arrêt, cliquez dessus avec le bouton droit de la souris et cliquez sur Afficher dans Autres points d’arrêt.

Positionner des objets

Vous pouvez positionner des objets différemment dans différentes vues de point d’arrêt. Par exemple, vous pouvez positionner des images horizontalement pour l’affichage sur les postes de travail, et les positionner verticalement pour l’affichage sur les appareils mobiles.

Adobe Muse enregistre la position des objets et les affiche conséquence lorsque la taille de l’écran change.

Mise en page des objets pour les postes de travail
Mettez en page les objets horizontalement pour l’affichage sur les postes de travail.

Mise en page des objets pour les appareils mobiles
Mettez en page les objets verticalement pour l’affichage sur les appareils mobiles.

Pour déplacer vos objets dans tous les points d’arrêt, procédez comme suit :

  1. Sélectionnez le point d’arrêt sur lequel vous souhaitez positionner votre objet.

  2. Déplacez l’objet vers l’emplacement souhaité.

    Remarque :

    Lorsque vous positionnez des objets, n’oubliez pas de vérifier la distance entre les objets et la distance entre chaque objet et le bord du navigateur. Vous devrez peut-être régler le positionnement des objets ou ajouter des points d’arrêt supplémentaires pour résoudre les problèmes de conception entre les points d’arrêt.

Déplacement de plusieurs objets en tant que groupe

Dans une mise en page responsive, vous pouvez déplacer un groupe d’objets simultanément. Lorsque vous souhaitez déplacer tout un groupe d’objets alignés verticalement, il vous suffit de sélectionner l’objet du dessus. Vous remarquerez que la poignée verticale apparaît dans la marge de gauche dans Adobe Muse.

Poignée de déplacement vertical dans Adobe Muse
Déplacez un groupe d’objets alignés verticalement.

Lorsque vous cliquez sur la poignée et la déplacez vers le haut ou vers le bas, vous constaterez que l’objet sélectionné, et tous les objets situés en dessous, se déplacent en tant que groupe.

Placement d’objets avec des points d’arrêt

Vous pouvez ajouter un ensemble de points d’arrêt en plaçant un élément de bibliothèque avec des points d’arrêt dans votre vue Conception. Ouvrez le panneau Bibliothèque (Fenêtre > Bibliothèque). Sélectionnez l’élément que vous souhaitez ajouter à la page. Cliquez sur le signe plus (+) en regard de l’élément et faites glisser l’élément vers la vue Conception.

Ajout de points d’arrêt à l’aide des éléments de bibliothèque
Cliquez sur le signe plus (+) pour placer des objets avec des points d’arrêt.

Vous remarquerez qu’un ensemble de points d’arrêt est automatiquement ajouté à votre page. Si vous avez déjà ajouté des points d’arrêt à votre page et si vous ajoutez un élément de bibliothèque avec des points d’arrêt, tous les points d’arrêt sont activés dans la page.

Vous pouvez utiliser des éléments de bibliothèque avec des points d’arrêt pour rapidement répliquer des points d’arrêt entre différentes pages, et entre différents fichiers .muse.

Epingler des objets

Dans Adobe Muse, si vous souhaitez que certains objets soient statiques, vous pouvez les épingler. Vous pouvez épingler un objet à une page ou à un navigateur :

  • Epingler des objets au navigateur : vous pouvez épingler un objet au navigateur si vous voulez que l’objet reste fixe, même lorsque vous utilisez la barre de défilement du navigateur. Par exemple, une barre de menu peut rester en place même lorsque vous faites défiler la page vers le haut ou vers le bas. Pour en savoir plus sur l’épinglage d’objets au navigateur, suivez ce lien.
  • Epingler des objets à la page : vous pouvez épingler un objet à une page si vous souhaitez que l’objet reste fixe sur une page web donnée. Par exemple, un logo d’entreprise qui apparaît en permanence dans l’angle supérieur droit de la page web.

Lisez ce qui suit pour savoir comment épingler un objet à une page dans un design de site web adaptatif.

Remarque :

Pour déterminer si vous souhaitez verrouiller un objet, utilisez la barre de défilement et affichez la page à diverses largeurs de navigateur. Si vous pensez qu’il est toujours nécessaire d’épingler un objet à la page, effectuez les actions suivantes :

  1. Sélectionnez l’objet que vous souhaitez épingler.

  2. Depuis l’option Epingler en haut, sélectionnez une zone pour épingler l’objet à la page.

    Utilisation de l’option Epingler à la page dans la conception adaptative
    Utilisez le menu Epingler pour épingler des objets dans une mise en page adaptative.

  3. Epinglez l’objet à une page de l’une des façons suivantes :

    • Epingler à gauche : sélectionnez cette case si vous souhaitez épingler un objet sur le côté gauche de la page web. La distance entre le bord du navigateur et la gauche de l’objet reste constante.
    • Epingler au centre  : sélectionnez cette case si vous souhaitez épingler un objet au centre. La distance entre le bord gauche et le haut de l’objet d’une part, et le bord du navigateur d’autre part reste constante.
    • Epingler à droite : sélectionnez cette case si vous souhaitez épingler un objet sur le côté droit de la page web. La distance entre le bord du navigateur et la droite de l’objet reste constante.

    Par exemple, si un bouton comme Précommander maintenant doit apparaître dans le coin droit de la page quel que soit le point d’arrêt, vous devez sélectionner le bouton et l’épingler à droite, comme le montre l’image.

    Cliquez sur la case pour épingler l’objet à droite.
    Cliquez sur la case à droite pour épingler l’objet à droite.

    Lorsque vous épinglez un objet à une page, Adobe Muse affiche des lignes pointillées qui partent de l’objet et indiquent l’emplacement où sera épinglé l’objet. Dans l’image suivante, vous pouvez voir la ligne pointillée qui va jusqu’au bord droit de la page. Cela indique que l’objet est épinglé sur le côté droit de la page.

    Ligne pointillée Epingler à la page
    Les lignes pointillées indiquent l’emplacement où est épinglé l’objet.

  4. Utilisez la barre de défilement pour afficher la mise en page dans les différentes largeurs de page. Vérifiez si l’épinglage affecte la mise en page lors du redimensionnement de la page.

Redimensionnement d’objets

  1. Accédez à la vue de point d’arrêt dans laquelle vous souhaitez redimensionner l’objet.

  2. Cliquez avec le bouton droit sur l’objet, puis sélectionnez Redimensionner > <Option de redimensionnement>.

    Remarque :

    L’option Redimensionner diffère en fonction des objets. Vous pouvez, par exemple, redimensionner une image en fonction de la largeur et de la hauteur dans une mise en page adaptative, alors que vous pouvez redimensionner une zone de texte uniquement par la largeur.

    Les objets qui ne sont pas fluides ne disposent pas de l’option Redimensionner.

  3. Faites glisser et redimensionnez l’objet pour le point d’arrêt actuel.

    Par exemple, sur la première image, notez que l’image est trop large pour un point d’arrêt de 768 pixels. Vous pouvez faire glisser l’image et la redimensionner pour l’adapter à la largeur de la page, comme indiqué sur la seconde image.

    L’image dépasse la largeur de la page.
    L’image dépasse la largeur de la page.

    Redimensionnez les objets pour différents points d’arrêt.
    Faites glisser les objets et redimensionnez-les pour différents points d’arrêt.

  4. Prévisualisez cette modification dans un navigateur. Redimensionnez votre navigateur jusqu’à ce que la largeur de celui-ci atteigne la valeur du point d’arrêt. Notez le changement de taille de l’objet une fois que la largeur de votre navigateur atteint la valeur du point d’arrêt.

Remarque :

Si des éléments d’un Bouton d’état ou de tout autre conteneur de widget sont définis pour être fluides, ils sont repositionnés et/ou redimensionnés lorsque leur conteneur est redimensionné.

Copier la taille et la position des objets

Si vous souhaitez copier la taille et la position d’un objet dans différents points d’arrêt, procédez comme suit :

  1. Cliquez avec le bouton droit de la souris sur l’objet que vous souhaitez copier.

  2. Utilisez l’une des méthodes suivantes :

    • Sélectionnez Copier la taille et la position dans > <valeur de point d’arrêt spécifique> pour appliquer la taille et la position de l’objet actuel à ce point d’arrêt spécifique.
    • Sélectionnez Copier la taille et la position dans >Tous les points d’arrêt, pour appliquer la taille et la position de l’objet actuel à tous les points d’arrêt.

Formatage de texte dans les mises en page adaptatives

Dans le cadre du design de sites web adaptatifs, il est important de formater le texte pour différentes largeurs de navigateur afin qu’il soit toujours clair et lisible. Le texte placé dans une vue de point d’arrêt peut passer à la ligne brusquement dans une autre vue de point d’arrêt. Des sauts de ligne indésirables peuvent également se produire lorsque vous permutez les points d’arrêt.

Adobe Muse vous permet de formater le texte différemment pour différents points d’arrêt. Par exemple, vous pouvez choisir une taille de police de 20 points pour les tablettes et de 15 points pour les appareils mobiles.

Formatage du texte pour l’affichage sur les postes de travail
Formatage du texte pour l’affichage sur les postes de travail

Formatage du texte pour l’affichage sur les appareils mobiles
Formatage du texte pour l’affichage sur les appareils mobiles

Pour formater du texte dans une mise en page adaptative, Adobe Muse propose une icône de formatage de texte dans le panneau où vous trouverez également l’outil Recadrage et l’outil Sélection. Cette icône comprend deux options et vous pouvez utiliser celle de votre choix pour formater votre texte.

Vous pouvez sélectionner l’option Formater le texte entre les points d’arrêt pour formater le texte dans tous les points d’arrêt d’une page. Lorsque vous sélectionnez cette option, vous devez uniquement formater le texte sur une vue de point d’arrêt. Le texte est ensuite automatiquement formaté sur les autres points d’arrêt.

En revanche, si vous avez besoin de formater le texte pour un point d’arrêt spécifique, vous pouvez sélectionner l’option Formater le texte sur le point d’arrêt actuel. Par exemple, vous pouvez augmenter la taille du texte à 24 lorsque vous formatez du texte pour les appareils mobiles.

Le formatage du texte est enregistré et s’affiche en conséquence lorsque le site est consulté sur des navigateurs de largeur différente.

Formater du texte dans une mise en page adaptative

  1. Accédez à la vue de point d’arrêt requise.

  2. Sélectionnez la zone de texte et faites-la glisser pour la redimensionner. Votre texte s’ajuste lorsque vous redimensionnez la zone de texte.

    Remarque :

    La limite droite de la zone de texte définit le degré d’ajustement du texte en largeur lorsque vous redimensionnez la zone de texte.

  3. Pour formater du texte, sélectionnez le texte à formater, puis cliquez sur l’une des options suivantes :

    • Formater le texte entre les points d’arrêt pour formater le texte dans tous les points d’arrêt.
    • Formater le texte sur le point d’arrêt actuel pour formater le texte uniquement pour le point d’arrêt actuel.

    Ces deux options sont disponibles dans le panneau de gauche dans lequel vous sélectionnez l’outil Texte ou l’outil Recadrage.

    Formater le texte dans les points d’arrêt
    Formater du texte dans une conception adaptative

    A. Formater le texte entre les points d’arrêt B. Formater le texte sur le point d’arrêt actuel 

    Remarque :

    L’option Formater le texte dans une mise en page adaptative ne modifie que le formatage du texte. Vous ne pouvez pas modifier les mots ou le contenu pour chaque point d’arrêt.

Copier la mise en forme d’un texte sur tous les points d’arrêt

Si vous souhaitez copier la taille et la position du texte pour différents points d’arrêt ou largeurs de navigateur, procédez comme suit :

  1. Sélectionnez le texte que vous souhaitez copier.

  2. Utilisez l’une des méthodes suivantes :

    • Cliquez avec le bouton droit de la souris et sélectionnez Copier le formatage du texte dans > <valeur de point d’arrêt spécifique> pour appliquer les attributs de texte actuels à ce point d’arrêt particulier.
    • Cliquez avec le bouton droit de la souris et sélectionnez Copier le formatage du texte dans > Tous les points d’arrêt pour appliquer les attributs de texte actuels à tous les autres points d’arrêt.

    Prévisualisez votre mise en page à chaque point d’arrêt à l’aide de la barre de défilement. Si nécessaire, ajoutez des points d’arrêt pour optimiser votre mise en page pour différentes largeurs de navigateur.

Application d’effets de défilement dans une mise en forme responsive

Vous pouvez ajouter des effets de défilement dans une mise en forme responsive. Toutefois, les effets de défilement sont uniquement pris en charge avec des points d’arrêt fixes. Les points d’arrêt fixes indiquent que votre mise en page est définie sur cette largeur. Ajoutez un point d’arrêt fixe, sélectionnez l’objet auquel vous souhaitez appliquer des effets de défilement, puis configurez les paramètres d’effets de défilement.

  1. Ouvrez la page Adobe Muse dans laquelle vous souhaitez ajouter un effet de défilement. Par exemple, vous pouvez ajouter des effets de défilement pour la navigation et l’image d’arrière-plan dans l’en-tête.

  2. Lorsque vous ouvrez une mise en page responsive, notez les points d’arrêt sur la page. Ils sont tous fluides, comme l’indique l’icône avec des flèches dans les deux sens.

    Point d’arrêt fluide
    Points d’arrêt fluides signalés par une double flèche

    Si vous examinez le panneau Effets de défilement, vous pouvez constater que cette option est désactivée.

    Effets de défilement désactivés pour les points d’arrêt fluides
    Effets de défilement désactivés pour les points d’arrêt fluides

  3. Pour activer les effets de défilement, vous devez ajouter un point d’arrêt fixe. Pour cela, cliquez sur la barre du point d’arrêt puis sur Ajouter un point d’arrêt. 

  4. Choisissez la largeur fixe dans le menu déroulant puis cliquez sur OK.

    Ajout d’un point d’arrêt de largeur fixe
    Ajout d’un point d’arrêt de largeur fixe

    Points d’arrêt fixes
    Notez les points d’arrêt fixe avec une icône carrée.

    Notez que le point d’arrêt fixe sur votre page est désigné par un carré. Lorsque vous affichez la page à une largeur de navigateur de 1225 pixels ou au-delà, la page reste fixe à 1225 pixels. La mise en page ne devient pas fluide à ce point d’arrêt.

  5. Sélectionnez l’objet pour lequel vous souhaitez appliquer des effets de défilement et configurez les paramètres d’effets de défilement.

    Application d’effets de défilement aux objets sélectionnés
    Application d’effets de défilement aux objets sélectionnés

    Remarque :

    Vous pouvez appliquer des effets de défilement que lorsque vous êtes sur le point d’arrêt fixe et pas sur les autres points d’arrêt (fluides).

    Pour savoir comment ajouter et utiliser des effets de défilement dans Adobe Muse, consultez Application d’effets de défilement dans Adobe Muse.

FAQ

Quels sont les points d’arrêt idéaux lors de la conception d’un site pour postes de travail, tablettes et mobiles ?

Si vous souhaitez créer votre site pour un appareil spécifique, vous pouvez ajouter le point d’arrêt approprié. Toutefois, les utilisateurs peuvent consulter votre site à partir de n’importe quel appareil, avec des tailles d’écrans variées. Il est par conséquent recommandé d’ajouter des points d’arrêt uniquement là où votre conception se divise. Cela garantit le bon affichage de votre site, quel que soit l’appareil.

Pourquoi les points d’arrêt d’un gabarit ne fonctionnent-ils pas sur les pages individuelles ?

Les points d’arrêt du gabarit s’affichent sous forme de triangles blancs dans vos pages individuelles. Pour activer ces points d’arrêt dans les pages individuelles, cliquez sur le triangle blanc dans la barre des points d’arrêt, puis cliquez sur le signe plus (+).

Pour reporter facilement les points d’arrêt d’un gabarit sur une page, vous pouvez également copier un élément de gabarit, passer à la page sur laquelle vous souhaitez appliquer les points d’arrêt, sélectionner Edition > Coller avec les points d’arrêt, puis supprimer l’élément collé de la zone de travail. L’élément est supprimé, mais les points d’arrêt du gabarit ne sont pas affectés.

Comment puis-je empêcher des zones de texte de se chevaucher dans ma mise en page responsive ?

Les zones de texte ne s’ajustent pas et peuvent se chevaucher si elles ne sont pas « Fluides ». Pour que les zones de texte soient fluides, cliquez avec le bouton droit de la souris sur chacune des zones de texte, puis sélectionnez Redimensionner > Largeur responsive.

Comment puis-je me débarrasser des espaces en trop ou des espaces blancs dans mes sites responsive ?

Plusieurs raisons peuvent être à l’origine des espaces en trop ou des espaces blancs. Un pied de page rémanent ou un objet masqué par exemple. Pour plus d’informations sur la façon de résoudre ce problème, consultez cet article.

Comment puis-je supprimer la zone grise qui apparaît lorsque j’affiche l’aperçu de mon site ?

Chaque fois que vous voyez une zone grise dans votre aperçu, recherchez si des objets externes ou des objets masqués ne sont pas situés en dehors de la page. Pour sélectionner tous les objets, cliquez sur Affichage > Afficher les contours du bloc. Vous pouvez également effectuer un zoom arrière et afficher le positionnement de tous les objets. Recherchez un objet masqué ou un objet externe, puis placez l’objet dans votre mise en page pour résoudre ce problème.

Comment puis-je rendre tous les widgets fluides ou responsive ?

Les widgets dans Adobe Muse ne sont actuellement pas responsive. Pour connaître le comportement responsive de chaque widget, reportez-vous à ce tableau.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne